How To Make The Divi Blog Grid Equal Height
Вставка
- Опубліковано 17 жов 2024
- In this tutorial, I will show you how to equalize the height of the Divi Blog module grid "boxes" with a few extra bonuses.
Blog Post + Snippets: www.peeayecrea...
How do I make the blog grid equal height? This is a very common question for Divi users setting up the Blog module. There are no other tutorials on this, so as always we though we should provide a great solution for this need. So in this tutorial, I will show you how to equalize the Divi Blog module grid height.
There is already a solution provided by Elegant Themes in their chat support help docs called Blog Module equal height grid “boxes” with JavaScript. So credit goes to them for the original code, but we have improved it greatly and also will explain it much better than they do. We also include some bonus snippets, such as aligning the buttons to the bottom.
I get this request all the time, You have the only worth while tutorial online for this. You are my first go to source for this kind of thing.
I'm glad you are finding my resources valuable! 🙂
Hey Nelson, I have been following your tutorials for quite some time now and they have helped tremendously. If you feel like your efforts are ignored or not noticed, please use this comment to know that you are absolutely amazing! Great work man
man that was such a very copy paste fast fix. It worked perfectly. thank you so much!
You're welcome!
You are so humble! Love all your tuts, thank you!
You're welcome!
Thanks! I don't mind the "rambling" ;) it is a bit more complicated and a lot more code than I'm used to, but I like to know what's going on, and really appreciate all the work u do. I still can't quite wrap my head around the idea that something so simple with design will require so much backend work in a website! 😜
It's a good amount of effort to compile the code, and another extra bit of work to try to explain it as simply as possible for ppl like me. So thanks for sharing it on UA-cam!
I'm glad you appreciate it! I definitely felt off on this one, knowing it was overwhelming and difficult to break down well. But even so, a copy and paste is really all it takes, I just wanted to provide some education also 😊
@@PeeAyeCreative oh, the explanation was clear and accessible enough even for me. Just saying the code looks intimidating. 😜
my clients, and the Marketing team I work with, will love this solution! thanks, Nelson!!🤘🏼
That's great, you're welcome!
You solved my issue with such clarity and precision....and very quickly. Thanks so much, Nelson!
Thanks! Was tearing my hair out over this before I found this. I think I might be done before the next part.
Dude, you legit saved me with this tutorial.
Thank you so much
You're welcome!
I'm working on a client site and tried their 'official' method, however I couldn't get it to do anything. So happy to give your method a try! Thanks!
Hope it works out for you!
@@PeeAyeCreative thought I'd reply here rather than the blog. I too have followed the tutorial and applied this to a recent client site that is just wrapping up. But as with the older method on Elegant themes in their blog/tutorial section, nothing happens. It's not throwing an error. I've found that if I start writing publicly, I suddenly find the issue - so giving this step a try ;)
Okay, setting line 3 to false, changes the heights of each entry to be equal, which is great. Just leaves the read more buttons/links after the content. So set to true (as provided in snippet), no change to the height or read more link position. Set to false, fixes the height.
Most of your tutorials are gold! Wishing more people see your efforts. Grateful to you nelson.
Thank you so much!
Love this video, thank you so much. A quick question: how do I add spacing around the featured image, currently it takes up the entire width of the grid box?
For that you would need to check my other video, as we cover very specific topics in each video. www.peeayecreative.com/category/tutorials/divi-blog/
please don't apologize some people do want to understand .. thank you for the help ... maybe adding time stamps for people :)
Hi Nelson, this video has been very clear and concise. I could solve my issue easily. Thanks a megaton, bro! Awesome experience. Became your follower from now.
I'm so glad you like the video, and I hope you continue to find all my resources valuable!
Wow.. Thank you Nelson. Just found your channel. Started using Divi about a month ago after using Avada for several years. I have been both awestruck and frustrated with the Divi theme after buying it. There are so many things that it doesn't do "out of the box" - for example you can't select how many columns you want to show in this blog module from the UI - you have to change it using CSS. ALso, I find there are so many things that one should be able to do using the builder - like really simple things such as a:hover { text-decoration: underline; } - you can't do that from the UI, it has to be done with CSS, but at the same time you can add other hover effects to links from the UI.. It doesn't makes sense to me the way it has been designed - like what you can do using the builder and what you have to use CSS and js for.. Well - I guess I just have to get more experience using the theme :) Anyway - just wanted to say, that I'm glad I found your channel. That will probably make the transition to Divi less painful.
Divi was the first of it's kind, which means it is the oldest. So over the past 1.5 years and into the next year Divi is being rewritten from the ground up. So you want see many updates lately, but don't worry, once the foundation is ready it will be better than any competitor. I don't think Divi is missing much at this point. It is meant as a framework, so adding custom CSS and JS is usually beyond the core. Not always, but mostly.
Thanks so much for this code! It worked for me, except there is some white space at the bottom of each blog post. Do you know how to remove that?
Purely as mental rambling, I found it easier stacking the posts and then using CSS Grid to get them to auto flow. I then used flexbox stretch in the grid cells to get them to go to the same height. I looked at the attached article which had a great breakdown of the jQuery code but could not see (apart from a few areas for adding customisation) where using the jQuery code would be better than doing it with CSS. I was hoping to get my head around it better so I was not missing the point if you get my drift.
Thanks so much, I follow your steps and it works! Thank you for your efforts
Hey Nelson! This video and the blog was super helpful to understand BUT it didn't work for me, so I followed the elegant themes version and that did the trick.
Okay sure glad theirs was what you needed
Again another useful tutorial from Nelson, despite he seems a bit more disorganized than usual. My favorite Divi support blog.
Can you tell me what feels disorganized? The nature of this tutorial is very complicated compared to most.
@@PeeAyeCreative If this is not the right word, sorry for that. And please do not take it as a critique, as the content is great and I personally love his style. Yet when i.e. he says: "by the way, if you don't even care, then you are done" one may think what comes is not that important. After which he keeps laughing during the explanation, as if he did not believe that anyone is interested in or would get, what he explains. The tutorials I've seen from him up till now seemed more focused or confident. For someone, who is less biased (positively) about him than me, this may be strange. That is all I meant. But if you find my comment negative, I am more than happy to delete it or change it.
I really appreciate your tutorials! However, with this one, I'm running into the issue that my buttons are not aligning. Neither with the value 'true' nor 'false' for var pa_equalize_button_height = "true";
Any idea why?
Great tutorial and thanks for the code!
You're welcome!
Thanks so much this has worked so well on my blog page, but in creating another page pulling through 'projects' for the divi blog module instead, it's not working. What do i need to change in the code to make it work? If possible
Did you ever get this working for your "projects/portfolio" page?
I think swap out
pa_equalize_button_height
for
et_pb_portfolio_item
within the code
I did thank you, I can't now remember what I did exactly but it's all equal 40 projects later! @@bobbytk-q8f
Dear Nelson, I followed and did all the step you taught but still no difference please help me out, is that because i have the newer version of Divi?
This didn't work for me... Is it because I have two things in CSS Class area? I have them separated by a space.
Your videos are great! Helped me so much navigating divi and coding.
Lifesaving tutorial ❤ Thank you! Big fan!!
Glad you liked it! I'm happy to hear you are a fan :)
Hey Nelson,
Does this code work with different custom post types as well?
Because I tried to use it with my site but it doesn't seem to solve the alignment problem with the grid that shows up when searching for specific post types...
Thank you!
I don't know, it seems like the post type would not be a factor, as it is still the same blog module.
@@PeeAyeCreative Somehow I managed to solve it by adding some metadata items and then removing them with css
Thank you Nelson!
@@denisporretti1329 So you got it to work with custom post types ...such as "projects/portfolio"?
It's different classes
This is great! Is there a way to make this 4 columns instead of 3?
Yes there are other tutorials about that subject.
Another quality content Nelson! Thanks a lot brother
You're welcome, glad you like it!
Another great video Nelson! Thank you 😌
Thanks Mirko, glad you like it!
Mate, you are truly great! Thanks a lot for your help!
Happy to help!
Thank you for the tutorial. We also can choose fullwidth layout and style it via CSS grid.
You could sure, with many limitations and drawbacks. See the bottom of the tutorial for an explanation.
This worked great!! Thanks for another excellent tutorial.
This did not work for me. I am using your child theme and placed the CSS in style.css and the JS in the scripts.js area with removing the tags. Any help?
I followed one of your previous tutorials related to making the blog module show 4 columns. When i do the steps in this tutorial it makes the formatting go way off. Is it one of those things where its either 4 columns or equalized heights?
Dear Nelson, I found an empty white space under read more after the second refresh, do you happen to know why it happened?
You look like the result of Peter McKinnon and Louis C.K. having a baby :) Random note aside, your tutorials have been amazing and incredibly helpful as I build my first official website!
Hey Nelson !
I'm encountering an issue with a client site, and I think you can resolve it in one second..
I came on this video but my problem is not exactly the same.
My problem is that my client is going to add images from different sizes and the thing I want is to get an alignment of the images.
I would like to automatically resize the images they upload to horizontally align my blog titles.. Is it possible ?
PS : Sorry for my english, I'm a french Divi guy.
Thank you Nelson !!!!!!!!!!!!!!!!!!! :) :) :)
You're welcome!
Nice .... looking forward to try and use it
Hope you like it!
@@PeeAyeCreative I worked like a charm THX again ⭐⭐⭐⭐⭐from here
By the way, you’re also a better teacher…
I'm so glad to hear it :)
Thank you. Very useful!
Glad it was helpful!
It works great for me except for some reason this creates a large gap between the end of the content and the end of the box (rather than just going to the height of the largest post, it extends further than that), is there any way to fix this?
How about doing this for projects/portfolio grids (...and will it be different if we have custom php changing the programs tab name and slugs?)
Good idea, we will add this to our list.
I think swap out
pa_equalize_button_height
for
et_pb_portfolio_item
within the code
Thank you it's a helpful video
You're welcome!
Hi @Pee, I tried to use this under Divi woo product settings but it is not working. Any suggestion will be greatly appreciated. Thank you :)
This is for the blog.
Thank you. It is very helpful
Glad it was helpful!
Great one
Glad you like it!
Fantastic.
Thank you!
Thank you so much
You're welcome!
Thank you very much :)
Amazing Video Sit: sir tell me please which plugin can we use to do equal height of blog post sir reply please
Huh? You said great video, but then asked how to do with a plugin what I showed in the video?
@@PeeAyeCreative Mean to say that Can we do this with any plugin. Because If I want to tell someone how to do this so I could tell someone. So thanks very much for my reply I learn a lot from you... Hats off for all your amazing trikcs
I'm glad you like it.
You rock!
Thanks 😊
Does this still work? I been through the video three times and the heights are unequal.
thanks a lot!
You're welcome!
How do I make it so there are 4 blog posts showing on one line? Whenever I have it set to 4, the 4th one is under the top three.
I don't think that is related to this tutorial. We do have one about column number but I'm not sure if it is compatible or not.
So I'm struggling here, I can't even figure out how to add a button for read more, it is only text with no button options present. Also, my main issue right now. How do I make the featured image for the blog, overlay each item in the grid list. I can't find anyone doing this or explaining it.
I have tutorials on all of that, it may help to view the posts on our blog: www.peeayecreative.com/category/divi-blog/
@@PeeAyeCreative thank you. Sorry if I sounded aggressive, I was pulling my hair out
how can I make it so that only the image is shown but everything else is removed for the blog posts?
Did you try turning off the other elements?
Your website is not open. How can I get the code?
I'm not sure what you mean
did everything u said and its not working for me.
Cool 🎉
🎉
sounds like it doesn't work when post type is set on projects! :(
Really? I didn't check that but it seems odd. Can 6share a link?
@@PeeAyeCreative can you please give me solution? I don't have more time :(
@Pee-Aye Creative Hi, it seems my comment didn't appear here :|
I'll mention it again:
when everything is set, on the same module, when you set the content on blog posts, everything works good and the blocks are at the same size. but when you switch it to projects, the setting doesn't apply and block
Did you ever get this to work with "projects"?
I think swap out
pa_equalize_button_height
for
et_pb_portfolio_item
within the code
How to make the image aspect ration the same?
www.peeayecreative.com/change-the-divi-blog-image-aspect-ratio/
for somehow isn't working for me :(
Thanks a lot brother
Always welcome :)
Didn't work for me...I went through the tutorial twice and no luck 🙁
Sorry to hear, probably something custom conflicting.
@@PeeAyeCreative I kept troubleshooting and figured it out. I had to hide overflow using something I found on an elegant themes support article, and now it's working: Divi > Theme Options page:
.et_blog_grid_equal_height article {
overflow: hidden;
}
Nelson actually has green frosted tips and is not bald. Thanks for all the helpful content!!
You're welcome!