Engage your visitors by displaying your blog entries on your website. Create a Blog module with the page designer to organize and display posts. They can be displayed in normal columns or you can take advantage of the numerous design possibilities to create combinations featuring sidebar modules.
Go to the page designer, and add a new module by clicking on the gray plus sign. Choose the blog module from the list. If you prefer to find the module automatically, it’s also possible to type it in the search bar on top.
The contents tab is where you will be able to customize what will appear on the module.
Here you can define the following:
- Posts number: type how many posts you want to display.
- Include categories: choose which categories you wish to include in the feed.
- Meta date format: define the format for the post’s date.
- Content: select whether you want to display an excerpt text or the entire content.
- Offset number: pick how many posts, if any, you want to offset by. This will make this defined number of recent post will not be shown.
You can enable the following options:
- Show featured image: it will turn the thumbnails on.
- Show Read More button: to make this button appear after the excerpts.
- Show author: display the author’s name.
- Show date: make the date of the post appear below the title.
- Show categories: show the post categories below the title.
- Show comment count: show the number of comments below the title.
- Show pagination: enable numbered pagination for the module.
If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.
Add a background color, gradient, image or video to your module.
You can modify the module’s label for easier identification.
Customize the design
Modify the design of the blog module using these options.
Select the grid or fullwidth option for showing the posts.
Select here the zoom icon color, the hover overlay color and the hover icon of your choice.
Control how your text is displayed in terms of orientation, color (dark or light), and text shadow.
Define the color tone for your image.
Define the title heading level, font, color, alignment, line height, and other settings for the title.
You can also adjust the font settings for the body text.
You can also adjust the font settings for the meta text.
Customize the font settings for the pagination text.
Adjust the width of the module.
Customize margins and padding sizes.
Define the border’s corner, style, color and width for your module.
Here you can enable box shadow.
Adjust the hue of the module as a whole.
Give an animation style to the module, like fading or sliding when it appears.
Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.
Let’s see how our posts look using a grid format.
For the content we are choosing the following options:
Posts Number: 3
Include Categories: All categories
Content: Show excerpt
Show Featured Image: NO
Show Read More Button: YES
Show Author: NO
Show Date: YES
Show Categories: YES
Show Comment Count: NO
Show Pagination: NO
Background Color: #99c9dd
For the design:
Title Text Font Weight: bold
Title Text Color: #000000
Title Text Size: 22px
Meta Text Color: #ffffff
Meta Text Size: 12px
And it looks like this!