The Easiest Way to Create Vertical Dividers in Elementor - And They're Height Adjustable Too!
Everything You Need to Know About Containers - Elementor Beginner Tutorial: • Everything You Need to Know About Containe...
Make the Width of Any Container (Or Widget) Fit Its Content Perfectly in Elementor: • Make the Width of Any Container (or Widget...
Combine Different Units to Make Your Website More Responsive in Elementor - CSS Calc: • Combine Different Units to Make Your Websi...
Everything you need is pinned 📌 to the top comment.
What I use to build amazing websites:
Elementor (the best WordPress page builder): https://be.elementor.com/visit/?bta=2...
Awesome, affordable hosting (the server your website needs to exist): https://www.hostinger.com/reialesa - use discount code 'REIALESA' to get an extra 10% off your purchase!
🗞️ Subscribe to my newsletter: https://www.reialesa.com/newsletter/
Creating horizontal dividers in Elementor is easy. Vertical dividers, however, are a different beast entirely. There's no widget that creates a vertical divider and pretty much any method you use will impact your layout and other elements inside of that layout.
For example, if you just add a border to your container, you also need to add in padding to create some separation between the border and the content. That padding will impact how large the content inside of that container will be. Because of that, you might need to add padding to other containers around it as well. And that can affect how wide the entire section looks compared to other parts of the page.
And, even worse, there's no way to control the height of the border if you add it directly to a container that has some content. It's always going to go from the top to the bottom of its parent container.
There's a better way. And that is using an empty container with its width set as close to 0 as possible and adding a border to that empty container. That creates a vertical divider that takes up no space at all, but it still responds to the gaps set in your parent container. And because of that, it's always perfectly positioned and centered between your other elements.
On top of that, by doing it this way, you can also very easily control the height and position of your new vertical divider. And the best part? It's incredibly easy and incredibly quick.
#vertical #divider #elementor
CHAPTERS:
00:00 - Intro
00:27 - The problem with other ways of creating vertical dividers
01:48 - The proper way
04:37 - Adjusting the height and position
Get in touch:
https://www.reialesa.com/youtube/
Don’t be shy! Let me know what you’d like to see next, ask me anything related to design or just simply say hi.
Please note that some of the above are affiliate links, which means I earn a commission if you make a purchase, at no additional cost to you. Thank you very much if you decide to use them!