Статті на: Редактор
Ця стаття також доступна на:

Додавання обведення до елементів

У налаштуваннях певних елементів ви можете увімкнути обведення (outline) по контуру та кастомізувати стиль, колір та товщину лінії, якою буде обведено той чи інший елемент.


Примітка: нині обведення можна додати до таких елементів: фігура (прямокутник та круг), зображення, елементи колекції та колонки.


Зміст:


Додавання обведення до елементів


Для того, щоб застосувати обведення до фігури або зображення, необхідно:

  1. Відкрити налаштування елементу:

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

Після цього в обраному елементі з’явиться стандартне обведення:

Додавання обведення до елементів колекції та колонок


Обведення для елементів колекції

Для того, щоб увімкнути функцію обведення в елементах колекції, необхідно відкрити налаштування елементу колекції, обрати вкладку Стиль та активувати перемикач Обведення:

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


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

Функція обведення активується у налаштуваннях колонки аналогічно як і у елементах колекції. Але при цьому обведення застосовується окремо для кожної колонки.


Кастомізація лінії обведення


Лінію довкола елемента можна налаштувати на свій лад:


  1. Вибір товщини лінії обведення:

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


  1. Вибір стилю лінії обведення:

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


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


  1. Вибір кольору лінії обведення:

Можна обрати як один зі стандартних кольорів палітри сайту, так і будь-який інший колір на власний розсуд.


Після налаштування усіх параметрів, обведення може набути, наприклад, наступного вигляду:

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


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




Оновлено: 25/03/2024

Чи була ця стаття корисною?

Поділіться своїм відгуком

Скасувати

Дякуємо!