> ## 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/ru-1_kdu1ze.png)

2. Для настройки вашего элемента, нажмите на появившийся квадрат и перейдите к его настройкам:

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


На данный момент для этого элемента доступны следующие возможности:

* **Выбор формы**. Вы можете выбрать любую форму из доступных:

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

На данный момент доступны:

• Прямоугольник;

• Круг;

• Треугольник;

• Ромб;

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

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

• 10-конечная фигура;

• Полукруг;

• Шестиугольник;

• Пятно.


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

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

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

* Настройка **угла наклона фигуры** и **округления углов** (последнее доступно только для фигуры **Квадрат**):

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-12_4ujao5.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-12_1nhkkq4.png)
|| ${color}[#ffa800](Примечание:) более подробно с поворотом элементов вы можете ознакомиться в [статье](https://help.weblium.com/ru/article/povorot-elementov-t9jp5u/).

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

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

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

* **Добавление тени.** В рамках этой [функции](https://help.weblium.com/ru/article/teni-dlya-elementov-s6tu23/) вы можете указывать положение тени по осям Х и У, размытие тени и ее размер:

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



* **Зеркальное отображение фигуры**. Вы можете ее отражать по вертикали и горизонтали:

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

* **Редактирование размера фигуры**. Для этого вам достаточно зажать один из углов или сторон фигуры и потянуть в нужную сторону.

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

* **Действие.** Для этого элемента доступен общий перечень действий при нажатии:

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

После добавления фигуры не забудьте [опубликовать ваш сайт](https://help.weblium.com/ru/article/publikaciya-sajta-1xvrq6l/), чтобы изменения отобразились на нем.