Changing Blog Listing Template
Template Configuration
The template is designed with three customizable drag-and-drop sections for the blog listing page: Top & Bottom Area for full-width elements like Blog Hero modules, and the Main Section contained within a fixed width for Listing Modules.
To modify these sections, select the āEdit Template Settingsā option located in the upper left corner.
Within the settings, you can adjust the Main section's column width. Activation of Left & Right Sidebar sections and their container sizes is also possible. Note: Ensure the combined column sizes of the Left, Main, and Right sidebars do not exceed 12 columns to prevent layout issues.
Under the Blog Settingsā styles tab, customization options for the Top, Bottom, and Main Area include container sizes, background configurations, and padding settings
Sprocket Rocket has some blog specific modules to customize you listing page
- Blog Hero 01
- Blog Hero 02
- Blog Listing 01
- Blog Listing 02
- Blog Listing 03
- 01
- Blog Pagination
Blog Hero Modules
These modules are ideally positioned at the top of your blog listing page to offer an engaging introduction. Each Blog Hero module spans the full width and can feature a background image, title, and subtitle, with the option to include a button linking to a blog post or another page.
A static or featured post can be set in the Data field to consistently display in the Blog Hero module.
Blog Listing Modules
You can use listing modules to display different blog posts in different styles. For example, you can use one listing module to display blog posts in a grid layout and another listing module to display blog posts in a list layout. You can specify the Tag to filter the posts in the listing module.
Posts to show
This setting determines the maximum number of posts displayed within a listing module, not exceeding the limit defined in the HubSpot template settings.
Posts start
This setting is designed to specify the initial count of posts to skip over in the list, proving particularly beneficial when incorporating multiple listing modules on a single webpage to prevent post duplication. For instance, if you have a Blog Hero module followed by Blog Listing 01 configured to display 5 posts, then when adding Blog Listing 02, you should adjust this setting to 7. This approach ensures a cohesive flow of unique content across the different sections of your blog listing page without any repetition of posts.
Blog Navbar
Incorporate the blog navbar module at your blog listing page's top, typically alongside the Global Blog Header. This module features a search bar and a tags list for filtering displayed blog posts.
Blog Pagination
Add a pagination bar at the bottom of the blog listing page with the blog pagination module. It enables visitors to navigate through pages of blog posts using next or previous buttons.