Как создать сайт на Tilda – пошаговая инструкция

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

2018-09-04 45 Евгений Куликов Рейтинг: 5.0

Регистрация и выбор тарифа

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

Выбор тарифа

Для создания простого сайта можно использовать бесплатный тариф Free. На нём недоступны некоторые блоки, но это перестанет быть проблемой, как только вы освоите Zero Block — инструмент для создания блоков с нуля. На бесплатном тарифе нельзя подключить к сайту свой домен — придётся пользоваться субдоменом на tilda.ws. Зато с адаптивностью всё в порядке — страницы будут автоматически оптимизированы под разные экраны. 

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

Тариф Business отличается от Personal поддержкой экспорта исходного кода и API. Эти возможности нужны для скачивания и размещения сайта на стороннем хостинге или интеграции проекта, созданного на Tilda, с другими ресурсами. О том, какой сценарий лучше выбрать, поговорим чуть позже, пока же давайте разберёмся, какие возможности предлагает визуальный редактор Tilda.

Создание и настройка сайта

Управление проектами выполняется на вкладке «Мои сайты». Здесь есть кнопка «Создать новый сайт». После нажатия на неё появится окно ввода названия проекта. На этом создание сайта завершено — вы уже можете зайти в его настройки, изменить название и описание, подключить домен, настроить шрифты и цвета, выбрать платёжные системы и т. д.

Zero block

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

Настройка сайта в Tilda

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

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

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

Добавление блоков на страницу

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

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

Обзор шаблонов

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

Использование Zero Block

Если среди готовых блоков нет варианта, который вам нужен, создайте его самостоятельно, используя Zero Block. Этот инструмент не требует навыков программирования, но его применение первое время будет занимать много времени. В базе знаний Tilda есть несколько видео, посвящённых работе с Zero Block — обязательно их посмотрите. 

Чтобы построить блок с нуля, выберите в списке Zero Block и нажмите «Редактировать». На нём будут предустановленные элементы, которые демонстрируют основные возможности инструмента. Вы можете добавить в блок текст, изображение, кнопку, видео, форму, HTML, указатель и фигуру. Местоположение каждого элемента указывается вручную для каждого варианта отображения: на мониторе и мобильных устройствах в разных ориентациях. 

Оптимизация страницы

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

Способы публикации 

После создания страниц остаётся только сформировать структуру сайта. Делается это с помощью меню и ссылок. После того, как сайт будет готов, необходимо выбрать способ его публикации. Как мы уже говорили выше, он зависит от тарифного плана. Если вы создавали сайт бесплатно на тарифе Free, то вариант один — публикация на субдомене tilda.ws. 

На тарифе Personal можно подключить свой домен или субдомен другого сайта. Для этого:

  1. Откройте проект на вкладке «Мои сайты».
  2. Нажмите на кнопку «Настройки сайта».
  3. Перейдите в раздел «Домен».
  4. Напишите адрес, который хотите присвоить сайту.
  5. Зайдите на сайт регистратора домена. В зоне управления DNS добавьте запись A и пропишите значение IP-адреса 185.165.123.206.

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

На тарифе Business вы тоже можете опубликовать проект на субдомене tilda.ws или подключить свой домен, но главная его особенность заключается в поддержке экспорта кода и API. Это добавляет ещё четыре сценария использования:

  • Экспорт кода готового проекта и размещение на другом хостинге. 
  • Экспорт кода и интеграция с другим сайтом — проект на Tilda станет частью ресурса.
  • Автоматическая интеграция проекта на Tilda с другим сайтом через API.
  • Интеграция с сайтом на Wordpress или Битрикс через бесплатный плагин.

Экспорт кода и API помогают добавлять на сторонние сайты страницы, свёрстанные в конструкторе Tilda, с сохранением функциональности элементов. Можно использовать эту возможность для создания спецпроектов, посадочных страниц и привлекательных фотогалерей, которые сложно реализовать в рамках других систем управления контентом. 

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