Most websites either are a blog or have a blog and Divi makes it easy to create a nice blog page using the visual builder. Divi comes with a rapidly growing collection of predefined layout packs and they all have their own blog page designed to fit in with the style of the layout pack. Each page layout uses various standard Divi modules along with the Divi blog module and/or the Divi post slider module to pull your WordPress posts into the page. The blog module allows you to add a blog (that lists all your blog posts) anywhere you want on your site within a Divi column. There are various settings to control how to display and style your blog that can give you quite unique blog page layouts.

Predefined blog layouts in the Divi builder

There are 50+ layout packs already available in the Divi builder and two new ones added each week, but in terms of the blog page many are quite similar variations of the same layout type. The main blog layout options used in the predefined layouts are a standard WordPress type layout with 2/3 post content and 1/3 column for the sidebar widgets, a grid layout with or without sidebar and a grid layout with either featured post or featured post slider. These 4 layouts below are probably the layout options i would pick from the predefined layouts.

predefined Divi blog layouts

Standard WordPress blog layout

This blog page looks pretty similar to the default WordPress blog page but is built with the Divi modules. The layout uses a blog module in the left to pull in your posts along with a sidebar module that can be set up in the Appearance > Widgets area that you can then add your latest posts, latest comments widgets into. This blog layout can be found in the Agency layout pack in your Divi builders premade layouts .

divi wordpress blog layout

Grid blog layout

The blog module can display your posts in either a full width or grid format. The layout below uses the grid setting which can be found in the Blog modules design tab at the top listed as “Layout”. To make your posts stand out play with the box shadow options found in the design tab of your blog module. This blog layout can be found in the Handyman layout pack in your Divi builders premade layouts.

Divi blog grid layout

Featured post blog layout

By using 2 blog modules on the same page you can style each differently and create a featured posts effect as in the blog layout below. You will need to add 1 blog module and set it to full width and to only display 1 post, Then, on your second blog module below the first, you set to display as a grid. To prevent the featured post showing up again the your second blog module you use the offset feature set to 1, which means that the 2nd blog module skips 1 post. This blog layout can be found in the Cryptocurrency layout pack in your Divi builders premade layouts.

featured blog post layout

Featured post slider blog layout

Just like the blog layout above, this one uses 2 blog modules. The 1st is a post slider module combined with a blog module set to grid mode. As above we would need to make use of the offset setting to ensure that posts are not displaced twice on the page. In this example below the post slider has 3 posts displayed, so we would then want to set the blog module with an offset of 3. This blog layout can be found in the Business coach layout pack in your Divi builders premade layouts.

divi post slider blog layout

More blog layouts from 3rd party developers

With an active community and every growing number of 3rd party developers creating Divi layouts (and child themes and plugins) there is a constant stream of free and premium layouts for you to use in your site. Below are a few layouts designed for your blog page.

Blog layout with CSS hover effects

A free blog layout that includes some cool CSS hover effects on blog posts. The images also have a filter image on hover animation effect. This blog layout with hover effects is available to download for free from Divi Den.

divi blog layout hover effects

Divi blog layout pack

A Divi lblog ayout pack that includes multiple different blog module styles released with custom styling and hover effects. This blog layout pack is available as part of the Unicorn layout bundle from Divi Den ($55).

divi blog layout pack

Star Wars magazine style blog layout

This full page blog layout created by Geno Quiroz uses multiple customized blog modules and sidebar module to create a magazine style page layout. This magazine style blog layout is available to download for free from Elegant Themes.

divi news blog layout

CSS grid blog layout

Taking the featured blog post 1 step further this layout uses 3 blog modules with different styling to create a 3 tier hierachy for posts. along with flex for variable column widths and to keep posts the same height across different screen sizes. This CSS grid blog layout is available to download for free from Divi Soup.

Live Divi blog layout examples

As always, if you are looking for live examples of Divi websites you can check out the Divi Theme Examples showcase gallery which has 1800+ live Divi sites including 109 in the Divi blog examples category.

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close