Гайды

Как работать с Zero Block в Tilda

Не ограничиваемся готовыми шаблонами, создаем уникальный дизайн
Как работать с Zero Block в Tilda

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

А для тех, кто ищет нестандартные решения, есть редактор Zero Block (от англ. zero — «нулевой») — это буквально чистый лист, на котором можно создать свой уникальный дизайн.

Разбираемся, как устроен зеро-блок Tilda и как с ним работать.

Блоки в Tilda: стандартные и нулевые

У платформы простой интерфейс: при входе сразу открываются проекты пользователя.

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

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

Список страниц сайта на Тильде

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

Библиотека блоков в Тильде
В каждом разделе есть бесплатные и платные шаблоны. На скрине — варианты обложек

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

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

Чего нельзя сделать: перемещать текстовые блоки и добавлять другие элементы. Например, поставить логотип компании в готовую обложку не получится.

Готовый блок с обложкой в Тильде
Так выглядит стандартный блок
Стандартный блок в Тильде после редактирования
А так выглядит тот же самый блок после редактирования: другая картинка, градиент и настройка непрозрачности

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

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

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

На сайте кафе с завтраками EGGSELLENT есть вот такая необычная страница, выполненная с помощью зеро-блока.

Начало страницы сайта кафе EGGSELLENT
Страница оформлена в виде карты, некоторые элементы интерактивные. Источник
Продолжение страницы сайта кафе EGGSELLENT
Такой дизайн точно нельзя назвать шаблонным. Источник

На одном сайте (и даже на одной странице) можно сочетать и стандартные, и зеро-блоки. Стандартные решения удобны для создания шапки сайта и подвала с контактной информацией, для оформления форм обратной связи, карточек товаров. Там трудно придумать что-то новое. Но чтобы нескучно подать важную информацию — например, рассказать о товаре и подсветить преимущества — зеро-блоки будут лучшим решением.

Зачем нужны зеро-блоки

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

Перенести макет из графического редактора в Tilda. Даже если нельзя импортировать проект, как в случае с Figma, можно воссоздать его вручную в редакторе Zero Block. Возможно, исходный дизайн есть смысл заказать у профессионала: главное, правильно поставить ТЗ дизайнеру и согласовать все детали.

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

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

Элементы сложной формы. В зеро-блоке их проще скомпоновать.

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

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

Сайт на Тильде со слоями
На фоне — надпись и картинки. На переднем плане — фотография мужчины. Источник

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

Сайт с яркими цветными элементами
Невероятно креативный дизайн

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

Стандартная обложка в зиро-блоке
Всегда можно взять готовое и доработать

Как работать с нулевыми блоками в Tilda

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

Создание зиро-блока через меню в Тильде
Нулевой блок в меню

Можно нажать кнопку Zero на панели в рабочем поле.

Кнопка Zero на панели в Тильде
При нажатии на кнопку появится блок

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

Конвертация стандартного блока в зиро
Кнопка конвертации находится в конце раздела «Настройки» стандартного блока

Zero Block — это встроенный редактор. Если нажать «+» в правом верхнем углу, откроется меню, через которое можно добавить текст, изображения, фигуры, видео, кнопки. Панель справа предназначена для настройки рабочего поля и параметров объектов. Например, это размер шрифта, цвет фона, расположение элементов, эффекты и прочее. Сверху — выбор размера экрана, чтобы посмотреть, как дизайн будет выглядеть с разных устройств.

Интерфейс зиро-блока в Тильде

Высота блоков регулируется настройками Grid и Window Container. 

Grid — это сама рабочая область, представляющая собой сетку в 12 колонок. Общая ширине Grid — 1200 px. Количество колонок и ширину можно изменить, пролистав меню слева до самого конца, в Zero Block Settings. Но если у вас мало опыта в дизайне, лучше довериться конструктору и оставить эти параметры по умолчанию. 

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

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

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

Настройки контейнеров для элемента в конструкторе Тильда
Если снять выделение с конкретного элемента, меню слева будет относиться ко всей рабочей области.
Настройки артборда в конструкторе Тильда

Там, например, можно задать высоту контейнера Grid: по умолчанию это 550px, но при необходимости можно сделать меньше или больше. Высота контейнера Window задается в процентах от Grid. По умолчанию это 100%. Можно, например, задать 150%. Тогда вверху и внизу блока будет пространство исключительно Window Container. а Grid будет располагаться по центру, с отступами сверху и снизу. Это может быть полезно для более гибкого расположения элементов: экспериментируйте и смотрите на результаты.

Далее рассмотрим основные элементы, с которыми предстоит работать в зеро-блоке.

Фон

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

Добавление фона в зиро-блоке
Загрузили белый фон с волнами

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

Дальше добавим элементы через меню под знаком «+».

Текст

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

Параметры текста в Тильде
Настройки текста в Tilda

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

Картинки

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

Изображения в Тильде
Параметры находятся на панели справа

Фигуры

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

Фигуры в Тильде
Настройка параметров фигур

Векторная графика

Если выбрать пункт Vector, можно будет добавить готовые фигуры сложной формы или нарисовать собственные от руки. Это пригодится, если вам на сайте нужны абстрактные декоративные элементы, иллюстрации или оригинальные плашки.

Векторная графика в Тильде
Поле для работы с векторными изображениями

Кнопки

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

Кнопки в Тильде
Кнопкам можно добавить привлекающий внимание дизайн

Из интересных фишек — функция Hover, или смена цвета кнопки при наведении курсора.

Цвет меняется при наведении

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

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

Кнопки из векторных фигур в Тильде
Кнопки из фигур могут быть любой формы

Поставили ссылку на поисковик Google.

Кнопка работает

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

Видео

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

Видео в Тильде
Добавление видеоролика

Тултипы

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

Тултипы в Тильде
Краткая ненавязчивая подсказка

Формы

Чтобы собирать заявки в одном месте, форму можно соединить со сторонними сервисами: email, Google Sheets, Bitrix24 и другими.

Формы в Тильде
Для сбора заявок

Подписи и содержание полей можно настроить.

Отредактированная форма в Тильде
Можно поменять почту на номер телефона

Галерея

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

Галерея в Тильде
Так можно компактно разместить несколько картинок в одном блоке

Как настроить адаптивный дизайн зеро-блока

Редактор Tilda предлагает адаптировать дизайн под 5 стандартных размеров экрана: 320-480, 480-640, 640-960, 960-1200 и 1200+ пикселей. Эти настройки можно поменять, нажав на иконку шестеренки вверху около изображений девайсов. Но обычно в этом нет нужды.

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

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

Нужно смириться с тем, что в зеро-блоках адаптивные версии под разные устройства придется дорабатывать вручную. Чем меньше устройство, тем больше элементов придется переделывать. На скрине ниже видно, что на экране 480-640 пикселей часть объектов отображается неправильно.

Дизайн в Тильде на экране 480-640 пикселей
Посетитель сайта совсем не увидит картинку, и заголовок не влезает

Чтобы решить этот вопрос, можно уменьшить и переместить объекты.

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

Для оценки результата есть предпросмотр проекта.

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

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

Предпросмотр сайта в Тильде
Кнопка и картинка поместились, заголовок — нет

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

Как импортировать макет из Figma в Zero Block Tilda

В Tilda разнообразие дизайн-инструментов все-таки ограничено: трудно нарисовать детализированную иконку или сверстать блок из текстов с разным форматированием. Работать в Figma над сложным дизайном гораздо удобнее. Кроме того, прямо в сервисе можно искать готовые элементы от дизайнеров Figma Community и пользоваться плагинами для автоматизации задач. 

Перенести макет из Figma в Tilda можно в несколько кликов. Заходим в настройки зеро-блока, выбираем пункт Import. Пока оставляем форму открытой.

Меню импорта Тильды

Для импорта макета нужно сначала получить API Access токен: зайти в настройки профиля в Figma и сгенерировать токен.

Настройки профиля в Figma
Заходим в настройки

Находим пункт Personal access tokens и выбираем Generate new token. 

Personal access tokens в Figma
Нужно сгенерировать новый токен

Придумываем название токена.

Название токена в Figma
Назовем «Тильда»

Копируем токен и ссылку на Frame и вставляем их в форму в Tilda. 

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

Фреймы в Figma
Ширина исходного фрейма — 1400. Справа — уменьшенная копия

Вставляем ссылку в поле в Tilda.

Импорт из Figma в Тильде
Ссылка и токен

Макет появился в нулевом блоке.

Фрейм, перенесенный в Тильду

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

Загрузка картинки из Figma

Теперь все элементы можно перемещать, редактировать, привязывать к ним ссылки.