< All Topics

Tabs/Tours are used to display your lengthy content in a more creative way. This improves the user experience for your site visitors as they don’t have to keep scrolling endlessly to read the content.

Pro tip
Make your Tabs/Tours more interactive by connecting it to our Any Carousel widget. It will help you display more content in an artistic way thereby improving user engagement. We have explained how to do this at a later point in this article.

How to use the Tabs/Tours Widget of The Plus Addons For Elementor

The Tabs/Tours comes with two different layouts i.e. Horizontal and Vertical. Let’s understand how to use this widget in the tutorial below. 

Table Of Contents

General Steps

Search for the Tabs/Tours widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Content / Adding Tabs

To help you get started, we have created two tabs by default. You can start editing those or click on the Add Item button. Now, let’s add/edit content in the Tab

Title & Content

Add your Tab title here.

Add Title and Content in the Tabs and Tour Widget.

Content Source

Select the source of your content from the dropdown. You get two options i.e. Content or Page Template.

Content Area

Add your text content here.

Backend Visibility option in Tabs/Tours

If disabled, the Template will not visible/load in the backend for better page loading performance.

Show Inner Icon

Slide the button to show the Inner Icon.
Select your preferred icon library from the dropdown. We have provided two icon font libraries i.e. Font Awesome and Icons Mind.
If you don’t want to use the icon library, you can also add an image-based icon by selecting the Image option from the dropdown. Click the + icon to add your image. You can either select a pre-uploaded image from the Media Library or you can a new image from your Desktop.

Image Size
Select your preferred image size from the dropdown.

Show inner Icon in the Tabs and Tour Widget.

Show Outer Icon

The Outer Icon is displayed in between the tabs. Follow the exact same steps as mentioned above to set the Outer Icon.

Unique ID

Add your Anything Carousel ID here to connect your Tabs/Tours with the carousel.

Layout

Choose your layout style from the dropdown. It can be either Horizontal or Vertical.

Navigation Position

If your tab layout is Horizontal, you can set the navigation position either up or down.
If your tab layout is Vertical, you can set the navigation position either left or right.

Swiper Effect

If you have a lot of tabs that don’t fit on the screen, enable the Swiper Effect feature. It will add a scroll using which your visitors can easily scroll through the tabs. Very useful feature indeed.

Use Swiper effect in Tabs/Tours widget.

Default Active Tab

Set which tab you want to be active. Select the tab number from the dropdown and it will make the tab as active.

Connection Carousel ID

Set which tab you want to be active. Select the tab number from the dropdown and it will make the tab as active.

2. Style

The Style tab is used for customizing the appearance of all the Tabs & Tours widget components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View Style Tab Tutorial

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?