Making a grid structure on your weblog is a good way to arrange your posts. Divi makes this extraordinarily simple with the Weblog Module. In only a few seconds you’ll be able to deploy a functioning weblog grid structure for your web page. And you’ll be able to even make the most of the numerous design settings to customise the glance of your weblog grid in some ways. However lately, I’m taking issues to every other stage.

On this instructional, I’m going to turn you ways you’ll be able to create a couple of background layers to frames your three-column weblog grid with a ravishing and symmetrical design. Expectantly, you’ll be able to use those design ways to create a weblog web page assured to provoke.

Let’s get began.

Sneak Top of the Grid Structure Design

Here’s a sneak peek of the design.

blog grid layout

Getting Began

All you want is Divi for this instructional. Upon getting the Divi Theme put in and energetic, create a brand new web page and provide you with web page a name. Then deploy the Visible Builder. Make a selection “Select a Premade Structure” after which add the Therapist Weblog Web page Structure for your web page and post it.

blog grid layout

Be sure to have no less than 6 weblog posts with content material and featured pictures. Should you don’t, the weblog posts is not going to display up at the web page.

Now you’re ready to start out modifying.

Upload the First Background Layer to the Segment

The customized design goes to be added to the second one segment of the structure conserving the weblog module. To create our first background layer, we’re going to taste the segment settings as follows:

Background Colour: #5873dd
Customized Padding (desktop): 4vw Best, 4vw Backside, 7vw Left
Customized Padding (pill): 0vw Left

blog grid layout

The customized 7vw left padding principally offsets the content material of the segment (the row) for a singular glance. If you wish to have the entirety great and focused for you design you’ll be able to go away that out.

Upload the 2d and 3rd Background Layers to the Row

The second one and 3rd background layers can be created by way of including a background colour to the entire row after which a background gradient to the column throughout the row.

Open the row settings and replace the next:

Background Colour: rgba(255,255,255,0.3)
Column 1 Background Left Colour: rgba(255,255,255,0.0)
Column 1 Background Proper Colour: rgba(255,255,255,0.3)
Column Gradient Path: 90deg
Column Get started Place: Column Get started Place: 33.3%
Column Finish Place: 0%

blog grid layout

Realize that I’m the use of a white colour with 30% opacity in an effort to create a constant stage of white overlay colours that let the blue segment background to turn via. As each and every colour overlaps, the consumer sees a 30% lighter model of the blue segment background. This manner if you happen to ever wish to exchange the colour scheme of the structure, all you’ll have to do exchange the segment background colour.

Atmosphere the column gradient get started place to 33.3% guarantees that the gradient will divide proper between the primary and 2nd column of my weblog grid. However this gained’t glance proper to start with as a result of we nonetheless wish to give our row a customized width of 100% amongst different issues.

Customized Width: 100%
Gutter Width: 4
Customized Padding: 4% Best, 4% Backside

The customized padding exposes the layers vertically so as to add to the full design.

Save settings.

Including the Fourth Background Layer to Our Weblog Module

That is the place the entirety falls into position. The fourth and ultimate layer can be a background gradient added to our weblog module. Then with the precise spacing added, the weblog module will align completely with our background layers. I’ll even be including a couple of taste tweaks to the weblog playing cards so as to add some ultimate touches.

Cross to the weblog module settings and replace the next:

Grid Tile Background Colour: rgba(255,255,255,0.7)

So as to add the background gradient, you’ll be able to pass over to the row settings and replica the column 1 background gradient after which come again to the weblog settings and paste it in the use of the proper click on choices.

Then replace the next:

Get started Place: 66.6%

blog grid layout

Customized Margin: 4% Best, 4% Backside
Customized Padding: 4% Best, 4% Backside, 4% Left, 4% Proper

blog grid layout

As you’ll be able to see the 4% duration worth is used all the way through to provide equivalent spacing to our design. And there may be extra to this 4% worth than meets the attention. Should you keep in mind, we set our row to have a customized gutter width of four. In Divi, if you happen to upload a weblog module with a grid structure to a row with a 4 gutter width, your weblog grid columns can be horizontally separated by way of 8% of margin. So, including the 4% of left and proper padding to the module will create the precise spacing we’d like.

At this level, we’re executed with the background design. Take a look at what we’ve up to now.

blog grid layout

Now all we wish to do is upload a couple of ultimate touches to the weblog module.

Ultimate Touches

Below the design tab of the Weblog Module Settings, replace the next:

Frame Textual content Colour: rgba(0,0,0,0.8)
Meta Textual content Colour: rgba(0,0,0,0.5)
Pagination Font Taste: Underline
Pagination Underline Colour: rgba(166,221,217,0.39)
Pagination Textual content Colour: #ffffff
Pagination Textual content Dimension: 3vw(desktop), 40px(pill), 30px(smartphone)

blog grid layout

If you wish to give your design a bit of extra texture, you’ll be able to upload divider backgrounds for your segment.

Divider Best: See Screenshot
Divider Colour: rgba(88,115,221,0.5)
Divider Peak: 32vw
Divider Horizontal Repeat: 0.3X

blog grid layout

Divider Backside: See Screenshot
Divider Colour: rgba(88,115,221,0.5)
Divider Peak: 43vw
Divider Horizontal Repeat: 0.3X

blog grid layout

Now Take a look at the overall outcome…

blog grid layout

Responsive Design

The layers that body the columns of the grid scale completely on all desktop browser sizes.

Despite the fact that the background layers is not going to regulate for 2 columns on pill and one column on smartphone, the outcome remains to be very symmetrical and offers a refined damaged grid design that works smartly.

Here’s what it’s going to seem like on cell…

blog grid layout

Ultimate Ideas

This layered background method is actually a strategy to create the impact of getting 3 column backgrounds the place there may be in reality just one column (for the reason that weblog module sits in a single column). Certain that is imaginable to do in customized CSS on the weblog module stage, however I believed it will be extra useful to provide an inventive resolution the use of at the Divi Builder. And diversifications of the design can be utilized as a backdrop of alternative content material as smartly.

I attempted to provide an explanation for the reasoning at the back of one of the most styling used on this instructional, however when you have questions, I’m all ears. And, for the ones of you hoping to boost your weblog grid structure, confidently this submit will no less than provide you with some design tricks to just do that.

I look ahead to listening to from you within the feedback.


The submit Upgrade Your Divi Blog Page with a Background Designed for the Grid Layout gave the impression first on Elegant Themes Blog.

WordPress Web Design

[ continue ]