--- title: "Advanced Settings - Customize Styles" slug: "advanced-settings-customize-styles" description: "Master ClickFunnels' advanced settings to personalize your containers with dynamic content, CSS properties, and control over style." tags: ["editor", "style", "css"] updated: 2025-07-07T20:16:50Z published: 2025-07-07T20:16:50Z canonical: "support.myclickfunnels.com/advanced-settings-customize-styles" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.myclickfunnels.com/llms.txt > Use this file to discover all available pages before exploring further. # Advanced Settings - Customize Styles 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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/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] > 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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/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](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index). --- ## Height ### Fill Available Height ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-TV3ZK838.png) > [!NOTE] > Note: > > The **Height** setting, including the *Fill Available Height* option, is only available within **Section** settings. Other containers such as Rows, Flex Containers, and Elements do not include this property. The **Fill Available Height** option lets a section automatically grow to fill any extra vertical space left in the **browser window (viewport)**. This is useful when you want a section to stretch and cover the remaining screen height without manually adjusting padding or adding a spacer element. When this option is turned on for a section: - That section will expand to fill the leftover space in the viewport. - If multiple sections enable this setting, the remaining space is evenly shared among them. > [!WARNING] > **Important:** > > For the flexible height feature to work, the **body** display setting must be set to “**Flex**.” If it's set to “Block,” sections won’t expand even if the option is turned on. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-8YHL2AFY.png) #### How it works: - **Without Flex Height:** Sections keep their default height and may leave empty space in the viewport. - **With Flex Height:** Sections stretch to fill the available space in the viewport, providing a more balanced layout. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-0URBXY3I.png) ## Related - [Adding Custom CSS Code to Your ClickFunnels Pages](/adding-custom-css-code-to-your-clickfunnels-pages.md) - [Advanced Settings - Customize Animation](/advanced-settings-customize-animation.md) - [Advanced Settings - Customize Logic](/advanced-settings-customize-logic.md)