The Nested Rows feature in ClickFunnels allows you to create more complex and flexible layouts by nesting rows within columns and Flex containers. This advanced layout tool gives you greater control over the arrangement of your page content and helps you build more dynamic designs. In this article, we’ll explain Nested Rows, how to use them, and when to use them for your pages..png "image(477).png")
Requirements
An active ClickFunnels account
A page created in your workspace
A Row or Flex container
Understanding Nested Layouts
A Nested Layout allows you to create more intricate and organized designs by placing rows within columns of another row or inside a Flex container. This setup gives you additional flexibility to structure content and align elements in a visually appealing way. In ClickFunnels, Nested Rows are the primary tool used to build these layouts efficiently. Using Nested Rows, you can design complex layouts such as multi-layered product grids, advanced call-to-action sections, or custom forms, all while keeping your design clean and responsive. Below is an example of how Nested Layouts are structured, including section, rows, columns, nested rows, and flex containers:.png "image(482).png")
What are Nested Rows
Nested Rows are containers that function similarly to regular rows but are designed to be placed inside the columns of a row or in a Flex container. This enables you to create more intricate layouts within a single row.
Key Features of Nested Rows
Nested Rows as Containers: These are essentially rows that can be added inside a column of an existing row or a Flex container alongside other elements.
Accessible in the Elements Panel: You will see Nested Rows as an option in the Elements menu when adding an element.
Maximum Column Support: Nested Rows can have a maximum of 3 columns, making them suitable for creating compact and structured layouts.
Placement Options: Nested Rows can be placed:
Inside the column of a Row.
Inside a Flex Container, offering additional alignment and spacing options.
Behavior of Nested Rows
When you add a Nested Row in ClickFunnels, the editor automatically creates a new Section to wrap around the nested content. This wrapper Section acts as a container for the Nested Row, ensuring that all elements and layout adjustments within this structure are organized and contained separately..png "image(479).png")
How the Wrapper Section Works
When you insert a Nested Row into a Row Column, the editor generates a new wrapper Section to house the Nested Row. This maintains a clear structure for your layout and prevents elements from overlapping or misaligning.
Similarly, if you add a Nested Row inside a Flex container, the editor treats the wrapper Section of the Nested Row as a single child within the Flex layout. This means that all columns and elements inside the Nested Row are grouped under one cohesive structure, ensuring smooth alignment and spacing within the Flex Container.
How to Use Nested Rows
Insert a Nested Row:
In the page editor, navigate to the Row or a Flex container where you want to add a Nested Row.
Click the orange + Plus or Add New Element button inside the container to insert a new element.
Select Nested Rows from the element list.
Choose the column layout for your Nested Row (e.g., 1 column, 2 columns, or 3 columns).
.png "image(481).png")
Add Elements Inside the Nested Row:
Once the Nested Row is placed, click inside its columns to add Elements such as text, buttons, or images.
Customize the Nested Row:
Use the settings panel to adjust the alignment, spacing, and styling of the Nested Row and its columns.
Learn more about Rows and its settings in the Page Editor: Adding Rows article.
Tips for Using Nested Rows Effectively
Keep It Manageable: While Nested Rows add flexibility, avoid overusing them in a single layout to keep your design simple and easy to maintain.
Combine with Flex Containers: For advanced responsive designs, use Nested Rows inside Flex containers to enhance layout adaptability across screen sizes.
Preview on Mobile: Always check how Nested Rows behave on mobile devices. Adjust settings or use Flex properties to ensure content remains visually balanced.