Обзор нулевого блока в Тильда (Zero Block)

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

Обзор нулевого блока в Тильда (Zero Block)
Как выглядит нулевой блок, только что добавленный

Итак, создаем нулевой блок. По умолчанию, Зеро Блок содержит набор элементов: пару текстовых блоков и шейпы.

Обратите внимание, что вместо кнопки “Контент” появилась кнопка “Редактировать блок”. А настройки сократились до нескольких опций.

Элементы нулевого блока

Переходим в режим редактирования и рассмотрим интерфейс нулевого блока.

Обзор нулевого блока в Тильда (Zero Block)
Инструментарий нулевого блока

Сверху слева набор инструментов

Мы можем добавить на артборт такие элементы, как:

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

Точки адаптации

Правее точки адаптации. Здесь вы видите то, как выглядит зеро блок на разных устройствах и ориентации устройства.

Обзор нулевого блока в Тильда (Zero Block)
Точки адаптациии Зеро блока

По большому счету, адаптивность блока так и настраивается: вы просто двигаетесь по брейкбоинтам и настраиваете контент в соответствии с видимой частью.

Обратите внимание, что элементы в разных точках адаптации по умолчанию наследуют свойства десктопа.

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

Элементы интерфейса

Правее точек адаптации кнопки “Сохранить”, “Закрыть” и ссылка на полную справку по Зеро Блоку. Если вы внимательно изучите этот справочный раздел, то данное видео можно не смотреть. Справка предлагает исчерпывающую информацию.

Обзор нулевого блока в Тильда (Zero Block)
Горячие клавиши, наши помощники

“Три точки” открывают дополнительные опции интерфейса в виде горячих клавиш. Здесь вы можете:

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

Панель слоев

Отдельного внимания заслуживает панель слоев, которая вызывается сочетанием клавиш CMD+L. Когда вы начинаете адаптировать нулевой блок для каждой точки адаптации, некоторые элементы могут перемешаться и наложиться друг на друга.

Обзор нулевого блока в Тильда (Zero Block)
Панель слоев, не дает запутаться

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

Настройки элементов

Ниже располагается плавающая кнопка опций. Она отображает настройки выбранного элемента или настройки артборта, если ни один элемент не выделен.

Обзор нулевого блока в Тильда (Zero Block)
Настройки зависят от выделенного элемента

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

Далее внутреннее выравнивание, типографика и цвета. Ниже непрозрачность, z-индекс, тип тега, что удобно для сео-оптимизации текстового блока, базовая анимация и пошаговая анимация.

Обзор нулевого блока в Тильда (Zero Block)
Групповое выделение элементов

Обратите внимание, что если выделить несколько элементов (делается это с помощью зажатой клавиши SHIFT или объемным выделением мышкой), появляются настройки группы элементов.

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

В левом углу дашборда показаны границы сетки и видимого окна.

Смотреть видео

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

(1 оценок, среднее: 5,00 из 5)
Загрузка ...
CONTEXT-KILL.BY