Divi How To Add Blog Post To A Regular Page

Divi Builder allows you to add dynamic content to the page or theme builder template you are working on. From the default dynamic content of WordPress to custom fields you created with plugins like ACF and Pods. One of the dynamic content types you can add is the blog post. In Divi Builder, you can use the Blog module to add the blog posts. You can also use the module to display other content types on your website, including pages and even media.

You can use the Blog module to display blog posts on any page. From the homepage, the custom category page, custom author archive page, and so on. You can even use the module to display blog posts on the footer area if you want it.

New to Divi Builder? Read on to learn how to use the Blog module.

How to use the Blog module of Divi Builder

The Blog module can be added to a row on either a regular section or specialty section (read our previous article to learn more about row and section in Divi Builder). To add the Blog module, simply click the grey plus icon on the column — on the canvas area — where you want to add the module to and select Blog.

The Blog module settings panel will appear right after you select the Blog module. You can use the settings panel to set the layout, set the basic settings (excerpt length, enable/disable post elements), apply some styling options, and so on.

The basic settings

One crucial thing you need to know before we step further. Unlike the Posts widget of Elementor, the Blog module of Divi Builder offers no advanced filtering feature to filter the blog posts by author, category, or tag. If you want to display blog posts from a category, for instance, you can create a custom category page from theme builder (Divi -> Theme Builder). You can filter the blog posts from there. Read this article for more detailed instructions.

To make the basic settings, you can open the available blocks under the Content tab on the Blog module settings panel. There are 5 setting blocks you can open on the Content tab.

Content

As mentioned earlier, not only you can use the Blog module to display blog posts, but also other content types like pages and media. You can select the content type to be displayed on the Content block under the Content tab. From this block, you can also set the excerpt length, the number of posts (post count), and the date format.

Elements

From this block, you can set the post elements to be displayed. From featured image, read more button, author, date, excerpt, pagination, comment count, and so on.

Link

You can open this block to add a link to the Blog module. Please note that this not a link for individual blog posts. Instead, it's a link for the Blog module. If you add a link to the module, your module will be wrapped by a link you add (you can still click links of individual blog posts).

Background

You can open this block if you want to add a background to the Blog module. There are 4 background types you can add: solid color, gradient color, image, and video. If you prefer to use an image background, you can enable the parallax effect if you want it.

Admin Label

Admin label is a kind of identifier name to make it easier for you to identify an element in Divi Builder. Adding an admin label is useful if you are creating a long, complex page. You can open the Admin Label block under the Content tab to add an admin label to the Blog module.

Styling up the Blog module

Once you are done making the basic settings on the Content tab, you can switch to the Design tab to style up the Blog module. First off, you can open the Layout block to set the layout.

As you can see, Divi Builder only offers two layout options for the Blog module: Fullwidth and Grid. If you want to display the blog posts in a list style, you need to add custom CSS.

Here are other blocks you can open on the Design tab on the Blog module settings panel.

Overlay

You can open this block to add an overlay color to the featured image of the blog posts. Make sure to enable the Featured Image Overlay option before being able to set the overlay.

Image

You can open this block to apply some stylings to the featured image of the blog posts. You can set the border radius, border color, border size, apply CSS filters, and so on. You can read our previous article to learn how to style up an image in Builder.

Text

You can open this block to set the alignment as well as applying text shadow to the text content (title, excerpt, and post meta). You can set custom stylings to individual text content on the blocks beneath this block.

Title Text

As just said above, you can set custom stylings to the individual text content of the blog posts. The Title Text block allows you to set the typography (font family, font style, text size, and so on) of the title text, as well the text color and text shadow.

Body Text

You can open this block to set the typography of the post excerpt (or post body if you prefer to display the full content). Divi Builder allows you to use different typography settings on each element on the blog post (link, block quote, bullet, and numbering). You can click the tabs to set the typography of each element.

Meta Text

You can open this block to set the typography of the post meta (author, date, category, comment count). You can also set the text color, alignment as well as the text shadow.

Read More Text

You can open this block to set the typography of the read more element. In addition, you can also set the text color as well as the text shadow.

Pagination Text

You can open this block to set the typography of the pagination. Also, you can set the text color as well as the text shadow.

Sizing

You can open this Sizing block to set the height as well as the width of the Blog module. You can use either a percent unit or a pixel unit. If you want to use the percent unit, you can type the percent symbol manually.

Spacing

You can open this block to set the margin as well as the padding of the Blog module. You can read our previous article to learn more about margin and padding in web design.

Border

If you want it, you can add a border to each blog post on the Blog module. You can add a border to each side (top, bottom, right, left). You can click the tabs on the Border Styles section to set a custom border.

Box Shadow

From this block, you can set the box shadow of the Blog module. Divi Builder offers 7 box shadow styles you can choose from. After selecting one, you can set the shadow color.

Filters

From this block, you can apply CSS filters to the Blog module. There are 6 CSS filters you can apply to the blog (Hue, Saturation, Brightness, Contrast, Invert, and Sepia). Also, you can set the opacity level as well as the blur level.

Transforms

Divi Builder also offers a setting option to add CSS transform to an element. If you want to apply a CSS transform to the Blog module, you can open the Transform block. Simply select a CSS transform you want to apply and use your mouse to set the transform value (or simply type your desired transform value instead).

Animation

Want to add an entrance animation to the Blog module? You can do so from the Animation block. There are 7 entrance animation styles offered by Divi Builder you can choose from.

Advanced settings

If you need to make some advanced settings to the Blog module, you can go to the Advanced tab.

CSS ID & Classes

Divi Builder allows you to add custom CSS and you have two options to do so: via the Code module or directly. If you prefer the first method, you can open the CSS ID & Classes to add the CSS id or CSS class.

Custom CSS

You can open the Custom CSS block if you want to add CSS directly instead of via the Code module. You can simply type the CSS code on the available fields.

Visibility

If you want to disable the Blog on a certain device type, you can open the Visibility block. You can simply tick the device type (desktop, tablet, smartphone) you want to disable the module on to disable it.

Transitions

You can open this block to apply the transitions of the Blog module. In this context, transitions refer to the duration of the hover animation.

Position

In Divi Builder, when you add a new element — be it a section, row, or module — the position is set to static (Default). In case you want to use a custom position, you can open the Position block. The custom position options you can set are:

Relative: If you select this option, the Blog module will follow the normal flow of the page. This option offers top, bottom, and right properties. Also, you can set the Z index.

Absolute: If you select this option, there will be no actual space created on the page for the Blog module. You can think of it as a floating module on top of other sections that take up actual space.

Fixed: If you select this option, the Blog module will break the normal flow of the page and it has no actual space on the page.

Scroll Effects

If you want to advanced scroll effects to the Blog module, you can open this block. There are 6 scroll effects you can set. You can read our previous article to learn how to add scroll effects in Divi Builder. From the Scroll Effects block, you can also apply a sticky effect to the Blog module

The bottom line

The Blog module is a Divi Builder module dedicated to displaying the content on your website. From blog posts, pages, to media. You can use it when creating a custom homepage — or other site parts like custom category page, custom author archive page, and so on — on WordPress using Divi Builder. Technically, you can add the Blog module anywhere. Even when you are creating a custom footer, for instance, you can also use it to display your site content.