Grow, Grow, Grow! I've found that while building out websites, it's pretty crucial to keep containers and children as limited as possible, especially if you have a case like this but with many loop items. Thanks al always Imran!
Great tips!!! What about the container #3 that have 2 lines in the title? What is your recommendation to make all of them in the same line? The title The Text And the button
Same height boxes are / have always been a pain. I've had to just through burning rings of fire in the past to get them to look good much less correct. I prefer the first method here even though it adds more code. I think it's a nominal loss effect at this point. my own personal preference. all are great tips though :D
Nice tips, I think the first two are easy enough to understand. While the 3rd one is very easy to implement, imho it wouldn't been worth it to spend a few words explaining how the "grow" option functions.
Nice video. As for the first method, since you have added a child container to keep all the upper elements and set the parent container to space between, is there a need to add another child container for the button only? The child container for the button seems to be redundant and unnecessary to me. I also saw some people display the elements differently in cards. They display image, title, text and button Visually in order, but Semantically they put the title, text and button before the image. It is believed that this way is semantically right and could improve accessibility and loading speed. I don't know if I'm wrong.
Not really, as you could avoid it, but in case you add further content next to the button it allows you to space out as groups. I find that rules about semantics are fine unless the look/aim or conversion methods for that niche prove otherwise.
Hello, thank you for your video. It is very interesting. I'm having another problem with the buttons on Elementor. When I add an icon in addition to the button text, I find that the text and icon are not aligned. What should I do? Thanks for your help. 😉
I'd go first with Option #3 - Grow. If that's not possible for any reason, my next option would be #1 - 2 child containers then space between. I would hesitate to use Option #2 (position:absolute) as it will be problematic, if not tedious, when doing 'responsive'.
If you could also do quick tutorial on equal height for post loop grid it will be great. I know there is an option on loop grid to make equal height, however it doesn’t work. TIA
Hi! I'm using the Products widget of Elementor and I activated the "align buttons" option, but even adjusting some buttons, it doesn't work as I expected. Is there a way to fix the buttons alignment on the Products widget? I can't edit the buttons only with that widget, cause it's all included in one thing.
I can confirm, that none of those methods work with loop item and loop grid. When i try 2 containers and space between, it works ok in simple layout, everything aligns beautifully. When i do exactly the same layout with loop item - loop grid fails to align the buttons. Im at loss how to solve this problem. Using Elementor 3.24.4 and pro 3.24.2.
It does work and I’ve used this many times. Have you got a url to share of your blog in question? Ask at our Facebook group so we can help you further.
What happens when your client wants the text to align vertically as well no matter how long or short the title is? How would you accommodate that? I've also been playing at the bottom of the page while watching your videos. Seems absolute on the text works but geez I haven't even checked break points yet.
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
Grow, Grow, Grow! I've found that while building out websites, it's pretty crucial to keep containers and children as limited as possible, especially if you have a case like this but with many loop items. Thanks al always Imran!
Very true!
Another great tutorial as always. Keep up the good work Imran.
I used #3 - easy solution! Loved the tutorial with 3 options to solving this problem.
Glad it helped!
You are amazing man. Thank you for making things smooth and simple. God bless you.
My pleasure!
Thanks for sharing. I was just looking for this solution.
No problem 👍
Saved the day AGAIN! Thanks, Imran!
Absolutely brilliant! 👌
Magic!!🙏🏼
Man you make it so easy a nature teacher. 😢❤❤❤
Once you get used to it :)
Great tips!!!
What about the container #3 that have 2 lines in the title? What is your recommendation to make all of them in the same line?
The title
The Text
And the button
Depends, but you could grow the Title if the title and text sit in a child container, and the button outside. Then set the parent to be space between.
Grow is beautiful. You are awesome
Muito obrigado pela aula. O método 3, me parece mais prático.
Totally GROW!!!
Do share the video (click the share button to get the right URL) and let the world know :)
I would use the "GROW" method. Great video.
Yup, Grow is my fave :)
Another great tutorial! Thanks again! 🤓
My pleasure!
Ich liebe deine Tutorials ❤❤❤
It’s 3 for me. Great video!
Mine too!
Awesome!
Love your methods
Glad you like them!
Yep. Had same prob with a loop grid with ACF fields a couple of days ago. Used solution No. 1👍
Nice one!
Good stuff, grow is the way to do it! This use to be such a hassle before flexbox in elementor
Method #3 is perfect.
Same height boxes are / have always been a pain. I've had to just through burning rings of fire in the past to get them to look good much less correct. I prefer the first method here even though it adds more code. I think it's a nominal loss effect at this point. my own personal preference. all are great tips though :D
I really like last method, which one do you use most of the time?
Method 3: Grow :)
Thanks buddy
Nice tips, I think the first two are easy enough to understand. While the 3rd one is very easy to implement, imho it wouldn't been worth it to spend a few words explaining how the "grow" option functions.
I did mention it - it grows to fill the space.
i liked the grow feature
Yeah Im doing it right Im using the method 3 🙂
Best method.
Nice video. As for the first method, since you have added a child container to keep all the upper elements and set the parent container to space between, is there a need to add another child container for the button only? The child container for the button seems to be redundant and unnecessary to me.
I also saw some people display the elements differently in cards. They display image, title, text and button Visually in order, but Semantically they put the title, text and button before the image. It is believed that this way is semantically right and could improve accessibility and loading speed.
I don't know if I'm wrong.
Not really, as you could avoid it, but in case you add further content next to the button it allows you to space out as groups.
I find that rules about semantics are fine unless the look/aim or conversion methods for that niche prove otherwise.
Awesome 👌
Do share the video (click the share button to get the right URL) and let the world know :)
Hello, thank you for your video. It is very interesting. I'm having another problem with the buttons on Elementor. When I add an icon in addition to the button text, I find that the text and icon are not aligned. What should I do?
Thanks for your help. 😉
Have you inspected with SiteOrigins CSS and then adjusted?
No, I'll check.@@websquadron
omg I love you man
I'd go first with Option #3 - Grow. If that's not possible for any reason, my next option would be #1 - 2 child containers then space between. I would hesitate to use Option #2 (position:absolute) as it will be problematic, if not tedious, when doing 'responsive'.
Totally agree. Grow is my fave.
If you could also do quick tutorial on equal height for post loop grid it will be great. I know there is an option on loop grid to make equal height, however it doesn’t work. TIA
Yup, but sometimes that doesn't always work with varied content.
do you know how to keep the number of texts aligned on the card?
to avoid a gap between the text and the button
As in add grow?
Button doesn't need to be in a child container in method 1. It's already a block element. Live method 3 though. Thanks Imran once again
Agreed unless they have something else to go next to the button. Grow is my fave :)
Hi! I'm using the Products widget of Elementor and I activated the "align buttons" option, but even adjusting some buttons, it doesn't work as I expected. Is there a way to fix the buttons alignment on the Products widget? I can't edit the buttons only with that widget, cause it's all included in one thing.
Use the loop grid instead. Or you’ll have to add css to position the button
@@websquadron in the loop grid, the grow option works 100% good? Thank you man, I’ll give it a try
Grow definately
Is it possible to make a tab (nested tab) to be a logout button?
Maybe with some html added in title and then some JS
I use grow always
Sweet :)
FYI this doesn't seem to work in a loop grid unless I'm missing something
The Grow does work as I use it a lot. It may depend on how it's built. Which one of the three are you struggling with?
@@websquadron The grow method
How do you do this on a call to action same layout ?
That’s tricker because of the content so you should just align to the top, middle or bottom
@@websquadron thank you for your help maybe I will just change it to loop grid like your video 👍🏻
Hi Imran, I'm interested in doing an internship with you to learn more about WordPress. Can we discuss this further? Thanks!
I provide 1-2-1 mentoring/support but I do charge for that.
But it doesn’t always work, if you have a loop grid for example it doesn’t work.. because all descriptions are different length..😢
You can set the container to be a certain height and then set the container to be space between
Just curious why you didn’t mention margin top auto
That’s a good point. It’s not one I use.
I can confirm, that none of those methods work with loop item and loop grid. When i try 2 containers and space between, it works ok in simple layout, everything aligns beautifully. When i do exactly the same layout with loop item - loop grid fails to align the buttons. Im at loss how to solve this problem. Using Elementor 3.24.4 and pro 3.24.2.
It does work and I’ve used this many times. Have you got a url to share of your blog in question? Ask at our Facebook group so we can help you further.
👍👍👍👍🦗
3
#3
we need bricks tutorials broo 😢
They will come soon.
What happens when your client wants the text to align vertically as well no matter how long or short the title is? How would you accommodate that? I've also been playing at the bottom of the page while watching your videos. Seems absolute on the text works but geez I haven't even checked break points yet.
I’d need to see a page as an example to give a better answer
@@websquadron Client decided he didn't need the button/link at the bottom after all.