Zero Block: создание собственных блоков
Часть первая. Начало работы.
Видеоурок
Работа с нулевым блоком
Посмотрите видеоурок о том, как работать с нулевым блоком или прочитайте подробную инструкцию ниже.
«Нулевой» блок (Zero Block) — это профессиональный редактор внутри Тильды, который позволяет реализовать любую идею, создавая блоки с собственным дизайном. Это как популярные графические редакторы. Только в Тильде.
Вы уже тут!
Проскрольте, чтобы начать читать
1
Как добавить «нулевой блок»
Чтобы добавить «нулевой» блок на страницу, нажмите кнопку Zero внизу страницы. Либо выбeрите его в библиотеке блоков — он находится в самом низу, после категории «Другое».
Zero Block сохраняет основные функции обычного блока — его можно копировать, перемещать, удалять, прятать. У него есть настройки. Только вместо кнопки «Контент» кнопка «Редактировать блок». Ее нужно нажать, чтобы начать редактирование блока, откроется редактор.
2
Общее представление об интерфейсе
В «нулевом» блоке две рабочих области или два «контейнера»: область сетки — Grid Container и Window Container — условное обозначение границ экранов браузера.

В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если включить привязку объектов к Grid Contaner и располагать элементы внутри Grid Container, то они всегда будут в границах 12 колонок, независимо от размера экрана.
Grid Container — это основная, главная рабочая область.
3
Добавление и редактирование элементов
Чтобы добавить элемент на страницу, нажмите «плюс» в левом верхнем углу. Вы можете добавить текст, изображение, объект или кнопку.
Изображение также можно добавить, перетянув картинку из папки в область блока.
Редактирование элемента мышкой
В Zero Block поддерживаются все основные манипуляции, выполняемые с помощью мышки: элементы можно перемещать, менять размер, копировать (зажав клавишу Alt), выделять несколько объектов.
В элементах с изображением можно поменять размер, но пропорции исходной картинки всегда сохранятся.

В элементах с текстом высота меняется автоматически, в зависимости от объема текста.

Размер кнопки и фигуры меняется во всех направлениях.
Для операций с несколькими объектами нажмите: Cmd+A (выделить все объекты), либо, удерживая Shift, выделите мышкой те объекты, с которыми нужно работать.
Когда выделено несколько объектов, их можно выровнять по горизонтали и по вертикали относительно друг друга или относительно контейнера
Редактирование элемента с клавиатуры
Редактирование с клавиатуры значительно ускоряет работу, поэтому мы рекомендуем пользоваться горячими клавишами.
Поменять тип экрана
Спрятать сетку
Спрятать настройки
Спрятать управляющие элементы
Отмена последнего действия
Сохранить
Копировать элемент
Вставить элемент
Переместить элемент
Удалить элемент
Изменить прозрачность
Заблокировать элемент
Изменить размер шрифта
Изменить межстрочное расстояние
Изменить межбуквенное расстояние
Выделить все
⌘+1...5
G
TAB
F
⌘+Z
⌘+S
⌘+C
⌘+V
(Shift+) ←↑→↓
Backspace
0...9
L
+ / –
⌘+ ↑ / ↓
⌘+ ← / →
⌘+A
(На Windows используйте Ctrl вместо ⌘)
Также список горячих клавиш вы найдете в контекстном меню «нулевого блока».
Редактирование через панель настроек
(Клавиша TAB)
1
Текст
Полные настройки элемента открываются при клике на кнопку Settings в правом нижнем углу экрана.
Открывать / закрывать панель настроек можно нажатием клавиши Tab.
По умолчанию панель настроек всегда свернута, чтобы рабочее пространство было свободнее.
Верхний ряд кнопок служит для быстрого выравнивания элемента относительно контейнера по вертикали и горизонтали.

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

Начало координат обозначено синим крестиком.

Здесь же параметры элемента: ширина и высота. Единицы измерения — пиксели.
Чтобы поменять размер шрифта, используйте клавиши –/+
Cmd+стрелки вверх-вниз меняют межстрочное расстояние.
Cmd+стрелки влево-вправо меняют межбуквенное расстояние.
Чтобы скопировать элемент, зажмите Alt и потяните его.
Прозрачность удобно регулировать с помощью клавиш:
1 — 10%
2 — 20%
...
0 — 100%
2
Изображение
При загрузке картинка принимает размер фрейма, в который она загружается. Кнопка Original size в настройках возвращает изображению исходный размер.
Если вы хотите сделать фото в круге, задайте изображению радиус скругления.

Чтобы получился ровный круг, исходное фото должно быть квадратным, а радиус скругления равен половине длины стороны. То есть если у картинки размер 100×100 px, задайте радиус 50.
Для изображения можно добавить тень. Для этого в настройках выберите цвет тени, прозрачность, смещение по оси x и y, степень размытия и рассеивания.
Каждому изображению можно задать aльтернативный текст (тег alt). Поисковые системы воспринимают альтернативный текст как ключевые слова и учитывают их при индексации. Напишите текст таким образом, чтобы он был релевантен содержанию сайта в целом и отражал содержание картинки.
Любое изображение можно сделать ссылкой — чтобы при клике на него пользователь переходил на другую страницу. Укажите в настройках ссылку и назначение: открывать в том же окне или в новом.
3
Фигура
При добавлении фигуры на странице появляется квадрат, который можно трансформировать в прямоугольник, окружность или линию.

Прямоугольник: измените длины сторон, потянув мышкой за контрольные точки.
Либо задайте значения в настройках элемента.
Окружность. Чтобы получился круг, задайте в настройках радиус скругления, равный половине длины стороны квадрата.
Линия. Задайте в настройках высоту прямоугольника 1-5 px, получится линия.
Фигурам можно задавать тень, обводку и ставить на них ссылки.
4
Кнопка
У кнопки меняется размер, цвет, радиус скругления. Можно сделать обводку и добавить тень.

Надпись на кнопке и ссылка задаются в настройках. Там же настраивается типографика: размер, тип, насыщенность и цвет шрифта.
Кнопке можно задать реакцию: при наведении мышкой на кнопку она будет менять цвет фона, текста или обводки.
4
Адаптация дизайна для разных экранов
Мы предусмотрели адаптацию для основных типов экранов:
1200 – max (компьютеры)
980 – 1200 (планшет горизонтальный)
640 – 980 (планшет вертикальный)
480 – 640 (смартфон горизонтальный)
320 – 480 (смартфон вертикальный)

Этого достаточно, чтобы ваш дизайн отображался корректно на всех устройствах.

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

На примере ниже у текстового элемента все настройки серые. Это значит, что для текущей версии экрана они остались точно такими же, как для предыдущей.
Если в данной версии экрана мы поменяем размер шрифта и координаты, то значения перестанут быть бледно-серым. Это значит, что они свойственно только этому экрану.
5
Настройки артборда
Если кликнуть в пустое место, то в настройках будут отображаться настройки артборда.

Высота Grid Container. Задается в пикселях с клавиатуры. Также ее можно поменять потянув мышкой за край контейнера. Ширина Grid Container фиксированная и равна 1200 px.
Цвет фона. В настройках артборда можно задать цвет фона всего блока.
Фоновое изображение. В настройках артборда можно загрузить картинку в качестве фона для блока.
Здесь же можно настроить тонирование фонового изображения (Filter Start / Filter End) и поведение контента относительно фонового изображения: Если поставить значение Fixed, то контент (текст, фигуры) во время скрола будет смещаться, а изображение — оставаться на месте.
Мы рассмотрели основные, базовые настройки и функции редактора Zero Block. Во второй части руководства мы разберем более сложные настройки, связанные с отзывчивым веб-дизайном.
часть вторая
Отзывчивый дизайн
Made on
Tilda