This article covers how to set up and configure the layout of a Keap™ Legacy Landing Page template, including the layout hierarchy of sections, rows, columns, and elements, and how to use the Layout panel to navigate and edit the page structure. This article does not cover managing color settings on a landing page. For help with landing page color settings, see how to manage colors on Keap Legacy Landing Pages. For a list of custom fields that can and cannot be used on a landing page, see supported and unsupported custom fields on Keap Legacy Landing Pages.

Why Understanding the Layout System Helps You Build Better Landing Pages

Keap Legacy Landing Pages are built on a layered layout system — sections, rows, columns, and elements — that gives you full control over the structure and appearance of every page. Understanding how these layers work together makes it faster to build a professional landing page, troubleshoot layout issues, and make precise design changes without affecting unintended parts of the page. Every piece of content on a landing page — whether it is a heading, an image, or a button — sits inside this layer structure.

How to Set Up and Design a Keap Legacy Landing Page Template

1. Enter a name for the landing page. The name entered here appears in the browser title bar when the landing page is open. Visitors will see this name in the browser tab and title bar, so choose a name that accurately represents the page content.

   

   The screenshot above shows the Keap Legacy Landing Page editor with the page name field visible. The name entered in this field appears in the browser title bar and browser tab when a visitor opens the published landing page.

2. Understand the landing page layout hierarchy. Keap Legacy Landing Pages use a four-level layout hierarchy. Each level sits inside the level above it:

   • Section — The foundational layer of the page. All other layout elements sit inside a section. A section typically spans the full width of the page. For example, a hero section is a full-width section at the top of the page that contains the primary headline and call-to-action.

   • Row — A horizontal layout element that sits inside a section. A section can contain multiple rows. For example, a hero section might contain a top row with social media icons, a middle row with headline text, and a bottom row for additional content.

   • Column — A vertical layout element that sits inside a row. A row can contain multiple columns. For example, a single row can be divided into three columns to display content side by side.

   • Element — The content item that sits inside a column. Only one element can be placed in each column. Element types include Text, Image, Button, and other content types available in the element panel.

   

   The screenshot above shows an example hero section on a Keap Legacy Landing Page. The section boundary is highlighted to illustrate the foundational section layer. All rows, columns, and elements on the page are contained within sections.

   

   The screenshot above shows a hero section on a Keap Legacy Landing Page with three rows visible. The top row contains social media icons, the middle row contains the hero headline text, and the bottom row has been added but not yet configured with content. Each row spans the full width of the section.

   

   The screenshot above shows a row on a Keap Legacy Landing Page divided into three columns. The column boundaries are highlighted. Each column is a separate vertical container that can hold one content element.

   

   The screenshot above shows a column on a Keap Legacy Landing Page with a content element selected inside it. The element configuration panel appears on the right side of the editor when an element is selected. Each column can contain only one element.

3. Select Layout in the editor to open the Layout panel. The Layout panel displays the full structure of the landing page — all sections, rows, columns, and elements — in a navigable list. Hovering over any item in the Layout panel scrolls the editor to that element on the page.

   

   The screenshot above shows the Keap Legacy Landing Page editor with the Layout button selected. The Layout panel displays the full page structure as a navigable list. Sections, rows, columns, and elements are listed in their hierarchical order. Hovering over any item in the list scrolls the page editor to that item.

   

   The screenshot above shows the Layout panel open in the Keap Legacy Landing Page editor with a layout element highlighted. The corresponding section or row is highlighted in the page editor view as the cursor hovers over the element in the Layout panel. Use the Layout panel to navigate to any part of the page quickly.

4. Select an element to configure it. To add a new element to a column, select the element type from the element panel on the left side of the editor and drag it into the desired column on the page. When an element is selected, the configuration panel slides out from the right side of the editor displaying the settings available for that element type.

   

   The screenshot above shows the Keap Legacy Landing Page editor with a new image element being added to a column in the hero section. The element configuration panel is open on the right side of the editor displaying the image element settings. The element panel on the left side of the editor displays the available element types that can be dragged into columns on the page.

Note: Not all custom fields are supported on Keap Legacy Landing Pages. For a complete list of custom fields that can and cannot be used on a landing page, see supported and unsupported custom fields on Keap Legacy Landing Pages.

Frequently Asked Questions

What does this article cover?

This article covers how to set up and configure the layout of a Keap Legacy Landing Page template, including the layout hierarchy of sections, rows, columns, and elements, and how to use the Layout panel to navigate and edit the page structure. For help with landing page color settings, see how to manage colors on Keap Legacy Landing Pages. For a list of supported custom fields, see supported and unsupported custom fields on Keap Legacy Landing Pages.

What is the layout hierarchy on a Keap Legacy Landing Page?

Keap Legacy Landing Pages use a four-level layout hierarchy from top to bottom — Section, Row, Column, and Element. A section is the foundational layer and contains all other elements. A row is a horizontal element that sits inside a section. A column is a vertical element that sits inside a row. An element is the content item — such as text, an image, or a button — that sits inside a column. Only one element can be placed in each column.

How many elements can I place in a single column?

Only one element can be placed in each column on a Keap Legacy Landing Page. To add more content side by side, add additional columns to the row. Each column can then contain its own element.

What does the Layout panel do?

The Layout panel in the Keap Legacy Landing Page editor displays the full page structure as a navigable list of all sections, rows, columns, and elements on the page. Hovering over any item in the Layout panel scrolls the page editor to that element. Use the Layout panel to navigate to any section of the page quickly and to add, move, or remove layout elements.