Shapes

The Shape widget allows you add icons, draw lines and arrows, create custom shapes from SVG code, and adjust them easily.

How to add and adjust the Shape widget?

1. There are 2 main ways you can add the Shape widget to your layout:
   1. Open the widget dialogue by clicking the plus icon in the toolbar on the left. Select the ‘Shape’ widget from the ‘Basic’ section.
   2. Simply click on the icon with a rectangle and circle in the toolbar on the left.

2. Next, select the desired shape from the list.

3. Select your shape and locate the Shape Settings section in the Control Panel. Here, you can change the fill color, stroke color, and stroke weight of your shape.
   1. Fill Color: This attribute adjusts the fill color and opacity of your path.
   2. Stroke Color: This attribute adjusts the stroke color and opacity of your path.
   3. Stroke Weight: This attribute allows you to increase the thickness of your Shape widget's stroke

How to edit the Shape widget's SVG code?

1. Locate the SVG Settings section in the Control Panel, situated just above the Shape Settings section. Click on it.

2. Here you can find the SVG code for the shape and make any custom adjustments if needed.

How to adjust the Shape widget's path?

1. Click on the Layers tab in the top left corner.
2. Locate your Shape widget in the layers list and follow these steps:
   1. Expand the Shape widget layer.
   2. Then, expand the SVG layer within it.
   3. Select the desired Path.
3. Next, find the Shape Settings in the Control Panel. Here you can adjust the following attributes:
   1. Fill Color: This attribute adjusts the fill color and opacity of your shape.
   2. Stroke Color: This attribute adjusts the stroke color and opacity of your shape.
   3. Stroke Weight: This attribute allows you to increase the thickness of your shape widget's stroke.
   4. Stroke Style: Here you can change the stroke style from the default Solid to Dashed and Dotted.
   5. Dasharray: Here you can increase the size of dashes.
   6. Cap Type: This attribute allows you to select the type of endings for your shape line. "Butt" is the default option, which allows you to set a different option for each ending in the selector below. The "Square" option makes both endings square, and the "Round" option makes both endings rounded.
   7. Cap Selector: The cap selector offers an extensive list of options for line endings. Here, you can manually set the cap for each line ending.

How to create and adjust the line/arrow Shape?

1. Select the line or arrow option from the Create Shape section.
2. Locate the Shape Settings section in the Control Panel and make the necessary adjustments. This Shape Settings section is similar to the Shape Settings section for paths, except it lacks the Fill Color option, as line and arrow shapes only have a stroke.

How to create your custom shape from SVG code?

1. Select the SVG option from the Create Shape section.

2. Paste your SVG code into the field on the right side.

3. The adjustment of the custom SVG shape is executed through the Path's Shape Settings section, as we mentioned before.