3 Ways to Align Buttons - Loop - Posts - Products - Elementor Wordpress Tutorial
ฝัง
- เผยแพร่เมื่อ 7 ส.ค. 2024
- Here are 3 Ways to Align Buttons - Loop - Posts - Products - Elementor Wordpress Tutorial.
00:00 Intro
01:01 Justing using Space Between is not advised
01:37 Method 1: Child Containers with Space Between
02:34 Method 2: Absolute Positioning
03:53 Method 3: Grow (my favourite)
Elementor Hosting - managed wordpress hosting :
be.elementor.com/visit/?bta=2...
Elementor Pro - The builder that will make you a pro
be.elementor.com/visit/?bta=2...
Get our Awesome 'How to Build an Elementor Website Course' - Lifetime Updates and access to New Modules at no extra cost: learn.websquadron.co.uk/
Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
Book your 1-2-1 Consultation: websquadron.co.uk/socials
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your TH-cam Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - แนวปฏิบัติและการใช้ชีวิต
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!
Ich liebe deine Tutorials ❤❤❤
Another great tutorial as always. Keep up the good work Imran.
You are amazing man. Thank you for making things smooth and simple. God bless you.
My pleasure!
Saved the day AGAIN! Thanks, Imran!
omg I love you man
Man you make it so easy a nature teacher. 😢❤❤❤
Once you get used to it :)
I would use the "GROW" method. Great video.
Yup, Grow is my fave :)
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 :)
Awesome!
Love your methods
Glad you like them!
Good stuff, grow is the way to do it! This use to be such a hassle before flexbox in elementor
Another great tutorial! Thanks again! 🤓
My pleasure!
Method #3 is perfect.
I use grow always
Sweet :)
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.
Awesome 👌
Do share the video (click the share button to get the right URL) and let the world know :)
Yep. Had same prob with a loop grid with ACF fields a couple of days ago. Used solution No. 1👍
Nice one!
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
Grow definately
Yeah Im doing it right Im using the method 3 🙂
Best method.
I really like last method, which one do you use most of the time?
Method 3: 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 :)
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.
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.
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.
3
#3
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.
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
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.
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
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
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.
👍👍👍👍🦗
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 👍🏻
Just curious why you didn’t mention margin top auto
That’s a good point. It’s not one I use.
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
we need bricks tutorials broo 😢
They will come soon.