Elementor Tabs Titles to Progress Steps Styling

Elementor Tabs Titles to Progress Steps Styling

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

@supports (-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0) ) or (clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0) ) {
    
.progress-tabs .elementor-tabs-wrapper {
    display: flex;
    overflow: auto;
    max-width: 90vw;
}

.progress-tabs .elementor-tab-title.elementor-tab-mobile-title {
    display: none;
}

.progress-tabs .elementor-tab-title.elementor-tab-title {
    width: 100%;
    border: none;
    border-width: 0;
    text-align: center;
    color: #333333;
    min-width:140px;
}

.progress-tabs .elementor-tab-title:nth-child(1) {
    -webkit-clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%);
    border-radius: 10px 0 0 10px;
    padding-right: 30px;
}

.progress-tabs .elementor-tab-title:last-child {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 16% 50%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 16% 50%);
    border-radius: 0 10px 10px 0;
    padding-left: 30px;
}

.progress-tabs .elementor-tab-title:not(:last-child) {
    margin-right: -20px;
}

/* Creating the pseudo border, first have to undo Elementors native styling */

.progress-tabs .elementor-tab-desktop-title.elementor-tab-title.elementor-tab-title.elementor-tab-title.elementor-tab-title:after,.progress-tabs  .elementor-tab-desktop-title.elementor-tab-title.elementor-tab-title.elementor-tab-title.elementor-tab-title:before {
    border-width: 0;
    bottom: initial;
    top: 0;
    left: 0;
    z-index: -3;
    height: 100%;
    width: 100%;
    content: "";
    position: absolute;
}

.progress-tabs .elementor-tab-title:after {
    background-color: white;
    -webkit-clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%, 16% 50%);
    clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%, 16% 50%);
    transform: scale(0.93);
}

.progress-tabs .elementor-tab-title:before {
    background-color: #5bab61;
    -webkit-clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%, 16% 50%);
    clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%, 16% 50%);
}

.progress-tabs .elementor-tab-title:nth-child(1):after {
    background-color: white;
    -webkit-clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%);
    border-radius: 10px 0 0 10px;
    transform: scale(0.93);
}

.progress-tabs .elementor-tab-title:nth-child(1):before {
    background-color: #5bab61;
    -webkit-clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%);
    border-radius: 10px 0 0 10px;
}

.progress-tabs .elementor-tab-title:last-child:after {
    background-color: white;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 16% 50%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 16% 50%);
    border-radius: 0 10px 10px 0;
    transform: scale(0.93);
}

.progress-tabs .elementor-tab-title:last-child:before {
    background-color: #5bab61;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 16% 50%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 16% 50%);
    border-radius: 0 10px 10px 0;
}

.progress-tabs .elementor-tab-title.elementor-active:after {
    background-color: #5bab61;
}

}

Enjoy your Elementor tabs Arrow steps progress!

I really hope you found this useful.

Cheers!

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

Leave a Reply