The CSS required to do this is pinned 📌 to the top comment.
🧙 Wizards of Webcraft – A series where I’ll be reviewing your websites – https://www.reialesa.com/wow/ Apply now!
0:00 – Intro
0:18 – Limitations of this method
0:45 – How to use template shortcodes
1:25 – Preparing the tabs
2:32 – Adding in the CSS
3:05 – Finding the ID of the tabs
3:37 – Switching out the IDs
3:53 – Removing the border
4:11 – Explaining the CSS
5:30 – Styling the active tabs
Tabs in Elementor can be pretty limited. Templates fix this, somewhat, despite being a little buggy, but the tab titles, or buttons, whatever you want to call them, are still very basic in terms of design options. You can use plugins, but that’s not always the best option. Well, we can avoid using a plugin and still get very good looking titles just by adding in a little bit of CSS. I recommend using Mozilla Firefox for this, because their inspector is very easy to use. #Elementor #Tabs #TabTitles
Get Elementor Pro: https://be.elementor.com/visit/?bta=27702&nci=5383
Hosting I love and recommend for most clients and for those on a budget: https://www.hostg.xyz/SHBd2
The things I design with:
Adobe (Illustrator, Photoshop, InDesign, XD): https://clk.tradedoubler.com/click?p=264326&a=3244467&g=1&epi=YouTube&url=https%3A%2F%2Fwww.adobe.com%2Fcreativecloud%2Fplans.html
Get in touch:
https://www.instagram.com/reialesacom
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!