Help your audience easily browse your blog content by using the Blog Posts collection element. With this feature, you can display multiple blog posts in a visually organized way, customize their appearance, and dynamically pull in details like titles, summaries, and published dates..png "image(341).png")
Requirements
An active ClickFunnels account
Adding The Blog Posts Element
Open the ClickFunnels page editor for the page where you want to display your blog posts.
Click Add Element in the desired row to open the Elements menu.
Scroll to the Collections section and select the Blog Posts element.
.png "image(343).png")
After adding the “Blog Posts” element, you will be prompted to select the number of columns you want to add inside the container.
Add dynamic details such as Name, Image, and Link, which automatically pull data from your blog post settings to keep your page updated. You can include the following elements:
Name: Displays the title of the blog post.
Summary: Adds a brief description of the blog post.
Link: Provides a clickable link to view the full blog post.
Published Date: Shows when the blog post was published.
Image: Displays the blog post’s featured image.
Category: Indicates the category assigned to the blog post.
Blog Post Authors: Displays the name(s) of the post author(s).
.png "image(345).png")
Click on each element to access its settings. Adjust fonts, colors, spacing, and layout to match your page’s design for a cohesive look.
Customizing Blog Posts Element
Accessing Settings
When you hover over a collection element, its border will be highlighted in magenta. To access its settings, click on the gear ⚙️ icon or click directly on the element.
Top Margin
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 (px) or percentage (%) to create consistent spacing across screen sizes.
Filters
The Filters settings allow you to control which posts are displayed:.png "image(346).png")
Filter Active Post: Check this option to exclude the currently viewed post from being displayed in the list of blog posts.
Filter By Categories: Show only blog posts that belong to a specific category. When selected, you can choose a category from the dropdown menu.
Collection Settings
The Collection Settings let you configure how grid items (cards) are arranged and paginated inside the container.
Items Per Row: Choose how many items appear on each row of the grid. The layout will wrap to new rows and adapt on smaller screens automatically.
Items Per Page: Set the total number of items rendered on a single page in the container. If the collection has more than this number, ClickFunnels creates additional pages.
Hide pagination: Turn pagination on or off. When enabled, page-number controls are removed and all eligible items render in one continuous list. For very large collections, consider leaving pagination on to improve load time and navigation.
Pagination Item Color: Color of the pagination items’ text/icons (e.g., the numbers 1, 2, 3).
Pagination Item Background Color: Background color for non‑active pagination items.
Pagination border color: Border color around each pagination item.
Pagination Active Item Color: Text/icon color for the current (active) page item.
Pagination Active Item Background Color: Background color for the active page item.
Pagination Active border color: Border color for the active page item.
Tips:
For accessibility, use pagination colors with sufficient contrast so page numbers remain easy to read.
Advanced Settings
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: 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.
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.