How to Style Tab Titles / Buttons in Elementor Without a Plugin (Pro and Free)

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

Home

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!

Sign Up for Updates and Special Offers

Jeff Kerby

CEO | KERBCO Web Services