If you are designing a landing page from scratch or using a predefined template in the Landing Page Designer, you usually start by designing an overall layout. From the Layouts tab, you can drag and drop different layouts to divide the blank workspace and create your design.
The image shows the Layouts tab, the Actions menu, the Layout settings, and the Slot settings.
Click here to view the image in full size
A. Add a layout
- In the designer's left pane, click the Layouts tab.
- Drag and drop a layout into the editing area. You can select and combine these types of layouts to create your landing page layout:
- Full Width Container - one vertical slot which extends to the complete width of your design.
- Half Width Container - one layout divided into two equally sized vertical slots.
- 1/3 - 2/3 Container - one layout divided into two vertical slots, with the first having half the width of the second.
- 2/3 - 1/3 Container - one layout divided into two vertical slots, with the first having twice the width of the second.
- 3 X 1/3 Container - one layout divided into three equally sized vertical slots.
- 4 X 1/4 Container - one layout divided into four equally sized vertical slots.
B. Move, duplicate, or remove a 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:
- Move - moves the layout to a different location in the editing area. You can move a layout to rearrange the sequence of layouts.
- Settings - opens the right pane to display the Layout settings.
- Expand - expands the menu to show additional actions for layouts.
- Duplicate – creates another copy of the layout including its items and settings.
- Remove - deletes the layout in your design.
- Save custom layout - saves a layout design for future use. After saving, you can access this layout in the Layouts tab. See save a custom layout for re-use to learn more.
C. Edit the layout settings
- In the editing area, hover your mouse over a layout to display the Actions menu.
- Click Settings to display the Layout settings in the designer's right pane. You can set the following:
- Padding: click the lock icon to display these options: Padding Top, Padding Bottom, Padding Left and Padding Right, then enter the layout padding or use the up and down arrows to edit the padding from 0 to 2000.
- Layout Color: select the layout color. By default, this is set to Transparent.
- Layout Background Color (Wide): select the layout background color. By default, this is set to Transparent.
- Layout Width: enter the width or use the up and down arrows to edit the layout width.
- Border Width: enter the border width or use the up and down arrows to edit the width.
- Border Radius: enter the border radius or use the up and down arrows to edit the radius from 0 (rectangle) to 2000 (circle).
- Layout Border Color: select the layout border color.
- Add Content Background Image: click to browse and select the content background image. The selected image is applied within your layout's width.
- Add Wide Background Image: click to browse and select the 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 for background image repeat in the horizontal (x), vertical (y), both horizontal and vertical axes, full width, or no repeat in the layout.
- Background Image Position: select Initial, Top, Bottom, Right, Left, or Center position for the background image.
- Change Content/Wide Background Image: select a new content or wide background image to replace the current one.
- Remove Content/Wide Background Image: click to delete the layout ’s content or wide background image.
D. Edit the slot settings
- To change the settings of the layout slots, click the Slot drop-down menu. You can set the following:
- Background Color: select the slot background color. The default color is transparent.
- Content Background Color: select the content background color. The default color is transparent.
- Vertical Align: select Top, Middle, or Bottom vertical alignment for items in the slot.
- Minimum Height: enter the minimum height or use the up and down arrows to edit the minimum height for any item contained within a specific slot.
- Padding: click the lock icon to display these options: Padding Top, Padding Bottom, Padding Left and Padding Right, then enter the slot padding or use the up and down arrows to edit the padding from 0 to 2000.
- Border Width: enter the border width or use the up and down arrows to edit the width.
- Border Radius: enter the border radius or use the up and down arrows to edit the radius from 0 (rectangle) to 2000 (circle).
- Border Color: select the color for each slot border.