Customize layouts and section styles

In the Leadpages Builder, you can customize settings for your sections, rows and columns to control how your pages look, function, and feel. Below, you’ll learn how to access and adjust all of your layout settings, including sections, rows, and columns.

Layout

Whether you're editing pages or pop-ups, click Layout on the left-hand side of the builder.

Re-naming elements

To name a section, row, or column, hover near its title and click the edit icon that appears. Choose any name you’d like (such as “Hero”, “Footer”, etc.) and click Save.

Note that naming layout elements doesn’t affect the behavior of page in any way—it can just make it easier to keep track of where everything is. You can also rename any element later.

Add, remove, and re-arrange sections, rows and columns

Within the Layout settings, you can add, remove and re-arrange sections, rows and columns. Re-arrange elements with the brick icon to the left of the section, row, or column title.

Add a section

1. Hover over a section on your page and click the more icon next to the section title.
2. Hover over "Add section" and select if you would like the new section to go "Above" or "Below" the existing section.
3. The Sections template pane will open and you'll be able to select which "Section Type" you'd like to browse from the drop-down in the left sidebar, including a "Blank" type if you're not seeing what you're looking for.
4. Once you have found the section you'd like to start with, click inside the section on your page and start editing.

You can add as many sections and rows as you’d like, and up to six columns per row.

For best conversion, we recommend limiting the number of sections on your page.

Remove a section

1. Hover over the section you would like to delete and click the more icon next to the section title.
2. Click Delete and confirm your action.

Add rows/columns

1. Hover over the section on your page where you would like to add the row or column and click the section title at the top-left corner of the section.
2. Click the < icon next to the "[Section title] Settings".
3. Expand an existing row within that section by clicking the  down_angle .
4. Click +Add, then "Add a Column" or "Add a Row."

Remove rows/columns

1. Hover over the section on your page where you would like to delete the row or column and click the section title at the top-left corner of the section.
2. Click the < icon next to the "[Section title] Settings".
3. Expand the existing row you would like to delete or row that contains the column you would like to delete by clicking the  down_angle .
4. Hover over the row or column you would like to delete and click the trash icon. Confirm by clicking Delete.

Each section must have at least one row, and each row must have at least one column. As such, you cannot delete the only row in a section or the only column in a row.

Copy + paste sections

Sections can be copied and pasted amongst any Leadpages site, landing page or pop-up. They can be used interchangeably to allow for even faster creation of your conversion assets.

Steps to copy + paste sections:

1. Hover over the section you'd like to copy and click the actions menu more at the top-left corner of the section.
2. Select Copy.
3. To paste, hover over any section on a site, page or pop-up and click the actions menu more at the top-left corner of the section.
4. Hover over Paste and select "Paste Above" or "Paste Below."

Duplicate sections, rows and columns

You can duplicate elements of the template from within your page layout settings. This is especially helpful when looking to create a device-specific sections on your page.

Duplicate a section

To duplicate a section, hover over the section, then click the actions menu more at the top-left corner of the section. Select "Duplicate."

Duplicate rows and columns

In the Layout tab, you can also duplicate sections, rows and columns by hovering over the actions menu more to the right of the element you'd like to duplicate, then click the duplicate icon.

Edit site footer

In the Leadpages sites builder, you have the option to set a global footer across all pages on your site. At the bottom of the sections listing in your Layout tab, you'll find a "Site Footer" section with a lock icon next to it.

Edit the site footer just as you would any other section of your page. It will then be applied to every page on your site.

You can hide the site footer by clicking the eye icon.

Section settings

For quick access to any section’s settings hover over the section in the builder and click the section's name in the top-left corner.

Within the settings panel, you’ll find tools to change the following options:

Background color, image or video

You have the option in the builder to add a background color, image, or video to your page's sections.

When you add a background image or video to a page, it will automatically scale to fit devices of different sizes—or even differently-sized browser windows.

You can adjust positioning options for background images to control how they appear on your page. Learn more about each option below.

Best practices

• Use background images and videos that act more as an accent than a major call to action. Remember, the template has to take into account many different image viewing sizes, from a large screens to mobile phones.
• For a background image to work best on all devices, we recommend against using background photos containing important elements or information that must be viewed or that you'd like to be viewed across all devices. This might include calls to action or other special text and images.

Sizing

You can choose between three settings: 

• Fill Container: This option will ensure your image always fills its containing section and maintain its aspect ratio—so it may be cropped or scaled on small devices.
• Fit to Container: Your full image will be displayed, even if it’s a different aspect ratio than its section, which may leave space on the sides.
• Auto: Our builder will automatically display your image based on its original size and aspect ratio.

Each option comes with compromises, and you may need to play around with the three settings to determine which one works best for specific scenarios. 

To resize the actual image you uploaded, we would recommend using an online resource like one of these listed below, then add the image to your page.

• LunaPic
• Pixlr
• Optimizilla

Alignment

If you’re using the Fill Container or Auto sizing option, you may want to also adjust the vertical alignment of your image. You can choose between Top, Center, and Bottom alignment options, each of which will “pin” your image to the corresponding position of its container. For instance the Top option will force the top of a background image to match the top edge of its container. 

Repeat

To make a background image repeat, select the repeat direction from the layout settings panel: Horizontally, Vertically, or Both. This works well with tile-able patterns and designs, like the icon background in our example “Master Your Camera” section here.

Video

Leadpages supports YouTube, Wistia and Vimeo links for video backgrounds. After choosing the Video tab from Background, paste your link and click Add.

Once the video has been added, click the play button to see your video in action in the builder. Click the stop button to stop the video while you edit the rest of your content.

All video backgrounds will autoplay and auto-loop in preview and on published content.

Adding a color overlay

Color overlays make it possible to make text on top of images or videos more legible. Here’s how:

1. Hover over the section where you'd like the background image or video and click the section title at the top-left corner of the section.
2. If you haven't added a background image or video yet, add the content of your choice under the Image or Video tabs.
3. Then click the color picker next to Color Overlay, then ADD next to "Recent Colors."
4. Adjust your color and opacity and you're all set!

Padding

Increase padding parameters to create space between section edges and your content.

Minimum height

Some sections benefit from taking up more space. You can set a minimum height of 50%, 75%, 90%, or Full to adjust how tall your section will appear. Use the alignment settings to control where content should sit within your section.

In the example above, we set the section’s minimum height to 75% and alignment to “Center” to make the first section of the page stand out.

Shape Divider

Add a section shape divider to the top or bottom of your section to enhance the design of your page.

Select a shape from the dropdown menu, then set the shape divider color, height and width.

Timing control

With timing control settings, you can delay a section’s appearance for a set amount of time. One popular use case for this setting is to delay the appearance of a shopping cart or buy button. That way, visitors have time to read or watch an offer before they are prompted to buy your product.

Our countdown widget is another clever way to show (or hide) specific sections after a time delay. For details, check out the widget guide here.

Device specific display

Here, you can configure a section to only show up on specific devices. Though all of our templates are designed to be mobile responsive, device-specific sections allow for even greater control. Learn more about optimizing your page for mobile devices here.

Animation

You can make your sections animate as a visitor scrolls down your page with the animation setting. You can have your content fade in, shake, bounce in, and more!

Choose which type of animation you would like for a specific section, then press the play button to preview what it will look like when someone arrives there on your page.

Animations will play only once when someone visits your page. If they refresh or revisit your page, the animations will play again.

Column settings

Columns and sections share quite a few style options in common. However, there are a few key differences.

• Columns can have their own backround image or color. Therefore a column's background can sit on top of an existing section background.
• Minimum height, timing controls, and device-specific display settings are not available for columns.
• You can adjust columns’ margins as well as padding. Margin settings control the space outside the column (between other columns and rows). Padding options control the amount of space between a column’s edges and content within that column.

Access column settings

1. Hover over the section on your page where the column is located and click the section title at the top-left corner of the section.
2. Click the < icon next to the "[Section title] Settings".
3. Expand an existing row within that section by clicking the  down_angle .
4. Hover over the column's title and click the gear icon to access its settings.