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)

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

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)

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)

Tab 2 as Cakes (07:03)

Tab 3 as Doughnuts (07:06)

Tab 4 as Croissants (07:06)

And Tab 5 as Order Now (07:07)

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

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.

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.