I’m starting a series on the Divi Blog module, and what better place to start than with an extremely easy and quick snippet that changes the Divi blog module into any number of columns you want! I’m really excited about this, because it’s so quick and easy even for beginners! Only 1 lines of CSS is needed to change the Divi blog module to any column number you need! We also add a space between the columns, which technically makes 2 lines of code, which still incredible! The best part is, we are putting them directly in the Divi Blog module!
Most of the other tutorials about this are very long and involve quite a lot of code, and most of them no longer work. So I enjoy making solutions that are truly simple and easy for you! If you enjoy that, then please subscribe because this is what I do every single week!
FYI:Â You can do this with a setting directly in the Divi Visual Builder with our popular Divi Responsive Helper plugin! Take a look, it is so easy!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Let’s start with changing the Divi Blog module column count to two. By default, the Blog module comes in at 3 columns when the layout is set to Grid, and 1 column when the layout is set to Fullwidth.
In order to keep this very, very simple, we need to set the Layout to Fullwidth.
Now go ahead and copy and paste the two lines of CSS below into the Blog module. You will need to go the Advanced tab and open the Custom CSS toggle. There you will see the Main Element, which is exactly where you should paste this snippet.
column-count: 2;
column-gap: 60px;
Boom! There you go! That was incredibly easy, right?
Make Divi Blog Module Into 4 Columns
Let’s try another one. You can change the count to anythign you want, but if you go too high the postt will get too small. Also note that you can’t use 3, since 3 is the default when the module is set to Grid. So let’s set the blog module column count to 4. Like before, make sure the layout is set to Fullwidth in the Design tab.
If you pasted the snippet before, just change the number to 4 instead of 2. If not, copy the CSS snippet below and paste it into the Blog module in the Advanced tab. Just open the Custom CSS toggle and you you will see the Main Element, which is where you should paste this snippet.
column-count: 4;
column-gap: 60px;
And there you go, you now changed the Divi blog module column count to 4 with this very easy method.
Change Blog Column Spacing
You may hvae noticed the line of CSS that says “column-gap” and were curous about that. Basically, this is the space between the columns. I set this at 60px because the blog module comes with a margin of 60px at the bottom of each post (in between the posts vertically) so I just wanted to match that. But you can change this number to anything you want!Â
Change The Divi Blog Module Column Count On Mobile
Make The Divi Blog Module Columns Responsive
Now it’s time to make this responsive! So the column count you chose for your blog module will probably not work very well on smaller screen sizes. Thanksfully this is a very easy fix. We could use CSS media queries. But hey, I like to keep it simple. Let’s just use Divi!
It is very easy. Go to the Blog module settings again to where you pasted the code in the Main Element. Hover over it and you will see the little “phone” icon. Click that! Now you will see three tabs, Desktop, Tablet, and Phone. By default, the code we pasted affects all three, so we need to change our code for each device. I’ll walk you through an example.
Desktop
Let’s say I have set my Divi blog moluduel to “4” columns. That’s what I want for Desktop, so this is good.
Tablet
Copy the snippet, and now click on the Tablet tab. Paste the two lines again. This time, change the column count to “2.”
Phone
Copy the snippet again, and now click on the Phone tab. Paste the two lines again. This time, change the column count to “1.”
You could also change the column gap to a smaller number like “20px;”
To see this in action, please watch the video!
Add Some Fancy Styling
In our screenshots above, we included some extra styling. In the follow snippet, we are going to style each one of the posts by adding spacing around them, a background color, and a border radius.
There is also a very important part of the tutorial. The last three lines here are essentail for making this whole tutorial work right. It is too technical to explain, but the video shows what would happen without it. Basically the columns in Divi start on the left and go down, then over and down, etc. So this CSS keeps the the blog posts from getting chopped off weird.
That looks a great! Feel free to play around with this, and be on the lookout for more tutorials about the Divi blog module!
Do It With A Setting!
Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!
I hope you have enjoyed learning How To Change The Number Of Columns In The Divi Blog Module (Extremely Easy). Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe for more stuff like this.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
This is a great tutorial. I always enjoy your tutorials. They are simple and presented in a clear way for everyone to understand. Thanks for taking the time to create them.
Hey Nelson! This is AWESOME! One quick question…what if you wanted to equalize the grid heights to accommodate for differing excerpt and title lengths?
Just add the code in the post, it describe this. -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
Thank’s for these good advices. I use the layout in a test site for a list of members, in alpha sorting (via plugin Simple Custom Post Order) , with 12 items per page, with 3 rows of 4 columns, But I see that the items are to be read on each column from top to bottom and I would like them to be listed on each row from left to right. How is it possible? Luc
Hi Rita,
I’m not sure, but I think it has to do with the way the module makes the items stack in columns top to bottom instead of left to right. It seems maybe it is related to the size of each post too, but I haven’t been able to narrow it down.
Dear Nelson, I have already adjusted most of the titles and are now shorter, which makes the overview better. Yet I still have that some pages show 3 instead of 4 columns (pictures) see: https://mijnreceptenbundel.nl/hoofdgerechten/schaap-lam/
Daniel
on October 29, 2020 at 11:47 pm
Any chance there is a straightforward way to have this center the blog items. So for example, if I have a 4 column setup, per your code, but in instances where they is only 1 or 2 blog posts, to have those centered in the screen instead of off to the left?
Hi Daniel,
I don’t know but I definitely saw someone ask this a few weeks ago in a Facebook group and someone gave the answer. I just can’t think where it was, sorry!
Thanks a lot for your posts Nelson!!! Best Divi tutorials on the web!
Just a tip: This is needed to work properly so I would not say “add styling”….it is confusing.. -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /*
Hi Marlon,
I think this is because of the weird way they are made in Divi. They go by columns, down the first one, then down the second one, etc. Really annoying, so I guess this only works with one row.
Thank you Nelson, this is a real helpful and easy tutorial! The only part where I was little bit confused was when you added the styling to the site. I first didn’t realize the code wasn’t for the blog module but for the whole website. I then checked your video and got it. Maybe you could add where to put this in in your tutorial here.
Hi Carina,
Okay not sure what you mean, but I assume you are referring to the snippet that targets all blog posts. You could certainly add a custom class, I don’t say that on every post because I hope people know but it’s a valid point if that’s what you mean.
Hi Nelson, Thanks a lot for this tutorial. I have found a lot of valuable stuff on your website, and must say it is one of the best resources on DIVI. So thanks a lot for that.
I tried this code and it works great, except that the navigation for pagination on the bottom (older entries and newer entries) jumps into the second column instead of spanning both the columns. I am attaching a screenshot. Is there a way or CSS to make it span so that it is not in the middle of the page.
Thank you so much for this! I was ready to purchase a plugin from a Divi reseller to make columns happen on our landing page. I will check out your store and try to purchase from you instead!
One addendum could be helpful: there’s no navigation to older posts? When I tried to turn it on, it was wonky.
Thank you for checking our store. We hope that our products will surely add value to your website. Coming to the issue, just to confirm is the pagination not at its place when you are using this code?
If yes then, please go to the Blog Module Settings > Advanced > CSS ID & Classes and add a Custom Class. For example, the class is .pa-blog-module
After that, please go to WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and place the CSS Code given below:
.pa-blog-module{
position: relative;
padding-bottom: 14vh;
}
.pa-blog-module .wp-pagenavi {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
Dear Nilson,
Unfortunately, I still have some problems with the lay-out.
On my website all images are of the same size namely, width 350 px by height 250 px.
The first problem is on the cocktails page.
URL: https://mijnreceptenbundel.nl/cocktails-2/cocktails-alc-houdend/
In all cases their maximum height should be 250 px.
So the problem is that some of the images on the cocktails page are larger (that is the height is increased) compared to others.
How can I solved this problem so that each image has the same height?
The second problem is on some other pages (e.g. menues for poultry).
URL: https://mijnreceptenbundel.nl/hoofdgerechten/gevogelte/
On these pages I would like to have 4 images on each row. However, on same pages the columns are broken down too early and on some rows I see 4 images while other rows contain 3 images.
How can this be solved so that each row show 4 images?
Hi Nelson, I appreciate your tutorials, they are really helpful and well done. In this particular tutorial the grid is aligned perfectly in Firefox and Chrome but it has only 3 columns. In Safari the grid also appears in 3 columns and the grid alignment is off. The weird thing is that I have 2 blog modules set up the same way but getting the feed from 2 categories. Your code works perfectly in one module but not in the other. I placed the code for the alignment in the page settings. What am I missing? thanks so much in advance.
I’m having an issue with older entries. When I set the layout for 8 posts (I’m using 4 columns), the content is skipping some columns. When I use only 4, the “older entries” button doesn’t work. Do you have any ideia to help me with?
That’s right: the older entries button appears, but when I click it doesnt work properly. The link is this one
Hemant Gaba
on May 25, 2021 at 9:00 pm
I am afraid that I am not able to see any older entries button. Could you please share the exact URL where the issue is happening for us to investigate further?
You want the 4 column layout so for that could you please remove the code given above and place this code instead and see if that helps?
.pa-blog-image-3-4 .et_pb_ajax_pagination_container {
display: flex;
flex-wrap: wrap;
}
Please try using this CSS Code and let us know if that helps. /*This snippet is for the design*/
.et_pb_posts .et_pb_post {
background: #f2f2f2;
border-radius: 10px;
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
}
/*This snippet is for making the padding of the image zero*/
Hi, I used this solution multiple times, always work fine. Now I have a site that need pagination at the end of the page. But because of the 2 columns the pagination is placed after the last post in the second column. Is there a way to place the pagination under the two columns?
Hi, I used this code along with the ‘turning the read more text to a button’ and I came up with a few issues. Firstly I wanted to use a box shadow on my posts but making the blog full width means the shadow goes round the whole module and not the posts.
Also when there are an odd number of posts (I had a 2 column grid) the button animation alters the order of the posts and pushes them around when you hover over them.
Hi Steve,
Could you please elaborate on what you are trying to achieve and provide the URL of the page for me to understand the scenario properly and investigate further?
What I would like is for the box shadow to go around the posts and not the whole module. (its seems you can achieve this with a border but not a shadow?!)
Also when you hover over the buttons they appear the get bigger by a pixel or two and that looks like its pushing the order of the blog posts around.
Thanks for any help!
Hemant Gaba
on August 3, 2021 at 8:24 pm
Hi Stephen,
I guess the mentioned points of yours are resolved now as the button and the box-shadow on the articles are looking fine.
Please let us know if you need any further assistance.
mkmanishkr25
on July 20, 2021 at 6:58 am
Hi,
I am using this on custom post type where few lines of excerpt and read more is coming into 2nd column.
Unfortunately, none of these codes work for me. I’ve cleared my cache, downloaded your child theme, and tried everything. But when I paste it in CSS some red boxes pop up in the code that say “Unexpected”
Hello.
As a newbie, I have found your resources very useful. Thanks.
I have implemented this, and while it works great on Chrome, it’s not aligning to top on second column on my new iPad. Any ideas? My site is not live so I cannot link to show you!
Would appreciate a response if you can.
Best wishes, Nicola
I am afraid that it is required to have a URL in this problem as first I need to check on my end and see if I can replicate the same issue as well or not and then investigate the problem further so could you please live the website and share the URL so that we can investigate further?
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Divi Tutorials On YouTube
Our videos have views! Join subscribers and enjoy over video tutorials!
In this tutorial, I will show you how to create a backup of your Divi website and explain why they are so helpful and important.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
Simple & Nice Nelson! Less is more!
Hey Ramon,
Yes! 🙂 Always fun making it as simple as possible.
Hi Nelson,
This is a great tutorial. I always enjoy your tutorials. They are simple and presented in a clear way for everyone to understand. Thanks for taking the time to create them.
Kind regards,
Neil.
Hi Neil,
I appreciate your feedback. Thanks for the encouraging words, it makes my day when I can help people like this 🙂
Thank you Nelson for this awesome tip. Will give it a shot in my sites. This is indeed the simplest way to customize number of blog columns in Divi.
Hi Hadee,
Yes, give it a try, you will love how easy this is. Keeping the code in the module is always a plus too!
Hey Nelson! This is AWESOME! One quick question…what if you wanted to equalize the grid heights to accommodate for differing excerpt and title lengths?
Hi John,
Glad you like it! What you are asking is a very difficult thing to do, but the best answer I have seen is by Elegant Themes here: https://intercom.help/elegantthemes/en/articles/3371227-blog-module-equal-height-grid-boxes-with-javascript
Wow, that was so easy! Thank you!
Hi Bernadette,
You are welcome! I’m glad you found it easy!
I put in the code but why does the image on the top second column is being cut off ?
Just add the code in the post, it describe this. -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
Thank’s for these good advices. I use the layout in a test site for a list of members, in alpha sorting (via plugin Simple Custom Post Order) , with 12 items per page, with 3 rows of 4 columns, But I see that the items are to be read on each column from top to bottom and I would like them to be listed on each row from left to right. How is it possible? Luc
Hi Luc,
It seems that this method does not work well for multiple ROWs. So I’m afraid this may not be the best method for 12 items.
Thanks Nelson 😀
You’re welcome!
Dear,
thank you very much for your clear tutorial “how-to-change-the-number-of-columns-in-the-divi-blog-module”
Works great!
Still a question: why do I first see 4 and then 3 columns on one of my pages? (see: https://mijnreceptenbundel.nl/cocktails-2/cocktail-alc-vrij/)
or better, how can I adjust this?
thank you verry mutch
Hi Rita, this link is a 4040 error. Let me know if you want me to check an updated link.
I think it is now clearly visible
https://mijnreceptenbundel.nl/cocktails-2/cocktails-alc-vrij/
With multiple pages I sometimes see 3 or 2 columns instead of 4.
How can I solve that
see:
– https://mijnreceptenbundel.nl/aperitiefhapjes/hapjes-met-fruit/
– https://mijnreceptenbundel.nl/aperitiefhapjes/hapjes- with-cheese /
– https://mijnreceptenbundel.nl/cocktails-2/cocktails-alc-vrij/
– https://mijnreceptenbundel.nl/cocktails-2/dranken-alc-vrij/
– https://mijnreceptenbundel.nl /vegetarian/
Hi Rita,
I’m not sure, but I think it has to do with the way the module makes the items stack in columns top to bottom instead of left to right. It seems maybe it is related to the size of each post too, but I haven’t been able to narrow it down.
Dear Nelson,
I have already adjusted most of the titles and are now shorter, which makes the overview better. Yet I still have that some pages show 3 instead of 4 columns (pictures)
see: https://mijnreceptenbundel.nl/hoofdgerechten/schaap-lam/
Any chance there is a straightforward way to have this center the blog items. So for example, if I have a 4 column setup, per your code, but in instances where they is only 1 or 2 blog posts, to have those centered in the screen instead of off to the left?
Hi Daniel,
I don’t know but I definitely saw someone ask this a few weeks ago in a Facebook group and someone gave the answer. I just can’t think where it was, sorry!
Great tutorial, thanks alot, clean & simple!
Thanks David, glad you like it!
Thanks a lot for your posts Nelson!!!
Best Divi tutorials on the web!
Just a tip: This is needed to work properly so I would not say “add styling”….it is confusing..
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /*
Got it, I will update that to make it more clear, thanks!
Hi, how can i make the order from left to right instead of top to bottom.
My magazine are displaying in weird order
Hi Marlon,
I think this is because of the weird way they are made in Divi. They go by columns, down the first one, then down the second one, etc. Really annoying, so I guess this only works with one row.
Thank you Nelson, this is a real helpful and easy tutorial! The only part where I was little bit confused was when you added the styling to the site. I first didn’t realize the code wasn’t for the blog module but for the whole website. I then checked your video and got it. Maybe you could add where to put this in in your tutorial here.
Hi Carina,
Okay not sure what you mean, but I assume you are referring to the snippet that targets all blog posts. You could certainly add a custom class, I don’t say that on every post because I hope people know but it’s a valid point if that’s what you mean.
what if I want two columns on mobile and not one?
Then write 2 instead of 1 🙂 Might get kinda tight though!
Hi Nelson, Thanks a lot for this tutorial. I have found a lot of valuable stuff on your website, and must say it is one of the best resources on DIVI. So thanks a lot for that.
I tried this code and it works great, except that the navigation for pagination on the bottom (older entries and newer entries) jumps into the second column instead of spanning both the columns. I am attaching a screenshot. Is there a way or CSS to make it span so that it is not in the middle of the page.
I am using a 2 column layout on this page.
Thanks a lot
Girish
I guess that is because it is technically thinking it is the “fullwidth” layout. Had not thought of that. Guess that is a drawback of this method.
Thanks for the update Nelson. Let me see if I can figure out a workaround for this.
Hi! Thank you for this tutorial Nelson! I have this same issue, has someone found a way to solve this in the meantime? 🙂
Ok I have a nice solution :D. I installed the plugin WP-PageNavi with the whole navigation on the right (the default) and removed the border 😀
.wp-pagenavi { border-top: 0px; }
Great idea, but didn’t work. Adding column-count:2 turned the 3 column blog into 6 rather than 2.
Hi Amy,
It sounds like you have it set to grid mode, change it to fullwidth for this to work as described.
Hi Nelson – I was having issues with this page:
https://dwnsandbox1.com/news/
After a few rounds with Elegant Themes Tech Support they suggested this article:
“Please use the following solution instead to change Blog columns:
https://www.peeayecreative.com/how-to-change-the-number-of-columns-in-the-divi-blog-module/”
Ta Da!
Coincidentally, I was reading a post from you earlier tonight about hiding/showing the hamburger menu.
Thanks for your clean and Elegant(!) solutions.
Thanks Mike, looks great, so glad you could benefit from this!
Great lesson Nelson!
I just have the problem, when I have an odd number of posts (for example 3), they looks in strage order, see attached image
Hi Rick,
Please add the code at the end of the tutorial, it is essential.
Thank you so much for this! I was ready to purchase a plugin from a Divi reseller to make columns happen on our landing page. I will check out your store and try to purchase from you instead!
One addendum could be helpful: there’s no navigation to older posts? When I tried to turn it on, it was wonky.
Thank you for checking our store. We hope that our products will surely add value to your website. Coming to the issue, just to confirm is the pagination not at its place when you are using this code?
If yes then, please go to the Blog Module Settings > Advanced > CSS ID & Classes and add a Custom Class. For example, the class is .pa-blog-module
After that, please go to WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and place the CSS Code given below:
.pa-blog-module{
position: relative;
padding-bottom: 14vh;
}
.pa-blog-module .wp-pagenavi {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.pa-blog-module .wp-pagenavi .pages{
white-space: nowrap
}
This code will place the pagination division at the bottom center. You can change the left, bottom, and padding values to change the placement. 🙂
Hm… it works perfectly in Safari but not at all in Chrome.
Could you please share the URL of the page so that I could investigate further?
Dear Nilson,
Unfortunately, I still have some problems with the lay-out.
On my website all images are of the same size namely, width 350 px by height 250 px.
The first problem is on the cocktails page.
URL: https://mijnreceptenbundel.nl/cocktails-2/cocktails-alc-houdend/
In all cases their maximum height should be 250 px.
So the problem is that some of the images on the cocktails page are larger (that is the height is increased) compared to others.
How can I solved this problem so that each image has the same height?
The second problem is on some other pages (e.g. menues for poultry).
URL: https://mijnreceptenbundel.nl/hoofdgerechten/gevogelte/
On these pages I would like to have 4 images on each row. However, on same pages the columns are broken down too early and on some rows I see 4 images while other rows contain 3 images.
How can this be solved so that each row show 4 images?
Hi Rita,
Sorry for the delay. Have you got it solved now?
Hi Nelson, I appreciate your tutorials, they are really helpful and well done. In this particular tutorial the grid is aligned perfectly in Firefox and Chrome but it has only 3 columns. In Safari the grid also appears in 3 columns and the grid alignment is off. The weird thing is that I have 2 blog modules set up the same way but getting the feed from 2 categories. Your code works perfectly in one module but not in the other. I placed the code for the alignment in the page settings. What am I missing? thanks so much in advance.
Be sure to add the code at the bottom of the tutorial, it is needed for that.
Hi, thank you for this! So simple and great.
I’m having an issue with older entries. When I set the layout for 8 posts (I’m using 4 columns), the content is skipping some columns. When I use only 4, the “older entries” button doesn’t work. Do you have any ideia to help me with?
I’m pretty sure it’s related to height, not sure without a link. I guess you are saying the pagination doesn’t work with 4 post count?
That’s right: the older entries button appears, but when I click it doesnt work properly. The link is this one
I am afraid that I am not able to see any older entries button. Could you please share the exact URL where the issue is happening for us to investigate further?
Sorry! There were only 4 published posts, you can check now here with the button
and here without the button, showing more than 4 posts
You want the 4 column layout so for that could you please remove the code given above and place this code instead and see if that helps?
.pa-blog-image-3-4 .et_pb_ajax_pagination_container {
display: flex;
flex-wrap: wrap;
}
.pa-blog-image-3-4 .et_pb_ajax_pagination_container article{
width: 23%;
margin-right: 2%;
}
@media all and (max-width: 980px){
.pa-blog-image-3-4 .et_pb_ajax_pagination_container article{
width: 48%;
margin-right: 2%;
}
}
@media all and (max-width: 600px){
.pa-blog-image-3-4 .et_pb_ajax_pagination_container article{
width: 100%;
}
}
This will give you 4 columns for the desktop, 2 columns for tablets, and one column for the mobiles. Please let us know if that helps.
Hi Nelson,
Again this is a great and simple tutorial vs the rest out there.
Just one question. How can I make the blog image 0 padding while the content has around 10px padding?
Please try using this CSS Code and let us know if that helps.
/*This snippet is for the design*/.et_pb_posts .et_pb_post {
background: #f2f2f2;
border-radius: 10px;
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
}
/*This snippet is for making the padding of the image zero*/
.et_pb_posts .et_pb_post a:first-child{
padding: 0px;
}
/*This snippet is for providing 10px padding to all the other elements*/
.et_pb_posts .et_pb_post a ~ *{
padding: 10px;
}
Hi, can you tell me how to keep the size of those columns same please.
Please add this code and see if that helps:
.et_pb_posts .et_pb_post {
min-height: 620px;
}
You can change the value of min-height as per your liking and this will equalize the height of all the posts. Let us know if that helps.
Hi, I used this solution multiple times, always work fine. Now I have a site that need pagination at the end of the page. But because of the 2 columns the pagination is placed after the last post in the second column. Is there a way to place the pagination under the two columns?
Could you please share the URL of the page where the blog module is present for me to investigate further?
Hi, I used this code along with the ‘turning the read more text to a button’ and I came up with a few issues. Firstly I wanted to use a box shadow on my posts but making the blog full width means the shadow goes round the whole module and not the posts.
Also when there are an odd number of posts (I had a 2 column grid) the button animation alters the order of the posts and pushes them around when you hover over them.
Hi Steve,
Could you please elaborate on what you are trying to achieve and provide the URL of the page for me to understand the scenario properly and investigate further?
Hi, Thanks for responding. Here’s the URL:
https://yourcomplete.co.uk/blog/
What I would like is for the box shadow to go around the posts and not the whole module. (its seems you can achieve this with a border but not a shadow?!)
Also when you hover over the buttons they appear the get bigger by a pixel or two and that looks like its pushing the order of the blog posts around.
Thanks for any help!
Hi Stephen,
I guess the mentioned points of yours are resolved now as the button and the box-shadow on the articles are looking fine.
Please let us know if you need any further assistance.
Hi,
I am using this on custom post type where few lines of excerpt and read more is coming into 2nd column.
You can check this link :
https://staging4.briskon.com/consultants/dr-cma-belliappa/
Hi there,
Could you please elaborate on the end result that you are trying to achieve for my better understanding?
Unfortunately, none of these codes work for me. I’ve cleared my cache, downloaded your child theme, and tried everything. But when I paste it in CSS some red boxes pop up in the code that say “Unexpected”
Not sure what to do with that.
Please make sure that you are placing the code inside the Blog Module Settings > Advanced Tab > Custom CSS > Main Element Panel.
Hello.
As a newbie, I have found your resources very useful. Thanks.
I have implemented this, and while it works great on Chrome, it’s not aligning to top on second column on my new iPad. Any ideas? My site is not live so I cannot link to show you!
Would appreciate a response if you can.
Best wishes, Nicola
Hi Nicola,
I am afraid that it is required to have a URL in this problem as first I need to check on my end and see if I can replicate the same issue as well or not and then investigate the problem further so could you please live the website and share the URL so that we can investigate further?
Great idea, but doesn’t seem to work with 6 columns. Only 5 display.
See staging: http://jewishelpaso.048239d.netsolhost.com/the-jewish-voice/
Hi Chuck,
Thank you for addressing the issue. We will look into the problem and will get back on this shortly.