что такое zero block в тильде
Почему стоит освоить Зеро – преимущества и возможности
Часто лендинги для предпринимателей — тёмный лес. Страшно, непонятно и ещё сверстать надо! А если хочется свой дизайн, а не стандартный, то вообще жутко. На самом деле, всё не так страшно. Специалист по лендингам Олеся Зайко рассказала, как с помощью зеро-блоков Тильды собирать нужные блоки лендингов, которых нет в шаблонах. Время на прочтение — около 11 минут.
Чтобы быстро выйти в онлайн, понадобится масса инструментов. В конце статьи или прямо сейчас скачайте бесплатную подборку из 116 сервисов, которые облегчат работу с текстами, изображениями, видео и аудио
Когда я делала свои первые лендинги, я не использовала зеро-блок. Он меня пугал. Нет, серьёзно, я открывала его, смотрела на эти шаблонные картинки с надписями – и сразу же закрывала.
Теперь как минимум половину блоков я собираю в зеро. Его ещё называют нулевым блоком. Более того, я подумываю о том, чтобы перейти на вёрстку в зеро полностью, не используя готовые блоки.
Что же изменилось? Я увидела те возможности, которые даёт зеро-блок. Мне нравится гибкость его настроек. И то, что в нём можно сверстать любой дизайн.
И, как ни странно, мне нравится его простота. То, что меня останавливало вначале – «ничего не понятно, не буду даже разбираться», оказалось несложным при самой сборке.
Итак, эта статья для тех, кто уже пробовал работать в Тильде, и для тех, кто в глаза не видел эту платформу. Для тех, кто уже собирал в зеро-блоке какие-то простые вещи, и тех, кто открыл и сразу закрыл его в смятении.
Я пройдусь кратко по основным возможностям зеро и покажу пошагово создание визитки с помощью основных функций зеро-блока.
Возможности нулевого блока почти безграничны. Моя задача не написать учебник, а показать то, чем пользуюсь я. В конце статьи подскажу несколько ресурсов, с помощью которых вы сможете изучить работу в зеро-блоке подробнее.
Когда без зеро-блока не обойтись
Когда я говорю «не обойтись», я, конечно, немного лукавлю. Нет ничего такого, без чего категорически нельзя справиться. Тильда хороша тем, что стандартные блоки дают довольно широкий спектр функций.
С другой стороны, всё зависит от цели лендинга. Да, иногда нужно сделать страницу быстро и просто. Но с каждым новым сайтом хочется создавать более интересные проекты. И тут зеро-блок становится действительно необходим.
Итак, ситуации, в которых нужен зеро-блок:
Типовые блоки не всегда позволяют установить шрифт для каждого экрана. Итог: на десктопе будет крупный шрифт, а на планшете – мелкий. А на телефоне – мельчайший. Это неудобно.
К тому же отображение заголовков в стандартных блоках часто бывает разным. На слайдере с фотографиями – один вариант, а на блоке с преимуществами – другой. На блоке «Наша команда» – третий, а в блоке «Этапы работы» – четвёртый. И да, каждый вариант ещё и по-разному отображается на мобильных гаджетах. Поэтому я, бывает, удаляю заголовки со стандартных блоков и создаю одинаковые зеро с единообразным шрифтом для каждого типа экрана.
Лайфхак
Важно – перед тем, как переводить имеющийся блок (особенно, если вы уже изменили там текстовую часть и добавили свои картинки) в зеро-блок, сделайте одну вещь. Она сэкономит вам кучу времени и нервов.
Продублируйте блок, который собрались перекидывать в зеро. И только когда у вас появится два одинаковый блока, переводите в зеро только один из них.
Для чего это делается?
Дело в том, что перевод стандартного блока в зеро – необратимый процесс. Там нет кнопки «Вернуть всё как было». Более того, это обнуляет всю информацию, которую вы уже внесли в ваш стандартный блок. После перевода в зеро вы увидите болванку, черновик этого блока.
Да, есть кнопка «Отменить» справа наверху. Но по неизвестным причинам она не всегда срабатывает. И если вы решите, что передумали работать в зеро, то можете не вернуть тот блок, с которым работали.
Другое дело, если вы продублировали информацию. Тогда у вас останется и стандартный блок, и новый зеро. Потом просто удалите тот, который не нужен.
Начало работы в нулевом блоке и его возможности
Чтобы добавить зеро, нужно нажать на «+» и в списке блоков спуститься вниз – там будет возможность добавить нулевой блок.
Нажмите слева на «Редактировать блок». Вы увидите вот такой нарядный шаблон:
А теперь внимание. Всё, что есть на экране – удаляйте. Ctrl+A, Delete. Пусть останется только чистый лист.
Теперь давайте посмотрим, что можно добавить в этот блок. Нажимайте на «плюс» слева наверху.
Мы видим, что в нулевом блоке можно добавлять:
То, как настраивать каждый из этих пунктов, можно найти в Руководстве Тильды.
Я хочу показать, как собрать и адаптировать самый простой экран в зеро-блоке: добавить фотографию, подпись, кнопку.
В нулевом экране можно за пять минут (реально за пять, я засекала) собрать самую простейшую визитку.
Как собрать простую визитку в зеро-блоке
Делай раз. Добавляю свою фотографию
Делай два. Добавляю текст
Фото есть, надо сделать подпись. Тут всё просто: нажать сверху слева на «+» и выбрать Text.
Пишите здесь всё, что ваша душа пожелает. При нажатии на текстовый элемент переходите в его настройки. Это та же кнопка Settings справа внизу.
Здесь вы можете изменить цвет, размер и другие характеристики, а также выровнять текст с помощью вкладок Left, Center, Right.
Вот несколько важных нюансов:
И, конечно, помните, что визитка – не то место, где можно вгонять в тупик читателя. Пусть текст будет простым и понятным.
Делай три. Добавляю телефон
Здесь можно указать свой телефон и сделать номер в виде активной ссылки. Для этого я создам новый текстовый элемент. И в настройках укажу ссылку в формате: tel:+7123456789 (все без пробела). Это нужно сделать в настройках в поле Url.
Делай четыре. Добавляю кнопку
Чтобы добавить кнопку, я нажимаю на «+» слева наверху и выбираю Add Button.
Появляется чёрная кнопка с надписью «Let’s go!», которую, конечно же, надо поправить.
Для этого я щёлкаю по кнопке и захожу в Settings. Там я:
Адаптация для разных экранов
Самой большой ошибкой было бы остановиться на первых четырёх шагах сборки визитки. И я видела лендинги, где не настроена мобильная вёрстка – нет зрелища печальнее.
Поэтому, не выходя из режима редактирования зеро-блока, нужно поправить отображение экрана для разных разрешений.
Править нужно вручную, перетаскивая и меняя размер и выравнивание элементов – не забывая нажать на Save справа наверху.
Проверка вёрстки
После того, как вы всё собрали и нажали «Опубликовать», хорошо бы проверить, как выглядит страница на разных экранах.
Часто здесь ждут сюрпризы. То, что хорошо смотрится на одном экране, выглядит плоховато на других, надо переделывать.
Проверить это можно так.
Полезные ресурсы
Зеро-блок так прекрасен и всемогущ, что его можно изучать почти бесконечно. Я постаралась показать вам самые простые вещи. Считаю, что начинать можно с малого, а уже по ходу дела разбираться более подробно.
Приведу здесь ресурсы, которыми пользуюсь.
Всем удачи в создании своих страниц и сайтов. Добавляйтесь ко мне в Фейсбук, будем общаться.
Больше полезных материалов и поддержка предпринимателей в Клубе «Маркетинга с азов» и Телеграм-канале.
Нулевой блок, или Zero Block в сервисе Tilda
Нулевой блок (Zero Block) — редактор в Тильде, позволяющий реализовать разнообразные концепты и идеи, создавать блоки для индивидуального адаптивного дизайна сайта и редактировать каждый элемент в них. По функциональности не уступает популярным профессиональным графическим редакторам.
Можно собрать полноценный сайт или лендинг на Tilda только из нулевых блоков или миксовать их с обычными блоками Тильды. Теперь подробнее рассмотрим интерфейс зеро блока и разберем его функционал.
Создание Zero Block
Рис. 1. Добавляем зеро блок
Переходим в меню блоков, в самом конце меню под вкладкой «Другое», находим «Нулевой блок».
Вот так выглядит добавленный зеро блок. По умолчанию в нем уже содержится ряд элементов – это шейп-файлы и блоки с текстом.
Рис. 2. Вид зеро блока
Главные функции стандартного блока сохраняются: вырезать, удалить, копировать, скрыть или переместить. Присутствуют привычные «Настройки», но кнопка «Контент» заменена кнопкой «Редактировать блок», при нажатии на нее открывается рабочая область — артборд, состоящий из 2 рабочих областей: Grid Container и Window Container.
Первая — это основная рабочая область, сетка, состоит из 12 колонок, как и в Тильде.
Рис. 3. Редактирование нулевого блока.
Вторая область — обозначает границы окна браузера. Ширина Grid Container фиксированная – 1200 px, регулировать высоту можно при помощи мышки, или прописав в настройках нужное значение. При клике на пустую область, отобразятся настройки артборда, можно поменять цвет блока или добавить фоновое изображение.
Набор инструментов
Переходим в режим редактирования, нажав в левом верхнем углу экрана кнопку «Плюс». Открывается инструментарий нулевого блока. Состоящий из следующих элементов:
Text – текстовый блок, можно выбрать шрифт, поменять цвет, настроить межстрочное или межбуквенное расстояние и т.д.
Image – добавляет изображение, редактирует размер и форму, может задать ссылку на изображении, кликнув посетитель попадает на адресную страницу.
Shape – объект (по умолчанию квадрат) трансформируемый в другие геометрические фигуры (окружность или прямоугольник). На фигуры можно ставить ссылки, менять цвет, обводку или тень.
Button – кнопка, меняется ее внешний вид (форма, размер, цвет, настраивается типографика), добавляется текст и ссылка, устанавливается реакция при нажатии или наведении (цвет надписи или фона меняются).
Video – размещает на страницу видео-файлы с популярных видеохостингов (Youtube, Vimeo). Расположение и размеры плеера настраиваются.
HTML – добавляет сервисы, виджеты и другие элементы на страницу сайта с помощью HTML-кода.
Tooltip – всплывающая при нажатии или наведении курсора интерактивная подсказка (текст или изображение), настраиваются анимация, цвет, тень и размер.
Form – форма обратной связи с функцией подключения сервисов приема данных.
Gallery – устанавливает слайдер фотографий, количество изображений, размер и положение настраиваются. Воспроизводится по клику или автоматически.
Для доступа ко всему функционалу настроек, нажмите кнопку «Settings» в правом нижнем углу экрана или клавишу Tab на клавиатуре, откроется панель настроек. Изначально она свернута, чтобы визуально освободить рабочее пространство.
Адаптация дизайна для экранов
Настроить адаптив можно переключив точки адаптации, расположенные вверху экрана. Проверяем, корректность отображения на устройствах с разным размером экрана.
После создания дизайна переключитесь на экраны представленных размеров, чтобы посмотреть как страница выглядит на смартфонах, планшетах или компьютерах. Если объекты расположены неправильно, можно поправить их, правильно расположив элементы, настроив высоту артборда, размер изображения или ширину текстовой колонки.
Горячие клавиши
По словам разработчиков и дизайнеров, использование горячих клавиш заметно ускоряет работу, их список можно увидеть на фото выше или непосредственно в контекстном меню нулевого блока. На Windows вместо «Command» используйте Ctrl. Запомнив сочетания клавиш, сможете выполнять работу быстрее и продуктивнее, не прибегая к помощи мыши. Они позволяют сохранять, вставлять, копировать и перемещать элементы. Отменять последнее действие, изменять межстрочные и межбуквенные расстояния, размер шрифта и др.
Zero Block на Tilda — что это и как работает
Можно ли создать собственный дизайн на Tilda?
Сервис Tilda многими воспринимается только в качестве обычного конструктора сайтов, на котором по-быстрому можно сложить сайт-визитку или незамысловатый лендинг.
Что касается дизайнеров, то Tilda многие просто не воспринимают всерьез.
Дизайн? Да, ну! О чем вы говорите? Какой может быть дизайн на конструкторе сайтов? Там стандартные, уже придуманные кем-то блоки, разгуляться воображению дизайнера там негде, да и инструментов подходящих нет.
Давайте попробуем разобраться, может ли этот сервис быть полезен дизайнеру.
Как оказалось, возможность создания уникального дизайна в Tilda есть, и дает эту возможность инструмент, который называется Zero Block, который появился еще в 2016 году.
Его создание было продиктовано потребностью уйти от шаблонов, сделать дизайн и сайт уникальными. С 2016 года этот инструмент совершенствовался, обрастал новыми функциями, которые давали ему новые разнообразные возможности.
И как-то незаметно для стороннего взгляда «из так себе» инструмента превратился в «вполне себе хороший» дизайнерский инструмент с широким функционалом и большими возможностями.
Давайте остановимся на функционале и возможностях Zero Block.
Можно ли с Zero Block создать дизайн сайта с нуля
Zero Block — это браузерный профессиональный встроенный редактор для веб-дизайна, позволяющий с нуля отрисовать любой сайт.
В нем вы можете самостоятельно проектировать свои уникальные блоки для сайта, пользуясь всем набором его средств и способов. С его помощью можно создавать дизайн сайтов-визиток, промо-сайтов, лендингов и даже небольших интернет-магазинов. Этот редактор в состоянии освоить как обычный пользователь, так и профессиональный дизайнер.
При работе с этим редактором в момент создания дизайна вы сразу можете видеть и при необходимости корректировать свою работы, так как результаты ваших действий сразу публикуются на сайте.
На Tilda вы работаете в онлайн-режиме, то есть сразу можете посмотреть, как будут выглядеть, например, анимации на сайте. Перед вами не картинка, а актуальная версия сайта в реальном времени.
Так что же можно делать с редактором Zero Block. С этим редактором можно:
Какие задачи можно решать с помощью Zero Block
Вы можете быстро перенести ваш макет из любого графического редактора.
Вы можете создать свой собственный блок на сайте с уникальным дизайном, используя нестандартную компоновку элементов и незаезженную композицию, сложные формы и их комбинации, слои, возможность совмещения нескольких элементов вместе, ховер.
Вы можете изменить уже существующий стандартный блок Tilda. Если у вас не получится изменить стандартный блок, используя настройки, можно использовать функцию «Конвертировать в Zero Block». После этого вы легко сможете отредактировать блок, получив уникальный результат.
Но здесь следует заметить, что первоначально надо изучить функционал изменения стандартных блоков, он очень широк, и часто бывает его вполне достаточно, чтобы получить желаемый результат, не прибегая к Zero Block.
Какие дополнительные эффекты можно получить с Zero Block
В части дополнительных эффектов, которые может получить дизайнер, используя Zero Block, можно выделить:
Вывод
Создавая дизайн в Tilda, вы практически получаете уже готовый к работе сайт. Вам не нужно беспокоиться о верстке, движке для сайта, об устранении багов и др. Проект запускается во много раз быстрее.
В Tilda можно создавать проекты в одиночку, начиная от дизайна и заканчивая запуском готового сайта в работу. Это значительно экономит время, так как нет необходимости согласовывать различные рабочие моменты с участниками проекта. При желании можно привлечь профильных специалистов: копирайтеров, программистов и др.
В Tilda дизайнеру не надо думать о том, как будет выглядеть сайт на различных устройствах и в разных браузерах. Сайт будет адаптивным без дополнительных настроек. Причем, ничего не надо делать вручную. Адаптивный дизайн создается автоматически, подстраиваясь под устройство. Сайт будет корректно отображаться на различных устройствах, а также одинаково хорошо открываться в разных браузерах.
Наконец, в Tilda дизайнеру можно воспользоваться всем функционалом и широкими возможностями Zero Block, о которых мы рассказали выше.
Таким образом, использование Zero Block для создания уникального дизайна эффективно и имеет много безусловных плюсов. Zero Block может стать чрезвычайно полезным инструментом, который поможет претворить в жизнь ваши дизайнерские замыслы
Zero Block: How to Create a Custom Block
How to set up an element animation that runs when you click or hover over another element
How you can automatically import a layout from Figma into Zero Block
A Zero Block has two workspaces, or containers: the Grid Container and Window Container, which indicate a browser screen’s boundaries.
The Grid Container supports the same grid as Tilda— 12 columns (1200 px). If you align objects to the grid and locate elements inside the Grid Container, they will always remain within the boundaries of 12 columns regardless of the screen size.
You can resize an image element without changing its proportions.
The height of the text elements changes automatically depending on the text volume.
The sizes of buttons and shapes can be changed in all directions.
Use the upper button row to align an element vertically or horizontally to the container quickly.
You can see the element’s coordinates below. They can be given in pixels or percent. Below we are reviewing this feature in detail.
The origin is indicated with a blue cross.
You can also view the element’s parameters: width and height, measured in pixels.
If you want to crop the image in a circle shape, set the rounding radius.
To make an even circle, the original image should be of a square shape, and the rounding radius should be equal to half of the side. For example, if the image’s size is 100×100 px, set a radius equal to 50.
When you add a shape, a square appears on the page, which can be transformed into a rectangle, a circle, or a line.
Rectangle : change side lengths by dragging the control points.
You can change the button’s size, color, and rounding radius. You can also add a shadow and a border to it.
You can set the button’s caption and link in the Settings panel of the element. There you can also set its size, type, opacity, and font color.
Tooltip is an interactive block element that displays a text hint and/or an image when you hover the pointer over it.
You can adjust the tooltip’s color, shadow, size, set the icon displayed inside the circle, upload the image that will pop up when you hover the pointer over it, and create an animation.
Be sure to check the tooltip’s location on all screen resolutions after arranging the elements in the block so that the tooltip is not cut off at the edges of the block.
Обзор нулевого блока в Тильда (Zero Block)
Привет, ребята! На связи Евгений Тридчиков, и в этом видео мы разберем работу с нулевым блоком на платформе Тильда. Напомню, что в прошлом видео мы изучили настройки готовых блоков.
Итак, создаем нулевой блок. По умолчанию, Зеро Блок содержит набор элементов: пару текстовых блоков и шейпы.
Обратите внимание, что вместо кнопки “Контент” появилась кнопка “Редактировать блок”. А настройки сократились до нескольких опций.
Элементы нулевого блока
Переходим в режим редактирования и рассмотрим интерфейс нулевого блока.
Инструментарий нулевого блока
Сверху слева набор инструментов
Мы можем добавить на артборт такие элементы, как:
Точки адаптации
Правее точки адаптации. Здесь вы видите то, как выглядит зеро блок на разных устройствах и ориентации устройства.
Точки адаптациии Зеро блока
По большому счету, адаптивность блока так и настраивается: вы просто двигаетесь по брейкбоинтам и настраиваете контент в соответствии с видимой частью.
Обратите внимание, что элементы в разных точках адаптации по умолчанию наследуют свойства десктопа.
Вы можете изменить свойства элемента в определенной точке. При этом свойство элемента в других брейкпоинтах останется неизменным.
Элементы интерфейса
Правее точек адаптации кнопки “Сохранить”, “Закрыть” и ссылка на полную справку по Зеро Блоку. Если вы внимательно изучите этот справочный раздел, то данное видео можно не смотреть. Справка предлагает исчерпывающую информацию.
“Три точки” открывают дополнительные опции интерфейса в виде горячих клавиш. Здесь вы можете:
Панель слоев
Отдельного внимания заслуживает панель слоев, которая вызывается сочетанием клавиш CMD+L. Когда вы начинаете адаптировать нулевой блок для каждой точки адаптации, некоторые элементы могут перемешаться и наложиться друг на друга.
Панель слоев, не дает запутаться
Чтобы не запутаться, помогает панель слоев. Здесь можно перетаскивать слои, то есть элементы, относительно друг друга, блокировать от редактирования, скрывать/отображать выбранные слои.
Настройки элементов
Ниже располагается плавающая кнопка опций. Она отображает настройки выбранного элемента или настройки артборта, если ни один элемент не выделен.
Настройки зависят от выделенного элемента
Настройки зависят от типа выбранного элемента. Для вашего удобства они разбиты на разделы. Вверху блок выравнивания. Ниже позиционирование, где можно задать положение относительно координат сетки или окна.
Далее внутреннее выравнивание, типографика и цвета. Ниже непрозрачность, z-индекс, тип тега, что удобно для сео-оптимизации текстового блока, базовая анимация и пошаговая анимация.
Групповое выделение элементов
Обратите внимание, что если выделить несколько элементов (делается это с помощью зажатой клавиши SHIFT или объемным выделением мышкой), появляются настройки группы элементов.
Здесь вы можете выровнять элементы относительно друг друга или относительно сетки контейнера.
В левом углу дашборда показаны границы сетки и видимого окна.
Смотреть видео
В следующем видео мы разберем варианты анимации. Если видео получилось полезным, поделитесь с коллегами! С вами был Евгений Тридчиков, и я желаю вам великолепного дня!