> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Додавання елементу “Фігура”

У світі дизайну навіть прості інструменти можуть додавати вашому сайту неповторний стиль та виразність. Одним із таких інструментів цілком можна назвати елемент **Фігура**, який ви можете додати до вашого сайту у рамках Flex-блоку.

||| ${color}[#f97700](Важливо:) даний елемент наразі доступни лише для Flex-блоку.

Далі у статті ми розглянемо, як додати цей елемент та як ви можете з ним працювати. 


1. Щоб додати **Фігуру,** натисніть на синю іконку з білим плюсиком у верхньому лівому куті Flex-блоку та оберіть відповідний елемент у списку:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-1_69oz8m.png)

2. Для налаштувань вашого елементу, натисніть на квадрат, що зʼявиться, та перейдіть до його налаштувань:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-7_rhwb2b.png)

Наразі для цього елементу доступні наступні можливості:

* **Вибір форми**. Ви можете обрати будь-яку форму з доступних:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr_e7t1mr.png)

Наразі це:

• Прямокутник;

• Круг;

• Трикутник;

• Ромб;

• Ромб із увігнутими сторонами;

• Заокруглений ромб із увігнутими сторонами;

• 10-кінцева фігура;

• Напівколо;

• Шестикутник;

• Пляма.


* **Налаштування заповнення фігури.** Ви можете як вказати потрібний вам колір фігурі (суцільна заливка або градієнт), так і поставити фото як фон фігури:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-10_1646je0.png)

| ${color}[#1aa900](Підказка:) як і для звичайного фонового зображення, у **Фігурі** ви можете додати до нього накладання кольору чи фільтр.

* Налаштування **кута нахилу фігури** та **заокруглення кутів** (останнє доступне лише для фігури **Квадрат**):

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-11_1on4r0y.png)

|| ${color}[#ffa800](Примітка:) ви можете також обертати фігуру вручну. Для цього наведіть на один із кутів фігури, та коли ви побачите курсор оберту, затисність правою кнопкою миші та потягніть у потрібний вам бік:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-12_1nhkkq4.png)
|| ${color}[#ffa800](Примітка:) детальніше про поворот елементів ви можете дізнатися у [статті](https://help.weblium.com/uk/article/povorot-elementiv-s2siae/?bust=1701099004298). 

| ${color}[#1aa900](Підказка:) ви також можете налаштовувати заокруглення кожного з кутів окремо, для цього натисніть на іконку поруч із полем градусу заокруглення.

* **Обведення.** Ви можете обрати колір, товщину обведення та його стиль:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-13_u7hj5k.png)

* **Додавання тіні.** У рамках цієї функції ви можете вказувати положення тіні по осях Х та У, розмиття тіні та її розмір:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-14_1doeqqf.png)

|| ${color}[#ffa800](Примітка:) детальніше про налаштування тіней ви можете дізнатися у [статті](https://help.weblium.com/uk/article/tini-dlya-elementiv-647het/?bust=1701098993761). 

* **Відзеркалення фігури.** Ви можете її відзеркалювати по вертикалі та горизонталі:


![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-15_1jb9t3w.png)

* **Редагування розміру фігури**. Для цього вам достатньо затиснути один з кутів чи сторін фігури та потягнути у потрібну сторону.

|| ${color}[#ffa800](Примітка:) якщо ви активуєте опцію "Оригінальні пропорції" у налаштуваннях елементу, то при збільшенні чи зменшенні  розміру фігури вона зберігатиме оригінальне співвідношення сторін.

* **Дія.** Для цього елементу доступний загальний перелік дій при натисканні:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-16_1ao722k.png)

Після додавання фігури не забудьте [опублікувати ваш сайт](https://help.weblium.com/uk/article/publikaciya-sajtu-16hom55/), аби зміни відобразилися на ньому.