Register

Create a landing page layout

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 containers to create your layout and divide the blank workspace into different rows.

The image shows the Layouts tab, the Actions menu, and the Row settings, and the Slot settings.LayoutLP2.png
Click here to view the image in full size

A. Add a container

  1. In the designer's left pane, click the Layouts tab.
  2. Drag and drop a container into the editing area. You can select and combine these types of containers 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 row divided into two equally sized vertical slots.
    • 1/3 - 2/3 Container - one row divided into two vertical slots, with the first having half the width of the second.
    • 2/3 - 1/3 Container - one row divided into two vertical slots, with the first having twice the width of the second.
    • 3 X 1/3 Container - one row divided into three equally sized vertical slots.
    • 4 X 1/4 Container - one row divided into four equally sized vertical slots.

B. Move, duplicate, or remove a container

  1. In the editing area, hover your mouse over a container to display the Actions menu.
  2. Click one of the options on the Actions menu:
    • Move - moves the container to a different row in the editing area. You can move a container to rearrange the sequence of rows.
    • Settings - opens the right pane to display the Row settings.
    • Expand - expands the menu to show additional actions for containers.
    • Duplicate – creates another copy of the container including its items and settings.
    • Remove - deletes the container in your design.
    • Create Clone Block - saves a container design for future use. After saving, you can access this container in the Layouts tab.

C. Edit the container settings

  1. In the editing area, hover your mouse over a container to display the Actions menu.
  2. Click Settings to display the Row settings in the designer's right pane. You can set the following: 
    • Padding: click the lock icon to display these options: Padding TopPadding BottomPadding Left and Padding Right, then enter the row padding or use the up and down arrows to edit the padding from 0 to 2000. 
    • Row Color: select the row color. By default, this is set to Transparent.
    • Row Background Color (Wide): select the row background color. By default, this is set to Transparent.
    • Row Width: enter the width or use the up and down arrows to edit the row 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).
    • Row Border Color: select the row border color. 
    • Add Content Background Image: click to browse and select the content background image.  The selected image is applied within your container's width. 
    • Add Wide background Image: click to browse and select the wide background image.  The selected image covers the whole width of the container, 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), or both horizontal and vertical axes in the container.
    • Background Image Position: select Initial, Top, Bottom, Right, or Left 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 container’s content or wide background image.

D. Edit the slot settings

  1. To change the settings of the container 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 TopPadding BottomPadding 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 Colorselect the color for each slot border.