Shape elements (rectangles/boxes, circles, lines)

In case you want to use geometrical shapes on your page, either as transparent overlays for other elements or as standalone design elements, you can do so as described below.

To add a rectangle shape to your landing page, select the box widget from the left sidebar:

image of box widget in the left sidebar

A circle shape can get added to the landing page by selecting the circle widget from the left sidebar:

image of the circle widget in the left sidebar

You can add transparency to your rectangle or circle shapes by selecting the shape with the mouse cursor and then clicking the Edit button. Afterward, the shape's settings menu will appear on the right side of the screen. To alter the transparency, you will need to drag the Opacity bar to the desired percentage:

image of editing options such as setting transparency for the box widget

 

There are also times when adding a background pattern or specific image to a box or circle shape makes perfect sense. You can upload your own images to be used as the background of either of these two shapes. Here are the steps for adding a background to your box or circle shapes:

1. Select the desired shape and then click on the "Edit" button;

image of the edit button on the circle widget

2. Click the "Background image" option and upload any image you want to use;

image of the background image option

3. You can then use the control panel to change the positioning of the image on your shape.

image of the circle styling options

If you want to add a drop shadow to the box or circle, you can do so by turning on the Drop Shadow toggle below the Opacity slider, then customizing the drop shadow's color and positioning using the controls.

image of the Drop Shadow toggle below the Opacity slider

GIF of working with the Drop Shadow toggle below the Opacity slider

 

Both horizontal and vertical line elements can also be added to your landing pages from the left sidebar menu:

image of the horizontal and vertical line widgets

Note: The vertical line elements will not get displayed on the mobile version of the landing page.
Note: Shapes cannot have click events attached to them. If you would like to create a clickable element, you can use a button, an image or a text element.