--- title: "Content Body: Display Blog Post and Course Lesson Content Dynamically" slug: "content-body-display-blog-post-and-course-lesson-content-dynamically-1" description: "Learn how to add the Content Body element to your blog posts and course lessons for dynamic content display, enhancing user experience seamlessly." tags: ["blog posts", "content body", "editor", "lessons"] updated: 2025-06-17T17:27:09Z published: 2025-06-17T17:27:09Z canonical: "support.myclickfunnels.com/content-body-display-blog-post-and-course-lesson-content-dynamically-1" --- > ## 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. # Content Body: Display Blog Post and Course Lesson Content Dynamically The **Content Body** element allows you to dynamically display content on the blog posts and course lesson pages. It ensures that when users visit a blog post or course lesson page, the element pulls the specific content associated with it. In this article, we’ll explain how to add the Content Body element to your blog post and course lesson pages and ensure it functions correctly. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-X19R5AQD.png) --- ## Requirements - An active ClickFunnels account - A [blog post](/v1/docs/how-to-create-and-manage-blog-posts) or [course lesson](/v1/docs/how-to-manage-course-lessons) created in your workspace > [!NOTE] > Note: > > The Content Body is a dynamic element that is capable of rendering dynamic content exclusively within the **Blog Post theme page** and the **Course Lesson theme page**. --- ## How the Content Body Element Works The Content Body is a dynamic element designed specifically to display the contents of individual blog posts and course lessons in an engaging manner. When your viewers access blogs or course lessons and click on any specific blog post or course lesson, the Content Body element has the capability to pull the relevant content associated with the item they clicked on. This process occurs seamlessly, allowing the Content Body container to replace the existing content dynamically with the new information. This functionality enhances user experience by providing immediate access to the desired content without page reloads or additional navigation steps. --- ## Step 1: Adding Blog Post or Course Lesson Content #### Adding Blog Post Content 1. Navigate to the **Site & Blog** app and select **Blog**. 2. Create a new post or select an existing one. 3. On the Blog Posts page, click the Pencil ✏️ icon next to your created post. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-Y2DB08FK.png) 4. You can add and customize blog content (e.g., text, images, videos, buttons, etc) in the Page Editor using Sections, Rows, and Elements. 5. Once done, click **Save Changes** to save your edits. Learn more: [How to Create and Manage Blog Posts](/v1/docs/how-to-create-and-manage-blog-posts) #### Adding Course Lesson Content 1. Navigate to the **Courses** app and select a course to edit. 2. Add a new **Module** and a new **Lesson** inside the module. 3. Click the Lesson Name or **Edit Lesson** option to open the lesson editor. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-X81D8FGX.png) 4. You can add and customize lesson content (e.g., text, images, videos, buttons, etc) in the Lesson Editor using Sections, Rows, and Elements. 5. Once done, click **Save Changes** to save your edits. Learn more: [How to Manage Course Lessons](/v1/docs/how-to-manage-course-lessons) --- ## Step 2: Adding the Content Body Element 1. Navigate to the **Site & Blog** app. 2. Click **Overview**. 3. Click **Edit Site** to open the site theme pages editor. 4. In the left panel, choose **Blog Post** from the Blog category or **Lesson Page** from the Course category to modify the theme pages. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-RVTN11T6.png) 5. Inside the page editor, add a **Section** where you want to place the element. 6. Add a **Row** within that section. 7. Click the orange **+** **Plus** or **Add New Element** button inside the row to insert a new element. 8. From the **Advanced** category, scroll to the **Dynamic Slots** section and select the **Content Body** element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-ZVT0S7HU.png) --- ## Customizing the Content Body 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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1731538243619.png) ### Top Margin ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1751891362357.png)The **Top Margin** setting lets you control the space between the current container (section, row, flex, and element) and the container directly above it. If no previous container exists, the margin will be applied relative to the parent container. If no preceding container is added, the **Body** will be the parent. You can set top margin values independently for desktop and mobile by using the device icons (🖥️ & 📱 ). If no mobile value is specified, it will inherit the desktop setting by default. Use the slider or manually enter a value in pixels (`px`) or percentage (`%`) to create consistent spacing across screen sizes. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1748441653595.png) ### Control Panel The **Control Panel** appears at the bottom of every container(Section, Row, Flex, and Element) in the page editor, offering quick access to essential settings and actions for that container. Here’s what each icon represents: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(47).png) - **ALL**: The container will be visible on all devices (desktop, tablet, and mobile). - **Desktop (**🖥️**) Icon**: The container will only be visible in desktop view. - **Mobile (**📱**) Icon**: The container will only be visible in mobile view. - **Eye** **(👁️)** **Icon**: Use this to hide the container from the page. Once clicked, the container will be hidden in the editor but not deleted. You can click the **Layout** menu in the top navigation bar to find the hidden containers. Select All, Desktop, or Mobile icon to unhide in the editor. - **Code** **()** **Icon**: This icon opens the code editor, where you can insert custom CSS or JavaScript code to modify the container's behavior or styling. - **Trash (**🗑️**) Icon**: Removes the container from the page editor entirely. ### Advanced Settings ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1748535637061.png) To further customize your container (section, row, column, and element), ClickFunnels provides **Advanced** settings 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**](/v1/docs/advanced-settings-customize-styles): Learn how to populate contents dynamically, position containers, and apply z-index. - [**Advanced Settings - Customize Animation**](/v1/docs/advanced-settings-customize-animation): Learn how to add animations, control entry and exit effects, and adjust animation delay. - [**Advanced Settings - Customize Logic**](/v1/docs/advanced-settings-customize-logic): Learn how to apply conditional logic to elements and add custom attributes. ## Related - [Customizing Blog Theme Pages](/customizing-blog-theme-pages.md) - [How to Create and Manage Blog Posts](/how-to-create-and-manage-blog-posts.md) - [How to Manage Course Lessons](/how-to-manage-course-lessons.md) - [Getting Started with Styles](/getting-started-with-styles.md)