Using the Page Editor to Design Your Course

The Page Editor is essential for creating an effective online course. By learning to use it, you can structure your content logically, add engaging elements, and ensure your course is easy to navigate. This helps students find and absorb information more easily, leading to better learning outcomes. This article explores the key steps of using the Page Editor to design a well-organized course that enhances the learning experience for your members.

Table of Contents

• Requirements
• Enabling Advanced Customization for Course Pages
• Customizing the Course Home Page
• Customizing Module Pages
  • Adding Lessons to Module Pages
  • Adding Submodules to Module Pages
• Customizing Lesson Pages
• Customizing the Course Sidebar
• Additional Information

---

Requirements

• An active ClickFunnels account
• A published course with modules and lessons

---

Enabling Advanced Customization for Course Pages

To customize your course home and module pages, you need to turn on the Advanced Customization feature.

1. Navigate to the Courses app from the left-side menu.
2. Select the course from which you want to customize.
3. Click on the Customize tab on the course overview page.
4. Locate the Advanced Customization toggle switch.
5. Click the toggle to turn it on. The switch will turn blue when active.
6. You can now select a custom theme using the Change theme option.
   

7. Click Customize to open the page editor.

   The theme you select for your course may already include some essential elements. These pre-configured elements provide a starting point for your course design. You can:

   • Reposition existing elements to suit your preferred layout.
   • Edit the settings of these elements to match your course style.
   • Add new elements to further customize your course pages.

   As you follow the customization steps in this article, keep in mind that you may not need to add every element from scratch. Instead, you might be adapting or enhancing the existing theme structure.

Back to Top

---

Customizing the Course Home Page

The course home page is the starting point for your students. The Course Home page displays your course structure. The elements you add here will automatically populate with the course details you’ve already set up. For information on creating courses and their content, see the article Getting Started with Courses. Here’s how to customize it:

1. In the editor, locate Course Home.
2. Add a Module Collection element to display your primary modules:
   1. Click Add New Element.
   2. Select Collection from the right-hand menu.
   3. Choose Modules.
      
3. Configure the Module Collection:
   1. Add columns as needed
   2. Include essential module elements:
      • Module Name
      • Module Image
      • Module Link

Back to Top

---

Customizing Module Pages

Module pages show your lessons and submodules. The content here updates automatically based on the module structure you’ve created. For details on setting up modules and submodules, refer to the article How to Manage Course Modules. Here’s how to set them up:

Adding Lessons to Module Pages

1. In the page editor, find Default Module Page under Templates.
   
2. Add a Lesson Collection element:
   1. Click Add New Element
   2. Select Collection > Lesson
3. Configure the Lesson Collection:
4. Add columns as needed
5. Include essential lesson elements:
   • Lesson Name
   • Lesson Image
   • Lesson Link
     
6. Click Save to apply your changes.

Adding Submodules to Module Pages

1. On the same Default Module Page area, add a Module Collection element to display your submodules:
   1. Click Add New Element.
   2. Select Collection from the right-hand menu.
   3. Choose Modules.
2. Configure the Module Collection:
   1. Add columns as needed
   2. Include essential module elements:
      • Module Name
      • Module Image
      • Module Link

Back to Top

---

Customizing Lesson Pages

Lesson pages display individual lesson content. The elements here will populate with the individual lesson information you’ve created. For guidance on creating and managing lessons, see the article How to Manage Course Lessons. You have two options for customizing lesson pages:

1. Edit the Default Lesson Template:
   1. In the page editor, click on the Templates tab.
   2. Select Default Lesson Page.
   3. Changes made here will apply to all lessons using this template
2. Customize Individual Lesson Pages:
   1. In the Course tab in the page editor, Navigate to the specific lesson you want to customize.
   2. Click the lesson name to edit its individual page.

For either option, follow these steps to customize the page:

1. Add essential lesson elements:
   1. Lesson Title
   2. Image
2. Include media elements if applicable:
   1. For video lessons: Add Lesson Video element
   2. For audio lessons: Add Lesson Audio element
      
3. Add the Content Body:
   1. Click Add New Element
   2. Select Advanced > Content Body

4. Set up the Lesson Status element: The Lesson Status element shows students their progress within each lesson. To add it:

   1. click Add New Element and select Lesson Status.
   2. Customize its appearance for both Base/Uncomplete and Completed states:
      • Edit the text (e.g., “Start Lesson” or “Completed”)
      • Adjust text and icon colors
      • Modify styles to match your course design
        
5. (Optional) Add a Mark as Complete button:
   1. Add a Button element
   2. Set the button action to Mark Complete

   Note: When a student marks a lesson as complete, the Lesson Status element automatically updates. For example, it might change from “Start Lesson” to “Completed”. The system then automatically advances to the next lesson. If you return to a completed lesson, you’ll see the updated status, and a checkmark will appear next to the lesson in the course sidebar.

6. Click Save to apply your changes.

Back to Top

---

Customizing the Course Sidebar

The course sidebar helps students navigate through your course content. It displays the course structure, including modules and lessons, allowing for easy movement between different sections. You can customize various aspects of the sidebar to match your course design and improve the learning experience for your students.

1. In the page editor, locate or add the Sidebar element.
2. Click on the Settings ⚙ icon to display its settings.
   

3. Adjust the following settings as needed:

   • Top Margin: Use the slider to set the space above the sidebar.
   • Render Mode: Choose between “classic” or “ascension” styles in the dropdown menu.
   • Show drip modules: Toggle between “Yes” to display all modules or “No” to hide inaccessible dripped modules in the course sidebar.
   • Width: Adjust the sidebar width using the slider.
   • Padding Top and Padding Bottom: Fine-tune the internal spacing.
   • Vertical Spacing: Control the gap between sidebar items.
   • Background Color: Select a color that complements your course design.
   • Mobile Hamburger Color: Choose a color for the mobile menu icon.
   • Gap Between Modules: (Only available in classic render mode) Adjust the spacing between module sections in the sidebar.
   • Completed Checkmark Color: Select a color for the progress tracking checkmarks. This feature displays small checkmark icons next to completed lessons in the sidebar, helping students visualize their course progress at a glance.
     
   • Left Indentation Spacing: Set the indent level for sub-items.
   • Disable Left Icons: Toggle to show or hide icons next to items.
   • Disable Checkmark Icon: Toggle to turn off the completion checkmark icons if desired.
   • Content Depth Truncation: Control how many levels of content are visible.
4. Customize Sidebar Modules settings to adjust the appearance of module sections within the sidebar.

5. Configure Course Depth settings: Course Depth refers to the different levels of content hierarchy in your sidebar. For example:

   • Depth 1 might be main modules
   • Depth 2 could be sections within modules
   • Depth 3 might represent individual lessons

   Each depth level can have its own styling, allowing you to visually distinguish between different levels of your course structure. To customize:

   1. Scroll down to “Course Depth 1”, “Course Depth 2”, etc., in the settings menu.
      
   2. For each course depth, you can adjust typography, colors, and other visual elements to create a clear hierarchy in your sidebar navigation.
6. Enable Border to add an outline to the sidebar.
7. Toggle the Shadow setting to add a shadow effect for visual depth.
8. After adjusting the settings, click Save on the top right to apply your changes.

Back to Top

---

Additional Information

• Getting Started with Courses
• Managing Course Enrollment
• How to Manage Course Modules
• How to Manage Course Lessons
• How to Customize the Course Theme

Back to Top