--- title: "Using the Page Editor to Design Your Course" slug: "using-the-page-editor-to-design-your-course" updated: 2025-05-02T17:57:16Z published: 2025-05-02T17:57:16Z canonical: "support.myclickfunnels.com/using-the-page-editor-to-design-your-course" --- > ## 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 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. ![A screenshot of the course page editor dashboards](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/l-dnkv1psb9eevqktugitdsawa-mh6trra.png) --- ## Requirements - An active ClickFunnels account - A [published course with modules and lessons](/v1/docs/getting-started-with-courses#managing-the-course-content) --- ## 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. ![image showing the Customize tab with the change theme option highlighted](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/h1su0eanaxmmq_kf4fdmwa-yvokpbs7wnq.png) 7. Click **Customize** to open the page editor. > [!WARNING] > IMPORTANT > > 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. --- ## 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](/v1/docs/getting-started-with-courses#managing-the-course-content). 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**. ![Module collection](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/iswn1raj392fvjlgrezihyybg6qwbka5jq.png) 3. Configure the Module Collection: 1. Add **columns** as needed 2. Include essential module elements: - **Module Name** - **Module Image** - **Module Link** --- ## 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](/v1/docs/how-to-manage-course-modules#create-a-new-module). Here’s how to set them up: ### Adding Lessons to Module Pages 1. In the page editor, find **Default Module Page** under **Templates**. ![Default Module Page](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/u6sbyrn26aymgnbksi889vtzlmlzicsfzq.png) 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** ![Lesson Elements menu](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/h9emubkrbk4j64qidy4_sy73hqrvwcviyq.png) 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** --- ## 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](/v1/docs/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 ![Lesson elements menu](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/j5wk0xvzdus4gjqy3vihynmsl8xy4-vuda.png) 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 ![Lesson Status states Settings](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/z2iez6ikjtewzgcrbzjx6f4m5whr-j85zg.png) 5. (Optional) Add Navigation or Progress Buttons: a. **Add a Button element** for each action you want to include on the lesson page. b. **Set the button action** to one of the following for each button: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-JXR2OI83.png) - **Mark Complete**: Marks the current lesson as complete and automatically advances the user to the next lesson. - **Go Back to Previous Lesson**: Returns the user to the previously viewed lesson without affecting the current lesson’s completion status. - **Restart Lesson**: Reloads the current lesson and resets all associated progress, allowing the user to start over from the beginning. 6. Click **Save** to apply your changes. --- ## 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. ![Sidebar settings icon](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/l9zomrmtih9qgzexpjofu6o0rdrf9scmlg.png) 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. ![Completed Checkmark Color setting](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/sabl0z9zi6qrtiu_dhwmxd40zpimbvqmhq.png) - **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: Each depth level can have its own styling, allowing you to visually distinguish between different levels of your course structure. To customize: - Depth 1 might be main modules - Depth 2 could be sections within modules - Depth 3 might represent individual lessons 1. Scroll down to “Course Depth 1”, “Course Depth 2”, etc., in the settings menu. ![Course depth option in the settings menu](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/d2u5xptohanallqnyeqfaah4gp6fzij5vq.png) 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. --- ## Saving and Previewing Your Course Pages #### Saving Your Work 1. In the **Page Editor**, locate the **Save** button in the top-right corner. 2. Click **Save** after making changes to your course page. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-ZEN40OUB.png) 3. Wait for the **save confirmation** to ensure your updates are stored. #### Previewing Your Course Page 1. In the **Page Editor**, click the **Preview** icon next to the **Save** button. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-AQCDKO0H.png) 2. A new tab will open, displaying a **live preview** of your course page. 3. Check for any formatting issues, broken links, or design inconsistencies. 4. Close the preview tab when you're ready to continue editing. > [!WARNING] > Important > > To see dynamic content like modules and lessons in the preview, you must first **publish** the course. If the course is still in draft mode, these elements will not appear. Additionally, if a dynamic section has no content attached, it will remain hidden even after publishing. For detailed instructions, refer to the [Getting Started with Courses](/v1/docs/getting-started-with-courses) article. > [!WARNING] > Important > > Some course pages use **dynamic content** such as modules, lessons, or elements that are automatically pulled into the page: > > - If your course page includes **dynamic content** but nothing has been added yet (such as a module without any lessons), the section will **not appear** in the preview. > - This is expected behavior since dynamic elements only display when content is attached. > - To see how dynamic content looks, ensure you’ve added at least one module, lesson, or item before previewing. For more details, see [Page Editor: Saving and Previewing Your Work](/v1/docs/page-editor-saving-and-previewing-your-work). ## Related - [Getting Started with Courses](/getting-started-with-courses.md) - [Managing Course Enrollment](/managing-course-enrollment.md) - [How to Manage Course Modules](/how-to-manage-course-modules.md) - [How to Manage Course Lessons](/how-to-manage-course-lessons.md) - [How to Customize the Course Theme](/courses-how-to-customize-the-course-theme.md)