The Blog Module displays articles or any post-type content using different layouts. It offers extensive styling options to match the design of your website.
Content
Content
- Select Post Type: Choose any registered post type.
- Blog Posts Count: Define the number of posts to be displayed.
- Posts by Type: Choose to display posts by type. Options include- Recent, Popular, By Category, and Random. Only available if “Posts” is selected.
- Offset Number: Choose a number of posts to be excluded from the display, starting from the latest ones.
- Related Post: Display related posts of the same categories as your current post. Check our guide on how to use related post features.
Elements
- Show Featured Image: Toggle on to show featured images.
- Show Excerpt: Toggle on to display excerpts.
- Use Post Excerpt: Choose to display the post excerpt that was manually submitted.
- Excerpt Length: Define the character length of the post excerpt.
Note: if the posts have no excerpt, Divi will automatically take the first few sentences to generate an excerpt from the post’s content. The Excerpt Length option allows you to control the length of this auto-generated excerpt.
However, if the posts have manually submitted excerpts, the value in excerpt length will not apply.
- Show Categories: Toggle on to display the post category.
- Show Author: Toggle on display post author name.
- Show Date: Toggle on to display the published date.
- Meta Date Format: Define the format of the date. Use any combination from here.
- Show Comment Count: Toggle on to display the number of comments for each post.
- Show Pagination: Toggle on to display pagination.
- Read More Button: Toggle on to display the “Read More” button for each post.
- Read More Button Text: Define the button text for the “Read Me” button. It is only available if the “Read More Button” is on.
Background
This background option is like the default background but it applies to each post.
Admin Label
Change the module name or label if required.
Design
Layout
Layout: Select from three types of layouts: Grid, Masonry, and Fullwidth.
Grid layout is the traditional blog post layout type for a clean consistent presentation of your blog posts with equal heights. The masonry layout is for a more dynamic look with posts of varying heights. A full-width layout is the most ideal for maximum visual impact with large immersive featured images.
If Grid Layout is Selected
- Columns in Desktop: Choose the number of posts to display in each column for desktops. You can display 2-5 columns.
- Columns in Tablets: Choose the number of posts to display in each column for tablets. You can display 1-3 columns.
- Columns in Mobile: Choose the number of posts to display in each column for mobile devices. You can display 1-2 columns.
- Space Between: Adjust the space between each post item.
- Equal Height Article: Toggle on to make each post item the same height.
- Set Featured Image as Background: Set the featured image as the background for the post items.
If Masonry Layout is Selected
- Columns in Desktop: Choose the number of posts to display in each column for desktops. You can display 2-5 columns.
- Columns in Tablets: Choose the number of posts to display in each column for tablets. You can display 1-3 columns.
- Columns in Mobile: Choose the number of posts to display in each column for mobile devices. You can display 1-2 columns.
- Space Between: Adjust the space between each post item.
- Set Featured Image as Background: Set the featured image as the background for the post items.
If a Full-Width Layout is Selected
- Layout Styles: Select the placement of featured images in the post items. The available options are- Image Top, Image Left, Image Right, Image Left Right Both. Choosing any option except the “Image Top” will reveal more options.
- Equal Height Column: Toggle on to make each column the same height.
- Content Vertical Align: Change the placement of the post excerpt and other information relative to the featured image. Three options are available: Top, Middle, and Bottom.
- Image Width by %: Increase or decrease the size of the featured image container.
- Side Overlap: When toggled on, the border of the image will overlap with the content information.
- Side Overlap Value: Adjust the overlapping between the featured image and content information. Only available when “Side Overlap” is on.
Image Settings
- Select Image Resolution: Choose the dimensions of the featured images. You can keep the default size or choose a medium (400×250) or a larger (1080×675) size.
- Image Overlay on Hover: When toggled on, it adds an image overlay when hovered.
- Overlay Color: Pick the image overlay color over the image.
- Use Overlay Icon: When toggled on an icon will show over the image on hover, it also reveals the collection of Divi’s default icon library for choosing an icon. Only available when “Image Overlay on Hover” is on.
- Overlay Icon Color: Pick the color of the icon for the overlay. Only available when “Use Overlay Icon” is on.
- Image Scale on Hover: When turned on, the images will zoom in on hover.
- Rounded Corners: Adjust the sharpness of the image’s corners.
- Border Styles: Change the width, color, and style of each border of the images separately or altogether.
- Box Shadow: Add a shadow effect to the image. When a shadow effect is selected, it will also reveal more options to adjust the shadow color, position, blur, and spread strength.
- Image Filters: Apply several filters to the images such as hue, saturation, brightness, and more.
- Image Blend Mode: Modify how the image element blends with any layers beneath it.
Title
Find a wide range of customization options for the typography of the post titles.
Meta
- Font: Typography options for the metadata like categories, dates, components, and authors. Also, allows the use of icons for the meta information.
- Alignment: Set the alignment of the metadata based on the position.
- Background: Add a background color to the metadata based on the position.
Author
Typography, color, and placement options for the author’s name.
Date
Typography, color, and placement options for the date.
Category
Typography, color, and placement options for the category.
Comment
Typography, color, and placement options for the comment count.
Content
Typography and color options for the post excerpt.
Read More
- Alignment: Set the alignment to the left, right, or center of the read more button.
- Background: Add a background color to the button.
- Full-Width Button: Toggle on to make the button full-width.
- Button at the Bottom: Place the button at the bottom of the post item whatever meta you set at the bottom.
- Use Icon: When toggled on, it will reveal a collection of icons to choose from to use in the button.
In addition to this, there are options to customize the typography, color, and the border of the button.
Pagination
Typography, color, and border customization options for the pagination buttons.
Custom Spacing
Add custom margin and padding to each item of the container, content, meta, and buttons.
Box Shadow
Add a box shadow effect to the article container and content area.
Border
Border customization options for the article container and the content area. You have the option to style each border individually or all the borders together.
Sizing
Adjust the width, height, and alignment of the entire module.
Filters
Add color filters to each post inside the module.
Transform
Change the scale, placement, size, angle, etc. to each post inside the module.
Advanced
The default tab for all Divi modules to add custom CSS code, conditions, visibilities, etc.
