Getting Started with Site: Build a Website In ClickFunnels

The Site app in ClickFunnels empowers you to create a professional website with blog pages, customer centers, and much more within a single platform. With an intuitive interface and powerful tools, ClickFunnels provides everything you need to build, customize, and publish your website. This article will teach you the basics of setting up and managing your site using the Site app.

Requirements

1. An active ClickFunnels account

2. The Site app is added to your workspace

Accessing Site Overview

The Site Overview page acts as the central hub for managing your website. From here, you can access site pages, blog posts, and your customer center and customize your site’s theme and settings. The Site app is added as the default app to your ClickFunnels workspace, so there's no need to install it manually.

Steps to Access the Site Overview

1. Log in to your ClickFunnels account.

2. Navigate to the Apps section on the left-hand menu.

3. Click on Site to open the Site Overview page.

Features Available in Site Overview

• Recent Posts: View and manage your latest blog posts.

• Site Pages: Access and create pages for your website.

• Theme Preview: See your current theme and make changes.

• Quick Links: Shortcut options to create new pages, posts, or manage your customer center.

Selecting a Theme

A theme in ClickFunnels is a comprehensive collection of page templates that dictate the design and layout of various pages across your workspace. These templates include essential pages like the home page, 404 page, and coming soon page for your site, as well as store-specific pages such as the storefront, product page, checkout page, and cart page. Additionally, themes encompass templates for blogs, customer centers, and courses, ensuring a cohesive design throughout your workspace.

Choosing the right theme ensures your site’s branding and functionality align seamlessly across all areas. When you create a theme and select it as the default, a consistent design is applied across all the app template pages in your workspace. This is because a theme consists of page templates that maintain uniform branding, colors, and styles, ensuring your site and other app template pages present a cohesive and professional look.

Accessing the Themes

1. Navigate to Workspace Settings > Themes.

2. Browse the available themes in the list or create a new one.

Applying a Theme to the Site

1. To apply a theme to your site, navigate to the Site app and select Overview.

2. Click the three dots (⋮) in the top-right corner and select Site Settings.

3. Scroll to the Default Theme option and select a theme from the list.
   

4. Click Update Site to apply the theme to the site.

Note:

When you create a new workspace, the default Hero Theme is automatically applied. This theme includes templates for all necessary pages and apps. You can replace it by creating a new theme and promoting as live.

Learn more about themes in the Creating and Managing a Theme in ClickFunnels article.

Selecting a Style Guide

A style guide is like a recipe book for your site’s design. It saves the "ingredients" and "instructions" for how your fonts, colors, buttons, and other design elements should look across your pages. Using a style guide, you ensure every page in your workspace has a consistent appearance without repeatedly setting the same styles.

For example, imagine you define paragraph font sizes such as Small (14px), Medium (16px), and Large (18px). If you insert a paragraph element inside a page editor and select the font size as "Large," the font size automatically adjusts to 18px based on your saved style guide. This saves time and ensures consistency throughout your site.

With a style guide, you can:

• To maintain consistency, define font styles and sizes for headings, subheadings, and body text.

• Establish a color palette for text, backgrounds, and accents, ensuring your brand colors are consistently applied.

• Customize buttons with predefined styles, including shape, shadow, borders, and corner radius.

• Configure borders and shadows for design elements to create a cohesive look.

Creating a Style Guide

1. Click on Workspace Settings at the bottom left of your ClickFunnels dashboard.

2. Scroll down the menu on the left and click on Styles.

3. Click the New Style button at the top right.

4. Enter the Name for your new style.

5. Click Create style to save it.

Note:

When you create a workspace, a default style guide is included with the Hero theme. This means that if you create a new theme, a corresponding style guide is also generated in your workspace and linked to the theme. Promoting a theme to your site automatically applies its associated style guide, ensuring that the theme’s template pages follow the predefined styles from the style guide.

For an in-depth guide on creating and managing style guides, refer to the article Getting Started with Styles.

Applying a Style Guide to the Site

1. From your workspace, click on the 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.

Customizing the Site in the Editor

To design your Site home page:

1. Click the Edit Site button in the Site Overview.
   

2. Use the Page Editor to add sections, rows, and elements like headers, footers, and hero sections. Use the Page Editor to insert sections, rows, and elements to create the layout of your site pages. These containers allow you to design specific sections of your page, such as the header, footer, hero section, and more, ensuring a structured and visually appealing design.

3. Save your changes by clicking Save.

For an in-depth guide on the page editor, refer to the article Getting Started with the ClickFunnels Page Editor.

Setting Up Site Navigation

Navigation menus play a vital role in helping visitors navigate your site easily. By using ClickFunnels' Navigation element and Universal Sections, you can create and manage menus efficiently while ensuring consistency across your pages.

Adding a Navigation Element

The Navigation element allows you to create menus and link them to specific destinations within your site. To add a navigation element:

• Insert the Navigation element into a section and row within your page.

  

• Add menu items and set their links to pages or sections (e.g., Home, About, Contact).

• Customize the appearance of the navigation menu to align with your site's design.

For detailed guidance, refer to the article Navigation: Add Navigation Menus to Pages.

Adding Universal Sections

Universal Sections are reusable containers that can be added to multiple pages on your site. For example, you can design a header or footer with navigation links and save it as a Universal Section. Any updates made to the Universal Section will automatically apply to all pages where it is used, ensuring consistency.

To create and insert a universal section:

1. Add a section in the page editor and add contents inside the section.

2. Hover over the section and click the Save icon.

3. Insert a section title and check the box “Make Section Universal.“

4. Click Save Section to save the section as a universal section.
   

5. Navigate to the page where you want to insert this saved section.

6. Click the green Plus icon and find the saved section from the Saved category.

7. Insert the section in the designated location on the page.

For an in-depth guide on site header and footer, refer to the article Adding a Universal Header and Footer to Your Site.

Adding Site Pages

Your site will require various pages to deliver a complete experience to your audience. Depending on your site's purpose, common types of pages include the home page, about page, contact page, and more. Each page serves a specific function and helps effectively structure your site’s navigation.

How to Add a New Page

1. Navigate to the Site app.

2. Click on Site Pages in the left-hand menu.

3. Click the New Site Page to create a new page.

4. Choose a page template from the available templates.

5. Customize the page content and layout using the Page Editor.

6. Save your changes and link the page to your navigation menu for easy access.

For detailed instructions on adding site pages, visit the article How to Add and Manage Site Pages.

Connecting a Domain to the Site

By default, ClickFunnels provides a subdomain (e.g., workspace.myclickfunnels.com) so your site can function immediately. This subdomain is ideal for exploring and testing your site’s features. However, we highly recommend connecting your own domain to promote your site to a wider audience and enhance your brand’s professionalism.

Steps to Connect a Domain to the Site

1. Add your custom domain in Workspace Settings > Domains.

2. After a domain is verified in your workspace, navigate to the Site app.

3. Under Overview, click the three dots (⋮) in the top-right corner and select Site Settings.

4. In the Domain field, select a domain from the already verified list in your workspace.
   

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

Important:

The domain connected to the Site app is used for Courses, Store, Blog, Customer Center, Landing Pages, and Community. These features must share the same domain connected to the site settings.

Learn more about connecting a domain in the article Domains - How to Connect an Existing Domain (Automated Setup).

Publishing Your Site

Publishing your site means making it live and accessible to your audience. Once your site is published, visitors can access it using your configured domain. This is the final step in launching your website, ensuring all the pages, content, and navigation are ready for public view.

Steps to Publish Your Site

1. To publish your site, navigate to the Site app and select Overview.

2. Click the three dots (⋮) in the top-right corner and select Site Settings.

3. Set the availability option to Public.

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

5. Share your domain URL with your audience to drive traffic to your site.
   

Publishing your site ensures it’s visible and ready for interaction, helping you connect with your target audience effectively.