Need help? You’ve come to the right place

What’s New Getting Started Building Integrating Publishing

Customize layouts and section styles

Last Updated

In the Leadpages Builder, you can customize settings for your sections, rows and columns to control how your page looks, functions, and feels. Below, you’ll learn how to access and adjust all of your page and pop-up layout settings.

 

Page Layout

To access your page's layout settings, click on the stacked pages icon 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 pen 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. Remove elements by hovering over them, then clicking the trash icon. Click +Add to add a section, row, or column.

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.

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.

WARNING: When you delete a layout element, all of its widgets will also be deleted.

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."

NOTE: Some content will not be transferred when a section is pasted: pop-ups on a button, OpenTable widgets on sites or pop-ups, and share or like widgets on pop-ups.

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.

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

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 section and column settings

To edit section or column settings from within page layout settings, hover over the more to the right of the section or column title you'd like to edit and click on the gear 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.

Or, click the gear icon next to Section Style in the Layout settings panel as previously shown above.

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

Background

Use the color picker to choose from your brand colors, recent colors, or click ADD next to "Recent Colors" to enter hex codes or select a different color for your background as seen below.

For images, we recommend using a picture that’s at least 1200 px wide or a smaller pattern that’s designed to repeat. Because your background image will scale to fit different devices, it’s best to use pictures that don’t contain essential elements like text or faces.

If you do add an image, you can control its placement with the sizing, alignment, and repeat settings. And, you can increase visibility of elements within the section by adding an image color overlay. To add a color overlay, click the color picker next to Image Cover Overlay, then ADD next to "Recent Colors" as seen below.

TIP: Decrease the opacity of an image color overlay to make sure your image can show through.

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.

Arrow border

Use these settings to add an arrow effect to your section—which can help gently guide visitors to scroll up or down your page.

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.

WARNING: Time delay settings can make your page seem broken or slow, because certain sections will only load after several seconds or minutes. It’s best to combine a time delay with a video or text that clearly indicates when a section will appear.

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.

TIP: To totally customize your page’s appearance for different devices, duplicate sections and edit them for desktop, tablet, and mobile screen sizes. Then, adjust each section’s device-specific display settings to make the correct section appears for each visitor.

Column settings

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

  • Minimum height, timing controls, and device-specific display settings are not available for columns.
  • You can add arrow borders to the right or left of a column, in addition to the top or bottom.
  • 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.


Need more help?

You can always get in touch with our support team—just click help_circle in the top-right corner of your Leadpages dashboard, or submit a ticket ↗

Was this article helpful?
Powered by Zendesk