Как выравнивать по сетке в тильде
Перейти к содержимому

Как выравнивать по сетке в тильде

  • автор:

Как выравнивать по сетке в тильде

Три новых функции
в Zero Block
24 августа 2021

Детальные настройки модульной сетки, горизонтальное и вертикальное выравнивание между элементами и перемещение рабочей области с помощью мыши и зажатого пробела. Рассказываем о каждой функции подробнее.

Настройки модульной сетки

Можно задать любое количество колонок, их ширину, расстояние между колонками, отступы, цвет линий и другие параметры. Настройка работает для одного блока или всего проекта.

Выравнивание расстояния между элементами

При выборе нескольких элементов можно задать выравнивание расстояний между ними по вертикали или горизонтали. Настройки находятся в новой панели в разделе align elements.

Настройки блоков Тильды

Создадим какой-нибудь блок, например, текстовый.
Итак, у нас есть текст, выполненный черным цветом, расположенный посередине экрана:

Допустим, нам необходимо, чтобы отступы текста от края экрана или соседних блоков были больше. Чтобы изменить этот параметр, зайдем во вкладку Настройки, расположенную в верхнем левом углу блока, появляющуюся при наведении на блок курсора мыши:

Для каждого блока в настройках доступны:

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

Подробнее о настройках блока в сайтах на Тильде

Как настроить ширину блока в сайте на Тильда?

Напомним, что в Тильде для построения сайта используется 12-колоночная сетка.
Чтобы настроить ширину блока, нам необходимо указать количество колонок, которое будет занимать блок — от 1 до 12 колонок:

Изменив ширину блока, например, на 8 колонок, необходимо настроить отступ слева у этого блока. Так как блоком мы заняли 8 колонок, свободными у нас остаются 4 колонки. Если мы хотим, чтобы блок отображался по центру, тогда для отступа слева нужно задать 2 колонки (для отступа справа также останется 2 колонки: 4-2=2).

Выравнивание текстового содержимого блока в Тильде. Настройки типографики

Выровнять содержимое блока в Тильде можно:

  • по левому краю,
  • по центру,
  • по правому краю.

Настройки текста в Тильде

Для изменения параметров для текста в Тильде доступны следующие настройки типографики:

  • цвет текста,
  • размер шрифта,
  • шрифт,
  • межстрочное расстояние,
  • межбуквенное расстояние,
  • насыщенность текста,
  • начертание текста заглавными буквами,
  • отступы от текста сверху и снизу,
  • прозрачность текста.

Настройка анимации элементов блоков в Тильде

В Тильде можно настроить анимацию появления элементов сайта при его загрузке и скроллинге. Доступны следующие стандартные виды анимации:

  • прозрачность,
  • прозрачность (снизу),
  • прозрачность (сверху),
  • прозрачность (справа),
  • прозрачность (увеличение).
Как задать отступы снизу и сверху блока Тильды

В Тильде имеются настройки для того, чтобы увеличить или уменьшить верхний и нижний отступы для блоков:

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

Как настроить цвет фона для блока Тильды

Для того, чтобы указать цвет фона для блока Тильды, необходимо кликнуть мышью в соответствующее поле, после чего появится встроенная в Тильду палитра цветов, в которой Вы можете подобрать необходимый цвет. Либо напечатать в это поле код в формате hex заранее подготовленного цвета (например, #ff00ff). Такие цвета легко найти, воспользовавшись, например, поиском Яндекс или Гугл, также в макете сайта в Фотошопе, Фигме или другом графическом приложении, кроме того, цвет можно определить с помощью различных специализированных расширений для браузеров.

Как включить или отключить анимацию появления блоков Тильды

Для управления анимацией появления блоков сайта на Тильде в настройках предусмотрен переключатель — чекбокс:

Диапазон видимости блоков Тильды на различных устройствах

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

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

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

Новая функция выравнивания расстояния между элементами в Zero блоке для сайтов на Тильде

В Zero Block появилась новая функция, с помощью которой можно выравнивать расстояние между элементами.

Выделив одновременно несколько элементов, Вы можете назначить параметры выравнивания расстояния между ними как по вертикали, так и по горизонтали.

Указанные параметры расположены в новой панели в разделе align elements.

Рабочую область Zero блока Вы можете перемещать мышкой, зажав клавишу пробела. Эта опция заметно упрощает и ускоряет процесс работы над сайтом, делая его более удобным и приятным для дизайнера.

Спасибо, что дочитали пост до конца.
Желаю удачи в создании сайтов на Тильде 😉

Выравниваем контент в стандартных блоках в Тильде по ширине на мобильных (код, CSS)

Как изменить ширину и отступ стандартного блока на мобильных устройствах на сайте, созданном на Тильде? Как создать и куда вставить код?

Проблема: Если Вы используете на сайте стандартные блоки и ZERO, верстаете в grid, можете столкнуться с тем, на мобильных устройствах ширина контента в стандартных блоках сильно отличается от ширины в zero-блоках.

Например, Вы сверстали блок с текстом, задали ему ширину на мобильных устройствах 300px. Следующий блок Вы добавили стандартный, например, TX01. На мобильных TX01 будет иметь другую ширину и другой отступ, что выглядит неаккуратно.

Код

Для того, чтобы это исправить, нужно добавить блок T123 и код. Для данного примера (стандартный блок TX01) подходит следующий код:

Как мы получили этот код?

Заходим в браузер Firefox Developer Edition — Mozilla.
Рядом с поисковой строкой нажимаем на иконку Гаечный ключ, выбираем Адаптивный дизайн и нужное устройство, например, Iphone 11 pro. Перед нами открывается вид сайта на соответствующем устройстве.

Кликаем по контенту правой кнопкой мыши. Выбираем пункт Исследовать. Затем кликаем на иконку Выбрать элемент со страницы (скриншот).

Тыкаем на интересующий элемент: в нашем случае, на текстовый блок. Слева мы видим код и класс элемента. В средней колонке, в данном случае, видим стили элемента – цвет, шрифт, размер, насыщенность и прочее. И справа мы видим разметку блока. В данном случае, нам нужно задать для элемента с классом .t-text на устройствах @media screen and (max-width: 480px) , то есть на мобильных, такие же параметры, как и для нашего ZERO-блока:

width: 300px
padding-left: 20px

То есть мы меняем ширину и внутренний отступ. Вы можете задать эти параметры в разметке и увидите, что расположение и ширина контента изменились. Если это не сработало, то попробуется воздействовать на другой селектор (выберите другой элемент).

Теперь нам нужно из полученных данных создать рабочий код.

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

В нашем случае это:
@media screen and (max-width: 480px). Пишем.

После этого ставим символ

Затем пишем класс элемента, для которого будем применять стиль. В нашем случае, это .t-text (перед названием класса ставим всегда точку). Затем снова символ

И затем сами параметры:

width: 300px !important;
padding-left: 20px !important;

( !important повышает приоритет нашего пользовательского стиля).

Затем закрываем параметры также двумя фигурными скобками:

Теперь осталось заключить код в теги:

Таким образом, Вы можете кастомизировать любые элементы на сайте на Тильде – менять отступы, цвета, радиусы скругления, добавлять тени и многое другое, что касается стилей элементов. Размеры, ширину, высоту блоков можно задавать также в %, hv, vw (при «резиновой» верстке).

Как добавить код на сайт на Тильде?

  1. Добавить блок T123 на страницу, на которой требуется внести изменения и вставить в него код в вышеуказанном формате (код должен начинаться с тега

    );

  2. Добавить код (таким же способом, как и в пункте 1) в футер или в хэдер, чтобы воздействовать на стиль элементов с таким же классом на всех страницах, где есть футер/хэдер;
  3. Добавить код в Настройки сайта – Еще – Пользовательские CSS-стили. В этом случае теги

    в начале и в конце кода не потребуются.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *