Sidebar: Add Course Sidebar Navigation to Course Pages

The Render Mode setting in the Sidebar element determines how the course content is displayed and organized in the navigation menu.

Classic Mode:

• Displays a straightforward hierarchical structure for modules and lessons.

• All modules and lessons are visible as an expandable list, making it easy for users to navigate.

Ascension Mode

• Organizes content into tabs for each module, with lessons nested underneath the selected tab.

• Provides a cleaner, more focused layout by displaying one module at a time.

The Show Drip Modules setting in the Sidebar element controls whether to display locked or upcoming course modules and lessons based on the drip schedule. Here’s what each option does:

• Yes: Displays all modules, including locked or scheduled ones, giving students a preview of upcoming content.

• No: Only shows unlocked, accessible modules, keeping the sidebar focused on current content.

To learn more about adding drip modules, check out our How to Manage Course Modules article.

The Sidebar element includes several customizable settings that allow you to tailor its appearance and functionality to match your course layout and design preferences.

• Width: Adjust the Sidebar’s width relative to its container (e.g., set to 100% for full width).

• Padding Top & Bottom: Add vertical spacing within the Sidebar element.

• Vertical Spacing: Adjust spacing between items in the navigation.

• Background Color: Set a background color for the Sidebar to match your branding.

• Mobile Hamburger Color: Choose a color for the mobile version of the navigation menu.

• Completed Checkmark Color: Change the color of the checkmarks indicating completed modules/lessons.

• Left Indentation Spacing: Adjust the indentation for nested content items.

• Disable Left Icons: Toggle the visibility of icons (e.g., module/lesson icons).

• Disable Checkmark Icon: Toggle visibility of completion checkmarks.

• Content Depth Truncation: Set the number of levels displayed in nested navigation (e.g., 3 levels for module > lesson > sub-lesson).

The Modules settings allow you to adjust the appearance of the module list within the Sidebar. You can customize the background and text color to ensure the design aligns with your course theme.

• Top Margin:

  The Top Margin setting allows you to control the space between the current element and the element directly above it. If no previous element exists, the margin will be applied relative to the parent container, such as a row, section, or flex container. You can adjust the margin using the slider or manually input a value (px or percentage %), ensuring the spacing is consistent with your design needs.
  

• Background: Select a background color for the module section to make it visually distinct.

• Text Color: Choose a color for the text to improve readability or match your course branding.

The Course Depth settings control the display and style of nested modules and lessons in your Sidebar. You can adjust the design for each depth level independently, giving you granular control over the appearance.

• Depth 1: Displays only the top-level modules in the course.
  Example: "Module 1" and "Module 2" are visible, but their sub-modules and lessons are hidden.

• Depth 2: Displays modules and their immediate sub-modules.
  Example: "Module 1 - Module 1.1" is shown, but lessons within "Module 1.1" remain hidden.

• Depth 3: Displays the full hierarchy, including modules, , sub-modules, and lessons.
  Example: "Module 1 - Lesson 1" and "Module 1.1 - Lesson 1" are all visible in the Sidebar.

Key Settings:

• Top Margin:

  The Top Margin setting allows you to control the space between the current element and the element directly above it. If no previous element exists, the margin will be applied relative to the parent container, such as a row, section, or flex container. You can adjust the margin using the slider or manually input a value (px or percentage %), ensuring the spacing is consistent with your design needs.
  

• Item Type: This setting lets you control what kind of items appear in the Sidebar. You can choose:

  • Any: Displays both Sections (modules) and Lessons.

  • Section: Shows only modules.

  • Lesson: Shows only individual lessons.

• Selected State: The Selected State setting allows you to customize the appearance of an item that is currently selected in the Sidebar. For example, if a student is viewing Lesson 2, the text or background of this lesson can appear highlighted to indicate their location.

  • Default: This style applies to items that are not currently selected.

  • Selected: This style applies to the item that is currently selected or active. You can customize the appearance to make it stand out, such as bolding the text or changing the font color.

• Hovered State: The Hovered State setting customizes how an item looks when the user hovers their cursor over it. This helps create an interactive and visually clear navigation experience.

  • Not Hovered: This style applies to items in the Sidebar when the user’s cursor is not over them.

  • Hovered: This style applies when the user’s cursor hovers over a Sidebar item. You can customize this state to make items stand out.

• Typography:

  The Typography settings allow you to control the appearance of text in your element. These settings provide two views. You can select a predefined style (Small, Medium, or Large) that applies a consistent design across your page. If you select to override the predefined style, additional settings become available, allowing you to customize the text appearance manually.

  • Font Family: This option allows you to select the font type for your text. ClickFunnels provides a range of popular fonts from the Google Fonts library. Additionally, you can upload and use your own custom fonts by navigating to Workspace Settings > My Assets > Fonts. Once uploaded, your custom fonts will appear in the selection list for use.

  • Weight: This option defines the thickness of the text. Depending on your desired emphasis, you can choose from Thin, Regular, or Bold options. Thin fonts provide a subtle look, while bold fonts create more visual impact.

  • Font Size: You can adjust the text size using the slider or manually inputting a specific value. Additionally, you can choose between rem or px for the size measurement, such as 2rem or 32px.

    • Rem is a relative unit based on the base font size defined in your style guide. For example, if you select a text size of 2rem and your style guide specifies a base font size of 16px for desktop, the resulting text size will be 32px for desktop view (i.e., 2rem × 16px = 32px).

    • Px is an absolute measurement, providing precise control over the text size.

  • Font Size Mobile: Set the font size for mobile views to ensure readability on smaller screens.

  • Letter Spacing: Adjust the space between individual letters. You can increase or decrease the value using the slider or input a specific value (measured in rem). More spacing spreads the letters apart, while less spacing brings them closer together.

  • Letter Spacing Mobile: Customize the letter spacing specifically for mobile devices.

  • Line Height: Controls the vertical space between lines of text. This is typically expressed as a percentage of the font size. A higher percentage increases the space between lines, improving readability, especially for larger blocks of text.

  • Line Height Mobile: Set a different line height for mobile or smaller screens.

  • Color: Use the color picker to select the text color. You can choose a predefined color from the Style Guide or create a custom color. When using the Custom color picker, you can select the color using the slider or input a specific HEX code. Additionally, you can adjust the opacity (Alpha value) using the second slider—moving it to the left reduces the opacity and makes the color more transparent, while moving it to the right makes it fully opaque.

  • Bold: Similar to the Color option, you can select a color for the bold state of the text. This color will be applied when the text is set to bold, allowing you to differentiate it visually from regular text.

  • Link: Like the Color option, you can apply a specific color to text containing a hyperlink. If the text is hyperlinked, the selected color will be used to style the link, helping to make it stand out.

  • Icon Color: Choose the color of your icons (if applicable) to ensure they match your overall page design.

  • Text Casing: Select how your text should appear in terms of capitalization:

    • Lowercase: All text in lowercase.

    • Uppercase: All text in uppercase.

    • Capitalize: Capitalize the first letter of each word.

  • Decoration: Add text decorations such as:

    • Underline: Draw a line beneath your text.

    • Strikethrough: Cross out your text with a horizontal line.

    • Overline: Draw a line above your text.

  • Opacity: Adjust the opacity of the text. The slider allows you to make the text more or less transparent. Moving the slider to the left (0) decreases the opacity (making the text more transparent), while moving it to the right (1) makes the text fully opaque.

  • Align: Set the alignment of your text within its container. Based on your page design, you can choose to align the text to the left, center, or right.

• Text Shadow:

  The Text Shadow section adds a subtle shadow behind your text, creating depth and improving readability. You can control the following parameters:

  

  • Offset-x and Offset-y: Adjust the horizontal and vertical positioning of the shadow.

  • Blur: Set how blurred or sharp the shadow appears.

  • Color: Choose the shadow color to match or contrast your page design.

• Border:

  The Border settings enable you to add and style borders around an element, allowing for enhanced visual definition and separation on the page:

  

  1. Style Presets (1, 2, 3): Choose from predefined border styles in your Style Guide. These presets provide consistent border styles across your page and can be quickly applied to elements.

  2. Edit Style: To modify the preset border styles in the Style Guide (affecting all elements using that style), select Edit Style to adjust the design in your global settings.

  3. Override: Use the Override option to customize the border settings specifically for this element without impacting the global Style Guide settings.

  4. Borders: Select which sides of the element should display a border. Options include any combination of top, bottom, left, and right borders.

  5. Border Style: To fit your design preferences, choose the border's line style, such as solid, dashed, or dotted.

  6. Color: Use the color picker to select a border color. You can choose a color from the Style Guide or select a custom color, ensuring the border color aligns with your design scheme.

  7. Stroke Size: You can adjust the border's thickness using the Stroke Size slider or by inputting a specific pixel value, creating anything from thin outlines to bold frames.

• Shadow:

  The Shadow settings allow you to add depth and emphasis to elements by applying shadow effects, enhancing the visual appearance. Here’s how to customize shadow properties:

  

  1. Style: Select one of the predefined shadow styles from your page's style guide. Click on the numbered styles (1, 2, or 3) to apply preset shadow settings defined in your style guide.

  2. Shadow Style: Choose between Inset (shadow within the element) and Outset (shadow outside the element) to achieve the desired shadow effect.

  3. X-direction: Adjusts the horizontal positioning of the shadow. A positive value moves the shadow to the right, while a negative value shifts it to the left.

  4. Y-direction: Controls the vertical placement of the shadow. Positive values push the shadow downward, while negative values pull it upward.

  5. Blur: Controls the softness of the shadow edges. Higher values create a more diffused, softer shadow, while lower values keep the shadow sharp.

  6. Spread: Adjust the size of the shadow. Positive values expand the shadow, while negative values make it narrower.

  7. Color: Use the color picker to choose to set the shadow color.