Как выравнивать по сетке в тильде
Три новых функции
в Zero Block
24 августа 2021
Детальные настройки модульной сетки, горизонтальное и вертикальное выравнивание между элементами и перемещение рабочей области с помощью мыши и зажатого пробела. Рассказываем о каждой функции подробнее.
Настройки модульной сетки
Можно задать любое количество колонок, их ширину, расстояние между колонками, отступы, цвет линий и другие параметры. Настройка работает для одного блока или всего проекта.
Выравнивание расстояния между элементами
При выборе нескольких элементов можно задать выравнивание расстояний между ними по вертикали или горизонтали. Настройки находятся в новой панели в разделе align elements.
Настройка модульной сетки
в 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».
Мобильная версия сайта на Тильде
Начну с краткого экскурса.
Для чего нужна мобильная адаптация?
В первую очередь для того, чтобы посетителю с мобильных устройств было удобно просматривать ваш сайт. Ведь если он зайдет с мобильного, а ему покажется обычная версия сайта (под десктопы), то с огромной вероятностью, посетитель уйдет искать более удобный сайт. А в 2021 году, процент посетителей с телефонов и планшетов сильно обгоняет компьютерный трафик.
Как сделать меню второго уровня на Тильде
Похожие материалы
Почему же Тильда?
Я ярый приверженец конструктора Tilda Publishing. Потому что, ребята очень активно развиваются, сама платформа не глючная (я знаю, о чем говорю, у меня за спиной работа не в одном десятке конструкторов). Широчайшие возможности. Даже если что-то не удается реализовать в стандартном функционале, то есть энтузиасты, которые помогают пользователям с реализацией кода.
Из коробки в Тильде идет интеграция со множествами сервисами (оплаты, рекламы и аналитики от Яндекс и Google, CRM, email-рассылок и тд.)
Особенно хорошо продвигаются сайты на Тильде в поиске. Есть чек-лист проверки сайта под SEO, настройка переадресации и редиректов.
Есть прекрасный функционал мультилендинга, что значительно увеличивает конверсию с платного трафика.
Что-то я отвлекся. На самом деле, конструктор Tilda я могу расхваливать часами)))
Перейдем к адаптации.
Настройка диапазона видимости в Tilda
- От 1200 px и более;
- От 980 до 1200 px;
- От 640 до 980;
- От 480 до 640;
- От 320 до 480;
- И от 0 до 320 пикселей.
Идем в настройки
Прокручиваем вниз и находим бегунок настройки отображения для разных разрешений
Мобильная адаптация стандартных блоковна платформе Tilda
Мало кто знает, но у стандартных блоков Тильды, можно настраивать отдельно отступ для мобильной адаптации. Сверху и снизу. Ну это логично)))
Но для этого надо нажать на иконку ноутбука, где настраиваются отступы.
Вообще, Tilda мне нравится еще и тем, что они лаконично и удобно вписывают настройки в интерфейс. То, что может навредить в дизайне сайтов молодому дизайнеру, они прячут.
А вообще, функционал стандартных блоков конструктора крайне ограничен и сложные проекты разработчику на них сложно создать. Для этого на помощь приходит Zero!
Идем в настройки
Нажимаем на значок ноутбука
Появляется новый модуль настроек для мобильных
Мобильная версия на Зеро (Zero) в Tilda
Тут ты волен творить, что душе угодно. Главное не перемудрить. Если ты дизайнер с опытом, то этот блок точно для тебя.
Кстати, возможно, кто-то не знает, но в Тильде можно конвертировать стандартный блок в Зеро. Не все, но многие.
Только главное правило, сначала конвертируй, потом уже в нем создавай страницу или блок. Потому что можно подумать, что сначала я сделаю, то что мне нужно, а потом я сконвертирую в Zero и будет мне счастье, но нет. При конвертации, все ваше редактирование, слетит и блок превратится в базовую версию стандартного.
Вообще, для быстрой работы с Zero и настройки адаптации, нужен опыт. Я вспоминаю себя, начинающим пользователем Tilda, для меня адаптация превращалась в ад, я тратил на нее уйму времени, делая ее самостоятельно, без расширений и помощников в виде обычного shape. Я с калькулятором и направляющими считал отступы и в редакторе двигал элементы.
Я даже не думал о том, что отступы можно было измерить шэйпом и этот же шэйп использовать как измеритель расстояния других элементов.
Как включить сетку в Zero блоке Тильда
Воспользоваться меню в панели редактирования Zero блока Тильды:
Находясь в панели редактирования Зиро блока, нажимаем на кнопку с тремя точками в правом верхнем углу:
Появится контекстное меню с командами, где нас в нашем случае интересует команда Show Grid (Hide Grid):
Наиболее удобный и быстрый способ, конечно же, использовать горячую клавишу G. Запомните ее и применяйте.