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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Можно нажать кнопку 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. В его настройках можно выбрать шрифт, размер, цвет, расстояние между буквами, регистр, а также наложить эффект и сделать выравнивание.

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

Картинки

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

Фигуры

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

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

Если выбрать пункт 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 пикселей часть объектов отображается неправильно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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