Create, publish and optimize pages with a drag&drop, pixel perfect and mobile-friendly builder

Speed up the creation process with 400+ customizable templates for landing pages, pop-ups and sections

Track microconversions in your Dashboard and analyze events and clicks with visual map

Integrate your pages with your favorite mar-tech apps and solutions to get the flow of your campaign going

Drive sales and conversions with irresistible product displays and seamless shopping experiences

Use a reliable and secure platform that smoothly handles millions of visits


Master digital marketing with the help from savvy professionals and increase your website’s conversions

Guides for beginners, set-up instructions and creation tips to get started and optimize your pages

A free online course for landing page creators! Learn the secrets of high-converting pages and become an expert

Get the answers you’re looking for – contact us

Schedule a one-on-one meeting with us and learn more about the benefits of our platform

Hire a Design Expert or order an import of your existing page from other platforms to Landingi

Home Help Center Shapes widget: square, ellipse, and lines

Shapes widget: square, ellipse, and lines


Shapes are simple graphic elements that allow you to add visual interest to your page, divide your landing page into parts, create backgrounds for images to enhance their display, highlight a product with an attractive border, and more. Squares, ellipses, vertical lines, and horizontal lines are basic shapes, yet they offer limitless design possibilities.

This guide explains how to use the Shapes widget and provides some examples of its usage.

Add the Shapes widget

On the left side of the editor, find the Shapes widget, click it, select a shape, and then drag and drop it into the active area of your landing page.

There are four shapes to choose from:

  • square
  • ellipse
  • horizontal line
  • vertical line

Each of them is fully editable.

Edit the Shape

Click on the Shape to start editing. You will see its context menu (1) and toolbar on the right side of the editor (2).

  1. In the context menu, you can change the size of the Shape by clicking on the dots on the frame. The remaining icons let you duplicate the Shape, move it to the top or bottom, and delete it.
  2. In the right-side toolbar, you can turn on/off the mobile or desktop view (the Shape is visible in both views by default) and change the Shape size. Underneath, you will find tabs with additional options. The slider located in the right-hand corner of each tab (except the Other tab, where you can adjust the Shape position, copy the Shape ID, or add a class) allows you to turn them on or off.


The Shape widget can be filled with solid color, gradient, or image.

To customize solid color and gradient options, you can adjust the transparency, including full transparency, and set an angle for the gradient.

When selecting an image, you can choose one from your gallery or browse the Unsplash library. If you use a Shape background with an image, you can apply a parallax effect. Additionally, you can add a layer of color to the image in the Shape background. To do this, click Under or Over, select the color, and then adjust the transparency level.


The Border option for the Shape widget allows you to set the thickness, color, style (solid, dashed, or dotted), and placement of a border.

Rounder corners

The Rounded corners option allows you to set specific values to round corners. To do this, select a corner or choose all (1), then specify the radius (2).


The Shadow option allows you to set values for the shadow of the Shape. You can specify the color, blur, horizontal distance, and vertical distance of the shadow.

Examples of the use of Shapes

You can round one, two, or three corners, creating new shapes. To completely round a corner, set its radius to 600. You can apply similar settings to an Image widget and position it over the Shape. Take a look at the following settings:

With Shapes, you can also create just a border. To do this, turn off the Background option and turn on the Border option. Take a look at the following settings:

To create a dotted or dashed line, turn off the Background, set the height to 0, turn on the Border option, set the thickness (e.g., to 2), and choose the style of the line. Take a look at the following settings:

Shapes and parallax effect

Combining shapes and the parallax effect can create visually interesting elements that effectively grab the attention of your landing page visitors.

Take a look at the following examples of the application of the Shapes widget and parallax effect.

Click to see the effect with a single Shape:

Click to see the effect with multiple Shapes and the same image: