Blog posts

The blog posts section allows you to display a list of recent blog posts from a particular blog. To feature only a single post, use the Featured Blog Post section.

Blog posts on Composition demo store

The style and display of the blog posts is controlled through global settings under the Settings > Blog post card section.

Settings

  • Blog: To display your blog posts, please select the blog you wish to feature.

  • Blog posts: Select the number of blog posts to display.

  • Layout:

    • Number of columns: You can choose the number of columns for desktop and mobile

    • Layout (desktop): This controls the display of excess items that do not fit the grid columns. You can choose between the slideshow or grid layout.

    • Container type: allows you to select full to create full-bleed layouts, padded to apply the global horizontal gap setting to a full bleed section, or max to constrain the blog posts to the maximum container size.

  • Slideshow settings apply to both mobile and desktop when layout (desktop) is set to slideshow:

    • Arrow position: Choose between overlay (arrows appear over the blog posts) or below

    • Counter style: Choose between hidden, counter or progress bar

    • Button style: Choose a button style for when the arrow position is set to overlay (arrows will have a simple text style if they're positioned below)

Can't find the setting you're looking for? The following settings are explained in detail in common settings:

  • Color scheme/Color scheme transition

  • Padding

  • Borders

Blocks

This section also comes with pre-loaded with two types of option blocks should you wish to add a header above the blog posts or buttons below them:

  • Section header (hidden by default, fill in the settings to display)

  • Buttons (hidden by default, fill in the settings to display)

Examples & inspiration

Composition preset features a left-aligned header and tags, a large title, and a read more link for each blog post.
Composition preset
The Gaia preset features a left aligned header, and a blog post with a title and excerpt.
Gaia preset
The Gloss preset features a centered header with badge title and a read posts button underneath.
Gloss preset
The savoir preset features a centered header, text badges, a title and a read more link with a button underneath.
Savoir preset

Similar sections

Cover

The featured post section allows you to highlight a single post as a split card or as a full-bleed image banner.

Last updated

Was this helpful?