Adding Custom CSS Code to Your ClickFunnels Pages

Updated
  • Updated on Dec 3, 2024
  • Published on Nov 20, 2024
  • 4 minute(s) read

In the ClickFunnels page editor, sections, rows, columns, and elements come with modern and robust layout and styling options that you can easily adjust directly within the editor. However, there may be cases where the built-in design settings don’t fully meet your specific needs or you wish to create a unique design. For these scenarios, ClickFunnels allows you to apply custom CSS code to the content on your page. In this article, you will learn how to apply custom CSS code to style and customize your ClickFunnels pages.

Requirements

  • An active ClickFunnels account

  • A page created in your workspace

Warning:

Applying custom CSS to your page requires a solid understanding of CSS principles. Incorrect or improper use of CSS can disrupt the page layout and interfere with the normal functionality of the ClickFunnels page editor. Proceed with caution when adding custom styles.

Important:

Due to the complexity and diverse nature of custom CSS, the ClickFunnels support team is unable to troubleshoot or provide assistance with issues related to custom code. If you require help with advanced CSS modifications, consider consulting a qualified developer.

Step 1: Generating a CSS Selector

To apply CSS styles, you need a unique CSS Selector to target your page's specific container or element. Every container in ClickFunnels (e.g., Section, Row, Column, or Element) allows you to add or generate a CSS ID. ClickFunnels offers two ways to generate these selectors:

Using CSS ID

  1. Hover over to the container (Section, Row, Flex, or Element) and click the Code Icon (<>) to access the container CSS settings.

  2. You can generate an ID automatically by clicking the Generate ID link or typing a custom ID name for easier identification.

  3. Click the Update button to apply the ID to the selected container, and then you can use it in your CSS code.

Example: If you apply the ID headline to a headline element, you can target it in your CSS like this:

#headline{
background: black;
padding: 1rem;
border-radius: .70rem;
}

Using Custom Attributes

ClickFunnels also allows you to add Custom Attributes to any container (Section, Row, Column, or Element). Your CSS code can use these attributes as selectors within square brackets []. To add a custom attribute:

  1. Hover over the container (Section, Row, Column, Flex, or Element) and click the gear ⚙️ icon.

  2. Go to the Advanced option.

  3. Click the Logic menu.

  4. Then, click the Add Custom Attribute button to insert a custom attribute name and value for the container.

Example: If you add a custom attribute with data-element="paragraph", you can target it like this:

[data-element="paragraph"] {
  padding: 10px !important;
}

Step 2: Adding CSS Code in the Code Editor

Once you have your CSS selector, you can apply the custom styles through the CSS Code Editor. Here's how:

  1. In the page editor, navigate to Settings > Show Code or click a container's Code <> icon to access the code editor.

  2. Select CSS as the code editor type on the left.

  3. Type or paste your custom CSS code into the CSS editor.

  4. Click Save in the editor to apply the styles. Preview your page to ensure the CSS has been applied correctly.

Custom CSS Specificity: Ensuring It Overrides Default Design

ClickFunnels containers (section, elements, etc) come with pre-applied default styles to maintain consistency across your designs. However, when adding custom CSS, you might need to ensure your styles take precedence over these built-in settings. Understanding the specificity of your custom CSS is key to successfully overriding ClickFunnels' default styles.

Understanding Specificity:

Specificity determines which CSS rule is applied when multiple rules target the same element. A higher specificity selector will take precedence. For example:

/* Less specific */
h1 {
  color: red;
}

/* More specific */
#headline h1 {
  color: blue;
}

In this case, the second rule (#headline h1) will override the first one.

Using !important:

If ClickFunnels’ default styles are not overridden by your CSS, you can use the !important rule to prioritize your custom style:

#headline {
  color: #000000 !important;
}

CSS Advanced: Using CSS Combinators

ClickFunnels elements are often wrapped in a container, which means the ID or Custom Attribute is applied to the container, not directly to the HTML tags (e.g., <h1> or <p>).

Using CSS Combinators:

To target the correct tag within a container, you can use CSS combinators such as child (>), descendant (space), or adjacent sibling (+) selectors.

Example: If a headline element has an ID headline, but you need to style the <h1> inside it, you can use the following:

#headline > h1 {
  color: #000000 !important;
}

Tips:

Use your browser's developer tools to inspect the elements on your ClickFunnels page. This allows you to identify the structure of parent and child nodes and locate the exact HTML tags where you want to apply your styles. By examining the DOM hierarchy, you can determine the appropriate CSS combinators to target specific elements effectively without unintentionally affecting others.

For more information about CSS combinators, you can refer to the MDN Web Docs on CSS Combinators.

CSS Code Troubleshooting

When working with custom CSS, following best practices and troubleshooting issues effectively is important. Here are some tips:

  1. Inspect Elements: Use your browser’s Developer Tools to inspect the page and identify the applied styles. Check for conflicts or missing selectors.

  2. Check for Syntax Errors: Ensure your CSS code is free of syntax errors, such as missing brackets or semicolons.

  3. Use Specific Selectors: Ensure you target the correct element using unique IDs or Custom Attributes.

  4. Preview and Test: Always preview your page after applying CSS changes to ensure everything displays correctly.

Related articles