Page Editor: Adding Sections

  • Updated on May 28, 2025
  • Published on Nov 11, 2024
  • 10 minute(s) read
Prev Next

Sections are the foundation of every ClickFunnels page. They allow you to divide your page into distinct areas, each containing rows and elements, so you can arrange your content in a visually appealing, easy-to-follow way. Adding sections allows you to organize text, images, and other elements in a way that’s visually engaging and easy for visitors to navigate. In this article, we’ll explain how to add sections, customize their settings, and adjust their layout to create a polished, professional page that captures your audience’s attention.

Requirements

  • An active ClickFunnels account

  • A page created in your workspace

Adding a Section in the Page Editor

  1. Select a page in your ClickFunnels workspace.

  2. Open the page in the editor.

  3. Hover over the area on the page where you’d like to add a new section, then click Add Section.

  4. In the open widget, you have several options:

    • Saved: All sections that were saved previously in the workspace will be shown here. Select one to import a saved section to add to the page.

    • Universal: All sections that were previously saved as universal sections will be shown here. Select one to import a universal section to add to the page.

    • Blank: If you wish to create your section from the ground up, select Blank and insert a Bank Section.

    • Advanced: If you want your section container to utilize a flex layout, choose Advanced and add the Flex container.

    • Other Categories: ClickFunnels provides a variety of pre-made section templates that can be selected from designated categories, such as Header, Footer, Testimonials, and more. For example, if you want to add a top navigation bar to your site, you can go to the Navigations category and pick an appropriate design. A section will be imported into the editor with the design.

  5. Choose a Row with a number of Columns (1 to 6 columns).

  6. After inserting a Row, you can add Elements (e.g., text, image, button) inside each column.

  7. Once your editing is completed, click Save to save changes.

Customizing a Section

When you hover over a Section, its border will be highlighted in green. To access the Section's settings, click on the gear ⚙️ icon in the top-right corner of the Section or click directly on Settings in the green bar at the top.

Top Margin

The Top Margin setting lets you control the space between the current container (section, row, flex, and element) and the container directly above it. If no previous container exists, the margin will be applied relative to the parent container. If no preceding container is added, the Body will be the parent. You can adjust the margin using the slider or manually input a value (px or percentage %), ensuring the spacing is consistent with your design needs.

Paint

Paint colors are predefined color sets applied to containers, such as Sections, Rows, Columns, and Flex Containers. These color sets define the styling for various elements within the container, including headlines, sub-headlines, paragraphs, bullet lists, backgrounds, overlays, etc.

By selecting a paint color in the container settings, all nested elements within the container will automatically inherit the corresponding colors from the style guide. For instance, if you set a paint color that specifies orange for sub-headlines and black for text content, sub-headlines or content added to the container will adhere to these defined colors.

This functionality ensures a consistent design across your pages, aligning with your brand’s visual identity.

  1. Preset Paint: Select from predefined paint options, such as "Lightest Background" or "Darkest Background," based on the settings in your style guide. These options allow you to maintain a cohesive design aligned with your branding. 
  2. Edit Style Colors: Click "Edit Style Colors" to access the style guide and customize the paint's color palette. Learn more about customizing Paint colors in the How to Customize Style Colors article.

Size & Position

The Size & Position settings allow you to control the width and spacing of your section for precise layout adjustments:

  • Width: Select the section’s width (XS, S, M, L, or XL) to adjust how much space it occupies on the page.

  • Sticky: Use the Sticky option to keep the section fixed at the top or bottom of the screen as visitors scroll, which is ideal for navigation bars or calls-to-action.

Padding

The Padding settings control the spacing around the content within a container. You can adjust the padding for different screen sizes by switching between desktop and mobile views.

Padding Options:

  • Top: Add space between the top of the element container and its content.

  • Bottom: Add space between the bottom of the element container and its content. 

  • Left + Right: Adjust the horizontal spacing between the element container and its content. 

  • Gap: In particular elements, such as the Accordion, the gap property is added to establish spacing between the items within the container. For example, it is possible to adjust the gap between each accordion item within the Accordion element without defining padding at the top and bottom.

Desktop & Mobile Customization:

The padding settings allow you to define separate values for desktop and mobile views. Use the device toggle at the top of the padding controls to switch between screen modes and adjust spacing accordingly.

This feature ensures your layout remains optimized for different screen sizes, enhancing the mobile and desktop experience.

Background

The Background property allows you to add and customize background images for various containers, such as sections, rows, columns, flex containers, or individual elements like videos. Turning on the Background option activates the settings, allowing you to configure the background image’s source, style, fit, and color options.

  1. Image URL: Enter the background image URL or upload one directly in the ClickFunnels image gallery.

  2. Image Style: Controls how the background image is displayed within the container.

    • None: Displays the background image in its original size and position without additional styling, possibly leaving gaps if the image is smaller than the container.

    • Full Center: Centers the image within the container without resizing, which may leave blank spaces if the image is smaller than the container.

    • Full Center (Parallax): Centers the image and applies a parallax scrolling effect, creating a layered look as the image moves independently of the main content.

      Note:
      Due to iOS limitations, parallax effects are automatically disabled on Apple mobile devices. iOS devices (Safari and other WebKit browsers) have limited or no support for background-attachment: fixed, which is a core part of how parallax scrolling is implemented in CSS. To maintain layout integrity, the background will default to a static style (e.g., Full Center).

    • Fill 100% Width: This option expands the image to cover the container’s full width, maintaining its aspect ratio and possibly cropping vertically.

    • Fill 100% Width & Height: This stretches the image to fill both the width and height of the container, cropping parts of the image to maintain the aspect ratio.

    • No Repeat: Displays the image once without repeating; any unused space will remain empty.

    • Repeat: Tiles the image across the container, covering both width and height.

    • Repeat Horizontally: Repeats the image across the container’s width only.

    • Repeat Vertically: Stacks the image vertically along the container’s height.

  3. Image Fit: Position the image within the container (e.g., center, top-left, bottom-right) for better alignment. This setting appears when Contain or Scale-down is selected under Image Style.

  4. Color: This option allows you to set a Background and Foreground color:

    • Background Color: If you do not wish to use a background image, you can apply a solid or gradient color directly as the background. Choose from the color picker for custom colors, or select a color from your Style Guide for consistency. When a background image is used, the background color generally won’t be visible, but it can appear momentarily during the image load time or serve as a fallback if the image fails to load.

    • Foreground Color: Adds an overlay on top of the background image, allowing for opacity adjustments to create a tinted or softened effect over the image. This layering can enhance readability or add a stylistic tint to the image.

  5. Background Video: To use a video as the background, toggle on the option "Background Video." Enter a YouTube or Vimeo video URL to set the video as the background for the container.

    Note:
    The Background Video option is available only in the Section, Row, and Flex containers.

Tips

For further information on background properties in CSS, refer to the MDN documentation on Background CSS properties.

Border

The Border settings enable you to add and style borders around an element, allowing for enhanced visual definition and separation on the page:

  1. Style Presets (1, 2, 3): Choose from predefined border styles in your Style Guide. These presets provide consistent border styles across your page and can be quickly applied to elements.

  2. Edit Style: To modify the preset border styles in the Style Guide (affecting all elements using that style), select Edit Style to adjust the design in your global settings.

  3. Override: Use the Override option to customize the border settings specifically for this element without impacting the global Style Guide settings.

  4. Borders: Select which sides of the element should display a border. Options include any combination of top, bottom, left, and right borders.

  5. Border Style: To fit your design preferences, choose the border's line style, such as solid, dashed, or dotted.

  6. Color: Use the color picker to select a border color. You can choose a color from the Style Guide or select a custom color, ensuring the border color aligns with your design scheme.

  7. Stroke Size: You can adjust the border's thickness using the Stroke Size slider or by inputting a specific pixel value, creating anything from thin outlines to bold frames.

Shadow

The Shadow settings allow you to add depth and emphasis to elements by applying shadow effects, enhancing the visual appearance. Here’s how to customize shadow properties:

  1. Style: Select one of the predefined shadow styles from your page's style guide. Click on the numbered styles (1, 2, or 3) to apply preset shadow settings defined in your style guide.

  2. Shadow Style: Choose between Inset (shadow within the element) and Outset (shadow outside the element) to achieve the desired shadow effect.

  3. X-direction: Adjusts the horizontal positioning of the shadow. A positive value moves the shadow to the right, while a negative value shifts it to the left.

  4. Y-direction: Controls the vertical placement of the shadow. Positive values push the shadow downward, while negative values pull it upward.

  5. Blur: Controls the softness of the shadow edges. Higher values create a more diffused, softer shadow, while lower values keep the shadow sharp.

  6. Spread: Adjust the size of the shadow. Positive values expand the shadow, while negative values make it narrower.

  7. Color: Use the color picker to choose to set the shadow color.

Corner

The Corner settings let you adjust the roundness (border-radius) of an element's corners, providing flexibility to create either rounded or sharp edges:

  1. Style Presets (1, 2, 3): Choose from predefined corner styles set in your Style Guide. These presets (1, 2, or 3) offer quick styling options that align with your page’s overall design.

  2. Edit Style: To modify a style directly in the Style Guide (affecting all elements using that style), click Edit Style to adjust the preset in your global settings.

  3. Override: To apply custom corner settings without changing the Style Guide, click Override. This allows you to tailor the corner radius for this specific element only.

  4. All Corners: Adjust the slider or enter a specific value in pixels or percentages to set a uniform border radius for all four corners.

  5. Separate Edges: Enable Separate Edges to adjust each corner independently. You can set different values for the Top Left, Top Right, Bottom Left, and Bottom Right corners to achieve unique shapes.

Advanced Settings

To further customize your container (section, row, column, and element), ClickFunnels provides Advanced settings that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details:

Control Panel

The Control Panel appears at the bottom of every container(Section, Row, Flex, and Element) in the page editor, offering quick access to essential settings and actions for that container. Here’s what each icon represents:

  • ALL: The container will be visible on all devices (desktop, tablet, and mobile).

  • Desktop (🖥️) Icon: The container will only be visible in desktop view.

  • Mobile (📱) Icon: The container will only be visible in mobile view.

  • Eye (👁️) Icon: Use this to hide the container from the page. Once clicked, the container will be hidden in the editor but not deleted. You can click the Layout menu in the top navigation bar to find the hidden containers. Select All, Desktop, or Mobile icon to unhide in the editor.

  • Code (</>) Icon: This icon opens the code editor, where you can insert custom CSS or JavaScript code to modify the container's behavior or styling.

  • Trash (🗑️) Icon: Removes the container from the page editor entirely.

Related articles