ClickFunnels offers advanced settings to help you fully personalize the appearance and functionality of your containers (sections, rows, columns, and elements). These settings provide greater control over advanced style, animation, and logic for any container. This article focuses on the Style section within the Advanced settings, where you can adjust dynamic content and fine-tune CSS properties to create a unique design tailored to your needs.
.png "image(396).png")
Requirements
An active ClickFunnels account
A page created in your workspace
A section, row, column, or element added in the editor
Dynamically Populated
The Dynamically Populated feature allows you to integrate dynamic variables into your element. This is especially useful when working with content that changes based on external data, such as blogs, courses, or user-specific information.
For example:
If you're using a paragraph element to display a blog's title dynamically, you can insert the variable
{{blog.name}}within the paragraph text and toggle the Dynamically Populated setting on.Once enabled, the system will dynamically replace the variable with the actual blog title when the page loads.
Note:
This setting is available only for text-based elements, such as Headline, Paragraph, or similar elements where you can directly insert and display text content.
Advanced CSS
The Advanced CSS settings in the Style tab allow you to fine-tune the layout and layering of your elements through two key properties: Position and Z-Index.
Position
The Position property defines how a container(section, row, column, and element) is positioned within its parent container. You can select from two options:
Static: The container stays in its default flow position without additional styling adjustments.
Relative: When you set a container's position to Relative, you can adjust its stacking order by applying a Z-Index value. This is particularly useful when managing overlapping containers within a parent container, as it ensures that containers with higher Z-Index values take visual priority.
Z-Index
The Z-Index property works in conjunction with Relative positioning to manage container overlap. Containers with higher Z-Index values will appear in front of those with lower values, provided they are within the same stacking context.
For example:
If you have two rows in a section and the bottom row has a negative margin that overlaps the first row, you can use Position: Relative on the first row and set its Z-Index to a value higher than 0 to bring it forward.
Similarly, if both rows are set to Relative, the row with the higher Z-Index value will take precedence, appearing on top of the other.
.png "image(397).png")
In the example above, two rows are placed within a section. The second row (white background) has a negative top margin (-130px) applied, causing it to overlap with the first row (green transparent background). By default, the second row would appear on top of the first row due to the natural stacking order.
To adjust this and bring the first row to the foreground, the Z-Index for the first row is set to a higher value than the second row. Both rows are set to Relative positioning, enabling the Z-Index to determine the stacking order. This adjustment ensures the first row (green transparent background) appears above the second row (white background), creating the intended visual hierarchy.
For a more detailed explanation of Z-Index in CSS, visit the MDN Web Docs.