Divi Blog Module Overview

Crafting a stunning blog post layout on your website with the Divi Blog module is as simple as it sounds. However, it does require some groundwork:

Make sure the Divi theme is installed and active.
Install Divi Blog module (See our detailed instructions on installation).

Note: Having met these prerequisites, you can move on to the next step. Ensure the license key is active to receive further updates and support.

What’s Inside The Plugin?

After successful installation, you will see a new “DG Blog Module” module in your Divi module list. Add blog posts anywhere on your site with this module.

Now insert the module and start creating blog layouts for Divi.

Divi Blog Module Overview

DiviGear Blog module provides extensive features with complete customization freedom for creating an attractive blog layout. Similarly, like every Divi module, this one is also grouped into three broad categories, including:

Content Tab
Design Tab
And Advanced Tab

Content Tab

Content

Content is the first element in the “Content Tab” with fully customizable features. Find out what these features are and what they offer:

Select Post Type: Choose what to display: blog posts, pages, projects, or custom post type.
Blog Posts Count: Choose the number of posts you want to display.
Post by Type: Display posts according to categories, recent posts, popular posts, and random posts.
Offset Number: Exclude a certain number of posts from the beginning of your layout.
Related Post: Display related content suggestions under a single post.

To show selected categories from the list of all categories select the “Post by Type” to “Post by category” and include categories according to your need.

Element

You can toggle on and off features and set numbers for different content according to your preference:

Show Featured Image: Display or hide the main image associated with each post.
Show Excerpt: Choose whether or not to display a summary of each post.
Use Post Excerpt: Tweak permission to use excerpts from posts.
Excerpt Length: Set the excerpt’s length.
Show Categories: Toggle on or off to display the post category.
Show Author: Display or hide author information for each post.
Show Date: Turn the date on or off on posts.
Meta Date Format: Set the publication date format according to your needs using standard WordPress format.
Show Comment Count: Show each post’s comment count.
Show Pagination: Toggle on to display pagination with older or next entries format.
Read More Button: Add a read more button (Full freedom to change the text).

Background

Usually, the background affects the whole module but for this one, the background option will apply to each blog post within the module.

Admin Label

Change the module’s name to your liking, and it won’t appear on the front end.

Design Tab

After selecting content using the Content tab, it’s time to use the “Design Tab” for styling your created content. You’ll find the following features in this tab:

Layout

Here in layout, we have multiple features that depend on each other.

Layout: Choose from grid, masonry, or full-width layouts.
Columns on desktop: Decide how many columns to display on the desktop.
Columns in tablet: Specify the number of columns to show in tablet.
Columns in mobile: Choose the number of columns to display in mobile.

NOTE: Column option only available if you choose your layout Gird or Masonry.

Space Between: Control the space between each blog post.
Equal Height Article: Enable to maintain consistent container heights. This is only available for grid layout.
Set Featured Image as Background: Toggle on to set each post’s featured image as their background image
Layout Styles: Once you have selected the layout to full width this option will be available for you. From here you can choose your image position to 4 different placements. This also has some dependent options if you choose your image in left, right, or mixed format.
Image Width by %: Customize the image width according to your requirements. Depending on the image width your content width will also be changed.
Side Overlap: Turn this ON to keep your content over the image. You can set the value of overlap.

Image Settings

Select Image Resolution: Choose the featured image’s resolution from default, medium, and large. Please remember that It’s the resolution for the image. Not the size of the image. Image size depends on the column structure you select for the layout.
Image Overlay on Hover: Toggle on to enable the hover effect on the featured image (you can select overlay colors and use overlay icons with a color-changing option).
Image Scale On Hover: Toggle it on to add a zoom effect to the featured image.

Note: These four features make this “Image Settings” element unique. However, all other features are also available here in the image setting like rounded corners, border styles, image filters, etc.

Title

Title element offers a wide range of customization options, including title tag, font, font weight, style, alignment, color, size, and more. These options allow you to tailor the title’s appearance to align with your design preferences.

Author

Select the author name’s position from default, top, bottom, or over image. Aside from that, you can customize the author’s appearance, including font style, weight, text customization, border options, etc.

Date

Display the content’s publication date in your preferred position, whether it’s the default, top, bottom, or over images. You’ll also have the flexibility to personalize the date’s appearance, including font, style, text size, border style, color, and more.

Comment

Place the comment count anywhere you like from the positions like over image, top, bottom, or default. You can change the font, text color, letter spacing, and more in the communication count option.

Content

Here, ‘content’ refers to the excerpt, and it comes with a comprehensive set of tools for styling the excerpt area. You have a range of styling options at your disposal, including font settings, weight, style, alignment, color choices, text size, and more.

Alignment: Place the button to the right, center, or left
Background: Select the color of your choice
Full-width Button: You can turn this on to make the button full-width
Button at the Button: Toggle on to place the button at the bottom
Use Icon: Use the icon on the read more button

Besides them, all other options, such as font, font weight, font style, and text settings, are almost identical in most Divi modules.

Pagination

Customize the pagination background color, font, font style, text alignment, size, rounded corners, and more. In short, you can configure the pagination’s look to suit your preferences.

Custom Spacing

We offer extensive custom spacing options for the container, content, meta, and button. Within each tab, you can control the margin and padding of each part of your content element:

Container: Tailor padding and margin for containers and articles. Control top, bottom, left, and right spacing for a perfect layout
Content: Craft padding and margin for image containers, content, titles, and text. Customize spacing on all sides, including top, bottom, left, and right for a flawless layout.
Meta: Fine-tune padding and margin for various meta positions, default, top, and bottom. Also, personalize the author, date, category, and comment sections with control over the top, bottom, left, and right spacing.
Button: Customize read more button and pagination spacing with personalized margins for left, right, top, and bottom. You can also change the read more button wrapper’s top, bottom, left, and right margins.

Box Shadow

Box shadow offers two options: displaying a shadow inside the content area and a container box shadow. Both options enhance the overall design and help direct the user’s focus. When applied correctly, shadows can make web content more engaging and accessible.

Border

For Article: This border option applies to the whole article. You can make corners rounded, and set border styles, width, color, and border style.
For Content: This border option only applies to the content area except for the image. You also have all the border options here.

Sizing

Set width, alignment, height, and other sizing options, you can customize the blog module to suit your needs.

Filters

Filters provide a wide range of content appearance customization options, including hue, saturation, brightness, contrast, inversion, opacity, blur, and 15 blend modes. With these options, you can globally adjust the color and visibility of the entire content area.

Transform

Almost all modules work the same way with their “Transform” element. Like every other module, this one combines scale, translation, rotation, and skew options to create an eye-catching design effect.

Advanced Tab

“Advanced Tab” allows CSS ID and classes and many other customization options. In fact, all or most of the modules have the same function, with a few minor changes. Here’s what we have:

CSS ID & Classes

Define CSS ID and Classes here.

Custom CSS

We give you the opportunity to make changes to your website’s design and layout through custom CSS. We’ve included an extensive field to change typography, and layout, add custom animations, create custom hover effects, and more on your website.

There is also some common feature unlike any other divi module here. You can check Elegant Theme’s doc for more details on that.

Plugins

Changelog

Divi Child Themes

Divi Blog Module Overview