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:

Add_new_box.png

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

Add_new_circle.png

You can add transparency to your rectangle or circle shapes by selecting the shape with the mouse cursor and then clicking the Edit button. Afterwards, 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:

Box_-_opacity.gif

 

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 the editing menu will open on the right;

Circle_-_edit.gif

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

Circle_-_background_image.png

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

Circle_-_image_position.png

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 and 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:

Add_new_lines.png

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. Please see the dedicated guide for that here: https://d.pr/uv8Usi