ClickFunnels 2.0 Style Guide: The Secret to Stunning Funnels
Channel: Dan Havey
Date: 2022-09-28

For More Training on ClickFunnels 1.0 and 2.0, Membership Sites, Courses and Custom Code Hacks - Go To https://CFninjas.com

Check out the One Funnel Away Challenge here… https://funneldesignmastery.com/ofa-challenge

Welcome back! This is Dan Havey with CF Ninja Hacks, and today, we're diving deeper into ClickFunnels 2.0. Our focus today is on setting up your style guide. One of the coolest features of ClickFunnels 2.0 is the ability to create a style guide in advance. This means you can preset your colors, fonts, borders, buttons, and more, making your design process super efficient. When you're in the editor, it's just click, click, click—you'll have three choices for each element, and you simply pick the one you want. The system automatically applies your settings, including colors, shadows, backgrounds, and more, streamlining your workflow.

To get started, from the homepage, navigate to settings and click on Styles. If you're new to 2.0, you'll see a default theme, but we're creating a new style. Let's call it our demo test style. Once created, you can edit, clone, or customize this style. Cloning is particularly handy if you're working on similar sites, like a hub and a funnel with slight variations. Customizing your style lets you adjust fonts, colors, shadows, borders, and buttons to suit your needs. For fonts, set your base font size to 10, which simplifies calculating your REM units. This way, when you set a font to 36 pixels, it translates to 3.6 REM, making adjustments straightforward.

Next, let's set our colors. A tool like Coolors.com can generate color palettes if you're not an expert in color theory. Start by setting black and white as your base colors, then choose additional colors for different elements. These colors will apply across backgrounds, fonts, links, icons, and bullets. Adjusting these settings is quick, and any changes you make will reflect instantly across all pages using this style guide. This flexibility allows you to maintain consistency or make broad updates with ease.

For shadows, you have three basic options. You can customize the X and Y positions, blur, and spread to achieve the desired effect. Whether you want a subtle or bold shadow, ClickFunnels provides the tools to fine-tune it. Similarly, for borders, you can choose styles (solid, dashed, or dotted), colors, and thicknesses. This level of detail ensures your elements stand out the way you want them to.

When it comes to buttons, you can set background colors, fonts, and even upload custom fonts. Adjust font sizes for both desktop and mobile views, and set shadows and borders to enhance their appearance. The button customization options are extensive, ensuring your calls-to-action look just right.

Finally, applying your style guide to your site or individual pages is simple. In site settings, select your style guide from a dropdown menu, and it applies across your entire site. For specific pages, go into the page settings, select your style guide, and it updates immediately. This universal setting capability ensures consistency and saves time, letting you focus on creating engaging content.

That's it for today! A quick tutorial on setting up your style guide in ClickFunnels 2.0 and how to work with it in the editor. If you have any questions, just let me know. Happy funnel building!