Elementor Vertical & Horizontal Tabs Using Templates

August 9, 2020

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.

Then, create your Elementor tabs element

This is the right element.

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

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

(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.

<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!