Элемент Макет в конструкторе сайтов
Элемент Макет (Layout) позволяет разделить контент на четко определенные сегменты в блоках, секциях или колонках.
Рассмотрим, как добавить макет и настроить в нем вкладки.
Добавьте макет
Чтобы добавить макет, нажмите + Добавить виджет (Add widget) в блоке, колонке или секции, а затем нажмите Макет (Layout).
Выберите один из доступных вариантов расположения.
Далее в каждом сегменте можно вертикально добавлять виджеты. Нажмите + и выберите виджет.
Чтобы задать отступы между сегментами, наведите курсор на макет, нажмите три точки внизу и выберите Редактировать (Edit). В панели настройки элемента введите в пикселях отступы между виджетами по осям X и Y.
Добавьте макет с вкладками
Макет с вкладками распределяет контент между несколькими вкладками в пределах одной секции. Так длинный контент остается компактным и умещается на одном экране.
Например, интернет-магазин может разделить описание товара на вкладки Характеристики, Доставка и Отзывы.
Чтобы добавить макет с вкладками, нажмите + Добавить виджет в блоке, колонке или секции. Перейдите на вкладку Макет. Выберите вариант макета с вкладками.
Вкладки принадлежат одной странице, а не являются отдельными страницами. Когда посетитель нажимает название вкладки, страница показывает контент этой вкладки и скрывает остальные.
Каждая вкладка имеет свой контент. Количество вкладок и расположение сегментов зависят от выбранного варианта.
Чтобы заполнить вкладку, нажмите ее название, затем + в сегменте и выберите виджет.
Иконка предупреждения отмечает вкладки, в которых еще нет контента.
Чтобы настроить макет, наведите на него курсор и нажмите три точки. Выберите Редактировать.
Выберите расположение вкладок
Названия вкладок могут располагаться над контентом или сбоку от него — в зависимости от того, сколько места есть на странице. По умолчанию они расположены над контентом.
В разделе Внешний вид (Appearance) выберите одно из расположений: над контентом, слева или справа.
Настройте стили вкладок
Чтобы согласовать вкладки с дизайном сайта, нажмите Стили вкладок (Tab styles).
В разделе Заголовок (Header) настройте вид названий вкладок.
Активная вкладка — это та, которую открыл посетитель. Вы можете выделить ее и отделить заголовок от контента:
| Фон активной вкладки (Active background) | Задает цвет фона активной вкладки. |
| Цвет текста активной вкладки (Active text color) | Задает цвет названия активной вкладки. |
| Обводка активной вкладки (Active contour) | Добавляет линию, которая выделяет активную вкладку. Выберите ее расположение и цвет. |
| Разделитель (Separator) | Добавляет разделительную линию. |
| Цвет разделителя (Separator color) | Задает цвет разделительной линии. |
В разделе Контент (Content) задайте общие настройки вида области, которая содержит виджеты. В поле Отступ между виджетами (Gap between widgets) укажите в пикселях расстояние между виджетами внутри этой области.
Чтобы применить изменения, нажмите Сохранить (Save).
Управляйте вкладками
В разделе Вкладки (Tabs) перечислены все вкладки, которые вы добавили в макет.
Чтобы переименовать вкладку, нажмите иконку карандаша рядом с ней. Введите новое название в поле Текст (Text) и нажмите Сохранить.
Чтобы скопировать или удалить вкладку, нажмите три точки рядом с ней. Выберите Дублировать (Duplicate), чтобы добавить копию со всеми виджетами исходной вкладки. Выберите Удалить (Delete), чтобы удалить вкладку.
Чтобы изменить порядок вкладок, перетащите вкладку вверх или вниз за маркер перетаскивания.
Чтобы добавить новую вкладку, нажмите Добавить (Add).
Чтобы переход между вкладками был плавным, активируйте переключатель Анимация. Затем выберите тип, расположение и скорость анимации.
Чтобы вкладки стали доступны посетителям, нажмите Опубликовать. Посетители видят одну вкладку одновременно и могут открыть другую, нажав ее название.
Обновлено: 18.07.2025
или