Creating Advanced Page Layouts with Nested Containers
Build Flexible, Responsive Page Designs
Nested layouts are a powerful feature within the CRM's funnel and website builder that lets you create sophisticated, multi-column page structures. By placing layout containers inside other layout containers, you gain precise control over the arrangement of text, images, forms, and buttons. This capability allows you to build complex, responsive designs for landing pages, product showcases, or pricing tables directly within the visual editor, without needing to write custom code.
Advantages of Using Nested Layouts
This design approach offers several key benefits for building your pages:
- Enhanced Structural Control: Create intricate designs by nesting rows and columns within each other, offering far greater flexibility than standard single-level layouts.
- Live Layout Adjustments: Change the orientation of any container—to a row, column, or collage layout—and see the results update instantly on your canvas.
- Granular Spacing and Alignment: Set custom margins, padding, and alignment for each nested container, giving you pixel-perfect control over the spacing between all your elements.
- Streamlined Design Process: Achieve complex visual arrangements that would normally require advanced CSS or external tools, all through the builder's intuitive interface.
- Reusable Design Patterns: Save any nested layout as a section for use across multiple pages, ensuring visual consistency and saving you time on future projects.
How to Create a Nested Layout
You can set up nested layouts using the drag-and-drop builder. Follow these steps:
- Open the funnel or website you want to edit in the builder.
- From the elements panel, drag a Layout Container and drop it onto your page canvas.
- Drag a second Layout Container from the panel and drop it directly inside the first container. A visual highlight will indicate a valid drop zone.
- With the inner container selected, open its Layout Settings. Here, you can choose its direction, such as Row or Column.
- Use the spacing and alignment tools to adjust the margins, padding, and positioning of elements within the container.
- You can repeat this process, dragging additional containers into existing ones to create deeper nested structures.
- Once your layout is complete, save your page. You also have the option to save the entire nested structure as a reusable section for later.
Common Use Cases
Nested layouts are ideal for creating professional page sections like:
- Side-by-Side Opt-in Forms: Place a headline and form in one column, with supporting testimonials or features in an adjacent column.
- Detailed Pricing Tables: Build multi-column tables with varying column widths for plan names, feature lists, prices, and call-to-action buttons, all perfectly aligned.
- Product or Feature Grids: Design responsive grids where image cards, descriptive text, and buttons maintain consistent alignment across multiple rows and columns.
Frequently Asked Questions
How do I nest one container inside another?
Simply drag a new Layout Container from the left-hand panel and drop it into an existing Layout Container already on your canvas. The builder will provide a visual cue (like a blue highlight) to show you where you can drop it.
Can I nest Sections or Rows?
No. The nesting functionality is specific to the Layout Container element. Standard Sections and Rows cannot be nested inside other elements; they are designed to be top-level containers for performance and clarity.
Is there a limit to how many levels I can nest?
While the system does not enforce a strict technical limit, it's best practice to keep nesting to a reasonable depth—typically three or four levels. Excessive nesting can make the layout difficult to manage and may impact page loading speed.
Do nested layouts work in Saved Sections?
Yes. When you save a section that contains nested layout containers, the entire nested structure is preserved. If you later update that saved section, the changes will sync to every page where the section is used.