Один раз в месяц мы присылаем статьи на почту
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
Руководство по Zero Block

Как создать собственный дизайн для сайта на Тильде

Zero Block — встроенный редактор для веб-дизайна внутри Тильды. Позволяет с чистого листа нарисовать собственное оформление сайта или изменить существующие блоки. Если вы профессиональный дизайнер, вы можете создавать сайты на заказ, дополняя их своим уникальным дизайном.
Содержание

Что хорошего в Zero Block:

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

Слои. Удобный инструмент для создания глубины на странице с помощью наложения элементов друг на друга и теней.

Привязка к краям экрана или сетки.
Каждый элемент сайта можно позиционировать относительно сетки или экрана.

Сложная типографика.
У дизайнеров есть полная свобода в создании нестандартных типографических решений.

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

Видео.
Добавляйте на сайт видео из youtube или vimeo. В Zero Bock вы сможете регулировать его пропорции и положение на странице.

Вставка HTML. Добавляйте любые элементы в Zero Block при помощи вставки HTML кода и настраивайте позиционирование этих элементов на каждом экране.

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

Анимация появления элементов.
Добавляйте анимацию при появлении элементов: через прозрачность, увеличение, появление снизу, сверху, справа или слева экрана.

Параллакс. Применяйте к элементам параллакс при скролле и параллакс при движении курсора мышки.

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

В каких случаях стоит использовать Zero Block

Zero Block — удобный многофункциональный инструмент, но, прежде, чем браться за его использование, определите, какие задачи вы хотите с его помощью решить.
1. Вы нарисовали макет в графическом редакторе и хотите в точности перенести его на страницу
Если вы привыкли рисовать макет сначала в графических редакторах, то с помощью Zero Block вы сможете легко перенести его на сайт в том виде, в котором задумали. Для этого в Zero Block есть сетка в 12 колонок и индивидуальные параметры у каждого элемента: координаты, размеры, позиционирование относительно сетки (или краев экрана), параметры прозрачности и тень. Благодаря этим инструментам, вы можете воссоздать ваш макет в Zero Block.

Интерфейс Zero Block похож на интерфейс графических редакторов, вам нужно будет добавить необходимые элементы и задать им соответствующие координаты. А если вы все это уже сделали ранее, повторить это в Zero Block не составит труда. Используйте Zero Block, чтобы быстро перенести вашу задумку из графического редактора на сайт без программирования.
2. Обычных блоков не хватает, чтобы создать сайт
Если вы создаете страницу сайта или лендинг и не можете найти подходящий блок в библиотеке Тильды, используйте Zero Block. Разберем на конкретных примерах.
1. Нестандартная композиция
Сайты, созданные на Тильде, чаще всего имеют блочную структуру, предлагая посетителю скроллить вниз раздел за разделом. Это тренд унификации в веб-дизайне. На первый план выходит контент, а не дизайн.

Если вы хотите изменить подход к чтению и вести читателя другими путями, Zero Block — отличный инструмент.
Сайт Фотобукфеста оформлен колонками. Отделить контент друг от друга помогает деление страницы на зоны с помощью линий. Если разобрать эту страницу на функциональные блоки, то это обложка, меню и «о проекте», расположенные не друг за другом, а в единой композиции. Взгляд посетителя тоже считывает эти блоки последовательно, но уже не снизу вверх, а по заданному дизайнером сценарию.
На сайте интенсива по дизайну «Прорыв» программа обучения сделана как изображения с подписями. Zero Block позволяет компоновать подписи не строго под изображениями, а со смещениями и добавлять дополнительные элементы навигации, например, тонкие линии.
На сайте интенсива по веб-дизайну W.D.i рассказ о том, как проходит курс сделан с помощью колонок. Цифра является одновременно и текстом и иллюстрацией.
2. Сложные формы
Zero Block удобно использовать, чтобы собрать элементы со сложным краем в единую композицию, сделав все расстояния визуально одинаковыми.
Zero Block позволяет собрать в одну композицию и прямоугольные фотографии и вырезанные изображения. Как в блоге Fy:r Clothes.
Zero Block позволяет собрать композицию из фигур и типографики, регулируя расстояния между ними, как будто вы создаете плакат.
Обложка сайта wdi.design сделана с помощью Zero Block, чтобы расположить кнопки и ссылки в нестандартных местах и контролировать размещение сложной формы на фоне.
3. Слои
В Zero Block удобно работать со слоями — заезжать одними изображениями на другие, а также текстом на плашки, кнопками на фотографии. Используйте наложение нескольких элементов друг на друга. Каждый из них вы можете позиционировать по разным параметрам, создавая дополнительные эффекты.
На лонгриде проекта Platforma о 20-ти годах моды в Украине три слоя: фотография, текст и фотография поверх.
На сайте магазина пасты «Pasta Naturale» активно используются слои, а в сочетании с тенью под карточками, это создает глубину в пространстве страницы.
4. Много элементов вместе
Zero Block позволяет собирать сложные композиции из множества элементов — текста, изображений, линий, плашек, кнопок.
С помощью Zero Block на обложку сайта с иконками добавили крупные цифры, подписи к ним, описание, большое количество иконок и неровный край.
С помощью Zero Block на сайте проекта «Do and Go» собраны вместе и линии и фактура и текст.
На лендинге новых шрифтов на Тильде блок про каждый шрифт состоит из множества элементов.
5. Ховер
Ховер (изменение внешнего вида элемента при наведении) можно использовать как дополнительный элемент оформления или как функциональную часть статьи или инфографики.
Чтобы нагляднее показать анатомию лонгрида, на странице использованы ховеры. При нажатии на каждый из них, читатель попадает в соответствующих раздел.

3. Необходимо немного изменить стандартный блок Тильды

Когда хочется изменить что-то в обычном блоке и это нельзя сделать с помощью настроек.

Если вы выбрали стандартный блок Тильды и хотите его немного изменить или что-то добавить, а нужных параметров нет в настройках, воспользуйтесь функцией «Конвертировать в Zero Block». Тогда выбранный блок можно будет редактировать как Zero Block. Эта функция доступна для большинства блоков Тильды.

Разберем по этапам. Например, изменим блок с тарифами: вынесем иконки за пределы карточки с информацией.
1
Добавим нужный нам блок на страницу сайта.
2
Переведем его в Zero Block, нажав в настройках «Конвертировать в Zero Block».
3
Нажмем «Редактировать блок»
4
Внесем нужные изменения. В данном случае нужно обрезать плашку до середины иконок — это и есть цель перевода в Zero Block.
5
Теперь расстояние от заголовка до тарифов стало визуально больше. Выделим все карточки с тарифами и поднимем их ближе в заголовку. Также уменьшим высоту всего блока, чтобы отступ снизу оставался таким же.
6
Добавим свой контент: иконки и тексты.
7
Количество текста изменилось, теперь надо выровнять отступы и длину карточек, чтобы блок смотрелся гармонично.
8
После того, как вы внесли изменения на самом большом экране, расположение элементов на остальных экранах останется прежним. Изменится только добавленный вами контент. Так вы можете управлять всеми деталями самостоятельно и создавать совершенно разные композиции на всех экранах.

Настраиваем отображение для остальных размеров экрана от большего к меньшему.

Помните, что если вы впоследствии измените текст, нужно проверить отображение на всех экранах еще раз.
Примеры других блоков, конвертированных в Zero Block:
На сайте интенсива «Прорыв» перевели блок с тарифами в Zero Block и добавили иллюстрации и плашку на фон.
Блок «О проекте» на сайте веб-студии «Wave» перевели в зеро, чтобы добавить рамку со смещением к фотографии и фигуру на фон.
В блоке с тарифами на сайте веб-студии «Wave» изменили плашку с тенью на обводку и вынесли кнопку за пределы рамки.

Когда Zero Block не нужен

1. Если можно добиться того же результата обычными блоками
Стандартные блоки Тильды имеют много настроек. Добавьте максимально подходящий вам блок из библиотеки и, открыв вкладку «настройки», посмотрите, можно ли с помощью них добиться нужного вам результата. Возможно, Zero Block вам не понадобится.

Приведенные ниже примеры созданы из стандартных блоков Тильды.
Блок TM301 на сайте агентства InShow. Вместо фотографии вставлены целые композиции. Такие композиции можно создать в Zero Block или добавить отдельно изображением в обычный блок.
Блок FR201 на сайте проекта Forsix, где вместо иконок добавлены целые композиции, каждая из которых содержит белый круг, цифру и иллюстрации.
2. Чтобы создать адаптивные отступы для мобильной версии
В Тильде есть функция, позволяющая задавать отдельно отступы для компьютеров и мобильных устройств.
3. Если нужно изменить расстояния в обычных блоках, когда Zero Block блок сделан не по сетке
Обычные блоки Тильды располагаются по сетке из 12 колонок. Так каждому заголовку можно задать отступы, равные любому количеству колонок. Если вы создали композицию в Zero Block без учета сетки, то обычные блоки невозможно будет поставить на те же отступы без перевода в Zero Block. Например, вы создаете сайт, чередуя обычные блоки и Zero Block. При этом, если в Zero Block вы расставляете элементы без учета сетки, то элементы в обычных блоках не получится разместить на те же расстояния, что и в Zero Block. Помните, что обычные блоки Тильды можно расположить только по сетке.

При создании дизайна в Zero Block, мы советуем использовать сетку и располагать основные элементы, учитывая оси. Так Zero Block можно будет легко сочетать с остальными блоками Тильды.

Как использовать Zero Block

Рассмотрим основные возможности Zero Block.
Какие элементы можно добавить
Помимо текста, изображения, плашек и кнопок в Zero Block можно добавлять еще несколько более сложных элементов.
Видео
В Zero Block есть возможность добавить и настроить видео из YouTube и Vimeo. Можно менять размер и соотношение сторон видео, его прозрачность, задавать тень и применять анимацию.

В настройках видео можно задать автоматическое воспроизведение, включение и отключение зацикливания, задание времени начала и завершения и загрузить свою обложку.
Видео в Zero Block
Вставка HTML
В Zero Block вы можете добавить любые элементы при помощи вставки HTML кода. Например: интерактивные элементы, онлайн-запись, музыкальные плееры, календари, калькуляторы, посты из соцсетей. Можно настроить позиционирование этих элементов на каждом экране.
Tooltip
Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом или изображением. Он может быть полезен, когда вы, например, рассказываете про какой-то сложный предмет и хотите на фото описать его составные части. Или вы продаете дома в строящемся поселке — можно нарисовать схему и отметить на ней каждый участок.

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

Не забудьте после распределения всех элементов в блоке и использования тултипа проверить расположение всплывающей подсказки на всех разрешениях экранов, чтобы подсказка не обрезалась сверху или снизу блока или по его краям.
Использование тултипа для того, чтобы показать характеристики товара. Фото: SPERA.de
Как располагать элементы
У каждого элемента можно задать координаты относительно четырех сторон экрана или сетки, изменить параметры прозрачности, тени, можно повернуть элемент, а также задать ему ссылку при нажатии.
Как задавать размеры элементов
Каждому элементу можно задать размер в пикселях или в процентах от экрана. Например, вы хотите создать элемент, который вне зависимости от размера экрана всегда будет занимать его половину. В таком случае его ширину и высоту стоит задать не в px, а в %.
Какие эффекты можно применить
Zero Block таит в себе много неочевидных возможностей. Вот некоторые эффекты, которые вы можете использовать на своем сайте.
Ховеры
Для ховера (эффекта при наведении) в Zero Block используйте кнопку. Вы можете сделать ее любого размера, а, настроив параметры скругления, превратить в круг. Если вы хотите сделать ее видимой только при наведении, сделайте ее бесцветной, а для ховера выберите прозрачность 30 и любой цвет.
Расположите такую кнопку поверх элементов, на которых вы хотите настроить ховер. Это могут быть и изображения, и текст. Если нужно, задайте кнопке ссылку.
На странице Формула Landing Page цифры в кружках — черные кнопки с текстом и оранжевом цветом при наведении, а эффект на схеме — несколько прямоугольных кнопок поверх изображения.
Фиксация фонового изображения при скролле
Для того, чтобы сделать фиксацию при скролле, задайте изображению Behavior — Fixed. Эта функция доступна для изображения на фоне и для изображения внутри шейпа. Если применить этот параметр для изображения внутри плашки, то размер изображения растянется на весь экран, но его будет видно только в области шейпа. Если использовать несколько таких шейпов в блоке, то изображение в них будет продолжением одного и того же. Помните, что фиксация при скролле доступна не для всех разрешений экрана, поэтому важно проверить адаптивность страницы перед публикацией.
Вы можете сочетать фиксированные изображения и статичные для создания дополнительного эффекта и необычных сочетаний.
Лонгрид проекта Platforma о 20-ти годах моды в Украине
Длинный скролл
Чтобы создать длинный скролл, задайте высоту блока (Window container height) в процентах от высоты экрана. Например, если вы хотите, чтобы блок был высотой в две высоты экрана, поставьте значение 200.

Задайте фоновому изображению позицию fixed.

Если вы хотите, чтобы текст и другие элементы поверх изображения появлялись на странице не сразу, а в нижней части, задайте каждому элементу Container — Window container и Axis Y — Bottom. Теперь расположение элементов ориентировано на нижнюю границу изображения. Поднимите каждый из них на столько, на сколько хотите сделать их выше этой границы.
Чтобы создать длинный скролл, задайте высоту блока (Window container height) в процентах от высоты экрана. Например, если вы хотите, чтобы блок был высотой в две высоты экрана, поставьте значение 200.
Задайте фоновому изображению позицию fixed.
Если вы хотите, чтобы текст и другие элементы поверх изображения появлялись на странице не сразу, а в нижней части, задайте каждому элементу Container — Window container и Axis Y — Bottom. Теперь расположение элементов ориентировано на нижнюю границу изображения. Поднимите каждый из них на столько, на сколько хотите сделать их выше этой границы.

Анимация появления элементов

Появление каждого элемента в Zero Block можно анимировать. Мы предусмотрели шесть видов анимации:
Fade In — появление через прозрачность.
Fade In Up — появление через прозрачность снизу.
Fade In Down — появление через прозрачность сверху.
Fade In Left — появление через прозрачность справа.
Fade In Right — появление через прозрачность слева.
Zoom In — появление через увеличение или уменьшение.
У каждого вида анимации есть параметры. Разберем, что они означают.

Duration — длительность анимации в секундах. Чем больше значение, тем медленнее анимация.
Distance — расстояние от исходной точки анимации до конечного местоположения объекта. Указывается только для тех видов анимации, где объекты появляются с какой-либо стороны.
Scale — Размер элемента в начале анимации в процентах от исходного размера. Этот параметр задается при появлении через увеличение или уменьшение. Если значение больше 100 — объект изначально больше и уменьшается до основных параметров, если меньше 100 — наоборот, объект увеличивается до исходного значения.
Delay — задержка воспроизведения анимации в секундах. Если значение нулевое, анимация начнется сразу, как только блок появится на странице.
Когда может быть полезна задержка? Если значимый объект перекрывается или зачеркивается другим объектом. Если на одном экране несколько объектов с анимацией, то, чтобы она не появлялась вся сразу, поставьте каждому элементу разную задержку. Так вы сможете управлять взглядом зрителя, ведя его от одного элемента к другому.
Trigger Offset — расстояние в пикселях от нижнего края экрана, при котором элемент появляется на странице. По умолчанию анимация элемента начинается, как только он пересечет нижний край экрана. Чтобы анимация началась позже, когда объект будет в зоне видимости для зрителя, а не в самом низу, задайте расстояние от нижнего края окна, при котором начнется анимация. Если объект изначально находится на меньшем расстоянии, чем значение этого параметра, то его не будет видно, пока пользователь не проскроллит дальше.
Применение Trigger Offset к элементу в статье «10 причин дизайнеру отправиться в Хельсинки»
Когда вы задали необходимые параметры, проверьте как выглядит анимация, не выходя из редактора. Сделав активным объект, которому вы задали анимацию, нажмите «Play element» для воспроизведения анимации этого элемента и «Play all», если вы анимировали несколько объектов и хотите посмотреть, как они сочетаются.
Анимация появления элементов на обложке итогов 2017 года Tilda Publishing
Параллакс
Параллакс при скролле. Когда вы применяете к элементу эту анимацию, скорость его движения будет отличаться от скорости остальных элементов во время скролла страницы. В настройках вы можете задать скорость его движения — при маленькой скорости от 0 до 100 он будет двигаться медленнее скролла, при высокой от 100 до 200 он будет двигаться значительно быстрее.
Параллакс элементов при скролле в статье «10 причин дизайнеру отправиться в Хельсинки»
Параллакс при движении курсора мыши. Элемент, у которого задан такой вид анимации двигается в противоположную сторону относительно движения курсора. Область его движения по вертикали и горизонтали можно задать в настройках.
Параллакс элемента при движении курсора мыши в статье «10 причин дизайнеру отправиться в Хельсинки»
Фиксация при скролле
Этот тип анимации позволяет зафиксировать элемент во время скролла. Вы можете задать в настройках расстояние, в течение которого элемент будет зафиксирован (фиксация действует в пределах блока). Расстояние задается в пикселях. После скролла на указанную дистанцию элемент перестанет быть фиксированным и продолжит скроллиться вместе со всей страницей.

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

Как настроить адаптивность

Мы предусмотрели адаптацию для пяти основных видов экранов. С помощью нее ваш блок на любом устройстве будет выглядеть хорошо.

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

Создавая Zero Block с нуля, адаптивность нужно настраивать самостоятельно. Важно помнить об этом перед публикацией сайта.

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

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

Частые ошибки в использовании Zero Block

1. Не обращать внимание на адаптивность
Если вы создаете блок с нуля в зеро, то для начала стоит создать всю страницу, чтобы посмотреть, как этот блок сочетается с остальными. Но после этого не забудьте настроить его адаптивность. Если вы переводите в Zero Block и просто меняете текст, даже если на первом экране все выглядит отлично, проверьте адаптивность. Из-за разного кегля и длины строки текст на остальных экранах может выглядеть по-разному.
2. Разное позиционирование у элементов, которые находятся вместе
Если вы хотите, чтобы два элемента постоянно находились в одном положении относительно друг друга, задавайте им позиционирование относительно одних и тех же сторон либо Grid Container, либо Window Container.

Подробнее о том, как настроить позиционирование элементов, читайте в Справочном центре:
Заголовок имеет позиционирование относительно края экрана. Расстояние слева останется таким при любом размере браузера. Подзаголовок позиционируется относительно сетки. Поэтому оба текста будут каждый раз располагаться по-разному относительно друг друга.
3. Контейнер с текстом выходит за область сетки
Если вы позиционируете текст относительно сетки и хотите, чтобы он всегда оставался в пределах экрана, следите за тем, чтобы его контейнер не выходил за область сетки. Эта полезная привычка создания аккуратного макета избавит вас от неожиданностей в отображении блока.
Используйте Zero Block для создания впечатляющих сайтов и нестандартных типографических ходов. Он станет полезным инструментом для дизайнерских решений ваших проектов. Добавляйте индивидуальности сайту с помощью эффектов, типографики и непривычной композиции. Все в ваших руках!

Текст, дизайн, иллюстрации и верстка: Маша Белая
Редактура: Варя Гурова, Юлия Засс
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
Читайте также: