Zero Block: свой дизайн без ограничений

Что такое Zero Block

Готовые блоки удобны, но все сайты на них немного похожи. Zero Block — встроенный редактор, где блок рисуют с нуля, как в графическом редакторе: любой элемент можно поставить в любое место.

Zero Block нужен, когда:

• есть макет дизайнера, и его нужно повторить точно;
• хочется необычный первый экран: фото торта, вокруг подписи с начинками, наклонная плашка «Хит»;
• нужна композиция, которой нет в библиотеке.

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

Добавить Zero Block: «Все блоки» → в самом низу списка категорий Zero Block → кнопка «Редактировать блок» откроет редактор.

Редактор

• Артборд — холст блока. Задайте его высоту и фон. Пунктирные линии показывают сетку — область, где содержимое точно видно на всех экранах.
• Элементы — кнопка «+»: текст, изображение, фигура, кнопка, видео, форма, HTML-код.
• Слои — список элементов. Верхние слои перекрывают нижние.
• Свойства справа — у выбранного элемента: положение, размер, шрифт, цвет, ссылка, прозрачность.

Элементы двигают мышью, а точное положение задают числами. Выравнивание и одинаковые отступы помогают не делать «на глаз». В Zero Block есть и автолейаут (Auto Layout), как в Figma: элементы выстраиваются в ряд или колонку с заданным отступом. Если макет нарисован в Figma, его можно перенести в Zero Block специальным импортом — не нужно собирать с нуля.

Разные ширины экрана

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

Работают так:

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

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

Анимация

В Zero Block можно анимировать элементы: появление при прокрутке, плавное движение, реакцию на наведение. Правила:

• анимация должна помогать — привлечь внимание к кнопке, показать порядок шагов;
• умеренно: если всё прыгает и выезжает, страница выглядит дёшево и раздражает;
• быстро: появление за 0,3–0,6 секунды, а не за две;
• проверяйте на телефоне: тяжёлая анимация может тормозить.