Using a Style Guide in Your Page

  • Updated on Feb 14, 2025
  • Published on Nov 26, 2024
  • 5 minute(s) read

A Style Guide helps you maintain consistency in your page's design by applying predefined styles to fonts, colors, buttons, and other design elements. Instead of manually adjusting individual components, the Style Guide allows you to apply changes quickly and uniformly across the entire page. This article explains what a Style Guide is, how it benefits you during page editing, and the different ways to apply or access it within your ClickFunnels page editor.

  • An active ClickFunnels account

  • A page created in your workspace

A Style Guide is a centralized tool that allows you to define and manage design settings—such as fonts, colors, spacing, and other visual styles—across all pages that are using the same guide. Instead of customizing each element individually, the Style Guide ensures consistent design rules are applied automatically, creating a cohesive and professional appearance.

For example:

  • If your brand uses specific colors for headings, buttons, and links, you can set these preferences in the Style Guide.

  • If you update your font or adjust button styles, the changes will automatically apply to all pages connected to the same Style Guide, saving you time and effort.

To learn more about creating and managing a style guide in your ClickFunnels workspace, visit the Getting Started with Styles article.

Style Guides can be applied to various areas to maintain consistent branding and design. Here's a breakdown:

  1. Entire Site: Apply a Style Guide to the entire site to ensure all pages, including system pages (e.g., Home Page, Blog Home, Storefront, and Course Home), reflect the same styles.

  2. Funnels: Assign a Style Guide to all pages within a specific funnel, such as opt-in, sales, or thank-you pages, to ensure a cohesive design.

  3. Courses: Apply a Style Guide to your course home, modules, and lessons for consistent course styling.

  4. Blogs: Use a Style Guide to style the Blog Home page as well as individual blog posts.

  5. Store Pages: Assign a Style Guide to the Store Home (storefront) and individual product pages for a seamless shopping experience.

  6. Landing Pages: To meet unique design requirements, apply a Style Guide to specific pages (e.g., About Us or Contact).

Applying a Style Guide to your pages is simple and ensures your design remains consistent across different parts of your website or funnel. Here’s how you can apply a Style Guide in various contexts:

  1. From your workspace, click on Site app in the left-hand menu.

  2. Under Overview, click the three dots (⋮) in the top-right corner.

  3. Select Site Settings from the dropdown menu.

  4. Scroll down to the Advanced Settings section in the Site Settings panel.

  5. Locate the Style dropdown under Advanced Settings.

  6. Click the dropdown and select the desired Style Guide (e.g., "Default Style Guide" or a custom Style Guide).

  7. Click Update Site at the top or bottom of the page to save your changes.

  1. Navigate to the funnel you want to customize from the Funnels menu.

  2. Click the Gear ⚙ button located at the right of the funnel.

  3. Scroll down to the Style dropdown in the Funnel Settings panel.

  4. Select the desired Style Guide from the dropdown menu.

  5. Click Update Funnel to apply the Style Guide to all pages within the funnel.

Applying a Style Guide to Individual Funnel Page

  1. Go to the funnel containing the page you want to customize.

  2. Locate the desired page in the funnel workflow.

  3. Click the (⋮) next to the page.

  4. Select Settings from the dropdown menu.

  5. Find the Style Guide dropdown and select the Style you want for that page.

  6. Click Submit to apply your changes.

  1. Navigate to the Courses app in the left-hand menu of your dashboard.

  2. Find the course you want to edit from the list.

  3. Click the gear ⚙ icon next to the course title.

  4. In the course settings, scroll down to the Advanced Settings section.

  5. Click Configure next to Advanced Settings.

  6. Locate the Style dropdown in the settings panel.

  7. Select your desired Style Guide from the dropdown menu.

  8. Click Update course to apply the selected Style Guide to the entire course.

  1. From the Site menu, go to Blog.

  2. Click the (⚙ ) icon located at the top-right of the blog dashboard.

  3. In the Blog information section, find the Style dropdown.

  4. Select the Style Guide you want for that page.

  5. Click Update Blog to apply your changes.

  1. From the Site menu, go to Blog.

  2. Locate the desired blog post and click the Edit icon (⚙ ) to the right of the page.

  3. In the Advanced Settings section, locate the Style dropdown.

  4. Choose the desired Style Guide and click Update page.

  1. Go to the Store app and navigate to Overview.

  2. Click the Customize Store button in the top-right corner.

  3. In the store editor, select the store page you want to apply a Style Guide to (e.g., Store front, Product, or Checkout).

  4. Click the gear ⚙ icon next to the page name to open its settings.

  5. In the Advanced Settings section, locate the Style dropdown.

  6. Choose your desired Style Guide from the dropdown menu.

  7. Click Update page to apply the selected Style Guide to that page.

  1. Navigate to the Landing Pages app from the left-side menu.

  2. Locate the desired landing page and click the Edit icon (⚙ ) next to it.

  3. In the Advanced Settings section, locate the Style dropdown.

  4. Choose the desired Style Guide and click Update page.

You can directly access and update Style Guides from individual sections, rows, or elements within your page.

Warning

Any changes made to the Style Guide will automatically update all other areas of your site that use the same Style Guide.

  1. In the editor, hover over a Section until its outline highlights.

  2. Click the gear ⚙ that appears on the Section border.

  3. In the settings panel, locate the Paint dropdown.

  4. Click Edit Style Colors under the dropdown.

  5. The Style Guide panel will open, allowing you to make updates directly from the page editor.

  1. In the editor, hover over a Row until its outline highlights.

  2. Click the gear ⚙ that appears on the row border.

  3. In the settings panel, locate the Paint dropdown.

  4. Click Edit Style Colors under the dropdown.

  5. The Style Guide panel will open, allowing you to make updates directly from the page editor.

  1. Select any element (e.g., headline, button, image) on your page.

  2. In the element’s settings panel, look for the Edit Style option. This may appear under different settings depending on the type of element (e.g., Typography, Button Style, etc.).

  3. Click Edit Style to update the element’s appearance according to your Style Guide.

Related articles