МОДУЛЬ 4
Z E R O
B L O C K
Разбор основного функционала
Zero Block
Основная особенность:
индивидуальная разработка лендинга
Zero block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Выбор элемента
Создать Zero Block (Нулевой блок)
слева вверху выбрать нужный элемент:
Add Text (текст)
Add Image (фото)
Add Shape (квадрат, круг, линия)
Add Button (кнопка)
Add Video (видео)
Add Tooltip (всплывающая подсказка)
Add HTML (код)
Add Form (обратная связь)
Add Galler (галерея из нескольких фотографий)
Settings (параметры)
(внизу блока справа)
Это настройки непосредственно
каждого элемента в блоке!
Например, текст:
Container:
Grid Container (cетка 12 столбцов)
Window Container (все окно экрана)
Axis Х/Y: Относительно какой линии будет выравнивание
Color (цвет)
Size (размер)
TypeFace (шрифт)
Weicht (жирность шрифта)
Spacing (Расстояние)
Opacity (прозрачность)
Rotate (смещение надписи в любое положение по вертикали/горизонтали)
Arrange (Положение надписи относительно например фото, где именно будет расположено: позади/спереди)
Actions (Действия): Copy (копия), Delit (удалить), Look (замок, чтобы не двигался элемент)
Link (ссылка)
Tag (для Seo продвижения)
Например, фото:
Container:
Grid Container (cетка 12 столцов)
Window Container (все окно экрана)
Axis Х/Y: Относительно какой линии будет выравнивание
Opacity (прозрачность)
Rotate (смещение фото в любое положение по вертикали/горизонтали)
Arrange (Положение надписи относительно например фото, где именно будет расположено: позади/спереди)
Actions (Действия): Copy (копия), Delit (удалить), Look (замок, чтобы не двигался элемент)
Link (ссылка)
Border (бордюр: цвет рамки вокруг фото)
Brdr. Size (размер рамки)
Radius (закругление рамки)
Style (стили рамки)
Shadow (тень элемента)
Blur (размытие тени)
Spread (распространение тени)
Alt (для Seo-продвижения)
Zoomable (по щелчку мыши будет загрузка картинки)
ADD Tooltip
(Всплывающая подсказка)
Всплывающая подказка
Варианты подсказок: Settings - Icon
Question
Info
Plus
Star
Сamera
Image file
Вопрос
Информация
Плюс
Звезда
Фото
Свое изображение
В Zero-блоке две рабочих области сетки — Grid Container и Window Container — условное обозначение границ экранов браузера.
В Grid Container используется сетка 12 колонок (1200 px). Если включить привязку объектов к Grid Container и располагать элементы внутри Grid Container, то они всегда будут в границах 12 колонок, независимо от размера экрана.
Если вы хотите, чтобы ваш блок занимал всегда 100% высоты экрана, для этого нужно задать высоту Window Container, отличную от высоты Grid Container. Соответственно, нужно в настройках артборда указать 100% высоты для Window Container.

Для отображения сетки в Zero-блоке достаточно нажать клавишу G, также нажатие на эту клавишу снимает сетку.
Для вызова в стандартных блоках сетки:
Настройки блока - В самом верху: в Тильде используется 12-колоночная сетка. Задайте ширину и левый отступ по сетке в настройках ниже.
Cетки
1
2
3
4
5
6
7
8
9
10
11
12
Grid Container
Window Container
В Zero-блоке вызов панели со слоями: Ctrl+L
Либо в самом вверху справа ... - Show Layers
Слои можно менять местами.
Cлои
ВАЖНО! Сначала выбираем из стандартных блоков, а после переделываем!
Если же наоборот, то при конвертации, все набранное на стандартном блоке слетит.
Совместное использование
Zero Block и стандартные блоки
Чтобы ускорить дизайн, то можно выбрать более подходящий блок из стандартных.
В настройках (в самом внизу):
Конвертировать в Zero Block.
Далее меняем и добавляем необходимое, адаптируем под разные устройства. Сохраняем, публикуем и проверяем.
ГЛАВНОЕ ПРАВИЛО:
НЕ УДАЛЯТЬ ЭЛЕМЕНТЫ НА АДАПТАЦИИ!
Адаптация под разные устройства
Если удалить элемент с одной адаптации, то исчезнет на всех устройствах.
Шрифт на мобильной и планшетной версии уменьшить и на данных версиях лучше смотрится выравнивание по центру.

Для выравнивания элементов использовать направляющие:
Ctrl + Shift + H вертикальная направляющая;
Сtrl + H горизонтальная направляющая
ЗАДАНИЕ 4
1
К своему проекту разработать страницу конвертируемую из стандартного блока в ZERO
2
К своему проекту разработать страницу из ZERO-блока