Добавление элемента “Фигура”
В мире дизайна даже простые инструменты могут придавать вашему сайту неповторимый стиль и выразительность. Одним из таких инструментов вполне можно назвать элемент Фигура, который вы можете добавить на ваш сайт в рамках Flex-блока.
Важно: данный элемент пока доступен только для Flex-блока.
Далее в статье мы рассмотрим, как добавить этот элемент и как вы можете с ним работать.
Чтобы добавить Фигуру, нажмите на синюю иконку с белым плюсиком в верхнем левом углу Flex-блока и выберите соответствующий элемент в списке:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-1_kdu1ze.png)
Для настройки вашего элемента, нажмите на появившийся квадрат и перейдите к его настройкам:
![](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)
Подсказка: как и для обычного фонового изображения, в Фигуре вы можете добавить к нему наложение цвета или фильтр.
Настройка угла наклона фигуры и округления углов (последнее доступно только для фигуры Квадрат):
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-12_4ujao5.png)
Примечание: вы можете также вращать фигуру вручную. Для этого наведите на один из углов фигуры, и когда вы увидите курсор вращения, зажмите правой кнопкой мыши и потяните в нужную вам сторону:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-12_1nhkkq4.png)
Примечание: более подробно с поворотом элементов вы можете ознакомиться в статье.
Подсказка: вы также можете настраивать округление каждого из углов отдельно, для этого нажмите на иконку рядом с полем градуса закругления.
Обводка. Вы можете выбрать цвет, толщину обводки и ее стиль:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-13_eamgji.png)
Добавление тени. В рамках этой функции вы можете указывать положение тени по осям Х и У, размытие тени и ее размер:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-14_t7a5q4.png)
Зеркальное отображение фигуры. Вы можете ее отражать по вертикали и горизонтали:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-15_137lpiq.png)
Редактирование размера фигуры. Для этого вам достаточно зажать один из углов или сторон фигуры и потянуть в нужную сторону.
Примечание: если вы активируете опцию "Оригинальные пропорции" в настройках элемента, то при увеличении или уменьшении размера фигуры она будет сохранять оригинальное соотношение сторон.
Действие. Для этого элемента доступен общий перечень действий при нажатии:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-16_1bk047v.png)
После добавления фигуры не забудьте опубликовать ваш сайт, чтобы изменения отобразились на нем.
Важно: данный элемент пока доступен только для Flex-блока.
Далее в статье мы рассмотрим, как добавить этот элемент и как вы можете с ним работать.
Чтобы добавить Фигуру, нажмите на синюю иконку с белым плюсиком в верхнем левом углу Flex-блока и выберите соответствующий элемент в списке:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-1_kdu1ze.png)
Для настройки вашего элемента, нажмите на появившийся квадрат и перейдите к его настройкам:
![](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)
Подсказка: как и для обычного фонового изображения, в Фигуре вы можете добавить к нему наложение цвета или фильтр.
Настройка угла наклона фигуры и округления углов (последнее доступно только для фигуры Квадрат):
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-12_4ujao5.png)
Примечание: вы можете также вращать фигуру вручную. Для этого наведите на один из углов фигуры, и когда вы увидите курсор вращения, зажмите правой кнопкой мыши и потяните в нужную вам сторону:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-12_1nhkkq4.png)
Примечание: более подробно с поворотом элементов вы можете ознакомиться в статье.
Подсказка: вы также можете настраивать округление каждого из углов отдельно, для этого нажмите на иконку рядом с полем градуса закругления.
Обводка. Вы можете выбрать цвет, толщину обводки и ее стиль:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-13_eamgji.png)
Добавление тени. В рамках этой функции вы можете указывать положение тени по осям Х и У, размытие тени и ее размер:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-14_t7a5q4.png)
Зеркальное отображение фигуры. Вы можете ее отражать по вертикали и горизонтали:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-15_137lpiq.png)
Редактирование размера фигуры. Для этого вам достаточно зажать один из углов или сторон фигуры и потянуть в нужную сторону.
Примечание: если вы активируете опцию "Оригинальные пропорции" в настройках элемента, то при увеличении или уменьшении размера фигуры она будет сохранять оригинальное соотношение сторон.
Действие. Для этого элемента доступен общий перечень действий при нажатии:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-16_1bk047v.png)
После добавления фигуры не забудьте опубликовать ваш сайт, чтобы изменения отобразились на нем.
Обновлено на: 22/01/2024
Спасибо!