Creating A Custom Tabs Section Using Elementor Templates

tabtut

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 %
Beer

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

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest