С помощью блока разметки «Сетка» можно выровнять содержимое вашего сайта. Этот блок позволяет определить адаптивные контрольные точки. Это значит, что вы сможете выбирать количество столбцов, отображающихся рядом на странице или в записи как на компьютере, так и на мобильных устройствах.
В этом руководстве
Появились вопросы?
Спросите помощника на базе ИИРазметка «Сетка» обеспечивает структуру и выравнивание содержимого веб-страницы. Она содержит вертикальные полосы, количество которых определено устройством, с которого осуществляется просмотр (адаптивная контрольная точка):
- 12 полос для настольных ПК.
- 8 полос для планшетов.
- 4 полосы для мобильных устройств.
В блоке разметки «Сетка» полосы сетки формируют столбцы (1–4), и вы можете разместить своё содержимое в каждом из этих столбцов.
Обычно на устройствах небольшого размера разметка может охватывать несколько строк. Этот параметр автоматически включается при переходе в режим планшета или мобильного устройства. Чтобы изменить автоматический выбор, укажите значения сетки вручную.
Адаптивные контрольные точки относятся к сложным настройкам. Блок разметки «Сетка» можно использовать без настройки адаптивных контрольных точек: для сетки будут применены параметры по умолчанию.
Чтобы добавить блок разметки «Сетка», щёлкните значок + Вставка блока и выполните поиск по ключевому слову «разметка «сетка»». Щёлкните его, чтобы добавить блок в запись или на страницу.
💡
В новой строке можно набрать
/layoutи нажать Enter, чтобы быстро добавить новый блок разметки «Сетка».
Если на вашем сайте поддерживаются плагины, активируйте плагин Разметка «Сетка» в разделе Плагины → Установленные плагины.
Вы можете ознакомиться с подробными инструкциями по добавлению блоков.
При первом добавлении блока разметки «Сетка» вам будет предложено выбрать число столбцов:
Этот параметр можно изменить позднее в Настройках блока.
Каждый столбец сетки может содержать другие блоки. Щёлкните значок + Вставка блока для каждого столбца, а затем выполните поиск блока, который нужно добавить.
Если щёлкнуть блок, появится следующая панель инструментов с опциями:
На панели инструментов блока разметки «Сетка» доступны следующие опции:
- Изменение типа или стиля блока.
- Перетаскивание блока.
- Перемещение блока выше или ниже.
- Изменения ширины блока или выравнивания по горизонтали.
- Адаптивные контрольные точки для настольных ПК, планшетов и мобильных устройств.
- Изменение выравнивания блока по вертикали.
- Дополнительные опции.
Если щёлкнуть блок, на боковой панели справа появятся дополнительные настройки. Если боковая панель не отображается, чтобы открыть настройки, щёлкните значок шестерёнки ⚙️ в правом верхнем углу экрана.
Необходима для изменения количества столбцов, хранящихся в блоке разметки «Сетка». Если уменьшить количество столбцов на один, последний столбец (и всё его содержимое) будет удалено.
Чтобы настроить просмотр на настольном ПК, планшете и мобильном устройстве, нажмите соответствующие им кнопки.
Определяет, сколько строк сетки пропускает столбец, чтобы добавить интервал от предыдущего столбца или от начала разметки «Сетка».
Это общее количество полос сетки, формирующих всю ширину одного столбца.
Интервал сетки — это пространство между двумя столбцами в сетке.
Если выбрать Без интервала, будут удалены все интервалы, включая первый и последний.
Когда размер интервала имеет какое-либо другое значение помимо Без интервала, можно выключить кнопку для Добавить конечные интервалы. В результате будут удалены крайние левый и правый интервалы сетки, чтобы она заполнила собой всю ширину страницы.
Дополнительные настройки
На вкладке дополнительных настроек можно добавить к блоку класс CSS, что позволяет настраивать стиль блока по своему усмотрению с помощью собственных таблиц CSS.
У каждого столбца в блоке разметки «Сетка» есть свои настройки, с помощью которых можно изменить цвет фона и отступ. Этот выбор повлияет только на отдельный выбранный столбец.
Как правило, вы можете изменять размер столбцов в разметке «Сетка». Тем не менее сумма всех значений отступа и ширина каждого столбца в пределах строки не должна превышать общее число полос, доступных для данного устройства.
Например, на настольном ПК (12 полос) каждый отдельный столбец в разметке с тремя столбцами может содержать 4 полосы на столбец без отступов или 3 полосы с 1 отступом для каждого столбца либо один столбец может состоять из 10 полос, а два других — из одной.
Это гарантирует, что ваши столбцы не перекрываются, а иногда может означать, что вы не можете увеличить значение отступа или ширины в одном расположении, не уменьшив сначала другое.
У каждого столбца в сетке по бокам будет цветная опция. Это значки перетаскивания: если щёлкнуть один из них и потянуть влево или вправо, размер блока изменится.
Вы также можете изменить размер столбцов в разметке «Сетка» путём изменения значений отступа и ширины непосредственно в настройках блока на боковой панели.
При перетаскивании с помощью маркеров эти значения изменяются автоматически.
Если вы хотите изменить размер сетки и настроить отображение столбцов на мобильных устройствах и планшетах, помните, что сумма всех значений отступа и ширины для отдельных столбцов не должна превышать 8 полос для планшетов и 4 полосы для мобильных устройств.
В приведённых ниже примерах для столбцов установлены ширина 2 и отступ 0 для отображения двух столбцов на мобильных устройствах и 4 столбцов на планшетах соответственно.
Поддержка 