Once you've written one or more blog posts, it's time to put them up on your website so visitors can read them. You display your blog posts in the Blog catalog module which you can insert anywhere on your website.
To insert the Blog catalog module, navigate to the place on your website where you wish to place it, hover on any existing module or empty column, and click the Add module option. On the overlay, select Blog in the left-side menu and click on Blog catalog.
Filter posts by tags
On the Blog catalog module overlay, you can specify which of you posts you wish to display based on tags. If you have added a tag to a blog post, it will only show up on the website if the matching tag has been selected on the module. For example, if you have added the tag "labor-law" on a blog post and also selected that tag on the Blog catalog module, the post will show on your website.
Selecting multiple tags will include any blog posts that have at least one of the selected tags added to them.
If you don't select any tags on the module, all your posts will be displayed.
Blog catalog design
Clicking on Design in the left-side menu will present you with various styling options for the module. For even more specific styling options, click more local design options or edit the Global Design of the Blog catalog module. For a more thorough introduction to styling, see our dedicated styling guide.
Blog catalog settings
Click on Settings in the left-side menu to define how your blog posts are displayed on your website.
By default, the module will only display one blog post. Change this by typing in a value or dragging on the slider in the field Amount of posts shows.
You can divide your posts into columns and, thereby, display multiple posts side by side. Below is an example of a Blog catalog module with Amount of columns set to 3.
The field Margin between posts specifies the amount of spacing between the posts on a scale from 1 (no spacing) to 10 (a lot of spacing). If you are displaying multiple posts under each other, spacing is added to all four sides of your blog post preview: top, right, bottom, left.
In the field Maximum number of posts you can set a cap on how many posts you want to display in the module, for example to ensure that your website loads fast even though you have hundreds of posts in your blog.
Post information on overview
Define which elements you wish to display on the post previews in the Blog catalog module. Untick the boxes to hide elements.
If you have set your Blog catalog module to display fewer posts than what is available in your blog, your blog posts will be displayed in slides. Slides enable visitors to flip through your posts by clicking on arrows or pagination dots - or you can set your slides to transition automatically.
Tick Show arrow navigation to add arrows on the left and right sides of your Blog catalog. This enables visitors to manually flip through your slides at their own pace. Tick Show pagination dots to add a dotted navigation at the bottom-center of the module.
If you have set your blog slides to transition automatically, ticking Pause on hover will pause the transitions if a visitor places their mouse cursor anywhere on the blog catalog. Once they hover somewhere else on the page, the blog slides will resume the automatic transitions.
Tick Auto change of slides if you want the module to automatically transition between your blog slides.
You can set an animation for when blog slides transition from one to the next. You can choose between three animations:
- Slide: each slide moves in horizontally
- Slow fade-in: a gradual, slow transition (with the fade lasting 0.8 seconds)
- Fast fade-in: a gradual, fast transition (with the fade lasting 0.2 seconds)
By default, the transition interval is 5000 milliseconds (5 seconds). Choose a smaller value if you want the transition interval to be shorter and a bigger value if you want the transition interval to be longer.
Enable hover mode to display either the blog post name or an icon of your choice when a visitor hovers on a blog post featured image. Read more about hover effects here.