Добавление обводки к элементам

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

Примечание: в настоящее время обводку можно добавить к следующим элементам: фигура (прямоугольник и круг), изображение, элементы коллекции и колонки.

Содержание:

Добавление обводки к элементам
Добавление обводки к элементам коллекции и к колонкам
Кастомизация линии обводки

Добавление обводки к элементам

Для того чтобы применить обводку к фигуре или изображению, необходимо:

Открыть настройки элемента:

Перейти на вкладку Стиль, прокрутить меню вниз и активировать переключатель Обводка:

После этого в выбранном элементе появится стандартный обвод:

Добавление обводки к элементам коллекции и к колонкам

Обводка для элементов коллекции

Для того чтобы включить функцию обводки в элементах коллекции, необходимо открыть настройки элемента коллекции, выбрать вкладку Стиль и активировать переключатель Обводка:

Важно: добавить обводку для элементов коллекции возможно только при условии, если для них были установлены фон или активированы пресеты. Если был выбран пресет “Многоцветный” (отдельный фон для каждого элемента коллекции), то обводка будет применена только к тем элементам, которым задан фон.Примечание: если вы создали сайт с помощью шаблона, в котором уже были обводки в элементах коллекции, то применяемые по этой инструкции обводки будут иметь преимущество (отображаться вместо старых).Подсказка: после активации переключателя "Обводка", она будет автоматически добавлена ко всем карточкам в коллекции.

Обводка для колонок

Функция обводки активируется в настройках колонки так же, как и в элементах коллекции. Но при этом обводка применяется отдельно для каждой колонки.

Кастомизация линии обводки

Линию вокруг элемента можно настроить на свой лад:

Выбор толщины линии обводки:

Подсказка: по умолчанию толщина составляет 2 пикселя, максимальная толщина — 30 пикселей.

Выбор стиля линии обводки:

На выбор доступно три стиля: сплошная, штриховая и пунктирная.

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

Выбор цвета линии обводки:

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

После настройки всех параметров, обводка может приобрести, например, следующий вид:

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

Для продвинутых пользователей: технически обводка — это граница, которая добавляется внутрь элемента, без увеличения его размеров. То есть элемент, к которому добавлен обводка, имеет CSS-свойство box-sizing со значением border-box.

Последнее изменение: 25/03/2024

Была ли эта статья полезна?

Спасибо!