Elementor Vertical & Horizontal Tabs Using Templates

Table of Contents

Let's learn how to use templates as content for your Elementor tabs element! We will be using essential addons for elementor for this.

We will also learn how to make these Elementor tabs horizontal, vertical, and below the tabs content.

To begin with, download and install Essential Addons

Their Advanced Tabs element is available with the free version of the plugin.

Download it from the WordPress plugins repository.

Elementor Vertical & Horizontal Tabs Using Templates 1

Then, create your Elementor tabs element

This is the right element.

Elementor Vertical & Horizontal Tabs Using Templates 2

Use the options on the left for the tabs element settings and styling.

Elementor Vertical & Horizontal Tabs Using Templates 3

You will find the option to have horizontal or vertical tabs layout, as well as the option to use templates as tab content.

Elementor Vertical & Horizontal Tabs Using Templates 4

(optional) Use this code to move the tabs titles to the bottom

Use this CSS code to move the tab titles below the tab content.

Elementor free users, see how to add custom CSS with Elementor free article.

@media (min-width: 768px){    
selector .eael-advance-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
}

(Also optional) Use this code to create a navigation between the tabs, directly in the content

This will allow you to create a button to go back and forth between the different tabs, without needing to click on the tab title.

Give your EA tabs element the class name 'navigatable',under Advanced > CSS Classes.

Then, add this code to an HTML element, anywhere on the same page.

Elementor Vertical & Horizontal Tabs Using Templates 5

<style>
.upcoming_content, .prev_content{
cursor: pointer;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.navigatable .upcoming_content').click(function(){
$('.navigatable .eael-tabs-nav li.active').next().click();
});
$('.navigatable .prev_content').click(function(){
$('.navigatable .eael-tabs-nav li.active').prev().click();
});
});
});
</script>

Finally, add buttons in your templates to navigate between the tabs. Give them the class 'prev_content' or 'upcoming_content', depending on the action you want!

Finally, enjoy your versatile Elementor tabs!

Let me know if everything works for you!

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments