Tilda — как настраивается модульная сетка в Zblock
Тильда хороша тем, что можно гибко настраивать модульную сетку и задавать нужные параметры как для страниц, так и для отдельных блоков.
Сетка помогает нам выстраивает будущую структуру дизайна страницы и ускоряет рабочий процесс. Он создает единое расположение элементов и блоков на странице и поддерживает визуальную красоту.
Tilda использует 12-колонок. Чтобы сделать нужную сетку, идем к опции Zero Block Artboard
далее Blackboard Settings и Zero Block Settings.
Columns по умолчанию 12 колонок.
Column Width, PX — ширина колонок. Если вы измените ширину, Column Gutter изменится.
Column Margins отступы слева и справа от краев массива для столбцов.
Если хотите можно выстраивать горизонтальную или вертикальную сетку — настройки в Tilda гибкие.
Row Baseline, PX горизонтальный шаг сетки. Основано на базовом размере шрифта. Module Height, PX нужен, если вы делаете одинаковые модули. Например, если вы укажете значение 4, то через каждые четыре строки будет пустая строка, и модуль начнет работу сначала.
Row margins, PX отступы сверху и снизу от края доски.
По умолчанию настройки сетки устанавливаются для всего проекта. Если мы создадим новый блок Zero, мы увидим модульную сетку, которую мы только что сделали в этом блоке. Это нужно для систематизации нашего проекта, чтобы было проще работать со страницами любого типа.
Row margins, PX — отступы сверху и снизу от края доски.
Однако если вам нужна уникальная сетка для конкретного блока, вернитесь к настройкам сетки и установите флажок Use for Current Block. Тогда настройки будут применяться только к текущему блоку.
Вы всегда можете вернуть изменения к сетке по умолчанию. Для этого нажмите кнопку Сброс в самом низу панели настроек и сохраните изменения.
/>
Правильная верстка проекта делает продвижение сайта на Тильде более успешным.
как выравнивать по сетке в тильде
/>
HIDE GRID (горячая клавиша G)- переключатель, который показывает/скрывает модульную сетку Zero блока:
HIDE UI (горячая клавиша F)- переключатель, который показывает/скрывает панель управления настройками Zero блока:
SHOW LAYERS (горячая клавиша Ctrl + L)- переключатель, который показывает/скрывает панель элементов и групп элементов, имеющихся в Zero блоке:
SHOW GUIDES — переключатель, который показывает/скрывает имеющиеся направляющие линии в Zero блоке:
DISABLE SNAPPING — переключатель, который включает/отключает функцию примагничивания элементов друг к другу в Zero блоке.
COLUMN WIDTH — ширина колонок. При изменении ширины, меняется значение межколоночного расстояния COLUMN GUTTER и наоборот.
COLUMN MARGINS — отступы слева и справа от края артборда для колонок.
Кроме того, есть возможность настроить горизонтальную сетку. Она, как правило, применяется для типографики.
MODULE HEIGHT применяется, если Вам необходимы повторяющиеся модули в дизайне. Например, если указать значение 5, то через каждые пять рядов будет пустая строчка, а модуль будет начинаться заново.
Для каждого разрешения экрана модульная сетка настраивается отдельно: она будет разной для ПК и для мобильных устройствах. Включить и выключить сетку можно, нажав G или перейдя в раздел с трёмя точками в верхнем правом углу экрана.
По умолчанию сетка настраивается для сайта в целом. После создания новый Zero block, в нем будет та же модульная сетка, которая была уже настроена в предыдущем. Это удобно и позволяет сохранить единство дизайна на разных страницах нашего сайта.
Вы всегда можете сбросить изменения и вернуть сетку по умолчанию. Для этого нажмите на кнопку Reset в самом низу панели настроек и сохраните изменения.
Надеюсь, статья была Вам полезна.
Спасибо, что дочитали до конца!
Настройки блоков Тильды
Создадим какой-нибудь блок, например, текстовый.
Итак, у нас есть текст, выполненный черным цветом, расположенный посередине экрана:
Допустим, нам необходимо, чтобы отступы текста от края экрана или соседних блоков были больше. Чтобы изменить этот параметр, зайдем во вкладку Настройки, расположенную в верхнем левом углу блока, появляющуюся при наведении на блок курсора мыши:
Для каждого блока в настройках доступны:
- ширина блока,
- отступ слева,
- выравнивание,
- настройки типографики, позволяющие настроить отображение текста,
- настройки анимации появления элементов на странице при загрузке и скроллинге,
- верхний и нижний отступ от соседних блоков,
- цвет фона для всего блока,
- настройки видимости блока на различных разрешениях экранов. То есть Вы можете скрыть блок на том или ином устройстве,
- конвертация блока в ZERO блок. Подробнее об этом — в отдельной статье.
Подробнее о настройках блока в сайтах на Тильде
Как настроить ширину блока в сайте на Тильда?
Напомним, что в Тильде для построения сайта используется 12-колоночная сетка.
Чтобы настроить ширину блока, нам необходимо указать количество колонок, которое будет занимать блок — от 1 до 12 колонок:
Изменив ширину блока, например, на 8 колонок, необходимо настроить отступ слева у этого блока. Так как блоком мы заняли 8 колонок, свободными у нас остаются 4 колонки. Если мы хотим, чтобы блок отображался по центру, тогда для отступа слева нужно задать 2 колонки (для отступа справа также останется 2 колонки: 4-2=2).
Выравнивание текстового содержимого блока в Тильде. Настройки типографики
- по левому краю,
- по центру,
- по правому краю.
Настройки текста в Тильде
- цвет текста,
- размер шрифта,
- шрифт,
- межстрочное расстояние,
- межбуквенное расстояние,
- насыщенность текста,
- начертание текста заглавными буквами,
- отступы от текста сверху и снизу,
- прозрачность текста.
Настройка анимации элементов блоков в Тильде
- прозрачность,
- прозрачность (снизу),
- прозрачность (сверху),
- прозрачность (справа),
- прозрачность (увеличение).
Как задать отступы снизу и сверху блока Тильды
В Тильде имеются настройки для того, чтобы увеличить или уменьшить верхний и нижний отступы для блоков:
Отдельно можно указать отступы блока Тильды для мобильных устройств. Зачастую они должны быть меньше, чем отступы на экранах ПК, ноутбуков. Для этого нужно нажать на иконку с монитором, после чего появятся отдельные настройки отступов для экранов мобильных устройств:
/>
Как настроить цвет фона для блока Тильды
Для того, чтобы указать цвет фона для блока Тильды, необходимо кликнуть мышью в соответствующее поле, после чего появится встроенная в Тильду палитра цветов, в которой Вы можете подобрать необходимый цвет. Либо напечатать в это поле код в формате hex заранее подготовленного цвета (например, #ff00ff). Такие цвета легко найти, воспользовавшись, например, поиском Яндекс или Гугл, также в макете сайта в Фотошопе, Фигме или другом графическом приложении, кроме того, цвет можно определить с помощью различных специализированных расширений для браузеров.
Как включить или отключить анимацию появления блоков Тильды
Для управления анимацией появления блоков сайта на Тильде в настройках предусмотрен переключатель — чекбокс:
Диапазон видимости блоков Тильды на различных устройствах
Блоки Тильды можно настраивать таким образом, что блок может быть виден на определенных разрешениях экрана, и при этом не будет отображаться на других. Сделать это можно, передвигая левый и правый ползунки соответствующей настройки блока:
В данной статье мы рассмотрели с Вами пример настройки простейшего текстового блока Тильды.
На самом деле это не исчерпывающий набор настроек. И для блоков других категорий Вы найдете множество дополнительных настроек: для изображений, кнопок, галерей, карточек и т.д.
Мы же в нашем блоге эти настройки будем рассматривать в соответствующих более подробных тематических статьях, посвященных уже конкретным видам блоков.