Index


Shapes can be used to create backgrounds, borders, and visual effects in your design. In the example below, rectangle shapes with reduced opacity are placed over the thumbnails to make them appear less prominent than the selected drink.



Adding a Shape


To add a shape to your canvas, open the Shapes panel on the left-hand side and click the Plus (+) button beside the shape you want to add.




Customizing a Shape


Once added, a shape can be customized using the Shape Settings panel on the left-hand side of the editor. 




You can adjust the following properties: 


Fill Color

  • To change the background color of your shape, click the color bar next to Fill Color. This will open the Flexitive Color Picker, where you can set the color and opacity of the shape. For more details, check out our article on the Flexitive Colour Picker. 


Border Color

  • To change the border color of your shape, click the color bar next to Border Color. This will open the Flexitive Color Picker, where you can set the color and opacity of the border. For more details, check out our article on the Flexitive Colour Picker.


Border Width

  • To add a border to your shape, use the Border Width option. The border width is set to 0% by default, and increasing the percentage will increase the thickness of the border. 
  • Note: Border Width is not available for all shapes.


Border Radius

  • For a rectangle, you can round the corners of your shape by changing the Border Radius. By default, the Border Radius is set to 0% and will have square corners, and increasing it will round the corners of the rectangle. Setting the Border Radius to 100% will completely round the edges to the shape of an oval. 
  • Note: Border Radius is not available for all shapes.


Drop Shadow

  • Use the drop shadow option to add depth and dimension to your designs. You can customize drop shadows by adjusting the angle, size, color, and distance. Learn more about Drop Shadows.


Opacity

  • To adjust the transparency of your shape, use the Opacity slider. Lower values make the shape more transparent, while 100% keeps it fully visible. Learn more about Opacity.