Elementor Tabs Titles to Progress Steps Styling

Elementor Tabs Titles to Progress Steps Styling

Level up your game with the CSS Course for Elementor Users

Table of Contents

In this video, I go through the entire process of styling the Elementor Tabs element as a kind of Arrow Steps Progress design. Someone in the Facebook community shared a screenshot with this design, and I thought I would give it a go.

This is a new format for me so let me know if you enjoy it!

Here is the live demo of what you will get with the code below. Note that I haven't worked on the tabs content at all, as it would be very project specific. The goal here was about the tabs title.

CSS code to make the Elementor Tabs element a Step Progress

You can simply copy paste this whole code in your project, and it should work directly. Note that it also works on mobile.  There the tabs titles are horizontally scrollable.

Important: Give your tabs element the class name "progress-tabs" under the Advanced tab.

Elementor Tabs Titles to Progress Steps Styling 1

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Tabs Titles to Progress Steps Styling tutorial 
 * Found at this URL https://element.how/elementor-tabs-titles-to-progress-steps/ 
 */ 
</script>

Extra: many more tabs features

If you would like even more features, check the Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Images Premium tutorial. This is what that premium tutorial shows you:

Features:

  • Polyvalent: Works for the WordPress Menu, Taxonomy Filter and Tabs elements
  • Arrow Control: Left and right arrows to scroll (accessible)
  • Reactive Arrows: Arrows become unclickable and lower opacity if you can't scroll in that direction
  • Conditional Arrow Display: The arrows only show if horizontal scrolling is possible
  • Conditional Gradients: Left and right gradients in the directions where scroll is possible
  • Image Design: Optional circle image design, with active styling and transition
  • Great UX: Automatically scrolls to the center of the clicked item
  • PageLoad Smart: Automatically scrolls to the center of the current menu item (if one of them is the current page), current taxonomy filter, or current tab
  • Open Tab: Scroll to and open the proper tab on page load through an ID in the URL (site.com/#example-id)
  • Auto Scroll Back Up: On Tab Switch, automatically scroll back up to the top of the tabs element. Useful if your tabs titles are sticky

Enjoy your Elementor tabs Arrow steps progress!

I really hope you found this useful.

Cheers!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2701 Elements right here:

Checkout the Elementor Addon Finder directly

Leave a Reply