Как настроить модульную сетку в 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 в самом низу панели настроек и сохраните изменения.
Надеюсь, статья была Вам полезна.
Спасибо, что дочитали до конца!
Желаю Вам успехов и хорошего дня! 😉
Сетка сайта на Тильде: как навести визуальный порядок
Визуальный беспорядок мешает быстро считывать информацию на сайте, а значит снижает его эффективность. Как с помощью модульных сеток грамотно выстраивать элементы и создавать понятный дизайн — узнаете на бесплатном мастер-классе.
- Что такое модульная сетка и зачем она нужна;
- Как сетки облегчают выравнивание элементов на странице;
- Как навести визуальный порядок;
- Как работать с сеткой сайта на Тильде.
Не пропустите ближайшие мастер-классы
Подпишитесь на рассылку и получайте анонсы по почте.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
Настройка модульной сетки
в 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».
Zero Block: отзывчивый дизайн
Grid Container — основная рабочая область . В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если мы располагаем элементы внутри Grid Container, то независимо от размера экрана они будут находиться внутри сетки из 12 колонок.
По оси X Grid Container всегда позиционируется по центру.
То же самое происходит с версиями для разных устройств: при переключении между экранами ширина Grid Container становится 980, 640, 480, 320 px, он остается неизменным и всегда по центру.
Высоту Grid Container можно задать в настройках артборда или потянув контейнер вверх / вниз с помощью мыши. Ее можно задавать для каждого разрешения свою. Высота Grid Container является высотой блока.
Положение контейнеров относительно друг друга по оси Y
Если вы хотите, чтобы ваш блок занимал всегда 100% высоты экрана, для этого нужно задать высоту Window Container, отличную от высоты Grid Container. Соответственно, нужно в настройках артборда указать 100% высоты для Window Container.
Затем определить выравнивание Grid Container относительно экрана: сверху, по центру или по низу. По умолчанию стоит выравнивание по центру.
Изменение контейнера и начала координат для элемента
Изменение контeйнера
По умолчанию все элементы привязаны к Grid Container и начало координат находится в левом верхнем углу.
Но иногда требуется привязать элемент не к сетке, а к экрану. Например, вы хотите, чтобы логотип всегда был в левом верхнем углу любого экрана.
Для этого нужно открыть настройки элемента и поменять тип контейнера на Window Container. Начало координат сместится в левый верхний угол Window Container.
Теперь на любом экране логотип будет в левом верхнем углу.
Если мы хотим привязать элемент, например, к правому верхнему углу , то логика будет та же: задаем контейнер: Window Container и начало координат: ось X — right, ось Y — top.
Координаты элемента
У каждого элемента в рабочей области есть координаты — положение относительно начала координат по оси X и по оси Y.
Выделите объект, откройте панель настроек (клавиша tab) и в самом верху вы увидите координаты объекта.
Начало координат по умолчанию у всех элементов находится в левом верхнем углу Grid Container. Но оно может смещаться и находиться в одной из девяти точек прямоугольника: справа вверху, слева внизу и т.д.
Чтобы поменять положение начала координат, откройте меню +Container (по умолчанию оно свернуто).
Если вы зададите начало координат Center Center , то это упростит работу над адаптивной версией для разных экранов.
Создание «резиновых» элементов
Мы предусмотрели, чтобы размер элементов так же мог задаваться в процентах. Таким образом получаются «резиновые» элементы, которые меняют размер, в зависимости от окна браузера.
Например, мы хотим, чтобы половина экрана всегда была желтая. Добавим фигуру и в настройках элемента зададим контейнер — Window Container , а для ширины и высоты поменяем единицы измерения на проценты вместо пикселей и зададим 50% ширины экрана и 100% высоты. Также в процентах можно задавать значения осей — если нужно, чтобы элемент всегда занимал правую половину экрана, поставим значение для оси X — 50%.
На видео видно, что правая часть блока всегда заполняет половину экрана.
Параметры желтого прямоугольника: Container — Window, ширина — 50%, высота — 100%, смещение по оси Х — 50%.
Пример: создание полноэкранной обложки
Рассмотрим на примере как создать обложку со следующими параметрами:
— фоновое изображение занимает всю площадь экрана
— заголовок, подзаголовок и кнопка всегда по центру экрана
— стрелка «вниз» всегда по низу экрана
В настройках артборда добавим фоновое изображение и зададим ему параметр: Window Container Height — 100%.
Для заголовка, подзаголовка и кнопки определим начало координат — Center / Center и, при необходимости зададим смещение по оси Y.
Для стрелки назначим контейнер Window Container, начало координат: Center / Bottom и сместим ее на 70 пикселей вверх. Это значит, что кнопка всегда будет на 70 пикселей выше нижнего края окна браузера.
Посмотрим, что получилось: фоновая картинка заполняет всю область экрана, заголовок, текст и кнопка выровнились по центру, а стрелка — по низу.
Посмотреть пример вживую http://help.tilda.ws/zero-block-example
Масштабирование элементов под ширину экрана
По умолчанию все элементы привязаны к Grid контейнеру — это прямоугольник с шириной 1200 пикселей на десктопе, он всегда расположен по центру экрана и имеет одинаковый размер, независимо от размера монитора.
С помощью функции автоматического масштабирования можно масштабировать все элементы, которые принадлежат Grid контейнеру, пропорционально ширине экрана или браузера. Grid контейнер будет занимать не фиксированную ширину 1200 пикселей, а растягиваться на всю ширину экрана. Все добавленные элементы будут пропорционально увеличены, чтобы занять весь экран.
Чтобы включить автоматическое масштабирование, откройте настройки артборда и найдите параметр Scale Grid Container. Выберите параметр Autoscale to Window Width и сохраните изменения.
Данная настройка позволит дизайну сайта адаптировался под любое разрешение, в том числе для HD-экранов. Настройка поможет избежать лишнего пустого пространства на экранах с высоким разрешением, а также ускорит работу дизайнера — не придётся тратить время на резиновую вёрстку.
При необходимости, вы можете установить автоматическое масштабирование для всех типов экрана или, например, только для мобильных устройств, установив настройку только в определенном диапазоне ширины экрана. Контейнер десктопной версии увеличивается от 1200px до 1920, 4К или даже 6К. В мобильной версии размер увеличивается от 320px.
Высота блока будет динамической: она будет изменяться пропорционально ширине при масштабировании блока.
Важно: Данная настройка работает только для элементов, которые привязаны к Grid контейнеру и не будет влиять на элементы, привязанные к Window.
Особенности работы с масштабированием
Чтобы кнопка оставалась на нужном расстоянии от границ окна браузера, но не масштабировалась на разных разрешениях, задайте для неё координаты в Window Container. Используйте привязку к разным контейнерам, чтобы некоторые элементы в рамках одного блока масштабировать, а некоторые оставлять с фиксированным расстоянием от краёв браузера, но без изменения размера.
Будьте внимательны при загрузке изображений: они должны быть подходящего размера, чтобы не потерять в качестве при масштабировании под большие экраны.
Используйте векторные изображения в формате svg для иконок, а фоновые изображения и фотографии загружайте с запасом. В Тильде при загрузке большого изображения оно по умолчанию уменьшается до 1680 пикселей, но если вы нажмёте на иконку шестерёнки при загрузке, появится возможность загрузить изображение с размером 1920px по большей стороне. Переключите тумблер “Разрешить загрузку до 1920px”, а затем загрузите файлы. Изображения больше 1920px загрузить не получится, потому что такой размер будет влиять на производительность браузера и скорость загрузки сайта.