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.
Define contents
The contents tab is where you will be able to customize what will appear on the module.
Content
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.
Elements
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.
Link
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.
Background
Add a background color, gradient, image or video to your module.
Admin label
You can modify the module’s label for easier identification.
Customize the design
Modify the design of the blog module using these options.
Layout
Select the grid or fullwidth option for showing the posts.
Overlay
Select here the zoom icon color, the hover overlay color and the hover icon of your choice.
Text
Control how your text is displayed in terms of orientation, color (dark or light), and text shadow.
Image
Define the color tone for your image.
Title Text
Define the title heading level, font, color, alignment, line height, and other settings for the title.
Body Text
You can also adjust the font settings for the body text.
Meta Text
You can also adjust the font settings for the meta text.
Pagination Text
Customize the font settings for the pagination text.
Sizing
Adjust the width of the module.
Spacing
Customize margins and padding sizes.
Border
Define the border’s corner, style, color and width for your module.
Box Shadow
Here you can enable box shadow.
Filters
Adjust the hue of the module as a whole.
Animation
Give an animation style to the module, like fading or sliding when it appears.
Advanced settings
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.
Use Case
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:
Layout: grid
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!
