Линейка и направляющие столбца
Направляющие — это непечатаемые и неэкспортируемые линии, которые перемещаются по объектам страницы и помогают их располагать. Существует два типа направляющих, с помощью которых можно создавать различные композиционные элементы: линейка и столбец.
Направляющие линейки
Направляющие линейки можно настроить, ориентируясь на горизонтальную или вертикальную линейку, при этом их можно свободно перемещать и размещать в пределах страницы.
Чтобы добавить направляющую линейки, выполните перечисленные ниже действия.
Выполните одно из перечисленных далее действий.
- Выберите инструмент Перемещение . Для размещения «на глаз» перетащите направляющую с горизонтальной или вертикальной линейки; отображение линеек можно включить в меню Вид .
- В меню Вид выберите пункт Диспетчер направляющих . Нажмите значок Добавить новую направляющую для размещения либо горизонтальных, либо вертикальных направляющих линейки.
Чтобы переместить размещенную направляющую линейки, выполните перечисленные ниже действия.
Выполните одно из перечисленных ниже действий.
- Перетащите направляющую с помощью инструмента «Перемещение» , когда заметите, что вид курсора изменился.
- Выберите любой инструмент и проверьте, включен ли параметр Показать линейки (в меню Вид ). Перетащите маркер направляющей непосредственно с горизонтальной или вертикальной линейки, чтобы переместить направляющую.
- В меню Вид выберите пункт Диспетчер направляющих . Дважды нажмите значение для направляющей, которую необходимо изменить, и введите новое положение в поле со значением. (Обращаем ваше внимание на то, что вам не нужно вводить единицы измерения.)
Положения направляющих автоматически обновятся в соответствии с перемещенным началом координат разворота.
- В меню Вид выберите пункт Диспетчер направляющих .
- Выберите параметр Процент .
Процентные соотношения начинают рассчитываться с левого верхнего угла страницы документа.
- В меню Вид выберите Показать направляющие . Когда направляющие видны, рядом с пунктом меню отображается установленный флажок.
Если направляющие скрыты, то они автоматически отобразятся снова при добавлении новой направляющей путем перетаскивания от линейки.
Чтобы удалить направляющие линейки, выполните перечисленные ниже действия.
Выполните одно из перечисленных ниже действий.
- Выберите инструмент «Перемещение» и перетащите направляющую за пределы страницы.
- В меню Вид выберите пункт Диспетчер направляющих . Нажмите значение для направляющей, которую необходимо удалить, для его выбора и щелкните значок Удалить направляющую .
При создании или перемещении объектов можно выполнить привязку к направляющим.
- В меню Вид выберите Зафиксировать направляющие .
Направляющие столбца
С помощью направляющих столбца можно указать количество столбцов и строк, расположенных с равными интервалами; они идеально подходят для использования во время создания макетов (например, макетов веб-сайтов).
- В меню Вид включите параметр Показать направляющие столбца , а затем выберите Диспетчер направляющих . В разделе Направляющие столбца можно настраивать перечисленные ниже параметры.
- Столбцы : используется для определения количества вертикальных направляющих, которые будут отображаться.
- Строки : используется для определения количества горизонтальных направляющих, которые будут отображаться.
- Внутреннее поле : используется для установки размера внутреннего поля.
- Стиль : доступны варианты С заливкой и Контур .
- Цвет : используется для выбора цвета направляющих столбца из образцов цвета.
- В меню Вид выберите Показать направляющие столбца . Когда направляющие видны, рядом с пунктом меню отображается установленный флажок.
- В меню Вид выберите пункт Диспетчер направляющих . Уменьшите количество столбцов и строк в разделе Направляющие столбца до 1.
Как настроить модульную сетку в Zero блоке Тильда
Вы можете настраивать модульную сетку в Zero блоке Тильда как для одного блока, так и для всего сайта. Заказывайте необходимое количество колонок, их ширину, расстояние между ними, отступы, цвет линий и другие параметры.
Сетка позволяет разметить основную структуру макета проекта. Благодаря данным опциям, создание страницы в Тильде ускоряется в разы. По сетке определенным образом располагаются элементы и блоки сайта, сохраняя визуальный порядок на странице.
По умолчанию мы в Тильде работаем с 12-колоночной сеткой. Если нам нужна другая сетка, необходимо ее настроить.
Перейдем в Zero блок, рассмотрим настройки Artboard. Нажимаем кнопку Zero block settings и разберемся, для чего необходимо то или иное поле настроек:
HIDE GRID (горячая клавиша G)- переключатель, который показывает/скрывает модульную сетку Zero блока:
HIDE UI (горячая клавиша F)- переключатель, который показывает/скрывает панель управления настройками Zero блока:
SHOW LAYERS (горячая клавиша Ctrl + L)- переключатель, который показывает/скрывает панель элементов и групп элементов, имеющихся в Zero блоке:
SHOW GUIDES — переключатель, который показывает/скрывает имеющиеся направляющие линии в Zero блоке:
DISABLE SNAPPING — переключатель, который включает/отключает функцию примагничивания элементов друг к другу в Zero блоке.
COLUMNS — количество колонок в сетке.
COLUMN WIDTH — ширина колонок. При изменении ширины, меняется значение межколоночного расстояния COLUMN GUTTER и наоборот.
COLUMN MARGINS — отступы слева и справа от края артборда для колонок.
Кроме того, есть возможность настроить горизонтальную сетку. Она, как правило, применяется для типографики.
ROW BASELINE — шаг горизонтальной сетки. Обычно его величина берётся на основе базового размера Вашего шрифта. Например, если в качестве основного текста сайта Вы применяете шрифт размером 14px с межстрочным расстоянием 20px, то и расстояние между линиями будет 20px.
MODULE HEIGHT применяется, если Вам необходимы повторяющиеся модули в дизайне. Например, если указать значение 5, то через каждые пять рядов будет пустая строчка, а модуль будет начинаться заново.
ROW MARGINS — отступ сверху и снизу от края артборда:
Для каждого разрешения экрана модульная сетка настраивается отдельно: она будет разной для ПК и для мобильных устройствах. Включить и выключить сетку можно, нажав G или перейдя в раздел с трёмя точками в верхнем правом углу экрана.
По умолчанию сетка настраивается для сайта в целом. После создания новый Zero block, в нем будет та же модульная сетка, которая была уже настроена в предыдущем. Это удобно и позволяет сохранить единство дизайна на разных страницах нашего сайта.
Однако, если Вам необходима уникальная модульная сетка для конкретного блока, то зайдите в настройки сетки и выберите для параметра Use for опцию Current Block . Тогда настройки применятся только к текущему блоку.
Вы всегда можете сбросить изменения и вернуть сетку по умолчанию. Для этого нажмите на кнопку Reset в самом низу панели настроек и сохраните изменения.
Надеюсь, статья была Вам полезна.
Спасибо, что дочитали до конца!Желаю Вам успехов и хорошего дня! 😉
Как добавить направляющие линии в Zero Block?
В режиме редактирования Zero Block нажмите справа вверху на «. » (три точки) — откроется панель меню. Для добавления направляющих нажмите на Guides: Hide/Show:
Чтобы задать горизонтальную направляющую, выберите пункт Guides: Add Horizontal, чтобы задать вертикальную — Guides: Add Vertical.
Похожие вопросы
- Как добавить стрелку в Zero Block?
- Есть ли слои в Zero Block?
- Как в Zero Block настроить увеличение изображения по клику?
- Как сделать анимацию на мобильных в Zero Block?
- Как сделать фиксированное меню в Zero Block?
Настройка модульной сетки
в Zero BlockСетка позволяет определить базовую структуру дизайна
и ускорить работу с макетом. Она создаёт единую схему расположения всех элементов сайта и помогает сохранить визуальный порядок.По умолчанию в Тильде используется 12-колоночная сетка.
Чтобы настроить сетку, перейдите в Zero Block → нажмите на кнопку Settings → нажмите на кнопку Open в разделе Zero Block Settings → откроются настройки рабочей области.
Для каждого разрешения сетка настраивается отдельно: она будет разной на десктопе и на мобильных устройствах.
Включить и выключить сетку можно с помощью нажатия на клавишу G на клавиатуре или перейдя в раздел с тремя точками в верхнем правом углу экрана → кнопка «Show/Hide Grid».
Настройки вертикальной сетки
Columns — количество колонок;
Column width — ширина колонок в пикселях;
Column gutter — расстояние между колонками в пикселях;
Column margins — отступ слева и справа от сетки в пикселях.
Некоторые значения можно заблокировать, чтобы они оставались такими же при изменении других. Для этого нажмите на иконку замка у нужного параметра.
Настройки горизонтальной сетки
Row baseline — шаг горизонтальных рядов в пикселях;
Module height — количество рядов (один модуль) после которых добавится пустая строка и модуль начнется заново;
Row margins — отступ сверху и снизу от сетки в пикселях.
Общие настройки сетки
Color — цвет колонок;
Opacity — прозрачность заливки колонок;
Border opacity — прозрачность границ колонок.
Важно: по умолчанию настройки сетки задаются для всего проекта. То есть в каждом Zero Block будет автоматически использоваться новая сетка.
Чтобы задать уникальную сетку для конкретного блока, перейдите в настройки сетки → выберите в пункте «Use for» опцию Current block. Тогда настройки применятся только к текущему блоку, а в остальных блоках останется сетка по умолчанию.
Также вы всегда можете отменить изменения и вернуть настройки сетки. Для этого нажмите на кнопку «Reset grid settings to default» → во всплывающем окне нажмите на кнопку «Ok».