How To Change The Number Of Columns In The Divi Blog Module (Extremely Easy With 1 Line of Code!!!)
Вставка
- Опубліковано 19 вер 2024
- This tutorial will show you how to easily change the number of columns in the Divi Blog module with just two simple lines of CSS!
View Blog Post + Snippets: bit.ly/BlogCol...
Easily Make The Blog 2 Or 4 Columns
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!
Become a member of our Divi Adventure Club!
www.peeayecrea...
Join The Divi Teacher Facebook group: / thediviteacher
Visit our Divi child themes, plugins, tutorials, and courses here: www.peeayecrea...
Thanks for watching!
Thanks again Nelson, your tutorials are literally the best. I like how on point you are and break everything down while you make changes to something.
You're very welcome!
I am sure you know that feeling when we open youtube and see "Divi Feature Update". I am beginning to feel the same when I see your video in my notification box haha. Am like...Gonna Learn a new Divi trick today!!! Really Nelson many many thanks for all these tutorials.
The Blog module does lack some important options like choosing number of columns and we have only 2 layouts. Lately I was facing the issue of having only 2 grids in one row when choosing the 3/4 + 1/4 layout and client wanted 3 grids. Since I use Divi Toolbox, I could force the row to have the 3 grids but I am glad that you provided this trick as I may avoid using an extra plugin just to fix that issue.
PS: You indeed seemed extra happy in that video :p
I don't think my tutorials are in the same level as a feature update, bit I'm so glad you like them! I spent a lot of time trying to figure this one out. I knew it was possible with about 5 other tutorials online, but they were all VERY complicated and I like to think outside the box. I was very pleased when I realized I could use this css, as you could see. 😀 Appreciate your support for sure!
@@PeeAyeCreative Nelson I have a little request. Do you or can you find a solution for another little lack in Divi...It is about the Contact Form module. The module itself is quite powerful but one thing missing is having 3 columns. Right now we can only have full-width or half. It would be great if there was a trick to make it 1/3 + 1/3 + 1/3 till E.T add that option :)
This is just great - I've been struggling with the blog module for days before I came across this great (and simple) solution. Thank you, Miller!
You're very welcome!
Thank you. The problem I'm finding is twofold. I've lost my individual preview borders and border-radius. Second, the bottom ones will wrap up to the next column. So, I have 'Read More' at the top of column 3 with it's image at title at the bottom of column 2. At the top of column 4 is the title and read more, while the image is at the bottom of col 3.
Your tutorials are simple and different than everybody else. Again, thank you so much!
You're very welcome!
Thank you Nelson!!! You're literally saving my ass each time I need to customize something on the Divi theme :)
Haha that's great!
Incredible bro, sorry for my english, but you saved me: 2 columns, each one shows the posts of diferrent categories of the blogs, and marking grid alwayus gone to full width, i don't know why DIVI hasn't and option for this.
Glad it helped! I'm not sure why either :)
I LOVE YOU! MY GOD!!! So easy!!! THNX!!!!!
Thank you for this tut! I just fell across this and put into use on our ministry's website.
at last! I've been searching for this for a long time. Thank you!
Hi Noriaki, I'm so glad you like it! Let me know if there is ever anything else you are looking for, maybe I can help!
You seem like a all around good person. I like your videos. I bet you would be successful at other how tos or videos on YT. I think people who don't code could relate to you
I appreciate that! I do have a personal channel called Nelson Miller that is well received too :)
@@PeeAyeCreative I will be sure to check it out!
Thanks, it's more random with a little humor too 😉
Thank you. Super helpfull tutorial and very easy
Glad it was helpful!
great tutor
Glad you think so!
Thanks for this! Easy and works like a charm :) Cheers
Glad it helped!
Awesome tricks! Thanks a lot! :)
You're welcome!
Thank you!! That was so simple and clear :D
You're welcome!
Thank you so much, it is very very helpfull
I'm so glad!
Wow , really needed. Excellence with ease
Glad you liked it
Wow - massive thank you !!!
You're welcome!
Thanks very much for this great css code. It's really nice to just have a light version for something simple. :-). Is there a way to have the image fullwidth and padding around all the content?
Again you saved my day! Tkanks
Hi Nelson! When I input this code all my posts are funky and the "read more" buttons in the second row (added from your other tutorial) get pushed down and end up behind the posts below it. In the third row, the "read more" buttons are pushed down as well. I am unable to have "pa-equal-height", "pa-16-9", and four columns with this tutorial. I left a comment in your other tutorial with the "load more" button and I can't add that either. I'd appreciate your assistance for both issues.
Great simple explanations, Thanks. I am looking for a way to delete the website element in the comments section. Any ideas or tips you could give me, please?
I'm glad you like it. But I'm not sure what you mean by your question?
@@PeeAyeCreative in the comment section after the post, has few elements. comment, name, email , website. And I would like to take out the elemnt "website" from the comment section/module.
This worked perfectly! Thank you so much. Is there a way to equalize the posts? Because it's set to full width the grid equal height selector doesn't work.
Hmm, what equal height selector? There is no such thing in Divi that I know of
@@PeeAyeCreative
EDIT: Solved for me.
Make sure your featured images are all the same aspect ratio (16:9..etc) Fixed it for me.
//
i think i’m struggling with the same issue. The heights of my images are now no longer even. The first two blog posts are slightly smaller vertically which throws the whole balance off and can’t seem to see why!
hi! reaaaly nice tricks thank you so much , i made 2 columns , but a have only 3 post and one of my post have the title separeted in the other column , did you know how to fix that? it's perfect for pairs , but in impairs thats looks strange ! maybe i cause the problem lol
Me too. One blog starts at the bottom of one column and the rest is at the top of the next column.
Goood! A lot of thanks! You really helped me. Before I always changed column layout by this css code .et_pb_salvattore_content[data-columns]::before {
content: '2 .column.size-1of2';
Yes I have heard of that. You can also do a trick where you add a 2/3 and 1/3 column, add your blog module to the 2/3 column, then add display: none; in the 1/3 column and you instantly get 2 columns of the blog :O
Great tutorial, keeping it simple is amazing. Can I ask, my blog posts order in date down the columns, is it possible for them to reorganise them horizontally across the columns?
Doesn't work for me it's all over the place, sad that divi can't have this as an option.
Hi Kevin, I think it is because the way Divi has this module made. There are columns, and in each column the posts go down...like if you have 9 posts, the first 3 go down the first column, etc. Really strange. So this might only work with one row.
Amazing tutorial, thank you! Unfortunately this doesn't worked for me. I'm trying to split into two columns the 12 images contained in a Divi Gallery module (i'd like to have 6 per column). Although when I go add these 2 code lines it creates 2 columns but leaves the second absolutely blank, with no image in it. It looks like it won't wrap the elements in the first column and send them to the 2 one. How could i fix it? Thank you
Is it just me or do the blog posts run out of order when you do this? They run down one column and then onto the next. So if you scanned the page like you would in grid mode you get them out of order.
I am having this same issue as well.
Amazing, Thank you :)
You're welcome, glad you like it!
hey Nelson, hope all is well man!
I have problem with this coz I have 8 separate modules in one row, so I tried to add css code to each module, and that resize it, but they are still one below the other... I can't manage to have them one next to each other - to have two of them in one row on mobile... Please help to solve this mate and thank you so much man.
Ohhh boss that's great
Thank you!
Nice!
Thank you! Cheers!
When their is one post, the contents move to the other column how do i fix that?
As of today's date and DIVI theme builder build, this doesn't seem to work anymore regardless of plugins installed or post count or culumn count. Would've been nice though. Thanks for sharing.
You can ask for helping our blog.
Is it common that this method make items not align on mobile?
Do yo some titles the whole "grid" is "dancing in height per post" making it verry bad on mobile
Hi! That was fantastic. I ty it and work it, but when the element has box shadow the shadow is cuted and is visible on bottom of the main containter, have you how to avoid this?
Awesome work BTW.
I'm not sure what you mean, is the shadow on the posts or on the module? Can you share a link?
It looks like applying this property to the main element works: backface-visibility: hidden;
@@PeeAyeCreative You can check in the last 2 blogs modules in this site lpd.cl/oikonos/educacion/winged-ambassadors the last one has the error en the previuos one is solved.
Can you show us how to do a diagonal blog layout?
Hmm, what do you mean by diagonal?
@@PeeAyeCreative like this genevabell.com/blog/. As you can see, I did do it but I wanted to know if you had an updated easier way. I found an old blog post on how to do it (which I can't find now). It was very complicated and took me forever to get it right. I think possibly because the Divi theme itself is constantly updated and the blog post was written in 2016.
Hi, Thanks I had this "sort of working" but having trouble with blog post cards wrapping and leaving 2 blank columns when the # of posts is > than the number of columns - then it seem to change the # of colummns that get content. For example, if I have columns set to 6 and I have 6 or fewer posts, then it's displays perfect, 6 posts on a single row, but as soon as I add a 7th post, then number of filled columns changes to 4, with 2 empty columns on the right.
Hey there, are you using the code from the blog post?
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
Does that solve it?
For a blog post how can i create a "table of content" ??? or i just put a plug in in wordpress
Thanks
Hi Gabiajando, I suppose you would just have to manually make this with a text module and anchor links.
Just wondering... will the module styles work on this?
Absolutely!
This doesn't work for me, I have 3 blogs so when you put the code in it makes it two column and the first column has first blog with featured image and text the second blog has featured image but runs the text of that to the top of the 2nd column and the the third blog appears. It ok if if you only have two blog but if you have more than that then it looks a mess. Any help?
hi! did you find a solution for this problem after 11 months , i have the same :(
@@marjorieberube3336 Me too.
I like you so much !
OK! how is this so simple? "do you know how many stressful tutorials I've watched?"
Yes, I get headaches reading some of the tutorials for this!
👌🏻😍🥂🍾
:)
Doesn't work in the latest theme update.
Pretty sure any Divi theme update lately is not related to this...