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

Большинство людей, которые впервые садятся делать сайт на Тильде, сразу открывают редактор. Логика понятна: интерфейс простой, блоки красивые, хочется начать. Но через час выясняется, что текст не готов, фотографий нет, а вместо структуры — четыре варианта главной и ощущение, что что-то пошло не так. Создание сайта на Тильде начинается не с редактора, а с того, что в него войдёт.

  ПЕРЕД ТЕМ КАК ОТКРЫВАТЬ КОНСТРУКТОР, НУЖНО ПОДГОТОВИТЬ ЧЕТЫРЕ ВЕЩИ:  

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

Если всё это есть заранее, создание сайта на Тильде превращается в техническую задачу. Если нет — в бесконечную переделку. О том, как подготовить каждый из этих элементов, мы подробно написали в отдельной статье: «Подготовка контента для сайта: что продумать до дизайна и разработки».

Перед тем как думать о дизайне и блоках, нужно ответить на один вопрос: что должен сделать человек, который попал на сайт? Оставить заявку, написать в мессенджер, купить товар, записаться на консультацию — это конкретные действия, и под каждое из них сайт на Тильде собирается по-разному. Те, кто доволен результатом, как правило, отвечают на этот вопрос до того, как добавляют первый блок.

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

• главная;
• услуги;
• о компании;
• контакты.

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

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

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

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

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

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

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

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

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

Кликните по любому тексту в блоке — он сразу становится редактируемым. С изображениями так же: клик по картинке открывает загрузку или выбор из медиатеки. Фон настраивается в параметрах блока — там можно задать цвет, градиент или фоновое изображение. Всё это делается внутри блока, без перехода в отдельные настройки.

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

  ЕСЛИ НУЖНО ЗАДАТЬ ЗВОНОК ИЛИ НАПИСАТЬ ПИСЬМО:  

• для звонка —   tel:+79991234567  
• для email —   mailto:mail@example.com  

Одна кнопка должна вести к одному понятному действию — так пользователю проще принять решение и не теряться.

Блоки с контентом — это ещё не сайт. Сайт начинается тогда, когда у страницы есть понятный верх и низ: шапка (header), где видно, куда идти, и подвал (footer), где есть всё необходимое для связи. Без этого даже хорошо собранная страница выглядит как черновик — пользователь не понимает, где он находится и что делать дальше.

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

Шапка (header) добавляется как обычный блок — в каталоге есть отдельная категория «Меню». Выбираете подходящий вариант, вставляете логотип, прописываете пункты навигации и указываете, куда ведёт каждый из них: на страницу, на якорь внутри страницы или на внешний адрес.

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

Меню сайта на Тильде можно сделать фиксированным — тогда оно остаётся на экране при прокрутке. Для многостраничных сайтов это необходимо.

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

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

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

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

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

В панели управления проектом нажмите «Создать новую страницу» — появится та же форма выбора: шаблон или пустая страница. Дайте странице понятное название и адрес: адрес формируется автоматически, но его лучше поправить вручную на что-то читаемое, например «  /uslugi  » или «  /kontakty  ». После этого страница появится в списке проекта, и её можно будет открыть в редакторе.

Ссылку можно поставить в любом месте: в кнопке, в тексте, в пункте меню. Кликаете по элементу, открываете настройки, вставляете адрес страницы — либо полный URL, либо относительный путь вроде «/uslugi». Чтобы сделать ссылку внутри одной страницы — например, когда кнопка ведёт вниз к форме, — используются якоря: каждому блоку можно задать идентификатор и ссылаться на него. Это базовая механика, на которой держится навигация всего сайта.

Подробнее по якорные ссылки можно узнать в справочном центре Tilda: help-ru.tilda.cc

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

Всё это добавляется через стандартные блоки — ничего подключать отдельно не нужно. Видео на сайте в Tilda вставляется через ссылку, карта — через адрес или embed-код (встроенный код), форма настраивается прямо внутри блока. Разберём каждый элемент отдельно.

В каталоге блоков есть отдельная категория «Форма» — выбираете подходящий вариант и добавляете его на страницу. Внутри блока настраиваете поля: имя, телефон, email, сообщение — только то, что действительно нужно. Чем короче форма, тем выше конверсия: пользователь видит семь полей и чаще закрывает страницу. После настройки полей указываете, куда будут приходить заявки — на email или в подключённую CRM (система управления клиентами). Без этого шага форма будет работать вхолостую.

Подробнее по формы можно узнать в справочном центре Tilda: help-ru.tilda.cc

Добавить видео на сайт в Tilda напрямую из файла не получится — платформа не хранит видео на своих серверах. Сначала загрузите ролик на YouTube или Vimeo, или ряд доступных источников видео, скопируйте ссылку и вставьте её в блок с видео. Tilda сама подтянет плеер. Видео уместно там, где нужно показать продукт в действии, объяснить услугу или добавить живой голос на страницу — текст передаёт это хуже.

Подробнее по видео можно узнать в справочном центре Tilda: help-ru.tilda.cc

Карту на сайт в Tilda добавляют через блок «Контакты» в каталоге — достаточно указать адрес, и карта появится на странице. Но для корректной работы карты обычно нужно подключить API-ключ — Яндекс Карт или Google Maps, в зависимости от выбранного сервиса. Ключ добавляется в настройках сайта, без него карта может отображаться с ограничениями или не работать.

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

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

Подробнее как добавить ключ API можно узнать в справочном центре Tilda: help-ru.tilda.cc

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

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

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

Оплата на сайте в Tilda подключается через интеграции с платёжными сервисами — ЮKassa, Robokassa и другими. Настройка происходит в настройках сайта, в разделе «Платёжные системы».

Подробнее про платежные системы можно узнать в справочном центре Tilda: help-ru.tilda.cc

Отзывы на сайте в Tilda можно добавить через готовые блоки — текст с именем и фото — или подключить виджет с Яндекс Карт или 2ГИС. Виджет вставляется через HTML-блок: берёте embed-код (встроенный код) из сервиса и добавляете его на страницу.

Загрузить файл на сайт в Tilda можно через ссылку: файл размещают на стороннем сервисе и вставляют ссылку в кнопку или текст. После этого посетитель сможет скачать PDF, прайс или презентацию.

Поиск по сайту в Tilda подключается в настройках проекта — он индексирует текст на страницах и добавляет строку поиска для пользователей. Область поиска можно задать по всему сайту, по страницам, по каталогу или по потокам. Подробнее про поиск на сайте можно узнать в справочном центре Tilda: help-ru.tilda.cc

  ВАЖНО:   чтобы поиск работал, его нужно отдельно включить в настройках сайта  → вкладка «Ещё» → «Разрешить внутренний поиск по сайту».

Вставить код на сайт в Tilda можно через HTML-блок: туда добавляют счётчики, пиксели, виджеты, кастомные формы и всё, чего нет в стандартном каталоге блоков. Подробнее про вставку кода на сайте можно узнать в справочном центре Tilda: help-ru.tilda.cc

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

Домен для сайта на Тильде можно купить у стороннего регистратора — например, в RU-CENTER, Reg.ru и других, — а затем подключить его через DNS-записи. Также домен можно зарегистрировать через Tilda. Если оплачен годовой тариф Personal или Business, один домен на год можно получить бесплатно.

О том, как выбрать подходящее имя и на что обратить внимание перед покупкой, мы подробно написали в отдельной статье: «Домен сайта: как выбрать и что важно учесть».

В настройках проекта откройте раздел «Домен» и введите адрес сайта. Дальше есть два варианта: либо прописать DNS-записи у регистратора, либо делегировать домен на DNS-серверы Tilda. В первом случае платформа покажет, какие A-записи нужно указать — для основного домена и для www. Затем зайдите в личный кабинет регистратора, где был куплен домен, и внесите эти записи в настройки DNS. После этого нужно подождать от нескольких часов до суток — DNS обновляется не мгновенно.

Подробнее про подключение домена можно узнать в справочном центре Tilda: help-ru.tilda.cc

Когда домен подключится, в настройках сайта нужно перейти в раздел SEO и запустить настройку HTTPS — только после этого начнётся выпуск SSL-сертификата. Обычно это занимает от 5 до 30 минут, после чего сайт откроется по защищённому протоколу https.

Подробнее про настройку протокола https можно узнать в справочном центре Tilda: help-ru.tilda.cc

У каждой страницы есть свои SEO-настройки — они открываются в параметрах страницы. Там нужно заполнить три вещи: заголовок страницы, описание и адрес страницы. Заголовок — это то, что пользователь видит во вкладке браузера и в результатах поиска. Описание — короткий текст под ссылкой в поисковой выдаче. Адрес страницы лучше сделать читаемым: не «  /page123456  », а «  /uslugi  » или «  /o-nas  ». Это минимум, без которого страница хуже индексируется и выглядит безымянной в поиске.

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

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

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

Зайдите на metrika.yandex.ru, создайте счётчик для сайта и скопируйте его номер — восьмизначное число в настройках счётчика. Затем откройте настройки сайта в Tilda, найдите раздел «Аналитика» и вставьте номер счётчика в поле Яндекс.Метрики. Опубликуйте сайт — и через несколько минут Метрика начнёт фиксировать посещения.

Подробнее про то, как подключить Яндекс.Метрику к сайту можно узнать в справочном центре Tilda: help-ru.tilda.cc

Сразу после запуска важны не графики, а три конкретных сигнала:

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

Опубликовать сайт на Тильде — последний шаг сборки и первый шаг реальной работы. До нажатия кнопки публикации сайт существует только внутри редактора: его не видит никто, кроме вас. После этого он становится доступен по адресу, который вы настроили, и начинает работать.

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

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

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

Минимальный чек-лист после запуска: открыть сайт на телефоне и проверить, не съехала ли вёрстка; пройти по всем ссылкам в меню и убедиться, что они ведут куда нужно; заполнить и отправить форму, чтобы проверить, что заявка пришла на почту; проверить домен, если подключали свой — сайт должен открываться по https без ошибок. Это занимает несколько минут, но помогает избежать ситуации, когда форма не работала несколько дней, а это никто не заметил.

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

• Первая — страница не опубликована: проверьте, нажата ли кнопка «  Опубликовать  » именно на этой странице.
• Вторая — домен не подключён или DNS ещё не обновился: после изменения DNS-записей нужно подождать до нескольких часов.
• Третья — ошибка в настройках домена: зайдите в раздел «Домен» в проекте и проверьте, все ли записи прописаны правильно. В большинстве случаев проблема сводится к одной из этих причин, и все они решаются без технических знаний.

Запуск — не финал. После публикации сайт нужно поддерживать: обновлять тексты, менять акции, добавлять новые страницы, при необходимости передавать доступ коллеге или клиенту. Редактировать сайт на Тильде можно в любой момент — опубликованная версия живёт отдельно от той, что вы меняете в редакторе, и обновляется только после повторного нажатия «  Опубликовать  ».

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

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

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

Доступ к сайту в Tilda даётся через настройки сайта, раздел «  Сотрудники  »: добавляете email пользователя и настраиваете уровень прав. Это удобно, когда над сайтом работает несколько человек или нужно показать проект клиенту без передачи аккаунта.

  ВАЖНО:   функция добавления сотрудников платная — стоимость зависит от количества пользователей и тарифа. Подробнее про добавление сотрудников можно узнать в справочном центре Tilda: help-ru.tilda.cc

Передать сайт в другой аккаунт можно в настройках сайта, во вкладке «  Действия  »: указываете email получателя, он подтверждает перенос — и сайт полностью переходит в его аккаунт.

Отключить отдельную страницу на Tilda можно через её настройки, во вкладке «  Дополнительно  »: снять с публикации — и страница перестанет открываться для посетителей, но останется в редакторе.

Если нужно скрыть весь сайт, это делается в настройках сайта, во вкладке «  Действия  » — через пункт «  Распубликовать сайт  ».

Удалить сайт на Tilda можно там же, в настройках сайта, во вкладке «  Действия  ». Перед удалением стоит убедиться, что сайт действительно больше не нужен.

Tilda устроена так, что технических барьеров почти нет. Зарегистрироваться, добавить блоки, опубликовать — с этим справится любой. Сложность не в платформе, а в том, как выстроен сам сайт: структура, логика, тексты и путь пользователя. Если начать с редактора, а не с подготовки, почти всегда получается бесконечная переделка. Сайт, который собран по порядку — сначала структура, потом сборка, — запускается быстрее и работает лучше с первого дня.

  ВЕСЬ ПУТЬ УКЛАДЫВАЕТСЯ В ПЯТЬ ШАГОВ:  

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

Дальше сайт живёт и меняется: добавляются страницы, обновляется контент, подключаются новые инструменты. Tilda позволяет собрать сайт без разработчика, но это не гарантирует, что он будет работать как нужно. Интерфейс можно собрать, но без понимания структуры, сценариев поведения и логики взаимодействия (UI/UX — как выглядит и как работает сайт для пользователя) результат часто получается случайным.

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