Как пользоваться Тильдой: первые шаги в редакторе

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

Регистрация в Тильде и создание первого проекта

Регистрация занимает пару минут: на главной странице нужен email и пароль, подтверждение приходит на почту. После входа система предлагает создать проект, и тут выбираете, с чего начинать: с пустой страницы, с готового шаблона из каталога или с блока Zero Block, если планируете верстать дизайн сами. Для первого сайта я обычно советую взять шаблон из подходящей тематики и переработать его под себя, а не собирать с нуля, так быстрее, и шаблон сразу задаёт логику расположения блоков.

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

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

Интерфейс редактора Тильды: панели, блоки и Zero Block

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

Верхняя панель и настройки проекта

В разделе «Ещё» находятся настройки всего проекта: домен, SEO-теги, вставка кода в head и перед закрывающим body, интеграции с аналитикой, платёжные системы и способы доставки. Именно сюда я захожу, когда нужно добавить скрипт метрики или подключить оплату, а не ищу эти настройки в каждом блоке отдельно.

Обычные блоки против Zero Block

Библиотека блоков открывается по кнопке с плюсом и разбита на категории: обложки, интро, о нас, товары, отзывы, формы, подвалы. Каждый блок уже свёрстан и адаптирован под мобильные, остаётся заменить текст и картинки. Если готовая структура не подходит, беру блок Zero Block, он же T123: это пустой холст, на который элементы (текст, картинка, кнопка, форма) ставятся вручную и группируются в произвольном порядке. Для лендинга с нестандартной композицией я всегда начинаю с Zero Block, а для типовых разделов вроде «Наши услуги» быстрее взять готовый блок и подправить.

Как собрать первую страницу из готовых блоков

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

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

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

Настройка стилей, шрифтов и адаптивной версии

Глобальные настройки дизайна собраны в разделе «Ещё» -> «Стили страницы»: там задаются шрифты по умолчанию, основной и дополнительный цвета, стиль кнопок. Если поменять их тут, изменения подхватят все блоки, где не заданы индивидуальные настройки цвета.

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

Публикация сайта на Тильде: домен, SSL и оплата

Подключение своего домена и SSL

Кнопка «Опубликовать» в правом верхнем углу выкладывает сайт на технический поддомен tilda.ws, его удобно использовать для показа черновика клиенту. Для боевого запуска домен добавляется в настройках проекта: указываете его там, а в панели управления у регистратора домена прописываете DNS-записи, которые покажет Тильда. После того как записи разойдутся по интернету, обычно это занимает от пары часов до суток, Тильда сама выпускает SSL-сертификат для домена, отдельно покупать и устанавливать его не нужно.

Приём оплаты и расчёт доставки

Платёжные системы подключаются в настройках проекта, в разделе с оплатами. Там доступна Робокасса и другие платёжные системы из каталога интеграций, для подключения нужны реквизиты из личного кабинета платёжной системы, которые вписываете в поля Тильды. Доставку через Яндекс Доставку подключаете похожим образом: в настройках есть поле для токена, полученного в кабинете сервиса, и виджет расчёта стоимости появляется на странице заказа без дополнительного кода в head.

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

Доработки, когда встроенных блоков Тильды не хватает

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

Из типовых доработок, которые беру в работу: кастомный скрипт под конкретную задачу (своя логика промокодов, зон доставки или расчёт налога и НДС в заказе) от 3 000 ₽, комплексная интеграция с CRM, эквайрингом и службами доставки от 40 000 ₽. Для скриптов внутри блока Zero Block код вставляется прямо в настройках блока, а для скриптов на весь сайт (метрика, чат-виджет, внешние API) используется поле вставки кода в head и перед body в разделе «Ещё».

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

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

Частые вопросы

Сколько времени нужно, чтобы освоить Тильду с нуля?

По моей практике первый лендинг из 5-6 блоков собирается за один-два вечера, если использовать готовые блоки и не лезть сразу в Zero Block. Свободно ориентироваться в настройках стилей, форм и публикации получается примерно через несколько таких проектов.

Нужно ли знать код, чтобы пользоваться Тильдой?

Нет, весь стандартный набор блоков, форм и настроек рассчитан на работу без кода. HTML, CSS и JS пригодятся только для нестандартной вёрстки в Zero Block или для доработок вроде своей логики промокодов и расчётов, которые выходят за рамки штатных настроек.

Чем Zero Block отличается от обычных блоков?

Обычный блок уже свёрстан дизайнерами и просто заполняется вашим текстом и картинками. Zero Block, он же T123, это пустой холст, где элементы расставляются вручную в любом порядке и с любой структурой, поэтому он подходит для нестандартной композиции, но требует больше времени на сборку, чем готовый блок.

Можно ли перенести сайт с Тильды на другой хостинг?

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