Divider: Separate Contents with Dividers

  • Updated on Nov 18, 2024
  • Published on Nov 15, 2024
  • 4 minute(s) read

The Divider element in ClickFunnels is designed to add separation and structure within your page content. It allows you to create clear boundaries or subtle spacing to improve readability and organization on your page. With customization options for styling, alignment, and spacing, the Divider element can be used to visually break up content blocks or act as an invisible spacer for smoother transitions. This guide will walk you through the settings and customization options of the Divider element, showing you how to optimize it for your page layout.

  1. An active ClickFunnels account.

  2. A page created in your workspace.

Adding a Divider Element in the Page Editor

  1. Inside the page editor, add a Section where you want to place the element.

  2. Add a Row within that section.

  3. Click the orange + Plus or Add New Element button inside the row to insert a new element.

  4. From the MISC (Miscellaneous) category, select the Divider element.

Once the Divider element is added, you can customize its appearance to fit your page design.

When you hover over an element, its border will be highlighted in orange. To access an element's settings, click on the gear ⚙️ icon or click directly on the element to open its' settings panel.

The Top Margin setting allows you to control the space between the current element and the element directly above it. If no previous element exists, the margin will be applied relative to the parent container, such as a row, section, or flex container. 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.

  • Width: Control the width of the divider relative to the container. Setting it to 100% will span the entire container width while reducing the value will shorten the divider within the container.

  • Height: Define the height of the divider for a bolder line or more subtle appearance. You can also set the color to transparent and increase the height to create an invisible spacer that adds spacing without a visible line.

  • Align: You can choose to align the divider to the left, center, or right within the row. This setting is particularly useful for dividers with less than 100% width.

  • Type: Select from different line styles, such as solid, dashed, or dotted, to match the theme of your page.

  • Color: Choose a color for the divider line that stands out or blends seamlessly with your page design. To create invisible dividers, simply set the color to transparent.

The Padding settings control the spacing around the content within an element. By switching between desktop and mobile views, you can adjust the padding for different screen sizes.

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. 

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.

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.

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

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

  • Desktop Icon: The element will only be visible on the desktop view.

  • Mobile Icon: The element will only be visible on mobile view.

  • Eye Icon: Use this to hide the element from the page. The element will still be present in the editor but invisible to visitors.

  • Code Icon: This icon opens the code editor, where you can insert custom CSS or JavaScript code to modify the element's behavior or styling.

  • Trash Icon: Removes the element from the page editor entirely.

To further customize your container (section, row, column, and element), ClickFunnels provides powerful Advanced settings options 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:

Related articles