Divi’s blog module provides you with two default layout styles off the bat. Grid and fullwidth. But how do we choose? In this article, we’ll explore this question and compare Divi’s grid and fullwidth blog module layouts to help you decide between them. We’ll share some different examples using both styles as well.
Let’s get started!
Changing Your Divi Blog Module Layout
Before we get into our discussion, let’s see what we’re talking about and how to change between them. The Divi Blog module includes settings to choose between Grid and Fullwidth layouts. Go to the Design tab within the Blog module.
The first section is called Layout. It has a dropdown box with two options: Fullwidth and Grid. This example shows the Grid option. It displays 3 posts in a row by default.
The grid is responsive, so it will change the number of posts in a row to fit the page design. I’ve changed the number of Rows for this example. The grid has responded to display two columns.
This example shows the Fullwidth option. It displays the posts stacked vertically so only one post appears on a single row. It’s also responsive, but it shows one post regardless of the width.
Let’s look closer at both designs.
Divi Blog Module Grid Layout
In blog design, the grid layout is more popular than the fullwidth layout. It places the blog posts on the page in multiple columns, creating a grid. Each post is presented as a card. The grid is responsive, so the number of columns will change to fit the screen.
Magazine blogs and portfolios are known for this type of layout. Sites such as Pinterest, YouTube, Amazon, and other online stores display content within a grid. The majority of Divi Blog Page layouts in the free Divi Layout Packs are in a grid layout.
Divi Grid Blog Layout Examples
Let’s look at a few Divi grid blog layout examples. These are the blog pages from some of the free Divi layout packs that you can select within Divi.
The blog page for the Software layout pack includes a featured post in the hero section. The grid displays cards with a border, which helps them to stand apart. The metadata and Read More links are purple, so they stand out.
The Landscape Maintenance blog page utilizes a 2-column grid with a sidebar, which includes posts without featured images. The hero section includes a post slider without the featured image. The blog cards have a minimal design that looks clean.
The Flooring layout pack blog page uses a 3-column grid with a couple of features that lead into the grid. The hero section displays a post slider without a featured image. The next section displays the latest post in one column and three more posts without featured images next to it.
Grid Layout Pros
Grid Layout Cons
Divi Blog Module Fullwidth Layout
Fullwidth layouts place the blog posts in a single column, so posts are stacked vertically. With a full-width layout, the featured image is the most prominent element of the blog post.
Sites such as Facebook and eBay’s search results display in full width. It’s also a popular option to display details about services.
Divi Fullwidth Blog Layout Examples
Let’s look at a few Divi fullwidth blog layout examples. These are the blog pages from a few of the free Divi layout packs.
Social Media Consultant
Here’s the blog page for the Social Media Consultant layout pack. it includes a sidebar, so the featured image doesn’t take an excessive amount of space on the page. The titles are large and bold, making them easy to see and read.
Here’s the blog page from the Insurance Agency layout pack. This one does not include a sidebar. This keeps the focus on the featured images.
Here’s the blog page for the Physical Therapy layout pack. this one includes a sidebar, but also uses color and other design elements to use the whitespace.
Fullwidth Layout Pros
Fullwidth Layout Cons
Choosing Between Divi’s Grid and Fullwidth Blog Module Layouts
When choosing between the two, there is no right or wrong answer. Every website’s design and needs are different. Here are some thoughts you can keep in mind when choosing:
That’s our comparison of Divi’s grid and fullwidth blog module layouts. Both layouts provide elegant blog designs. You can even use them together by adding the latest post to the hero area to help break up the page design.
With the Divi Blog module settings, it’s easy to change your blog layout. You’re not stuck with the design you choose. You could try one layout for a while to see if you like it and then try the other layout. If you feel that your blog needs a change, simply choose the other layout to get a fresh look.
We want to hear from you. Which of Divi’s blog module layouts do you prefer? Let us know in the comments.
This content was originally published here.