This article will cover information on the Course Sidebar element. The Course Sidebar element is one of the Course-type elements in the page editor.
This element can be found in the Elements menu by mousing over a current element on the page and clicking on the orange Add Element button. You can scroll through the menu to locate it, click on the Course Element Group or type Course Sidebar in the Search elements Field.
You can click on and hold the element to drag it into position.
Course Sidebar Element Menu
-
Move
Clicking and holding the move icon will allow you to drag the element to a new location on the page.
-
Element Name
This is the name of the currently selected element. The name given will be the default name of the element. You can change the name in the CSS info of the Coding menu.
-
Settings
Clicking on this gear icon will open the individual settings of the element. Each element has specific settings based on its functions. Please check the Settings section below for further information.
-
Clone
The clone icon will duplicate the currently selected element and place it below the current element.
-
Coding
Custom CSS can help you extend the design of each section on your page to meet your needs both visually and functionally. As the code requires, you can add coding to one of three areas: CSS, Header, or Footer.
The CSS info for the element is on the right of the CSS window. The title of the element can be changed in the title field to allow for easier identification.
Due to the many different styles and uses of custom coding, ClickFunnels' Support Agents will not troubleshoot specific codes. Instead, you can submit a request for help in the Coding section of our Community, or reach out to the code provider for support.
-
Trash
Clicking on the trash icon will delete the element from the editor.
Course Sidebar Element Settings
Layout Path
This section of the settings will tell you where the current element is located within the page's layout.
Element title
The current element's title is located at the top left of the settings. The element's title can be changed via the coding button.
Coding button
The coding button will open the page coding menu. Opening the coding menu will allow you to add codes to your pages and change the element's title for easier searching.
Settings Menu
Top margin
The top margin slider is used to set the spacing between the top of the current element and the bottom of the element above it. Entering a negative number in the field will cause the lower element to overlap the top element.
Border
Toggling the Border menu will open the following settings:
Style
If you click on One, Two, or Three, the following will appear
Choose which sides of the element show the border.
If you click on One, Two, or Three, the following will appear
-
Edit Style
Clicking this button will open the style guide page for the page. Please save your work before clicking this button.
-
Override
The override button will open the custom settings that will be different from the style guide.
Border Style
Choose a border style (straight line, dashes, or dots).
Color
Choose the color of your border.
Stroke size
Adjust the thickness of your border.
Course Settings
Font Family
Clicking on the font family button will allow you to set the font of the element. This will override the general typography setting of the page.
Weight
The weight of the font lines can be set from this drop menu from: thin, regular, or semi-bold.
Font Size and Font Size Mobile
Set the font size for both desktop and mobile viewing here. If you wish the mobile font size to be different from the desktop font size, click the link icon to separate the two settings. Unlinking the text will allow you to set font sizes independent of the other view.
Background
Displays the background color in the element.
Color
Displays the link font color in the element. Setting a color here overrides the general link color typography settings.
Dropdown Color
Displays the dropdown font color in the element. Setting a color here overrides the general dropdown color in typography settings.
Content Settings
Font Family
Clicking on the font family button will allow you to set the font of the element. This will override the general typography setting of the page.
Weight
The weight of the font lines can be set from this drop menu from: thin, regular, or semi-bold.
Font Size and Font Size Mobile
Set the font size for both desktop and mobile viewing here. If you wish the mobile font size to be different from the desktop font size, click the link icon to separate the two settings. Unlinking the text will allow you to set font sizes independent of the other view.
Indentation size
Background
Displays the background color in the element.
Color
Displays the color of the module in the element. Setting a color here overrides the general text typography settings.
Active Color
Displays the color of the active module in the element. Setting a color here overrides the general text typography settings.
Dropdown Color
Dropdown Active Color
Advanced Settings
Animation
The animation section of the settings will allow you to add dynamic movement to your page.
-
Style
You can select the style of animation to be applied to your element from the dropdown list.
-
Trigger
Select the trigger type that will start the animation.
-
Duration
Duration is the amount of time it will take for the animation from start to completion in milliseconds.
-
Delay
Delay is how long it will take for the animation to start after the trigger is set.
-
Animate Once
This check box will stop the animation from being triggered multiple times.
-
Preview Animation
Clicking on the “Preview animation” button will allow you to see the animation in the editor.
Render Conditions
Adding conditions to a section, row, or element will allow for custompage renderings based on the conditions set.
Custom Attributes
his setting will allow for creating custom attributes or to be able to add data-title attributes for sections, rows, and elements. The use of a data-title is a reliable way to make reusable custom code for both CSS and JS to affect the page.
Views and Trash
-
The All icon sets the element to be visible on both Desktop and Mobile versions of the page.
-
The Desktop icon will set the element to only be visible on the desktop version of the page.
-
The Mobile icon will set the element to only be visible on the mobile version of the page.
-
The Eye with a Line icon will hide the element on all views. You can use the Layout Menu in the editor to locate hidden elements.
-
The Trash icon will delete an element from the page.
If you have any questions about this, please contact our Support Team by clicking the Submit a Request button at the top right-hand corner of this page and then the Help button at the bottom left of the ClickFunnels Page.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article