Divi’s weblog module can show weblog posts in both a fullwidth or grid structure. If you select the grid structure, the utmost quantity of columns you’ll have is 3. On this educational, we’re going to discover combining the ability of CSS Grid with the Divi Weblog module to create any collection of columns you wish to have. With only a few snippets of CSS, your weblog will grow to be into an exquisite multi-column grid structure. Plus, the columns might be fluidly responsive with all browser sizes, so no wish to concern about updating the ones media queries or responsive settings. After the CSS Grid magic, you’ll nonetheless have the integrated weblog module settings to design the weblog visually with out to any extent further customized CSS. So, in case you are searching for extra columns to your Divi weblog, this may occasionally do the trick and extra.
Sneak Peek
Here’s a fast have a look at the design we’ll construct on this educational.
And here’s a codepen demonstrating the CSS Grid Format we can be including to the weblog module.
Obtain the Format for FREE
To put your palms at the weblog module design from this educational, you are going to first wish to obtain it the usage of the button under. To realize get entry to to the obtain it is important to subscribe to our Divi Day-to-day e mail listing via the usage of the shape under. As a brand new subscriber, you are going to obtain much more Divi goodness and a unfastened Divi Format pack each and every Monday! For those who’re already at the listing, merely input your e mail deal with under and click on obtain. You’ll no longer be “resubscribed” or obtain additional emails.
@media best display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to { border-top-color: #ffffff !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:prior to { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !vital;}
Obtain For Unfastened
Sign up for the Divi Publication and we can e mail you a duplicate of without equal Divi Touchdown Web page Format Pack, plus heaps of different superb and unfastened Divi assets, guidelines and tips. Apply alongside and you are going to be a Divi grasp very quickly. In case you are already subscribed merely kind for your e mail deal with under and click on obtain to get entry to the structure pack.
You might have effectively subscribed. Please take a look at your e mail deal with to verify your subscription and get get entry to to unfastened weekly Divi structure packs!
To import the phase structure in your Divi Library, navigate to the Divi Library.
Click on the Import button.
Within the portability popup, make a choice the import tab and make a choice the obtain report out of your laptop.
Then click on the import button.
As soon as performed, the phase structure might be to be had within the Divi Builder.
Let’s get to the academic, we could?
Tips on how to Alternate the Choice of Columns within the Divi Weblog Module The usage of CSS Grid
Why CSS Grid?
There are a large number of techniques to make column layouts for the weblog module the usage of CSS. However for this example, it makes essentially the most sense to make use of CSS Grid. The CSS Grid belongings is a well-liked approach to create predictable and responsive grid layouts for content material with only a few traces of CSS. With it, we will be able to prepare all of the weblog module playing cards into an absolutely responsive grid. In brief, it gives a easy and whole resolution for including any column structure you wish to have to your Divi weblog. Actually, we’ve extensively utilized it to build a grid layout for Divi modules.
Now, let’s flip our consideration to the weblog module.
Putting in place a Weblog Module with a Fullwidth Format
The Divi Blog Module can be utilized so as to add a weblog any place for your site. That makes it actually simple to build a blog page in Divi. All you want to do is upload a weblog module to the web page the usage of the Divi Builder.
For this educational, we’re going to use a premade weblog web page template from one in every of our free layout packs that already has a weblog module with some fundamental styling. To load the premade weblog web page structure in your web page, open the settings menu on the backside and open the Upload from Library popup. From there, seek and in finding the Fashion Design Blog Page structure and cargo it to the web page.
As soon as the structure is loaded, in finding the weblog module used to show the weblog posts and open the weblog module settings.
Set Put up Rely
Within the weblog settings, replace the content material to restrict the publish rely to ten. (That is principally for cultured causes as a result of our grid will in the end come with two rows of 5 weblog posts on desktop.)
- Put up Rely: 10
Make a selection Fullwidth Format
Since we’re going to be growing the column structure for our weblog the usage of CSS Grid, we’d like the be certain that the weblog module structure is fullwidth (no longer grid). This may increasingly make sure the weblog posts are stacked vertically of their customary order of the report/web page.
To modify the structure of the weblog module, open the weblog module settings and, beneath the design tab, open the Format dropdown menu and make a choice Fullwidth.
Now each and every weblog publish must span the entire width of the column (or father or mother container).
Only for kicks, let’s upload a border to the weblog posts in order that we will be able to get a greater concept of what our grid structure will appear to be after we upload our CSS. Replace the border choices as follows:
- Border Width: 1px
- Border Colour: rgba(150,104,70,0.35)
Including the Customized CSS Elegance to the Weblog Module
So as to effeciently goal this actual weblog module (an no different) with our CSS, we wish to give our module a customized CSS Elegance. Below the complicated tab, upload the next CSS Elegance:
- CSS Elegance: et-blog-css-grid
Growing the Multi-column Format with CSS Grid
Now that our weblog module is about up with a fullwidth structure, we’re able so as to add our customized CSS. For now, we’re going to use a code module so as to add the CSS to the web page. However, after we’re performed, you’ll all the time transfer the CSS in your most well-liked location (just like the Customized CSS in Theme Choices or your kid theme’s taste.css).
Upload a brand new code module beneath the weblog module.
Within the code enter field, upload the important script tags had to wrap any CSS code added to a web page.
Throughout the script tags, paste the next snippet of CSS:
.et-blog-css-grid > div {
show: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
hole: 20px;
}
The primary line of CSS lays out the content material (or modules) consistent with the CSS grid module.
show:grid;
The second one line of CSS defines the column template of the grid.
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
The 3rd line determines the space spacing between the grid pieces (like gutter width).
hole: 20px;
How the CSS Grid Columns Paintings
On this case, the grid will upload columns again and again as had to replenish the remainder area of the grid container. Every column could have a min-width of 200px and a max-width of 1fr (which is precisely the similar as auto). Because of this when the father or mother container (the Divi Row/Column) is at its max-width of 1080px, the grid could have 5 columns. Every column could have a width of 200px (the minimal width) which equals 1000px. Upload the 4 grid gaps of 20px and also you get a complete of 1080px. As soon as the viewport squeezes the grid under the 1080px, the magic of the CSS Grid takes over and fills each and every to be had area with weblog posts till they get to 200px width. New rows might be created robotically as they develop into wanted via default.
To get extra columns you’ll both trade the 200px minmax price to one thing smaller, or building up the max-width of the Divi row to one thing better than 1080px.
Here’s a codepen demonstrating the CSS Grid Format capability we added right here.
At this level, the five-column responsive grid is able to move. Actually, you don’t plan on the usage of pagination or borders to your weblog posts, you’ll prevent proper right here.
This is the end result to this point.
Taste the Weblog Put up Card (or Grid Merchandise)
Subsequent, we will be able to upload a couple of traces of CSS that focus on the grid pieces (or weblog publish playing cards) in order that they’re aligned to the highest of each and every row and feature a bit of padding.
.et-blog-css-grid .et_pb_post {
align-self: get started;
padding: 15px;
}
Taking out Pagination from the Grid
Lately, you probably have pagination lively at the weblog module, it’ll be handled because the final grid merchandise within the CSS grid. To take away the pagination out of the grid altogether, we will be able to give it an absolute place and position it without delay beneath the weblog module. To do that, upload the next CSS:
.et-blog-css-grid > div > div {
width: 100%;
place: absolute;
backside: 0;
grow to be: translate(0%, 150%);
}
Now the pagination hyperlinks are safely out of doors of the grid in order that it doesn’t get moved round on other viewport widths.
Let’s take a look at the end result to this point!
Bonus Tip: Regulate the Measurement of All Featured Pictures (or Thumbnails)
At this level, you might understand the peak inconsistency of the featured photographs on each and every weblog publish card. If you wish to cause them to all of the identical peak, you’ll use further CSS to do this as neatly.
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
place: absolute;
peak: 100%;
width: 100%;
peak: 0;
object-fit: duvet;
}
The primary snippet objectives the featured picture container and provides a proportion of padding that mainly adjusts the peak of the picture container. However the first snippet doesn’t paintings till we place the featured picture the usage of in order that it suits completely focused throughout the picture container. To do that we give the picture an absolute place and use “object-fit:duvet” to make the picture span the entire width and peak of the container.
With 56.25% peak padding, we must get a 16:9 side ratio for all our photographs.
Be happy to regulate the padding at the picture container to get the side ratio you wish to have to your picture.
Ultimate Consequence
This is any other have a look at all the CSS we added to the code module with some feedback.
/* create css grid column template */
.et-blog-css-grid > div {
show: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
hole: 20px;
}
/* taste css grid merchandise or weblog publish */
.et-blog-css-grid .et_pb_post {
align-self: get started;
padding: 15px;
}
/* take away pagination from weblog module grid with absolute place */
.et-blog-css-grid > div > div {
width: 100%;
place: absolute;
backside: 0;
grow to be: translate(0%, 150%);
}
/* Resize Featured Symbol Thumbnails */
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
place: absolute;
peak: 100%;
width: 100%;
peak: 0;
object-fit: duvet;
}
And here’s a ultimate have a look at our weblog module with our new columns and grid structure.
Ultimate Ideas
It all the time surprises me what may also be completed with only a few traces of CSS the usage of CSS Grid. On this case, we had been ready to restructure all the Divi weblog module right into a fluid five-column structure. The most productive phase is that you simply don’t have to fret about the usage of media queries! Optimistically, this protects you time and offers you extra choices to construct stunning weblog pages.
I look ahead to listening to from you within the feedback.
Cheers!
.inline-code{padding: 0px 4px; colour: red; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!vital} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);show:block;margin: 0 auto;}
The publish How to Change the Number of Columns in the Divi Blog Module gave the impression first on Elegant Themes Blog.
WordPress Web Design