Как добавить html код на сайт tilda
Перейти к содержимому

Как добавить html код на сайт tilda

  • автор:

Памятка по вставке кода

Открой «Библиотеку блоков» → «Другое» и добавь блок «T123. HTML-код». В режиме редактирования («Контент») сможешь добавить код.

Код будет работать на опубликованной странице.

Код в блоке T123 применяется на страницах, где размещен блок с кодом. Сам код вставляется в body страницы. Если код нужно вставить в head конкретной страницы, то размести его в настройках страницы. Если код нужно применить на всех страницах сайта, то размести его в настройках сайта в head или body.

Блок T123 с CSS (тег ) размещай перед блоком, к которому он применяется. Тогда во время загрузки контента пользователь не увидит, как применяется код, т. е. сразу увидит блок в задуманном дизайне.

Блок T123 с Javascript (тег ) размещай внизу страницы или после блока, к которому он применяется. Это нужно для оптимизации загрузки страницы. Пока скрипты грузятся, то пользователь видит пустой экран или недогруженный контент. Чтобы этого избежать, размещай скрипты после блока, а лучше внизу страницы.

Вставка кода в настройках страницы

В настройках страницы можно добавить HTML, CSS и Javascript.

Открой «Настройки страницы» → «Дополнительно» → «HTML-код для вставки внутрь head».

Опубликуй страницу после добавления кода, чтобы он применился.

Код пропишется в head страницы и примениться только на этой странице.

Для оптимизации скорости загрузки страницы не стоит прописывать Javascript в head страницы, если этого не требует инструкция по добавлению кода.

Вставка кода в настройках сайта

В настройках сайта можно добавить HTML, CSS и Javascript.

Чтобы добавить код в head на все страницы открой: «Настройки сайта» → «Еще» → «HTML-код для вставки внутрь head».

Чтобы добавить CSS в body на все страницы открой: «Настройки сайта» → «Еще» → «Пользовательские CSS-стили».

Опубликуй все страницы сайта после добавления кода.

Для оптимизации скорости загрузки страницы не стоит прописывать Javascript в head страницы, если этого не требует инструкция по добавлению кода.

Лента новостей или постов

Потоки — это возможность сделать несколько лент мгновенно обновляемых новостей или постов. Вы можете создать несколько потоков до 5000 постов в каждом, добавить изображения, видео или галерею в пост, а также управлять датой выхода и настройками для поисковых систем.

Включение функции «Потоки» и создание первого потока

Активируйте функцию в Настройках сайта → Еще → Потоки. После этого вы сможете перейти в управление потоками через настройки страницы или по ссылке на странице со списком страниц сайта.

Важно: С помощью функции «Потоки» запрещается создавать сайт СМИ с общественно-политической тематикой.

Создайте новый поток с помощью кнопки в верхнем правом углу. Каждый поток может содержать в себе до 5000 постов, посты не учитываются в счетчике страниц проекта.

Управление постами и разделами
Создайте новый пост с помощью кнопки в правом верхнем углу и укажите его заголовок.

Откроется карточка редактирования поста. Кроме названия, можно указать короткое описание поста, которое будет показываться в блоке, добавить главное изображение поста, галерею или видео, установить дату публикации, указать раздел и видимость поста (опубликован пост или находится в черновике).

Вы можете отдельно настроить заголовок и описание поста для социальных сетей и поисковых систем.

Тело поста собирается из отдельных блоков с разным типом контента. Чтобы добавить нужный блок, нажмите на иконку плюса слева:

Доступные типы контента:

  • Текст — это основной текст поста
  • Заголовок — добавляет заголовки разного уровня — H2, H3, H4
  • Изображение — загрузите изображение, по необходимости можно задать ему описание, alt-текст и ссылку.
  • Видео — укажите ссылку на видео с YouTube, Vimeo или прямую ссылку на видео в формате mp4 или webm
  • Цитата — добавляет вертикальную черту слева от текста, чтобы выделить фразу или абзац
  • Введение — добавляет текст большего размера, чем основной
  • Врезка — это иконка и текст на цветной подложке, используется для выделения важной информации. Цвет подложки и иконки можно поменять.
  • Разделитель — создает горизонтальную линию для разделения смысловых частей. Цвет линии можно поменять
  • Embed HTML code — исполняет введенный вами код на опубликованной странице
  • Highlight code — добавляет блок с подсветкой синтаксиса. Поддерживается HTML, CSS, JavaScript, JSON

Блоки можно перемещать вверх и вниз, удалять, дублировать и конвертировать в блок другого типа, а также сформировать якорь к блоку, нажмите на три точки слева от блока и выберите нужное действие.

Для форматирования текста выделите его и выберите подходящие стили из всплывающей сверху панели.

Для разграничения разных новостей внутри потока можно использовать разделы. Разделы — это аналог категорий или меток, с помощью раздела можно вывести отдельную тему потока на отдельной странице.

Создайте раздел с помощью кнопки в правом верхнем углу блока.

После создания раздела его можно назначить отдельному посту в карточке редактирования поста.

Вывод ленты постов на сайт
Вывести поток постов можно с помощью блоков из категории «Новости и потоки».

В Контенте блока выберите поток или раздел потока, который нужно вывести.

При сохранении в панели управления постами, посты в блоке будут обновляться автоматически без необходимости публиковать страницу.

SEO-настройки потока

Опубликованные потоки индексируются поисковыми системами, для каждого потока создается отдельный файл sitemap.

Чтобы задать заголовок, описание и ключевые слова для поисковых систем, перейдите в карточку редактирования каждого поста на вкладку SEO.

Отдельный пост можно запретить к индексации или запретить поисковым роботам переходить по ссылкам в новости (всем ссылкам будет задан атрибут nofollow).

Настройка Google AMP и Яндекс Турбо

Google AMP и Яндекс Турбо — форматы от Гугла и Яндекса, которые позволяют показывать специальные версии страниц, которые быстрее загружаются и более удобны для чтения. В Потоках эти версии создаются автоматически.

Для того, чтобы добавить Турбо страницы, перейдите в настройки потока → Дополнительные настройки и скопируйте ссылку на RSS.

Эту ссылку нужно вставить в Вебмастере Яндекса → Турбо-страницы → Источники в поле Ссылка на источник.

Страницы Google AMP генерируются автоматически. Сайт должен быть добавлен в Google Search Console. Для правильной работы также нужно загрузить логотип и указать имя компании в настройках потока → Дополнительные настройки.

После этого AMP-страницы проиндексируются и через некоторое время станут доступны в результатах поиска.

Как добавить html код на сайт tilda

HTML код можно добавлять на страницу (внутрь тега ), либо в head сайта или страницы.

Чтобы добавить блок на страницу, откройте Библиотеку блоков → Другое и добавьте блок T123.

Вы можете использовать готовый код, который предлагают различные сервисы, либо, если вам нужен уникальный элемент, заказать код у программистов.

В блоке поддерживается HTML, JavaScript (нужно использовать тэг ) и CSS (нужно использовать тег ). Свой код PHP вставить на страницу не получится, но его можно добавить на свой сервер и отправлять на него данные с помощью приемщика Webhook.

Памятка по вставке кода

Открой «Библиотеку блоков» → «Другое» и добавь блок «T123. HTML-код». В режиме редактирования («Контент») сможешь добавить код.

Код будет работать на опубликованной странице.

Код в блоке T123 применяется на страницах, где размещен блок с кодом. Сам код вставляется в body страницы. Если код нужно вставить в head конкретной страницы, то размести его в настройках страницы. Если код нужно применить на всех страницах сайта, то размести его в настройках сайта в head или body.

Блок T123 с CSS (тег ) размещай перед блоком, к которому он применяется. Тогда во время загрузки контента пользователь не увидит, как применяется код, т. е. сразу увидит блок в задуманном дизайне.

Блок T123 с Javascript (тег ) размещай внизу страницы или после блока, к которому он применяется. Это нужно для оптимизации загрузки страницы. Пока скрипты грузятся, то пользователь видит пустой экран или недогруженный контент. Чтобы этого избежать, размещай скрипты после блока, а лучше внизу страницы.

Вставка кода в настройках страницы

В настройках страницы можно добавить HTML, CSS и Javascript.

Открой «Настройки страницы» → «Дополнительно» → «HTML-код для вставки внутрь head».

Опубликуй страницу после добавления кода, чтобы он применился.

Код пропишется в head страницы и примениться только на этой странице.

Для оптимизации скорости загрузки страницы не стоит прописывать Javascript в head страницы, если этого не требует инструкция по добавлению кода.

Вставка кода в настройках сайта

В настройках сайта можно добавить HTML, CSS и Javascript.

Чтобы добавить код в head на все страницы открой: «Настройки сайта» → «Еще» → «HTML-код для вставки внутрь head».

Чтобы добавить CSS в body на все страницы открой: «Настройки сайта» → «Еще» → «Пользовательские CSS-стили».

Опубликуй все страницы сайта после добавления кода.

Для оптимизации скорости загрузки страницы не стоит прописывать Javascript в head страницы, если этого не требует инструкция по добавлению кода.

Сервисы и виджеты для сайта — прокачай Тильду!

Все сторонние сервисы импортируют на сайт через HTML-код по одинаковой схеме. Вы регистрируетесь в сервисе→настраиваете размеры, цвет, поля и функциональность виджета→копируете сгенерированный код и вставляете его на сайт.

При этом каждый код индивидуальный. Он привязан к конкретному пользователю и серверу, на котором хранятся настройки виджета.

Мы собрали виджеты, которые в разной степени помогают стимулировать продажи или вовлекать ваших посетителей, а главное — вы легко добавите их на страницу, без навыков программирования, верстки и прочих умений.

Виджеты продаж и paywall

Для чего пригодятся?

Для продажи цифровых товаров (электронных книг, статей, руководств, уроков), интернет-магазинов; промостраниц продуктов и курсов, платного контента (статей).

Команда Тильды разработала собственные карточки товаров, а также интегрировала конструктор интернет-магазина Ecwid — блоки T301 и T380 в разделе «Другое». Если этих возможностей мало, подключите сторонние сервисы через блок «HTML-код».

Стоимость: от $ 9 в месяц; есть пробный период

Возможности: продажа цифровых товаров (например, электронных книг), скидки, корзина покупок, персонализация форм заказа и автоматических писем, аналитика. Можно поставить кнопку через вставку кода или получить просто ссылку, которую можно поставить на любую кнопку в Тильде. При нажатии пользователь будет отправляться в PayPal и после оплаты он получит ссылку для скачивания.

Стоимость: по запросу; есть пробный период

Возможности: продажа подписок на публикации или единовременного доступа к контенту, например, к определенной странице, продажа скачиваний файла или доступа к видео, ограничение видимости контента для определенных территорий.

Язык: английский / русский

Стоимость: от $ 29 в месяц + комиссия за транзакции 2.0%, у сервиса есть бесплатный пробный период

Возможности: продажа цифровых (музыка, книги, учебники, курсы) и материальных товаров, позволяет принимать единовременную оплату, генерировать лицензионные ключи, оплачивать подписку или оформлять предзаказ.

Стоимость: от $ 29 в месяц + комиссия за транзакции 2.0%, есть бесплатный пробный период

Возможности: популярная п латформа электронной коммерции легко интегрируется в Тильду. Неограниченное количество товаров, коды на скидку и подарочные карты.

Нет смысла тратить время, чтобы заново что-то придумать. В открытом доступе можно найти массу готовых решений, и интегрировать их в проект сразу или после доработки. Это что касается кода. С виджетами ситуация аналогичная.

Зачем разрабатывать с нуля онлайн-чат для сайта, если можно использовать JivoSite или Intercom? Взять готовое — значит, сэкономить время и деньги на разработку.

Ребята, которые делают сайты, редко что-то разрабатывают с нуля. Они используют готовые решения — плагины и модули, интегрированные в CMS. Иногда — пишут новый модуль для управления десятком готовых модулей. Так было всегда.

Самописные сайты, лендинги и конструкторы сайтов создали спрос на эти плагины вне CMS. Теперь их можно интегрировать на любую страницу, вставив небольшой кусок HTML-кода — скрипт, который подтягивает все стили и основной код с сервера виджета.

Формы приема данных и опросы

Для чего пригодятся?

Чем лучше вы знаете вашего клиента, тем эффективнее вы решаете его проблемы, а значит развиваете ваш бизнес.

В библиотеке блоков Тильды есть целая категория «Формы», которые интегрируются с 11-ю сервисами для сбора данных (email, Mailchimp, GetResponse, Google Forms, Telegram и т. д.) Инструкция http://help-ru.tilda.ws/forms

Мы отобрали еще несколько сервисов для сайта, которые дополнят функционал Тильды.

Язык: английский

Стоимость: есть бесплатный план

Возможности: приятный конструктор форм сбора данных, миссия которого «спасти мир от скучных форм». Также можно создать опросы, викторины, формы заказа, формы для предложений и для запросов о приеме на работу (да, в них можно прикрепить файл). Сервис интегрирован в Тильду, поэтому подключить его совсем просто.

Язык: русский

Стоимость: бесплатно

Возможности: Google Forms подключаются к формам, которые есть на Тильде. Но если вам нужны выпадающие списки, чекбоксы с выбором параметров и другие функции, можно создать форму на Google Forms и добавить ее на сайт через вставку html.

Язык: русский

Стоимость: есть бесплатный план

Возможности: специализированный сервис для проведения исследований с помощью опросов. Можно составлять свои или использовать готовые шаблоны.

Аналитика поведения пользователей, повышение вовлечености и конверсии

Для чего пригодятся?

Аналитика помогает принимать решения, основываясь на объективных данных. Базовые показатели (количество визитов, просмотры страниц, количество заявок из форм) можно посмотреть прямо внутри Тильды, подключив счетчики Яндекс. Метрики или Google Analytics. Более подробные данные нужно будет смотреть на сайтах аналитики. Разобраться с ними поможет наша статья «Как повысить конверсию сайта, используя веб-аналитику». Для тех, кому нужны совсем тонкие настройки, наш выбор инструментов из списка ниже.

Язык: русский

Стоимость: от 1300 руб. (один сайт) в месяц.

Возможности: сервис для создания мультилендингов — подменяет содержимое страницы сайта в зависимости от источника, из которого пришел посетитель. Работает довольно просто: ставите ссылку на страницу, на которой нужно менять контент, выделяете фразу и указываете источники и варианты замены. Полезно, если вы предлагаете разные условия покупки, когда у товара или услуги разные характеристики или способы применения.

Язык: русский

Стоимость: бесплатно, содержит стороннюю рекламу.

Возможности: рекомендательный сервис — анализирует поведение пользователя и подбирает статьи, которые будут ему интересны. Выглядит это как блок «Читать также» или «Вам будет интересно». Нужно поставить код на каждую страницу и выбрать тип виджета, который будет показывать подходящие материалы.

Язык: английский

Стоимость: есть бесплатный план

Возможности: система приложений, цель каждого — проанализировать что делают пользователи на сайте и предложить решение, которое увеличит трафик на сайте. Всего приложений 12. Некоторые из них: List Builder — позволяет создать всплывающее окно подписки, которое появляется в нужном месте и в нужное время и собирает базу контактов.

Heat Maps — «тепловая карта», анализирует поведение пользователя на сайте и показывают куда на самом деле кликают посетители. Share — кнопки расшаривания, которые оптимизируют свой внешний вид в зависимости от контента на странице: что-то удобнее затвитить, а что-то отправить по email. Content Analytics — анализирует и показывает насколько глубоко проскролливают вашу страницу.

Календарь

Для чего пригодятся?

Для промостраниц курсов, мастер-классов, выставок, сайтов мини-отелей, хостелов; страниц-визиток психоаналитиков и адвокатов.

Добавьте на страницу календарь и вносите в него информацию о предстоящих тренингах или забронированных датах и времени. Потенциальные клиенты увидят, когда пройдет мероприятие и можно ли записаться на прием в удобное время.

Календарь придется вести самостоятельно. Старайтесь оперативно вносить в него изменения, иначе клиенты остануться недовольными, потому что на сайте время значится свободным, а по факту — уже занято другим человеком.

Если вы принимаете клиентов по записи, вам в любом случае нужно вести учет. Если вы ведете его в облаке, то можете быстро и отовсюду редактировать его, а также показать клиентам. Они увидят, насколько вы заняты, и не будут звонить, чтобы уточнить свободные часы.

Язык: русский

Стоимость: бесплатно

Возможности: трансляция на сайте всех изменений в календаре, отображение за день, неделю или месяц.

Язык: русский

Стоимость: бесплатно

Возможности: трансляция на сайте всех изменений в календаре, отображение за день, неделю или месяц.

Язык: английский

Стоимость: от $ 15 в год — за один календарь

Возможности: календарь на месяц или год, несколько объектов в одном календаре, простое администрирование.

Подарочные карты

Для чего пригодятся?

Для интернет-магазинов; промостраниц продуктов, ресторанов, салонов красоты, спортклубов, курсов, мастер-классов и конференций.

Электронный подарочный сертификат работает так же, как ламинированный или пластиковый. Покупатель сможет использовать его в обычном или интернет-магазине. Он продиктует вам уникальный код, по которому вы поймете на какую сумму или услугу выписали сертификат.

Будьте внимательны, и не позволяйте клиентам заказывать сертификаты на сумму 1000 рублей, если минимальная стоимость товаров и услуг более 2000 рублей.

Сертификаты можно выписывать и на конкретные услуги, обычно, самые популярные — на мастер-класс, курс, абонемент в бассейн или на занятия йогой.

Люди привыкли к подарочным сертификатам, которые можно положить в конверт, поэтому постарайтесь максимально доходчиво объяснить им механизм работы электронного аналога. Не поленитесь, и сделайте для этого отдельную страницу.

Язык: русский

Стоимость: процент комиссии с продаж

Возможности: собственные виртуальные подарочные карты с отправкой на имейл; оплата банковскими картами Visa, Mastercard, Maestro.

Онлайн-запись и продажа билетов

Для чего пригодятся?

Для промостраниц курсов, мастер-классов, салонов красоты, гостевых домиков и бань; страниц-визиток психоаналитиков, адвокатов и персональных тренеров.

Предложите клиентам самостоятельно записываться на занятия к инструктору или на сеансы к массажисту. Они смогут прямо на сайте проверить свободны ли вы в удобное время и сразу записаться на прием. Вы увидите всю информацию по записям в сводной таблице сервиса.

Сервисы бронирования — полноценные CRM-системы, которые хранят данные каждого клиента и позволяют вам отслеживать их активность. Некоторые даже позволяют делать имейл и смс-рассылки. А если нет, то можно экспортировать базу контактов и провести рассылку в сторонних сервисах.

Не все клиенты будут записываться через сайт. Многие предпочтут делать это по телефону или лично — после очередного занятия. Поэтому вам по-прежнему придется участвовать в процессе.

Кроме того, вам придется подтверждать по телефону бронь всех новых клиентов: вдруг, они просто решили проверить, как это работает.

Язык: русский

Стоимость: 3% при объеме продаж менее 300 тыс. руб. в месяц

Возможности: настраиваемые анкеты для регистрации участников, статистика продаж и регистраций, возможность сделать промокоды и скидки, почтовая рассылка по аудитории. Сервис интегрирован в Тильду, инструкция http://help-ru.tilda.ws/timepad

Язык: русский

Стоимость: от 600 рублей в месяц

Возможности: запись, учет, администрирование, имейл и смс-уведомления, бронирование конкретных мест

Язык: русский

Стоимость: от 1200 рублей в месяц

Возможности: запись, учет, администрирование, база данных, смс-рассылки

Язык: английский

Стоимость: есть бесплатная версия

Возможности: запись, интеграция с календарями, уведомления, оплата банковскими картами, PayPal.

Язык: английский

Стоимость: комиссия от продажи билетов — от 2,5%, не менее € 0.49 за билет

Возможности: продажа билетов на конкретные места, продажа билетов на мероприятия; оплата банковскими картами, PayPal.

Язык: русский

Стоимость: комиссия от продажи билетов — 3% от стоимости билета, без абонентской платы за год. Бесплатные билеты — бесплатно (до 300 штук).

Возможности: продажа билетов на мероприятия; 90 способов оплаты.

Используя готовый виджет, пусть и платный, вы экономите деньги не только на программистах. Ведь нужны еще дизайн и верстка. А тот же сервис бронирования вставил и забыл.

Если смотреть на виджеты с точки зрения дизайна, можно сказать, что они универсальные. Обычно, разработчики не дают возможности сильно изменить внешний вид, максимум — цвета поменять. Некоторые открывают доступ к CSS, но лезть туда без конкретной задачи не нужно: сделаете хуже.

Если на сайте используют готовые виджеты, которые нельзя кастомизировать, задача дизайнера — разместить его в правильном месте и сделать так, чтобы он не выделялся на общем фоне.

Калькуляторы

Для чего пригодятся?

Для промостраниц консультаций, курсов, ремонтных работ и сервисов.

Если вы предлагаете сложные продукты, стоимость которых зависит от опций или параметров, покажите потенциальным клиентам, как формируется стоимость — разместите на странице калькулятор. Они увидят, сколько стоит конкретная опция или интересующий их набор опций, двигая ползунки и вводя числовые значения.

Нельзя найти в интернете калькулятор, который похож на тот, который нужен вам, и добавить его на сайт. Во первых, в нем прописаны другие опции и их стоимость. И даже если вы сможете разобраться с этим, остаются еще две беды: его внешний вид и безопасность кода.

Если не хотите, чтобы ваш сайт взломали, используйте код из проверенного источника. В идеале — закажите разработку калькулятора с нуля, с нужными параметрами и приемлемым внешним видом.

К сожалению, сервисов, которые позволяют создать уникальный калькулятор без вмешательства в код, мало. Мы нашли всего один.

Язык: английский

Стоимость: бесплатно при использовании готовых калькуляторов из библиотеки; платный тариф — от $ 9 в месяц

Возможности: гибкая настройка, редактор формул, настройка внешнего вида, прием платежей через PayPal.

Обратная связь и поддержка

Для чего пригодятся?

Для возможности быстро задать вопрос консультанту, сделать заказ или оставить отзыв — без дополнительных действий и переходов.

Виджеты обратной связи отлично повышают конверсию, несмотря не всенародную нелюбовь к мигающим иконкам онлайн-чатов. Впрочем, иконки могут выглядеть и вести себя интеллигентно, не раздражать посетителя, но помогать ему.

В Тильду интегрированы самые распространенные сервисы обратной связи: Callback Hunter, Jivosite, Chatra . Инструкция по подключению http://help-ru.tilda.ws/callback Если они вам не подошли, можно добавить свои.

Язык: русский

Стоимость: оплата за соединения, начальный тариф: 50 рублей за каждое (до 170 соединений).

Возможности: сервис обратного звонка, который, в отличии от многих, может работать без всплывающего окна — телефон можно ввести в форму на странице. Дизайн формы настраивается. Впрочем, всплывающее окно тоже есть. После того, как посетитель ввел телефон и нажал кнопку, система одновременно звонит вам и клиенту и соединяет звонки.

Язык: английский

Стоимость: от $ 49 / месяц

Возможности: любимая платформа прогрессивных западных стартапов предлагает три вида сервиса: чат с посетителями на сайте, поддержка в онлайн-чате пользователей вашего сервиса и «побудительный» маркетинг.

Язык: русский

Стоимость: бесплатно

Возможности: Самая популярная российская социальная сеть сделала несколько виджетов, чтобы пользователи общались с сообществами, используя авторизацию vk.com. В общем, логично. Даже если вы не пользуетесь вконтакте активно, аккаунт-то у вас там есть ��

Язык: английский

Стоимость: тарифы для чата и звонков начинаются с бесплатного, для поддержки — от $ 5 в месяц.

Возможности: целая система, призванная наладить отношения с пользователями: сервис поддержки (отслеживание и хранение запросов), справочный центр, онлайн-чат и колл-центр.

Язык: английский

Стоимость: минимальный тариф (который, к слову, не ограничивает количество пользователей и агентов) — $ 0.

Возможности: сервис, который поможет организовать поддержку пользователей через email. Другими словами, это такой почтовый ящик, адаптированный под потребности работы с большим количеством обращений, на которые отвечают разные люди. Можно отследить статус письма, кто начал отвечать на запрос, передать задачу другому сотруднику, добавить автоответ.

Плюс сервис позволяет создать базу знаний, к которой могут обращаться пользователи самостоятельно — на страницу ставится форма поиска, через которую посетители могут быстро найти ответ. Отправлять вопросы на email также можно через форму на сайте.

Комментарии

Для чего пригодятся?

Для блогов и интернет-магазинов; промостраниц продуктов, курсов и мастер-классов.

Позвольте своим клиентам задавать вопросы и оставлять отзывы на странице продукта в реальном времени. Они смогут общаться с вами и между собой — обмениваться опытом и впечатлениями. А вы — удалить или скрыть неадекватные или нежелательные комментарии.

Если на вопрос одного клиента отвечает другой, это вызывает больше доверия. Цель таких ответов — помочь, а не залезть в кошелек.

Клиент, помимо каких-то общих фраз, цитирования инструкции и характеристик, может поделиться опытом реального использования. Сформулировать мнение о тренере и поделиться эмоциями от занятия. Или испытать смартфон в боевом режиме и рассказать, насколько реальное время работы от аккумулятора отличается от заявленного.

Разработчики Тильды интегрировали виджеты Disqus и HyperСomments — блоки T158 и T163 в разделе «Другое». Они отлично выполняют свои функции: комментировать может каждый, кто авторизуется через социальные сети.

Если по каким-то причинам они вас не устраивают, добавьте любой другой виджет комментариев для сайта через блок «HTML-код».

Язык: русский

Стоимость: бесплатно

Возможности: авторизация через «Вконтакте», трансляция комментариев в ленту со ссылкой на сайт.

Язык: английский

Стоимость: бесплатно

Возможности: авторизация через Фейсбук*, трансляция комментариев в хронику, модерация комментариев.

Язык: русский

Стоимость: от 200 рублей в месяц

Возможности: авторизация через социальные сети, расшаривание комментариев в соцсетях, модерация и рейтинг комментариев, аналитика.

Посты из соцсетей

Для чего пригодятся?

Для СМИ, блогов и интернет-магазинов; промостраниц продуктов, курсов и мастер-классов.

Используйте в статьях, чтобы показать хронологию, реакцию на какое-то событие или сослаться на чье-то мнение. Используйте сервис в продажах — чтобы транслировать реальные отзывы о продукте. К таким отзывам больше доверия, потому что видно, кто и когда их публикует.

Посты в соцсетях — отличный инструмент социального подтверждения. Попросите клиентов написать на своей странице мнение о купленном торте или посещенном мастер-классе.

Но помните, что распознать фальшивые отзывы легко. Их авторы всегда хвалят продукт, и не указывают на минусы; говорят о качествах продукта, а не его пользе; стараются сделать вид, что никак не связаны с продавцом.

Язык: английский, можно загуглить инструкцию на русском

Стоимость: бесплатно

Возможности: трансляция на сайте одного твита или ленты

Язык: русский

Стоимость: бесплатно

Возможности: трансляция на сайте одного поста

Язык: русский

Стоимость: бесплатно

Возможности: трансляция на сайте одного поста

Язык: английский, можно загуглить инструкцию на русском

Стоимость: бесплатно

Возможности: трансляция на сайте одного поста, доски или профиля

Кнопки «Поделиться»

Для чего пригодятся?

Для блогов, интернет-магазинов, портфолио студий и фрилансеров; для промостраниц продуктов, курсов и мастер-классов

Работают, как сарафанное радио: посетитель пришел, ознакомился, поделился ссылкой с друзьями. Иногда люди постят ссылки в ленту, чтобы не потерять ее, и вернуться на страницу, когда накопят денег. С каждой такой публикацией растет узнаваемость продукта, а вы получаете бесплатный трафик на сайт.

Наполняйте страницы качественным контентом. Посетитель должен либо купить продукт, либо поделиться ссылкой на него в Фейсбуке*.

Позаботьтесь о том, как выглядит ссылка на страницу в социальных сетях. Даже если вы не используете кнопки «Поделиться», посетители могут скопировать и запостить адрес страницы из строки браузера.

Чтобы настроить внешний вид ссылки, зайдите в раздел «Настройки», вкладка «Facebook and SEO». По умолчанию Тильда использует заголовок и описание страницы со вкладки «Главное», а картинку — со вкладки «Бейджик».

Язык: русский

Стоимость: бесплатно

Возможности: кнопки всех социальных сетей, Evernote, Pocket, Viber, WhatsApp, Skype и Telegram.

Язык: русский

Стоимость: бесплатно

Возможности: кнопки всех социальных сетей, Evernote, закладки Google и Яндекс

Язык: русский

Стоимость: бесплатно

Возможности: кнопки всех социальных сетей, Evernote и Pocket, гибкая настройка внешнего вида кнопок.

Язык: русский

Стоимость: бесплатно

Возможности: кнопки всех социальных сетей, Google Translate, Evernote, Pocket и WhatsApp.

Интерактивные элементы

Для чего пригодятся?

Для интернет-магазинов; промостраниц продуктов, жилых комплексов, курортов, ресторанов, мастер-классов и конференций.

Просто изображения и текст вызывают скуку, поэтому используйте интерактивные картинки, чтобы рассказать больше о своем продукте. Дайте посетителям возможность поклацать кнопочки, поуправлять ситуацией. Это увлекает.

Вы можете указать краткие тезисы, по нажатию на которые откроются целые истории.

Интерактивные элементы — сильный инструмент. С его помощью вы погружаете читателя в свой мир, подогреваете интерес, рассказываете о пользе и ведете его к покупке.

Подготовьте развернутое описание продукта, а потом сократите его, оставив только главное. Это как будто написать статью, а потом оставить только подзаголовки. Трюк в том, чтобы с помощью подзаголовков рассказать всю ключевую информацию. Если читатель захочет узнать больше, он кликнет на подзаголовок — и увидит скрытый текст.

Язык: русский

Стоимость: бесплатно, с ограниченной функциональностью; платный тариф — от $ 20 в месяц

Возможности: интерактивные изображения, виртуальные 360˚ туры, карты и инфографика.

Язык: английский

Стоимость: бесплатно

Возможности: популярный сервис интерактивных карт и таймлайнов, который не стесняются использовать такие гиганты, как Time, Mashable и CNN.

Музыкальные плееры

Для чего пригодятся?

Для СМИ и блогов; промостраниц продуктов, мастер-классов, конференций, выступлений и студий звукозаписи; портфолио битмейкеров и ди-джеев.

Встройте музыкальный плеер в начало статьи, и попросите читателя воспроизвести музыку, чтобы сильнее погрузиться в материал; добавьте в плейлист фрагмент интервью, подкаста или аудиокниги.

В продажах — если вы музыкант, покажите потенциальным клиентам свои работы. Это могут быть биты, сэмплы, звуковые эффекты, дикторская озвучка и т. д.

Предварительно нужно загрузить аудио в выбранный сервис.

Абсолютно все композиции, размещенные в музыкальных сервисах, можно воспроизводить на своем сайте через вставку HTML-кода. Выбранный трек, альбом или плейлист отображается в фирменном плеере выбранного сервиса.

Так вы не нарушаете авторские права. А если вы скачаете трек бесплатно или даже купите его, а затем разместите на сайте — вы их нарушите.

Язык: английский

Стоимость: бесплатно

Возможности: записи радиоэфиров — выступлений ди-джеев, развлекательных и образовательных передач и новостей

Язык: русский

Стоимость: бесплатно

Возможности: треки исполнителей со всего мира, большая библиотека российских артистов

В Тильде идеально подобраны сервисы. Во-первых, с установкой виджетов справится даже ребенок. Во-вторых — это тот набор, который нужен для продающей страницы.

Пренебрегать ими не нужно. Есть часть людей, которые не любят говорить по телефону. Им комфортнее общаться в чате. Все они — потенциальные клиенты, которые приведет других потенциальных клиентов. Хорошо, что относительно чата у Тильды есть несколько вариантов.

Форма обратного звонка экономит средства и время тем, кто не хочет дозваниваться сам.

Формы сбора данных или, например, подписки — пригодятся для настройки рекламы по тем, кто уже заинтересован в вашем продукте.

Еще хорошо, что можно легко поставить кнопки оплаты и не дожидаться нудной регистрации в платежных системах. Для мелких задач подходит вполне. И если нужно быстро протестировать какой-то продукт/услугу — все эти виджеты отлично подойдут.

Установка кода виджета на популярные CMS и конструкторы сайтов

В этом разделе мы расскажем, как добавить код виджета 13Chats на популярные CMS и сайты на конструкторах без программиста.

  • Как установить код виджета 13Chats на Tilda
  • Как установить код виджета 13Chats на Wix
  • Как установить код виджета 13Chats на WordPress
  • Установка кода виджета 13Chats на WordPress через меню «Виджеты»
  • Установка кода виджета 13Chats на WordPress через FTP
  • Установка кода виджета 13Chats на WordPress через файл-шаблон темы footer.php
  • Установка через файл functions.php темы (шаблона) WordPress
  • Как установить код виджета 13Chats на OpenCart
  • Установка кода виджета 13Chats на OpenCart 1.5.x через админ-панель
  • Установка кода виджета 13Chats на OpenCart 2.x через админ-панель
  • Установка кода виджета 13Chats на OpenCart через FTP
  • Как установить код виджета 13Chats на Joomla
  • Установка кода виджета 13Chats на Joomla 2.5+ через создание нового модуля
  • Установка кода виджета 13Chats на Joomla 2.5+ через менеджер шаблонов
  • Установка кода виджета 13Chats на Joomla через FTP
  • Как установить код виджета 13Chats на Ecwid
  • Как установить код виджета 13Chats на SpreadSimple
  • Как установить код виджета 13Chats на Webflow

Как установить код виджета 13Chats на Tilda

Важно: виджет онлайн-чата или поп-апа можно добавить только в платных аккаунтах Tilda. Чтобы добавить виджет онлайн-чата на сайт, авторизуйтесь в Tilda, откройте библиотеку блоков, перейдите в раздел «Другое» и выберите блок T123 «HTML-код».

В режиме редактирования вставьте код скрипта в блок и нажмите «Сохранить и закрыть».

В режимах редактирования и предпросмотра скрипт выводится текстом. Чтобы он заработал, нажмите «Опубликовать» в правом верхнем углу страницы.

Как установить код виджета 13Chats на Wix

Чтобы добавить виджет онлайн-чата или поп-апа на сайт, авторизуйтесь в Wix, зайдите в панель редактирования сайта, перейдите в раздел «Вставка кода» и выберите «Вставка виджета».

Не переживайте, если у вас бесплатный тариф — код всё равно можно добавить.

Нажмите на кнопку «Вставить код» над рамкой iframe, добавьте код в окно и нажмите «Обновить» и закройте окно настройки HTML.

Разместите элемент HTML по ширине сайта, выровняйте высоту блока и нажмите кнопку «Опубликовать».

Следующий шаг — создание пользовательских сценариев, чтобы обращаться к пользователям в нужное время с наиболее подходящим сообщением.

Как установить код виджета 13Chats на WordPress

  1. Установка кода через меню «Виджеты».
  2. Установка через FTP.
  3. Установка через файл-шаблон темы footer.php.
  4. Установка через файл functions.php темы (шаблона) WordPress.

Выбор способа зависит от особенностей сайта и ваших предпочтений. Если скрипт 13Chats не отрабатывает после установки, ломается сторонними скриптами или сайт перегружен, рекомендуем использовать способы 3 и 4 — они снижают нагрузку, так как позволяют избежать обращения к базе данных сайта.

Рассмотрим каждый из них подробнее.

Установка кода виджета 13Chats на WordPress через меню «Виджеты»

Скопируйте код виджета в настройках проекта на вкладке «Установить код». Авторизуйтесь в панели администрирования сайта, наведите курсор мыши на пункт «Внешний вид» в левом меню и выберите вкладку «Виджеты».

Из списка доступных виджетов выберите «HTML-код» и нажмите «Добавить виджет».

Добавьте код в окно и нажмите «Сохранить».

После этого виджет появится на всех страницах сайта.

Установка кода виджета 13Chats на WordPress через FTP

Скопируйте код виджета в настройках проекта на вкладке «Установить код». Зайдите на хостинг вашего сайта или подключитесь с помощью FTP-клиента и откройте файл footer.php.

Путь к файлу: wp-content/themes/название вашего шаблона/footer.php.

Установка кода виджета 13Chats на WordPress через файл-шаблон темы footer.php

Скопируйте код виджета в настройках проекта на вкладке «Установить код» и зайдите в панель администрирования вашего сайта. В левом меню в разделе «Внешний вид» выберите вкладку «Редактор тем».

Справа в списке файлов темы выберите «Подвал (footer.php)».

Установка через файл functions.php темы (шаблона) WordPress

Авторизуйтесь в панели администрирования сайта WordPress и выберите пункт «Внешний вид — Редактор тем».

В правом верхнем углу выберите основную тему сайта для изменения:

В списке файлов темы выберите «Функции темы (functions.php)».

Проскрольте содержимое файла и добавьте в конец следующий код:

где data-chats-widget-id — уникальный код виджета в вашем проекте. Чтобы получить его, авторизуйтесь на сайте 13chats.com, откройте настройки соответствующего проекта и скопируйте код на вкладке «Установить код».

Нажмите «Обновить файл».

Как установить код виджета 13Chats на OpenCart

Существует два способа установки виджета онлайн-чата на все страницы сайта:

  • через админ-панель;
  • через FTP.

Рассмотрим подробно оба варианта.

Установка кода виджета 13Chats на OpenCart 1.5.x через админ-панель

Скрипт онлайн-чата 13Chats соответствует требованиям к размещению кода Google, поэтому его можно вставить в ячейку, предназначенную для кода Google Analytics. Вы можете разместить в ней оба кода или только скрипт 13Chats — это никак не повлияет на работоспособность сайта. Но не рекомендуем добавлять в поле другие сторонние коды, чтобы не вызвать конфликт.

Чтобы найти нужную ячейку, авторизуйтесь в административной панели сайта и в главном меню на вкладке «System» выберите раздел «Settings».

Выберите кнопку «Edit» (Редактировать) справа.

Проскрольте вниз страницы и найдите поле «Google Analytics Code». Скопируйте код виджета 13Chats в настройках проекта на вкладке «Установить код», вставьте в поле вместо или после кода Google Analytics и нажмите «Save», чтобы сохранить изменения.

Установка кода виджета 13Chats на OpenCart 2.x через админ-панель

В новой версии CMS скрипт также устанавливается в ячейку для для кода Google Analytics. Размещение в ней обоих кодов или только скрипта 13Chats никак не повлияет на работоспособность сайта. Не рекомендуем добавлять в поле другие сторонние коды, чтобы избежать конфликта.

В боковом меню в разделе «Модули / Расширения» выберите пункт «Модули / Расширения».

Выберите тип расширения «Аналитика».

Активируйте расширение, кликнув на зеленую кнопку с «+» внутри.

Нажмите кнопку «Редактировать» напротив вашего сайта.

Скопируйте код виджета 13Chats в настройках проекта на вкладке «Установить код», вставьте в поле «Код Google Analytics», выберите статус «Включено» и нажмите на кнопку «Сохранить».

Установка кода виджета 13Chats на OpenCart через FTP

Скопируйте код виджета в настройках проекта на вкладке «Установить код». Зайдите на хостинг вашего сайта или подключитесь с помощью FTP-клиента и откройте файл footer.twig.

Путь к файлу: /catalog/view/theme/название вашего шаблона/template/common/footer.twig.

Как установить код виджета 13Chats на Joomla

Существует три способа установки виджета онлайн-чата на ваш сайт:

  • через создание нового модуля;
  • через менеджер шаблонов;
  • через FTP.

Два первых варианта подходят для Joomla 2.5+, через FTP можно добавить код независимо от версии CMS.

Установка кода виджета 13Chats на Joomla 2.5+ через создание нового модуля

Авторизуйтесь в административной панели сайта, на вкладке «Система» в верхнем меню выберите пункт «Общие настройки» (в ранних версиях «Сайт» — «Мой профиль»).

На вкладке «Общие настройки» найдите пункт «Редактор по умолчанию» и выберите «Редактор — Без редактора». Нажмите «Сохранить».

Дальше в верхнем меню на вкладке «Расширения» выберите пункт «Модули».

Нажмите на кнопку «Создать».

Выберите тип модуля HTML-код.

Произвольно назовите модуль в поле «Заголовок».

Скопируйте код виджета 13Chats в настройках проекта на вкладке «Установить код» и вставьте в поле для отображения на сайте произвольного HTML-кода.

Настройте отображение виджета в правом меню:

  • скройте заголовок («Заголовок» — «Скрыть»);
  • выберите позицию модуля на странице в футере («Позиция» — «footer»);
  • опубликуйте («Состояние» — «Опубликовано»);
  • откройте доступ к виджету для всех посетителей сайта («Доступ» — «Public»).

Нажмите «Сохранить».

Установка кода виджета 13Chats на Joomla 2.5+ через менеджер шаблонов

Авторизуйтесь в административной панели сайта, в верхнем меню на вкладке «Расширения» выберите пункт «Шаблоны».

Нажмите на название шаблона, напротив которого стоит звездочка в графе «По умолчанию» и значение «По умолчанию для всех страниц» в графе «Страницы».

Выберите файл index.php.

Установка кода виджета 13Chats на Joomla через FTP

Скопируйте код виджета в настройках проекта на вкладке «Установить код». Зайдите на хостинг вашего сайта или подключитесь с помощью FTP-клиента и откройте файл index.php.

Путь к файлу: /templates/название вашего шаблона/index.php.

Как установить код виджета 13Chats на Ecwid

Опция доступна только в платных тарифах уровня Venture и выше.

Если вы осознаете все риски и готовы воспользоваться этим способом, войдите в свой аккаунт Ecwid и выберите вкладку «Сайт» на дашборде.

Опуститесь ниже до раздела «Настройки SEO», найдите блок «Мета-теги для верификации сайта» и нажмит на кнопку «Добавить код».

Скопируйте скрипт виджета 13Chats в личном кабинете (мы описали, как получить код виджета), вставьте в открывшееся поле и нажмите «Сохранить».

Как установить код виджета 13Chats на SpreadSimple

Важно: скрипт виджета 13Chats можно добавить только в платном Pro-тарифе SpreadSimple.

Также для корректной работы вам понадобится платный тариф (Стандарт и выше) в сервисе 13Chats: SpreadSimple устроен так, что код виджета сначала устанавливается на основной домен конструктора (https://app.spreadsimple.com/…) для предпросмотра, а потом — на сайт клиента (https://site.spread.name/), созданный в SpreadSimple. Из-за этого превышается лимит в один домен, действующий в бесплатном тарифе 13Chats.

Повысьте тарифный план — и приступайте к установке.

Чтобы добавить виджет онлайн-чата и прочие инструменты 13Chats на сайт, войдите в свой аккаунт SpreadSimple и выберите опцию «Manage options» для сайта, на который будет выполняться установки кода.

В левом вертикальном меню выберите вкладку Settings

…и нажмите Inject custom code.

Теперь вы можете оценить отображение виджетов в окне предпросмотра.

Если отображение соответствует заданным вами настройкам проекта, опубликуйте изменения по кнопке Publish.

Как установить код виджета 13Chats на Webflow

Важно: скрипт виджета 13Chats можно добавить только в платных тарифах Webflow.

Чтобы добавить код виджета 13Chats на сайт, войдите в свой аккаунт Webflow и откройте настройки соответствующего проекта: нажмите на три точки…

…и выберите Settings.

Перейдите на вкладку Custom Code в верхнем меню.

Скопируйте скрипт виджета 13Chats в личном кабинете (подробный гайд как получить код виджета для установки), вставьте код в поле Footer Code и нажмите Save Changes.

Чтобы виджеты 13Chats начали отображаться на сайте, опубликуйте свой проект. Для этого нажмите на Publish в верхнем меню, с помощью чекбокса отметьте соответствующий проект и подтвердите публикацию по кнопке Publish to Selected Domain.

Похожие публикации:

  1. Как правильно указывать путь к файлу в html
  2. Как прописать стиль css в html
  3. Как растянуть body на весь экран html
  4. Как сделать 404 страницу html

Как сделать сайт на Tilda: пошаговое руководство

s

Как сделать сайт на Tilda: пошаговое руководство

Array

Время чтения: 55 минут(ы)
Поделиться

Tilda – конструктор сайтов из блоков, который стал одним из популярнейших инструментов для создания сайтов на территории России. Для работы с ним не нужны навыки программирования. Как сделать сайт с помощью Tilda, какой есть функционал и для каких целей подойдет этот конструктор – в нашем подробном руководстве.

пример сайта на тильде

Конструктор Tilda: для чего и кому подойдет

Tilda – относительно новая функциональная платформа, которая подойдет для создания сайта-визитки компании или личного бренда, сайта-каталога и даже интернет-магазина.

Платформа позволяет создать удобный и красивый сайт самостоятельно. С помощью простого интерфейса вы можете управлять сайтом без привлечения технических специалистов.

В Тильду заложен набор всевозможных функции для разных целей. Платформа может собирать электронные адреса для рассылок, а для каталогов и интернет-магазинов есть модули товаров и корзины.

Основной упор создатели платформы сделали на визуальную привлекательность. В конструкторе Tilda есть более 600 готовых модулей. Если необходимый модуль не нашли среди готовых, создайте собственный блок через функционал Zero Block (Зеро блок). Обо всем этом поговорим подробно ниже.

Tilda: сколько стоит

У конструктора есть три тарифа: Free, Personal и Business.

  • Free Бесплатный тариф. Доступен всем пользователям сразу после регистрации. Имеет ряд ограничений, главное из которых – нельзя подключить свой домен. Тариф позволят создать 1 сайт объемом до 50 страниц, есть 50 МБ дискового пространства. Для сборки доступна только часть модулей. Тариф подойдет для создания сайта-визитки или лендинга.
  • Personal Это уже полноценный тариф. Стоимость тарифа – 750 ₽/мес. или 6 000 ₽ при оплате за год. Есть возможность не только подключить собственный домен сайта на Тильде, но и получить его в подарок. Ограничение по объему страниц – до 500, предоставляется 1ГБ дискового пространства. Доступны все модули для сборки. Подойдет для корпоративных сайтов, сайтов услуг и небольших интернет-магазинов.
  • Business Включает все возможности тарифа Personal. Стоимость тарифа – 1 250 ₽/мес. или 12 000 ₽ при оплате за год. Позволяет в одном аккаунте создать 5 сайтов конструкторов. При оплате за год появится возможность экспортировать код сайта на свой сервер.

Тарифы актуальны на весну 2021 года. Свежую информацию смотрите на официальном сайте Tilda.

Подготовка к созданию сайта: идея, структура, прототип, сбор материалов

Первое, с чего нужно начать делать сайт, это визуализировать свою идею. Вам обязательно нужно подготовить первичные наброски и структуру, разобраться как будет позиционироваться сайт и какие решать задачи. Это очень важный этап, и часто он вызывает сложности, особенно, если вы самостоятельно делаете ваш первый сайт. С чего начать?

Идея

Сформулируйте для себя основную идею сайта. Что это будет за сайт: визитка, посадочная страница, корпоративный портал или интернет-магазин? Для чего он нужен вам? Для чего он нужен пользователям? Что пользователи должны получить и сделать на этом сайте? Зафиксируйте ответы на эти вопросы: они помогут в разработке структуры сайта.

Структура сайта

Структура – это скелет вашего будущего сайта. Исходя из целей сайта определите, какие блоки будут в вашем проекте.

Откройте Excel, Блокнот или просто возьмите лист бумаги и ручку и составьте структуру в виде списка. Подумайте, сколько информации вы планируете добавить в каждый пункт. Если получается немного — делайте сайт из одной страницы и размещайте всю информацию на ней. В противном случае вам нужен многостраничный.

Посмотрите в ваш список еще раз. Добавьте к пунктам подпункты, объединяйте близкие по темам блоки или, наоборот, разделяйте, если один пункт получается слишком объемным.

Так в конечном итоге у вас должен получиться документ со структурным «деревом», которого вы будете придерживаться в процессе создания сайта.

Структура сайта на Тильде

Удобно разрабатывать «дерево» сайта в сервисе XMind

Picture

Читайте также Структура сайта для повышения эффективности SEO Подробнее—>

Прототип сайта

Прототип сайта – это набросок будущих страниц сайта, который показывает расположение и содержание элементов на страницах. Это план вашего сайта. Структура помогает выстроить логику всего сайта, а прототип – логику отдельной страницы. Он нужен для того, чтобы на этапе подготовки понять, как подавать информацию пользователям и какие понадобятся материалы для наполнения страниц.

Прототип сайта можно сделать от руки на бумаге или в любом графическом редакторе. Современные веб-дизайнеры предпочитают готовить прототипы в Figma.

Прототип сайта

Прототип помогает сэкономить время на создание сайта. Это как дизайн-проект ремонта квартиры: без него можно, но процесс будет долгим и с большим количеством переделок.

Подготовка материалов

Далее переходите к подготовке материалов. Следуя прототипу, составьте список всего, что вам нужно:

  • заголовки,
  • тексты,
  • баннеры,
  • фотографии товаров,
  • логотипы и т.д.

Лучше все материалы структурировать и подготовить заранее. Это позволит вам быстро собрать свой сайт, не теряя времени на обработку и поиск информации. Файлы можно загрузить в облако и сформировать по папкам, чтобы не запутаться.

Теперь можно приступить к сборке.

Регистрация в Tilda

  1. Заходите на главную страницу сервиса и нажмите кнопку «Регистрация».

Регистрация в Tilda

Кнопка «Зарегистрироваться» в Тильде

Готово! После регистрации вы попадаете на главный экран платформы.

Совет: После регистрации перейдите в раздел «Тарифы и оплата» и активируйте пробный двухнедельный период тарифа Personal, чтобы попробовать все функции Tilda.

Настройка сайта на Тильде

  1. Перейдите в раздел «Мои сайты» и создайте новый сайт.

Раздел «Мои сайты» на Тильде

Название проекта

Кнопка «Настройка сайта» в Тильде

Здесь нужно настроить базовые функции сайта.

Главное

Назовите и дайте описание вашему проекту.

Описание проекта

Шрифты и цвета

Здесь вы можете задать по умолчанию необходимые цвета и шрифты согласно вашему прототипу или брендбуку.

Выбор шрифта на сайте Тильды

Выбор шрифта

Настройки шрифта и цвета

Настройки шрифта и цвета

Аналитика

Здесь подключаются сервисы для сбора и обработки данных о посещаемости. Чтобы подключить их, следуйте подсказкам платформы.

Сервисы аналитики в Тильде

На конструктор можно интегрировать счетчики Яндекс.Метрика, Google Analytic, Google Tag Manager, Facebook* Pixel, VK Pixel, Mail.ru.

Еще в этом разделе в будущем можно будет смотреть статистику сайта по встроенным в Тильду системам аналитики.

Picture

Читайте также Как установить Метрику за 4 шага Подробнее—>

SEO

В разделе «SEO» настройте главное зеркало сайта, протокол безопасности, Яндекс.Вебмастер и Google Search Console.

Раздел «SEO» в Тильде

Загрузите фавикон — значок, который будет отображаться на вкладке браузера рядом с названием страницы. Обратите внимание, что фавикон загружается на сайт в формате ico.

Загрузка фавикона

Важно: Если вы планируете подключить свой домен сайта на Тильда, то настройте его в разделе «Домен». Или в настройках счетчиков не забудьте указать актуальный домен перед публикацией сайта.
Также для подключения домена у регистратора нужно прописать dns-записи. Запись типа A, которая бы указывала на IP адрес: 185.129.100.112 и запись типа А для поддомена WWW, которая будет указывать на IP адрес: 185.129.100.112.

В этом же разделе вы можете закрыть сайт от индексации поисковыми системами, пока будете наполнять и создавать страницы. Просто поставьте галочку.

Запрет индексации страницы

Формы

В разделе «Формы» подключите уведомления о заполненных формах на сайте.

Настройка сбора заявок с сайта Tilda

  1. Перейдите во вкладку «CRM» в шапке платформы.

Вкладка «CRM»

Кнопка «Создать новый лист»

Создание заголовка листа

Подключение листа к сайту

Выбор сайта для привязки

Публикация изменений

После настройки базовых функций сохраните изменения и переходите к сборке сайта.

Picture

Читайте также 3 ключевых элемента, которые повысят эффективность формы обратной связи Подробнее—>

Создание и наполнение страниц

  1. Переходите в раздел «Мои сайты», далее «Редактировать сайт».

Раздел «Мои сайты»

Кнопка создания новых страниц

Шаблоны страниц в Тильде

Блоки для сборки страниц в Тильде

Для примера выберем блок AB102 «О проекте».

В настройках блоков есть две составляющие: настройки и контент.

Настройки и контент

В «Настройках» вы указываете формат отображения блоков и анимации.

Здесь можно задать ширину блока, размер отступов, выравнивание, отображение текстов, кнопок, настроить базовую анимацию и задать цвет фона.

Настройки отображения блоков

В каждом блоке есть свои настройки. Например, для карточек товара появляются настройки pop-up – всплывающего окна.

Настройки pop-up – всплывающего окна

В разделе «Контент» — редактируете содержание блока.

Содержание можно редактировать и не открывая меню «Контент». При клике по тексту или изображению вы сразу можете редактировать содержимое.

Для удаления, перемещения, копирования воспользуйтесь меню блока, который находится справа вверху.

Меню блока в Тильде

Создайте по аналогии необходимые вам блоки.

Если сомневаетесь в каком либо решении, нажмите «предпросмотр» страницы.

В режиме предпросмотра вы сможете увидеть, как сайт будет отображаться на разных устройствах. Для этого наведите на значок монитора слева внизу экрана.

В верхней панели есть меню «Настройки» – это настройки самой страницы. Задайте вашей странице заголовок и описание, адрес.

Меню «Настройки» страницы

В разделе «Бейджик» загрузите свое изображение для превью страницы.

В разделе «Facebook» и «SEO» настройте отображение превью для социальных сетей.

В разделе «Действия» вы можете перенести или удалить страницу, а если над проектом работают несколько специалистов, то здесь страницу можно передать. Также есть функции дублирования. Она понадобится, если будете создавать несколько идентичных страниц.

По вкладке «Дополнительно» можно посмотреть статистику страницы, снять ее с публикации, вставить html-код, назначить страницу шаблоном, задать на нее пароль и другие настройки, которые будут касаться только этой страницы.

Picture

Читайте также 10 способов получить трафик на сайт совершенно бесплатно Подробнее—>

После того как все модули будут собраны, не забудьте опубликовать изменения.

Публикация изменений в Тильде

Как сделать меню сайта на Tilda: шапка и подвал

При создании многостраничного сайта обязательно нужно сделать шапку и подвал. Эти блоки будут дублироваться на всех страницах.

  1. Перейдите в раздел «Мой сайт» и создайте новую страницу.
  2. Выберите блок для меню из списка и настройте разделы, которые у вас будут.

Настройка шапки и подвала сайта

Если необходимо поставить ссылку на блок страницы, в настройках блока скопируйте id блока.

Публикация всех страниц

Свой дизайн: Zero Block

В конструкторе Тильда модули разделены на функциональные блоки, которые имеют свои настройки. Для решения нестандартных задач у Тильды есть модуль Zero Block (Зеро блок). Через Zero Block вы можете создавать свои блоки или редактировать уже готовые.

Для перехода в модуль выберите в списке «Zero Block».

Zero Block в Тильде

Для перехода в режим правки нажмите «Редактировать блок».

Редактор нулевого блока

У вас откроется окно для редактирования. Изучим интерфейс.

По центру располагается рабочая область, где будет новый блок.

Слева вверху – кнопка добавления элементов. В свой блок вы можете добавить текст, изображение, фигуру (квадрат, окружность, линию), кнопку, видео, подсказку, HTML код, форму и галерею.

Кнопка добавления элементов

По центру вверху располагается переключатель между самыми распространенными форматами устройств.

Переключатель между форматами устройств

При наведении на них отобразится диапазон размера экрана.

Диапазон размера экрана

При переключении вы сможете подстроить расположение элементов и адаптировать свой блок под разные устройства.

Справа вверху располагаются кнопки отмены, сохранения, помощи и панели быстрых клавиш.

Кнопки отмены, сохранения, помощи

Основная панель, которая отвечает за настройки и отображение новых элементов, располагается справа внизу.

Настройки и отображение новых элементов

Когда на рабочей области не выбраны элементы, то настройки применяются для контейнера блока. Контейнер – это область содержания контента на странице.

Вы можете сделать Zero Block на Тильда с определённой высотой контейнера, задать центровку, начало осей координат, цвет фона.

Настройки контейнера в Тильде

Рабочую область составляют два контейнера:

  1. Grid Container – он привязан к колончатой сетке. По умолчанию в Tilda сетка состоит из 12 столбцов для ПК. Для расширений меньшего размера количество столбцов меньше. Если контент привязан к сетке, то в ней же он и будет располагаться вне зависимости от размера экрана.
  2. Window Container – привязан к размеру экрана. Если располагать элементы относительно него, то на экране элементы будут растягиваться и сжиматься, автоматически подстраиваясь под размер окна.

Отображение колонок сетки для ПК

Отображение колонок сетки для ПК

Отображение колонок сетки для телефонов

Отображение колонок сетки для телефонов

При работе с привязкой к контейнерам нужно быть внимательными, так как если один элемент будет привязан к сетке, а второй к экрану, то на разных устройствах элементы могут накладываться друг на друга.

Для того, чтобы понять, к какому контейнеру привязан элемент, выберете его на рабочей области и нажмите на плюс возле настроек контейнеров.

Настройки контейнера

В раскрывшемся меню будет отображаться контейнер, к которому привязан выбранный элемент.

Контейнер выбранного элемента

Для примера работы с контейнерами создадим два элемента на рабочей области.

Первый – изображение мишки. Он привязан к Window Container.

Второй – текст, он привязан к сетке.

В настройках блока элементы находятся максимально рядом друг с другом.

Элемент, привязанный к Window Container

Два элемента в настройках блока

Два элемента в настройках блока на большом экране

Два элемента в настройках блока на большом экране

При этом на большом экране расположение элементов поменяется.

Мишка всегда будет располагаться на расстоянии 30px от левой стороны экрана, а надпись – на 130px от левой стороны начала сетки. Для устройств меньшего разрешения элементы нужно будет адаптировать самостоятельно.

Перейдем к интерфейсу настроек.

Первое, что мы видим, это выравнивание. Эта функция позволяет выравнивать объекты по левому или правому краю, по центру, по верху и т.д.

Выравнивание объектов

Ниже пример, как это упрощает жизнь, если есть несколько одинаковых блоков, и их нужно выставить ровно.

Расположение и привязка к контейнерам позволяют закрепить элементы относительно контейнеров.

Закрепление элементов относительно контейнеров

Ниже идут настройки для основных элементов. Рассмотрим подробнее каждый элемент создания Zero Block.

Текст

После привязки к контейнерам настраивается текст непосредственно в области: центровка, цвет, размер, шрифт, жирность, межстрочный и межбуквенный интервал.

В настройках ниже располагается прозрачность, угол вращения элемента, положение в слоях и кнопки действий: копировать, удалить, зафиксировать.

После идет блок, отвечающий за настройку ссылок. Ссылку можно поставить на любой элемент, настроить, как она будет открываться. Для открытия в новом окне выберите «New window». Чтобы ссылка открылась в текущем окне, выберете «Same window». Есть возможность закрыть ссылку от поисковых роботов.

С помощью настройки DIV можно задать тексту формат заголовков для SEO.

А с помощью свойства «Pointer events» можно настроить взаимодействие с мышью.

Изображение

Изображение можно загрузить, как с компьютера, так и по ссылке. Свойства такие же, как и при добавлении текста.

Появляется свойство «Border» – настройка обводки изображения, цвет, и формат.

Свойство «Border» в настройках изображения

«Shadow» – настройка тени. Тоже есть в разных блоках. Позволяет сделать тень, задать ей цвет, насыщенность, прозрачность.

Настройка тени элемента

Специально для изображений появляются свойства «Alt » – название изображения для SEO.

Свойство «Zoomable» позволяет увеличить изображение по клику.

«Lazyload» – блокирует загрузку изображений, которые находятся за областью просмотра. Это нужно для для оптимизации скорости сайта.

Формы: прямоугольник, окружность , линия

Формы имеют настройки, аналогичные изображениям.

Кнопка

Имеет схожие с изображением настройки. Можно задать переход на другую страницу или с помощью нее активировать анимацию. При этом появляется блок с настройками смены и скорости цветов при наведении.

Настройки кнопки

Видео

Есть функция загрузки видео с YouTube или Vimeo. Для видео есть блок со специальными свойствами:

  • «Autoplay» — автоматический запуск проигрывания.
  • «Mute» — беззвучный режим.
  • «Loop» — режим повтора.

Также можно задать время начала и конца видеоролика.

Tooltip. Подсказка

Tooltip – это подсказка. Иконку можно выбрать из существующих или загрузить свою. Текст подсказки редактируется. Форматировать текст можно в панеле, которая открывается сверху.

Настройки Tooltip – подсказки

Вызвать подсказку можно либо по наведению, либо по клику.

HTML-код

Вставка HTML-кода позволяет добавить дополнительные сервисы и проводить интеграции. Пригодится, если не хватает стандартных функций Тильды.

CRM форма

Ее можно сделать как горизонтальной так и вертикальной. Настройте поля, подсказки, шрифт, размеры, обводку полей и радиус скругления, добавьте дополнительные поля. Из особенностей: анимация кнопки настраивается только через пошаговую анимацию.

Галерея

Свойств у этого элемента много, и они уникальны в сравнении с предыдущими элементами.

Первый блок свойств отвечает за прокрутку изображений.

«Stretch» – отвечает за подстройку изображения в окне. При значении «Contain» картинка подстраивается с учетом соотношения сторон, но если размер не соответствует окну, то будут отображаться пустые места. Значение «Cover» – заполняет полностью размер галереи, но может обрезать часть изображения.

Настройки галереи в Zero Block Тильда

Чтобы выбрать центровку для изображений используйте «Position».

«Position» изображения по левому краю
«Position» изображения по правому краю

Свойство «Loop» позволяет прокручивать изображения непрерывно, с отключенной функцией прокрутка будет останавливаться на последнем изображении.

Свойство «Slide Speed» – позволяет настроить скорость смены картинок. Есть только два значения: быстро и медленно.

Запуск смены изображений можно настроить с помощью свойства «Autoplay». Поставьте значение в секундах.

Функция «Zoomable» уже нам знакома — это увеличение изображений при клике.

Следующий блок отвечает за оформление стрелок.

Блок оформления стрелок

В этом блоке можно настроить их положение относительно основного окна, поменять значок стрелок, их размер, ширину, настроить обводку, цвет, прозрачность, смену цвета и прозрачности при наведении а также удаленность от изображений.

Свойство «Dots» отвечает за отображение точек под галереей. Меняются параметры отображения, цвета, удаленности.

Свойство «Dots» - отображение точек

Также здесь есть стандартные настройки обводки, контура и теней.

Настройка анимации в Тильда

Каждому элементу можно присвоить анимацию. В конструкторе сайтов Tilda есть два вида: «Базовая анимация» и «Step by step animation».

«Базовая» – это стандартный вид анимации, ее можно настроить абсолютно для всех блоков.

В стандартных модулях ей выделен отдельный раздел.

Настройка анимации в Тильда

В настройках Zero Block она практически в самом низу.

Настройки анимации в Zero Block

Анимацию элементов можно настроить следующим образом:

  • Fade in – элемент появится сразу после загрузки страницы.
  • Fade in up – элемент появится снизу.
  • Fade in down – элемент появится сверху.
  • Fade in left и Fade in right – появится справа или слева соответственно.
  • Zoom in – элемент появляется на своем месте, но с изменением размера.

За длительность появления отвечает функция «Duration», а с помощью «Delay» можно задать задержку в появлении анимации.

Для элементов, которые появляются из какой либо стороны появится свойство «Distance», оно отвечает за расстояние с которого появится объект, а для свойства «Zoom in» есть специальный параметр «Scale» – он отвечает за начальный размер.

Перейдем к «Step by step animation» – это пошаговая анимация. Она находится в самом низу настроек и доступна только при редактировании через Zero Block.

Настройки пошаговой анимации

Активировать анимацию можно с помощью 5 событий:

  • Element on Screen – при появлении элемента на экране.
  • Block on Screen – при появлении всего блока на экране.
  • On Scroll – при анимация будет происходить во время скролла.
  • On Hover – при наведении на элемент.
  • On Click – при клике на элемент.

Активация пошаговой анимации

При выборе события, в окне появляются дополнительные настройки.

Свойство «Start Trigger» – отвечает за то, к чему будет привязана анимация.

«Trigger Offset» – смещение начала анимации относительно выбранного триггера.

С помощью свойства «Loop» можно воспроизводить анимацию по кругу. Под ним располагаются кнопки проигрывания элементов, можно воспроизвести анимацию одного элемента или сразу всех.

«Steps» – это непосредственно шаги вашей будущей анимации. Начинаются они всегда со старта. Этот шаг начальный и всегда отображается по умолчанию. Для добавление шага нажмите «Add Step».

Для шагов анимации есть настройки свойств:

  • «Duration» – длительность воспроизведение анимации. Чем больше время, тем она плавнее.
  • «Move» – это координаты, в какую сторону сдвинется элемент. Задать их можно как в окошках, так и передвинуть элемент мышкой на рабочей области.
  • С помощью параметра «Scale» можно уменьшить или увеличить объект к концу шага.
  • «Opacity» отвечает за прозрачность.
  • «Rotate» вращает элемент и задается в градусах.
  • «Easing» придает элементу физические свойства:
    • «Linear» – анимация воспроизводится линейно.
    • «EaseIn» – объект замедляется вначале.
    • «EaseOut» – объект замедляется в конце.
    • «EaseInOut» – это замедление в начале и конце.
    • «BounceFin» – это свойство дает небольшой отскок в конце.

    Эти параметра идентичны для всех событий анимации, кроме события «On Scroll». При выборе этого события параметр «Distance» будет отвечать, за сколько пикселей воспроизводится анимация при скролле. Чем больше значение, тем медленнее анимация. Появляется параметр «Fix» – позволяет зафиксировать объект, чтобы анимация «следовала за скроллом».

    Объект с фиксацией (следует за скроллом)

    Объект без фиксации

    Для параметров «On Hover» и «On Click» есть специальное значение «Trigger».

    Значение «Trigger»

    С помощью него вы выбираете элемент, при взаимодействии с которым будет появляться анимация.

    Чтобы добавить триггер, нажмите на «Add trigger» и кликните по нужному элементу.

    Что еще можно сделать в Tilda: интеграции

    Кроме красивого дизайна конструктор поддерживает интеграции с популярными сервисами.

    Например, если у вас уже есть сайт, то по API его можно интегрировать с Тильдой, и у вас появится возможность заменять страницы сайта на страницы из конструктора.

    Список сервисов для интеграций

    Медиа: YouTube, Vimeo, SoundCloud, Coub

    Карты: Google, Яндекс

    Сервисы доставки: CДЭК, Boxberry, Почта России, Новая почта

    Email-рассылки: MailChimp, UniSender, SendGrid, GetResponse, NotiSend

    Работа в облаке: Dropbox, Google Drive, Яндекс.Диск, SlideShare

    Работа с клиентами: Битрикс24, Yclients, Мегаплан, AmoCRM

    Обратная связь, коллтрекинг и сквозная аналитика: Jivosite, Callbackhunter, Chatra.io, Roistat, Callibri, Phonetruck, Envybox, Yagla, Allostat, Replain, Pozvonim, Leadmaster

    Прием платежей: Cloudpayments, Robokassa, PayPal, Яндекс. Деньги и Яндекс. Касса, LiqPay, Stripe, PayAnyWay, Эквайринг Альфа-банка, Сбербанка и Тинькофф банка

    Аналитика Google Analytics и Google Tag Manager, Яндекс.Метрика

    Интеграции с сайтом: 1С-Битрикс, WordPress, Любой сайт через API

    Это далеко не полный перечень сервисов для интеграций. Каждый месяц Tilda пополняет этот список. Полный актуальный список вы можете изучить на сайте платформы.

    Если в списке доступных сервисов для интеграции вы не нашли нужного, то можно настроить интеграцию через скрипт.

    Заключение

    Подведем итог. Если вам нужен красивый, современный и удобный небольшой сайт, то Tilda – отличный инструмент для этих целей. Наша инструкция поможет сделать сайт самостоятельно с помощью конструктора. А если вы хотите поручить создание сайта на Тильде специалистам, расскажите нам о вашей задаче, поможем 🙂

    Хотите изучить больше полезных гайдов и свежих новостей из мира digital? Подписывайтесь на наш блог и Telegram, мы регулярно публикуем новые материалы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *