Reversed Elementor Horizontal Tabs with Gradient on Hover + a Tiny CSS

Have you wanted to create a full screen elementor horizontal tabs navigation, or use horizontal tabs for navigation or create a gradient button on hover? or do you simply want to know how to add a css code for your buttons or sections in Elementor for free? then this tutorial is for you.

I’ll show you how to create a reversed Elementor horizontal tabbed hero using the Premium Addons and a tiny CSS code. I’ll also show you how to add a unique button gradient on hover and to reverse the tabs from initial (top) to bottom state using a little css code.

For this you will just need Elementor and the Premium Addons tab widget. However, if you have don’t Elementor Pro, you can even achieve this with less widgets and one plugin less.

Let’s get started!

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video

In your WordPress dashboard go to Pages, click Add New to create a new page (00:47)

C 8IvacQg0NvmTD8vRXUfJXXySZteAWgpLGe8t ayiRSbsADOzV v2zDncGOBgdVZP9343BOGJ3 CuCZKUNGhZQgiAXI6OxhewumKQvD wdhRlQbdTCgVD 6ZGrsymOKW ZA4Rn

Go ahead and name your page then click the Publish button on the right to publish it, then click on the Edit with Elementor button above your page name.

Inside your Elementor editor, go to your bottom corner and find the settings icon (01:01)

Also Read: Case Study: What is Site Structure and How To Get SiteLinks

L7eDvtsEWvl4FCK4hZbVBmM12GGwUPbr1WDFocXkx XGJ gDLLSN3FLCUKerNk QI13v4OkIkL0km6H1NQymbuTp0jWAoAwbzM9E07AfVT16XeTvPHcaLBM3efOhyZKT6KMzy0bF

In the settings go to Page and set it to Elementor Canvas.

Now click the (+) button to create a new section with 1 column (01:07)

nJ72q08RrrgyT45RO sc4q4pf09oKimI AURtzplZdTfQdKDpJzZAO6oO KE2csrbMKMCJTfDxB0AWkc oGiO san0E32Trrc7Y8PALb40oUNg9SFHv4KVnHoVy7LMe7N1kfhB

In the Edit Section area on the left and under Layout set Content Width to Full and the height Fit to Screen.

For your tab go back to the Widgets area and search for the Premium Addons Tab then drag it into the Canvas.

By default you’ll be given 3 horizontal tabs, but in the Edit Premium Tabs section on the left you can add other tabs or even change orientation from horizontal to vertical.

Keep the Tabs Type on horizontal, change Tab Style to Flipped. (02:03)

However, here I want the tabs to be below the text, but since I don’t have that setting in the edit area, this is where CSS comes in.

So to do this go back to the widgets search for the HTML widget and drag it into your section. This is where you can add the css code that will automatically reverse the tabs.

After reversing the tabs now it’s time to set them up some more.

Adding Content to the Tabs

First, you have to add content to the tabs and to do this:

For content you need to have some templates from your Saved Templates to use. You can create templates by going to your Elementor and under settings, make sure everything is on the Elementor canvas and that it’s responsive on all devices.

When you’re done just right click on your section and save it as a template, give it a name, then it will appear in your saved templates.

You can also add contact form 7 in your section and if you have Elementor Pro you can use the Elementor form and style it to your preference.

Back to your tab section, select the tab section and in the Edit Premium Tab area, go to Tab 1 and edit it to “Home”, add a Home icon to it, then under Content to show select Elementor Template as the content source and then choose which template to use.

Go to the other tabs and choose your templates to show and insert them in there.

Here I have Tab 1 as Home (07:02)

V0QeEQeI5pP8Of7LgN1Sx6X06Dp8a5ZbzHCXPNjOrmbzWnfeahQvBfbIi7R18XRIbA8e5ZCzwv3JsmmFFDRgNpPr0cSiqMSnBcqrMjPx96cpsyPbpnJsIdGT9A09LivR635T Y3i

Tab 2 as Cakes (07:03)

5IHNBxYP VbtAuV0IQoMADNLwqkzZLml7iXt1wL6oSxW6bnvu0 Zq2fYd8 aU9ukpgn3fCFFw6RbsMFDF1OMeCN8Q2RFwO7J1SGen2256H0 5Z HFT5LydJPYWAh3Pwv1Ky 2sbL

Tab 3 as Doughnuts (07:06)

r1X7uBCuU5iLw8 NP QIzGiy Cd9 fnobREDSoEHN8MjQLPTo tjFjkbuuSbf ln 4iIbgR0UatgrzRgv3K3qaDKBRTG nRYq

Tab 4 as Croissants (07:06)

gF KKP8AFQFtCKCBM5SNfXyxOnRkeuavs4atJq cx0JmO01 ZhUPEzTP4SFgWleRYU56ePMzHx0 GLdkgpdvBDUi JbQLINmofa mEF agdr2ZvdQ2l6mlvtoJRQQ36IKWMoqwsn

And Tab 5 as Order Now (07:07)

qmZVoj58PsRR 0ZoVfMZSylhFB E8XjLDj5jqsu7asMzH8I2gsE34GkfOiAY2 P znp9fGPvm7SmCmDGQTbcICmn GRtYXzl8Tcc ol96RuUmOy ZTebBsReGrY9zVR2FEXi mIu

Elementor Horizontal Tabs Styling

Now that your tabs are all set up, you have to do some styling for the tab buttons. 

To do this:

Get back to your editor and with the Home tab selected, go to Style and give it a Background color of your choice, set the Padding to 25 for bottom and 25 for top.

When you go to Hover, there’s no option to add gradients so you have to add some code for this.

Adding Gradient to the Horizontal Tabs

Go to the navigator on the right and select the HTML widget, inside this paste the CSS code for hover gradient. Now when you hover over the tabs they show a gradient.

Code snippet if you’re using the HTML Widget

<style>
    .premium-tabs {
        display: flex;
        flex-direction: column-reverse;
    }
    
     .premium-tab-link:hover {
         background-image: linear-gradient( 109.6deg,  rgba(255,174,0,1) 11.2%, rgba(255,0,0,1) 100.2% );    
    }
</style>

Code Snippet if you’re adding CSS directly to Elementor Widget Custom CSS

.premium-tabs {
        display: flex;
        flex-direction: column-reverse;
    }
    
.premium-tab-link:hover {
         background-image: linear-gradient( 109.6deg,  rgba(255,174,0,1) 11.2%, rgba(255,0,0,1) 100.2% );    
    }

If you want more gradient options you can just go to the website called cssgradient.io  (08:41)

To Read: How to Add Floating Social Icons in Elementor

Lf4qxy486yEAyKjvKFuhhO2WdVE j5FK8Q4OMTZfux3eAvISYmScZONRvV7HGYSaxehhcVNYPHDPMuVthpSlaQGLOrMlZHpJy3soqXg MFYNz4TOPDjgE iIoCCkjPCdW PVVXft

And when you click on the Background option, you’re given a bunch of gradient options that you can choose from, and you are even able to edit them to your liking.

Go back to the Premium Tabs and under Style go to Active, change background color to off-white. Next is the Icon, change color to off-white as well and Active color orange, then under Title change color to white, Active color to orange and Hover color off-white as well. 

Now update and preview.

elementor horizontal tabs

With this, your elementor horizontal tabs navigation is complete with a gradient on hover, and fully responsive on mobile devices. And you can do this with or without Elementor Pro.

For any comments or questions let me know in the comments section below. And please subscribe to the youtube channel and to my newsletter for more tutorials.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users