--- title: "Using a Style Guide in Your Page" slug: "using-style-guide-in-your-page" updated: 2025-07-07T20:32:51Z published: 2025-07-07T20:32:51Z canonical: "support.myclickfunnels.com/using-style-guide-in-your-page" --- > ## 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. # Using a Style Guide in Your Page 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. --- ## Requirements - An active ClickFunnels account - A page created in your workspace --- ## What is a Style Guide? 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. Learn more about the style guide in the article [Getting Started with Styles](/v1/docs/getting-started-with-styles). --- ## Where Can Style Guides Be Applied? 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). --- ## How to Apply a Style Guide 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: ### Applying a Style Guide to the Entire Site 1. From your workspace, click on the **Site & Blog** app in the left-hand menu. 2. Select **Site Settings**. 3. Scroll down to the **Advanced Settings** section in the Site Settings panel. 4. Locate the **Style** dropdown under Advanced Settings. 5. Click the dropdown and select the desired Style Guide (e.g., "Default Style Guide" or a custom Style Guide). ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-3GBZSV6E.png) 6. Click **Update Site** at the top or bottom of the page to save your changes. ### Applying a Style Guide to a Funnel 1. Navigate to the funnel you want to customize from the **Funnels** menu. 2. Click the **Gear ⚙** icon located at the right of the funnel.![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(463).png) 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 an 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 **Three Dot** **(⋮)** icon next to the page. 4. Select **Settings** from the dropdown menu.![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(464).png) 5. Find the **Style Guide** dropdown and select the Style you want for that page. 6. Click **Submit** to apply your changes. ### Applying a Style Guide to a Course 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.** ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(468).png) 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. ### Applying a Style Guide to a Blog 1. Navigate to the **Site & Blog** app. 2. Select **Blog**. 3. Click the **Gear (⚙)** icon located at the top-right of the blog dashboard.![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(469).png) 4. In the **Blog information** section, find the **Style** dropdown. 5. Select the Style Guide you want for that page. 6. Click **Update Blog** to apply your changes. ### Applying a Style Guide to Blog Pages 1. Navigate to the **Site & Blog** app. 2. Select **Blog**. 3. Locate the desired blog post and click the **Edit** icon (**⚙** ) to the right of the page. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(466).png) 4. In the **Advanced Settings** section, locate the **Style** dropdown. 5. Choose the desired Style Guide and click **Update page**. ### Applying a Style Guide to Store Pages 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 (e.g., Storefront, Product, or Checkout) to which you want to apply a style guide. 4. Click the **Gear** **⚙** icon next to the page name to open its settings.![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(467).png) 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. ### Applying a Style Guide to Landing Pages 1. Navigate to the **Landing Pages** app from the left-side menu. 2. Locate the desired landing page and click the **Gear** icon (**⚙** ) next to it. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(465).png) 3. In the **Advanced Settings** section, locate the **Style** dropdown. 4. Choose the desired Style Guide and click **Update page**. --- ## Accessing Style Guides from Sections, Rows, and Elements You can directly access and update Style Guides from your page's individual sections, rows, or elements. > [!CAUTION] > Warning > > Any changes made to the Style Guide will automatically update all other areas of your site that use the same Style Guide. ### Accessing the Style Guide from a Section 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.![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(472).png) 5. The Style Guide panel will open, allowing you to make updates directly from the page editor. ### Accessing the Style Guide from a Row 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.![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(472).png) 5. The Style Guide panel will open, allowing you to make updates directly from the page editor. ### Accessing the Style Guide from an Element 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. Depending on the element type, this may appear under different settings (e.g., Typography, Button Style, etc.).![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(474).png) 3. Click **Edit Style** to update the element’s appearance according to your Style Guide.