Elements are the building blocks of your page in ClickFunnels. From headlines and images to buttons and forms, elements allow you to add various types of content and functionality to your page. This article will guide you through adding elements to your page, adjusting their settings, and customizing their style to match your design.
.png "image(198).png")
Requirements
An active ClickFunnels account
A page with sections and rows already set up
Adding an Element in the Page Editor
In your ClickFunnels account, navigate to the page where you want to add a new section.
Click on the page thumbnail to open the page editor.
Hover over a row or column where you want to place the element, then click the Add Element button that appears.
In the Elements panel on the right side of the screen, you’ll see a range of element options grouped by category.
.png "image(199).png")
Click on an element type (e.g., Headline, Image, or Button) to add it to the selected row or column.
Click outside the element or on another area of the page to continue adding elements, or click Save in the top-right corner to save your work.
Customizing Elements
Accessing Settings
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.
Note
The available settings for an element will vary depending on the type of element you are editing. For example, a headline element may include text styling options, while an image element will have settings for image uploads and alignment. Adjustments are tailored to the specific functionality of each element.
Advanced Settings
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:
Advanced Settings - Customize Styles: Learn how to populate contents dynamically, position containers, and apply z-index.
Advanced Settings - Customize Animation: Learn how to add animations, control entry and exit effects, and adjust animation delay.
Advanced Settings - Customize Logic: Learn how to apply conditional logic to elements and add custom attributes.
Element Control Panel
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:.png "image(47).png")
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.