The Content Body element allows you to dynamically display content on blog posts and course lesson pages in your site. It ensures that when users visit a blog post or course lesson page, the element pulls the specific content associated with that page. In this article, we’ll cover how to add the Content Body element to your blog post and lesson pages and ensure it functions correctly.
Requirements
An active ClickFunnels account.
A blog post or lesson page created in your workspace.
Adding the Content Body Element
1. Access the Site Theme Pages
In your ClickFunnels dashboard, navigate to the Site app from the left-hand menu.
Click Overview under the Site app.
Click Edit Site at the top right to access the theme page editor.
In the Site Theme Pages panel, click Blog Home or Course Home to expand their submenus.
Locate the Correct Theme Page:
To access the Blog Post page, click Blog Home to expand its submenu, then select Blog Post.
.png "image(419).png")
To access the Lesson Page, click Course Home to expand its submenu, then select Lesson Page.
.png "image(420).png")
2. Add the Content Body Element
In the page editor, locate the row where you want to display dynamic content.
Click the orange + button to add an element.
In the right-hand menu, scroll to Advanced and find the Dynamic Slots category.
Select Content Body to add it to your page.
.png "image(421).png")
Once the Navigation element is added, you can customize its appearance to fit your page design.
Customizing Navigation Element
When you hover over an element, its border will be highlighted in orange. To access an element's settings, click on the gear ⚙️ icon or click directly on the element to open its' settings panel.
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.
Advanced Settings
To further customize your container (section, row, column, and element), ClickFunnels provides powerful Advanced settings options that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details:
Advanced Settings - Customize Styles: Learn how to populate contents dynamically, position containers, and apply z-index.
Advanced Settings - Customize Animation: Learn how to add animations, control entry and exit effects, and adjust animation delay.
Advanced Settings - Customize Logic: Learn how to apply conditional logic to elements and add custom attributes.
Element Control Panel
The Element Control Panel appears at the bottom of every element in the page editor, offering quick access to essential settings and actions for that element. Here’s what each icon represents:.png "image(47).png")
ALL: The element will be visible on all devices (desktop, tablet, and mobile).
Desktop Icon: The element will only be visible on the desktop view.
Mobile Icon: The element will only be visible on mobile view.
Eye Icon: Use this to hide the element from the page. The element will still be present in the editor but invisible to visitors.
Code Icon: This icon opens the code editor, where you can insert custom CSS or JavaScript code to modify the element's behavior or styling.
Trash Icon: Removes the element from the page editor entirely.