How to create and use the Elementor tab

When building a website, we need to plan the content layout very neatly. The advantage is that it can not only make the content easier to understand, but also benefit the user experience. If you use the page editor, try Elementor Tabs, which is definitely a good helper for layout planning.

Elementor Tabs, commonly known as tabs, is a very important element in the Elementor editor, which can help users quickly switch between different contents. Previously, such content might have to click links to different pages. Grouping related content into tabs can enhance the appearance and usability of the site. And even if you are a newcomer to WordPress, you can easily accomplish all this.

In this article, Lao Wei briefly introduced Elementor Tabs, sharing how to create and customize Elementor tabs, and some plug-ins to enhance tab functions.

If you are not familiar with the Elementor, or have only heard the name of the Elementor but have not used it, please check Elementor Themes , learn more.

Create an Elementor tab

We have installed the Elementor. Open the article and page to add tabs. In the Elementor editor interface, in the Elements on the left panel, search for and select the Tabs element. Drag to the appropriate location on the right page.

At this time, you can see the Tabs setting options on the left as follows:

You can enter the title and content of each tab, and click the+button to insert another tab. Under Type, select whether to display the tab horizontally or vertically.

Custom Elementor Tabs

Select a custom tab to modify its properties, including its title, box content, and icon. You can also change its position and alignment.
Under the style tab, you can see many options to customize the design and appearance of the Elementor tab. You can modify its text color and shadow, layout, spacing, etc.:

Found many options for customizing the design and appearance of the Elementor tab. Modify its text color, shadow, layout, spacing, etc.

The color and width of the border around the tab.

You can modify the text color of the tab title in Title. Change the font and text size by clicking Typography:

Elementor Tab Advanced Settings

• Advanced: Changes the margins and padding of tabs.
• Motion effect: add scrolling and mouse effects, more interactive and add portal animation.
• Transform: Flip, rotate, and scale widgets.
• Background: Select a standard background or hover to insert the transition.
• Border: Select a border type, such as solid or dashed.
• Mask: Select a fashionable design mask and apply it to the widget.
• Positioning: Adjust the width and position of the widget.
• Responsive: Changes affect the responsive visibility of preview or live pages.
• Attributes: Set custom attributes for the element wrapper.
• Custom CSS: inserted custom CSS
• Please note that if you use the free version of Elementor, you will not be able to access all these advanced settings. For example, you cannot add custom attributes, scrolling effects, or CSS.

After the introduction of the Elementor tab, the following describes how to use it.

Add an element to the tab widget

Using Elementor Pro, you can also insert other elements in the tab, such as adding Maps widgets in the Locations tab.

First create the map you want to use, right click it and save it as a Global widget.

Navigate to the Template Library template library, copy the newly created global widget code, enter the tab widget of the page and select the+Add Item button to add a new tab. In the text area of the container, paste the short code you just copied. Click Update or Publish below. Preview at the front of the website to see how the effect is. If you are not satisfied, continue to improve.

If the above tab functions can not meet your needs, there is another 8 Elementor tab plug-ins The advanced features of may suit you.