Divi Blog Layouts

by | Jun 11, 2019 | Resources | 0 comments

Why You Need These Divi Blog Layouts

Blogs are an increasingly important part of a website. Many standard Divi blogs don’t have a lot of visual styles, as if their job is just to provide a place for you to see their latest posts. A great blog design can help draw the reader in and keep them coming back for more. It is crucial that your Divi blog layouts stand out from the crowd and draw your reader in.

Fortunately, there are lots of free Divi blog layouts available with interesting designs and pre-styled modules that you can use as a starting point to create a blog that’s uniquely yours. In this article, we’ll take a look at 11 free and premium Divi blog layouts that stand out from the crowd. The layouts are in no particular order.

1. 25+ Divi Blog Module Layouts Bundle

This bundle includes 25+ well-designed Divi blog modules and all of these layouts are made using the default Divi blog module so you’ll not need to purchase any third part Divi blog module. this layout bundle includes grid and tiles layouts of the divi blog module with some cool animations.
See Layout

2. Lara Divi Blog Module

Lara Divi Blog Module is a layout that uses the Divi blog module to create an interesting blog card design to display your latest posts. The cards display a featured image in color. The title is shown within a block that overlaps the bottom of the image. The title includes an elegant border. When you hover over the featured image, the image zooms and turns to black and white. The layout is fully stylable since it uses the default Divi blog module, so you can change the colors to match your website’s design.

See Layout

3. Divi Magazine / Blog Layout

Divi Magazine / Blog Layout provides a layout similar to online magazines like Mashable and BuzzFeed to create your own online magazine using your blog categories. The featured post shows in full-width. This is followed by 5 posts that display in small squared images with titles that show on hover. These can show your latest posts or the latest from each of your categories. A section shows the latest posts in a single column next to a text module, video module, and image module that create a sidebar. This is followed by a section with a blog grid. Other sections integrate a call to action, contact forms, and more blog modules in various layouts. It has three color schemes (red, blue, and yellow) to choose from. It has a one-step import just like a child theme to import demo data. Royalty-free images from Unsplash are included.

See Layout

4. Blogging – Divi Blog Layout Bundle

Blogging – Divi Blog Layout Bundle includes 10 different blog layouts to choose from including list, grid, slider, timeline, fullwidth, and masonry designs. Some include multiple options. Grid layout 1 includes a title that overlaps the featured image. The image zooms and tilts on hover. Slider layout 1 displays navigation vertically on the left of the featured image. On the right of the image, it shows the title, excerpt, and button within a transparent background. Slider 2 shows post navigation vertically to the left of the image with meta, the title, excerpt, and a button next to it in a transparent overlay. Fullwidth 1 shows the image to one side and the rest on the other, creating a split-screen that alternates down the page. Fullwidth 2 creates a grid of posts with titles over the images that show the excerpt and a button on hover. Timeline 1 shows the featured images alternating from one side to the other down the timeline. The excerpt shows on hover. Timeline 2 is similar to blog list but adds the date in a styled box with some nice hover effects.

See Layout

5. Single Post Layouts for Divi

Single post Divi blog layout

Single Post Layouts for Divi is a set of five layouts. The first places an image to the left with text, divider, and category buttons, and the title, meta, social follow buttons, divider, and the content on the right. The second layout uses a header image with category buttons and title, author info to the left, and content to the right. The third layout displays the featured image with overlapping social buttons, title, author’s image, meta, and content in a single column. The fourth layout removes the author’s image, places the meta within the featured image, and presents the social buttons and content within a box that overlaps the featured image. The fifth layout uses a featured image with author information overlapping on the right with social buttons and thumbnail image, and title, meta, and content on the left.

See Layout

6. Elegant Blog Page Layout

Elegant Divi blog page layout

Elegant Blog Page Layout creates a blog page with a magazine-style layout that includes a slider, latest posts, featured categories, latest posts by category, and a sidebar in a multi-column layout. The sidebar includes an about widget, social buttons, opt-in form, ads, and the standard WordPress widgets- all styled to match the layout. The individual blog post layout includes a styled sidebar, featured image, styled title and meta, content, styled author box, previous and next buttons, links to other posts with image and labels, and styled comments. Each of the sections is separated by styled dividers.

See Layout

7. One Half and Two Quarter Alternating Blog Layout

One Half and Two Quarter Alternating Blog Layout is a free Divi layout that uses the Divi blog module along with custom CSS to display posts in an alternating layout. The layout presents posts in two different sizes: one-half size and two one-quarter sizes to create a row with one image on one side and four images on the other in a stack. It also adds a gradient overlay with an excerpt and read more button that’s revealed on hover.

See Layout

8. CSS Grid Blog Layout

CSS Grid Blog Layout creates a magazine design using a CSS grid to create a one-column, two columns, and three-column blog design. It allows for variable column widths and it keeps posts at the same height regardless of screen size and regardless of how much the length of the content varies. CSS variables make it easy to edit. A button class adds some jQuery that lets you customize the read more links along with the buttons in the theme customizer.

See Layout

9. Divi Blog Extras

Divi Blog Extras is a plugin that adds 6 blog layouts to the Divi blog layout options. It’s compatible with bot Divi and Extra and has Ajax loading and numbered pagination to display unlimited posts on a single page. It can also be used as a category page builder so you can create your own category archive page using the Divi builder. It also adds a widget so you can displays your posts in the sidebar with a featured image, meta, etc.

See Layout

Elegant Themes Layout Packs

Elegant Themes provides free layout packs for Divi. As of this writing, there are over 120 layout packs. They have 6-8 layouts each and practically every one of them includes a blog layout. Here’s a look at a few of them.

10. Fashion Blog Page

Fashion Divi blog layout

Fashion Blog Page includes a header with a gradient background, title, divider, and text on the left side, and an image on the right that overlaps the next section. The blog includes a title, divider, text, and posts in three columns that include the featured image, meta, and short excerpt. An email opt-in is placed over the same background as the header and includes text for location, contact, and hours of operation. This page can also be used as the template for individual blog posts. Images are included without license restrictions.

See Layout

11. LMS Blog Page

LMS Divi blog layout

LMS Blog Page uses a full-width color background with a gradient that blends into the white background behind the blog posts. The header includes a centered title and description text. Blog posts are displayed in a single-column layout with large featured images, titles, meta, and excerpts. Following this is a centered email form with the title, divider, and text. Two blurbs overlap the next section which includes two CTA’s. This page can also be used to create a post template. Images are included and can be used without restrictions.

See Layout

12. Blog Post Layout Pack

Complete Divi layout pack

Blog Post Layout Pack includes three post layouts. They’re designed with editorials, featured articles, and long-form storytelling in mind. The first displays a full-width featured image with the title. It includes meta on the left and content on the right, followed by images in single and multi-column, single-column text, quotes, opt-in form, and links to other posts. The second layout removes the featured image and places the author’s image overlapping the title and content. The third layout follows a similar design as the first but adds an overlapping image, a slider, and multi-column layouts with images and text.

See Layout

Ending Thoughts

That’s our look at 11 premium and free Divi blog layouts to give you a starting point with a professional blog design. Most include elegant blog pages that can be used as blog post templates. Some include blog post templates that help you tell the story. Some even include sidebar styling. All look nice and provide a great place to start for your next blog design.

We want to hear from you. Have you tried one of these Divi blog layouts? Let us know what you think about them in the comments below.


Submit a Comment

Your email address will not be published. Required fields are marked *

Featured Divi Product

Recommended Hosting

Pin It on Pinterest