Creating a Page Layout

Designing a professional and responsive page layout is key to engaging your audience effectively. The ClickFunnels editor simplifies this process by providing flexible tools like Sections, Rows, Elements, and the Flex Container. In this article, you’ll learn the hierarchy of these building blocks, how to use the Flex Container, and how to optimize your layout for mobile devices.

Requirements

1. An active ClickFunnels account

2. A page created in your workspace

Creating a Layout Using Sections, Rows, and Elements

The ClickFunnels editor organizes your page content using a structured hierarchy to ensure clarity and flexibility during design:

1. Adding a Section

   • Sections are the top-level containers (Labeled as Green)and serve as the primary layout blocks on your page. Each section can contain multiple rows, which hold elements for your content.

   • To add a section, click the Add Section button, choose the desired layout width (full-width, wide, medium, etc.), and place it where you need it on the page. Sections are the "parent" containers, and rows and elements within them are the "child" components. Learn details about adding a section in the Page Editor: Adding Sections article.

2. Adding a Row

   • Rows are added within sections (Labeled as Blue) to further structure your content. Rows contain columns, which help organize elements horizontally. You can add multiple rows to each section, stacking them vertically for a structured layout.

   • To add a row, click Add Row within the section and select the desired column layout ( e.g., single column, two columns, etc., up to 6 columns). This allows you to customize how content is distributed within each section. Learn details about adding a row in the Page Editor: Adding Rows article.

3. Adding Elements

   • Elements are the individual content pieces (Labeled as Orange), such as text, images, buttons, and inputs, that make up your page. Elements are placed within rows, providing the final layer of customization for your page layout.

   • To add an element, click Add Element within a row and choose the type of content you want to add. Elements are the "children" of rows, completing the hierarchy. Learn details about adding an element in the Page Editor: Adding Elements article.

Creating a Layout Using Flex Container

The Flex Container is a highly versatile tool that extends the layout possibilities beyond the fixed structures of Sections and Rows. It allows you to create dynamic, responsive layouts by leveraging the CSS display: flex property. Unlike Sections, Rows, or Elements, the Flex Container does not follow a fixed hierarchy—it can act as any of them depending on your design needs.

How to Use the Flex Container

• As a Section: Use the Flex Container to group large content areas like hero sections, where you might want to align text and buttons dynamically.

• As a Row: Replace traditional Rows with a Flex Container to control the alignment, spacing, and responsiveness of child elements with greater precision.

• As an Element: Add a Flex Container inside a Row to create nested layouts, such as a product card that dynamically adjusts based on available space.

Nesting Flex Containers

You can also nest Flex Containers within other Flex Containers to create advanced layouts. For example:

• A product grid can use a parent Flex Container to align multiple product cards.

• Each product card can be its own Flex Container, aligning the image, title, price, and button dynamically.

• On smaller screens, the parent Flex Container can wrap the product cards, showing them responsively in rows or columns depending on the available space.

For detailed instructions on using Flex Containers, refer to our article Flex: Add Flex Layout Using Flex Container.

Optimizing Layout for Mobile Devices

Ensuring your layout works seamlessly on mobile devices is critical for creating a great user experience. The ClickFunnels editor provides several tools and settings to help you optimize your page for smaller screens.

Mobile-Specific Properties

Certain Elements provide properties tailored for mobile devices. For example, text elements can have their font size adjusted to ensure readability on smaller screens, and Icon Sizes can be customized to ensure icons fit well within a mobile layout.

Device Visibility Settings

You can set Sections, Rows, or Elements to be visible on specific devices:

• All: This is the default setting. The Section, Row, or Element will be visible on all devices, including desktops, tablets, and mobile devices.

• Desktop Only: When enabled, the Section, Row, or Element will only appear on larger screens and be hidden on mobile devices.

• Mobile Only: When enabled, the Section, Row, or Element will only appear on smaller screens and be hidden on desktops.

This feature is particularly useful for creating separate layouts optimized for each device type.

Customizing Flex Containers for Mobile

The Flex Container is especially powerful for mobile optimization:

• Flex Direction: Switch the layout direction to Column for mobile, ensuring content stacks vertically for better readability.

• Wrapping: Enable the Wrap property to ensure child elements flow onto the next line if there isn’t enough space on smaller screens.

• Reordering Content: Use the Row Reverse or Column Reverse properties to rearrange content on mobile. For example, you can move a headline above a call-to-action button for a more intuitive flow on smaller devices.

Preview and Adjust

After making adjustments for mobile:

• Toggle between Desktop and Mobile views in the editor to preview your layout on different devices.
  

• Fine-tune mobile-specific settings to ensure an optimized and responsive design.

Adding Saved Content

The ClickFunnels editor allows you to save Sections, Rows, and Elements as templates, making it easy to reuse them across different pages or even within the same page. This feature streamlines the design process, saving you time and effort when building consistent layouts or reusing specific content.

How to Use Saved Content

• Save a Section, Row, or Element: Once you've customized your design, you can save it as a template for future use.
  

• Import Saved Content: Navigate to the Saved section in the editor to import the saved Section, Row, or Element into another page or reuse it on the same page.

Saved Content is perfect for creating reusable components like opt-in forms, testimonials, or promotional banners. For detailed instructions, refer to the article: How to Save and Import Sections, Rows, and Elements.

Adding Universal Content

In addition to saving content as templates, the ClickFunnels editor allows you to save content as universal. Universal content works similarly to Saved Content, with one major difference: any changes made to Universal Content are reflected across all pages where it is used. This makes it an excellent choice for shared components like headers, footers, or recurring promotional sections.

How to Use Universal Content

• Save as Universal: After designing a Section, Row, or Element, you can save it as a Universal Template.
  

• Add to Other Pages: Import the Universal Template into other pages or reuse it on the same page.

• Update Once, Reflect Everywhere: Any changes made to the Universal Content in one location will automatically update in all pages where it is used within the workspace.

Universal Content is ideal for maintaining consistency across multiple pages, such as ensuring your header or footer remains uniform throughout your funnels. For detailed steps, refer to the article: Adding Universal Contents.

Nested Layouts

In addition to the standard hierarchy, ClickFunnels also supports Nested Layouts to create complex, flexible designs within your page. Nested Rows allow you to add multiple column structures within a single row or column, providing additional layers of customization for your layout. For example, if you start with a two-column row layout, you can add a nested three-column row within the right column. This creates a multi-layered layout where the right column now holds its own set of columns, called nested rows.

When you add a nested row in ClickFunnels, the editor automatically creates a new section to wrap around this nested content. This section acts as a container for the nested row, ensuring that all elements and layout adjustments within this structure are organized and contained separately. Learn more in the Nested Rows: Created Nested Layout Using Nested Rows article.

Viewing Full Page Layout

The Layout tab in the ClickFunnels editor provides a comprehensive view of your entire page structure. It allows you to see and manage all the sections, rows, columns, and elements on your page in a hierarchical format, making it easy to understand how your layout is organized and make adjustments efficiently.

How to Access the Layout Tab

1. Navigate to the top navigation panel and click the Layout tab or icon.

2. The Layout side panel will open, displaying all the components of your page in a nested structure.

Features of the Layout Panel

• Hierarchy View: The panel shows a clear hierarchy of Sections, Rows, Columns, and Elements, helping you visualize the relationships between them.

• Filtering by Component: Use the Show dropdown menu to filter specific types of components, such as Sections, Rows, or Flex Containers. For example, you can select Flex Containers to view all the Flex Containers used in your layout.

• Device Visibility Indicators: Each component includes a visibility icon that indicates whether it is set to Desktop Only, Mobile Only, or visible on All Devices. This helps you identify how your layout adapts across devices.

• Quick Access to Settings: Click on any component in the list to access its settings directly, enabling quick modifications without navigating through the editor.

• Manage Visibility: Set components to Desktop Only or Mobile Only directly from the Layout Panel. This is especially helpful for refining layouts tailored to specific devices.

Benefits of the Layout Tab

• Efficient Management: View and manage the entire structure of your page in one place, without manually scrolling through the editor.

• Streamlined Adjustments: Quickly access settings, manage device visibility, or reorganize elements with ease.

• Enhanced Focus: Filter specific types of components to focus on what matters most, such as Flex Containers or Rows.