Changing Blog Listing Template

Blog Listing Page Template

This template is designed with three customizable drag-and-drop sections for the blog listing page: the Top & Bottom Areas for full-width elements like Blog Hero modules, and the Main Section contained within a fixed width for Listing Modules.

Template Configuration

To modify these sections, select the "Edit Template Settings" option 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.

Customization Options

Under the Blog Settings' styles tab, customization options for the Top, Bottom, and Main Areas include:

  • Container Sizes: Choose between full-width or contained layouts.
  • Background Configurations: Select from Image, Color, Custom, or Gradient backgrounds.
  • Padding Settings: Options include default, no padding, small, large, or custom padding.

listing-dnd

Blog Modules

Sprocket Rocket provides several blog-specific modules to customize your listing page:

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.

  • Static or Featured Post: Set a static or featured post in the Data field to consistently display in the Blog Hero module.

Blog Listing Modules

Use listing modules to display different blog posts in various styles. For example, you can use one listing module to display blog posts in a grid layout and another 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: Specify the initial count of posts to skip over in the list, which is beneficial when incorporating multiple listing modules on a single webpage to prevent post duplication.

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.