Creating A Custom Tabs Section Using Elementor Templates

A World Webscapes Tutorial

Get Started Now

How to use the shortcode of an Elementor Template Section in a Tab widget for a custom effect.

The Demo

Click on the tab titles to see this work.

Tab One

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop

Tab Two

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop

1 %
Support
1 %
Design
1 %
Support

Here Is How To Do It

Step One: Create A New Page Template With Elementor.

Step Two: Add Your Sections.

Here I have added three basic sections to my page. You can put anything you like in these sections but try to keep the section height consistent.

Step Three: Save Each Section As A Template

Right-click and save each section as a template of its own.

Step Four: Return To Your Template Library

Return to your template library. Copy and paste the section ID’s to notepad or whatever quick editor you prefer.

Step Five: Adding Your Templates To A Tabs Widget

Drag a tabs widget onto your page. Add the shortcode of the templates we copied to each tab. Note: Your content will not show until the page is saved.

Repeat This Step For Your Other Tabs.

Step Six: Save And View Your Page.

Save and view your page. You can make edits to the tab templates as needed and style your tab panels.