Adding a Shape element

In the field of design, even simple tools can add a unique style and expression to your website. One of such tools is the Shape element, which you can add to your website as part of the Flex block.

Important: this element is currently only available for the Flex block.

In this article, we will show you how to add this element and how you can work with it.


To add a Shape, click on the blue icon with a white plus sign in the upper left corner of the Flex block and select the appropriate element from the list:



To customize your element, click on the square that appears and go to its settings:



The following options are currently available for this element:

Select a shape. You can choose any of the available shapes:



Currently following shapes can be added:

• Square;

• Circle;

• Triangle;

• Rhombus;

• Rhombus with concave sides;

• Rounded rhombus with concave sides;

• 10-point star;

• Semicircle;

• Hexagon

• Spot.


You can set the shape's fill color (solid or gradient) or set a photo as the shape's background:



Tip: Just like with a regular background image, you can add a color overlay or filter to a Shape.

Adjust the shape's Rotation and corner rounding (the latter is available for Square only):



Note: You can also rotate the shape manually. To do this, hover over one of the corners of the shape, and when you see the rotation cursor, right-click and drag in the direction you want:



Tip: You can also adjust the rounding of each corner separately by clicking on the icon next to the rounding degree field.

Outline: You can choose the color, thickness, and style of the outline:



Shadow: Here you can specify the position of the shadow in the X and Y axes, the blurring of the shadow, and its size:



Flip the shape. You can flip the shape vertically and horizontally:



Edit the shape size. To do this, just hold down one of the corners or sides of the shape and drag it in the desired direction.

Note: If you enable the Original aspect ratio option in the element's settings, the shape will retain its original proportions when you resize it.

Action. A general list of click actions is available for this element:



After adding a shape, don't forget to publish your site to make sure that the changes are reflected on your site.

Updated on: 01/22/2024