Work with landing page layouts
Learn how to design a layout for your landing page .
If you are designing a landing page from scratch or using a predefined template in the landing page editor, you usually start by designing an overall structure, which might consist of multiple layouts. You do this by dragging and dropping different layouts into the editing area and dividing the blank workspace into different rows. Each row can have different slots where you can add items to build your design.
To be able to add items to a landing page, it must have at least one layout.
Add a layout
To add a layout:
In the left pane of the editor, click the Layouts tab.
Drag and drop a layout into the editing area. You can select and combine these types of layouts:
Full Width Container - a vertical slot which extends to the complete width of your design.
Half Width Container - a row divided into two equally sized vertical slots.
1/3 - 2/3 Container - a row divided into two vertical slots, with the first having half the width of the second.
2/3 - 1/3 Container - a row divided into two vertical slots, with the first having twice the width of the second.
3 X 1/3 Container - a row divided into three equally sized vertical slots.
4 X 1/4 Container - a row divided into four equally sized vertical slots.
Repeat the process to add more layouts.
Move, duplicate, or remove a layout
To move, duplicate, or remove a layout, or to save a custom layout:
In the editing area, hover your mouse over a layout to display the Actions menu:
Click one of the options on the Actions menu:
To move the layout to a different row in the editing area, click Move
. You can move a layout to rearrange the sequence of rows.To edit the settings of a layout, click Settings
.To create a copy of the layout including its items and settings, click Duplicate
.To delete the layout from your design, click Remove
.To save a layout design for future use click Save custom layout
. After you have named and saved it, you can access this layout in the Layouts tab.
Edit the settings of a layout
To edit the layout settings:
In the editing area, hover your mouse over a layout to display the Actions menu and click Settings
.In the Layout settings pane on the right, you can set the following:
Padding - click
to display the padding options and enter a padding from 0 to 2000.Layout color - select the layout's color. The default color is transparent.
Layout Background Color (Wide) - select the layout's background color. The default color is transparent.
Layout Width - enter a number (or click
) to edit the layout's width.Border Width - enter a number (or click
) to edit the layout border's width.Border Radius - enter a number (or click
) to edit the border's radius from 0 (rectangle) to 2000 (circle).Layout Border Color - select the layout's border color.
Add Content Background Image - click to open the image picker and select and upload a content background image. The selected image is applied within your layout's width.
Add Wide Background Image - click to open the image picker and select and upload a wide background image. The selected image covers the whole width of the layout, from one end of the page to the other.
Background Image Repeat - select the option to repeat the background image in the horizontal (x), vertical (y), or both horizontal and vertical axes of the layout.
Change Background Image - click to select a new background image and replace the current one.
Remove Background Image - click to delete the current background image.
To change the settings of the layout slots, click the Slot drop-down menu. You can set the background color, vertical alignment, and border radius.