Priority Support
Help Center > Editor V4 > Elements > Tabs Element

Tabs Element

Last Update: December 17, 2025

This post has been translated using machine translation, which may result in minor inaccuracies or differences in wording compared to the original. We apologize for any errors or ambiguities. Please feel free to contact us if we can clarify anything for you.

Who can use this feature:
This article is for Editor v4 users. If you’re using Editor v3, check out the relevant article here: Image widget

Add and delete the element

Image

To access and use a widget:

  1. In Elementor Editor, click +.
    All available widgets are displayed.

  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

To delete the widget:

  1. On the canvas, select the element by clicking it.
  2. Press the delete key on your keyboard. For more information, see Delete elements from a page.

What is the Tabs element?

The Tabs element lets you build a webpage which allows visitors to easily switch between different content displays. It allows you to present visitors with more content in less space.

See all the options available with the Tabs element.  

Common use case

Alex is building a website for a chain of cafes. On the site’s home page they want to use the Tabs element to create a content area for each of the branches.

Image

Additional use cases 

  • FAQs
  • A news site where you want to display different categories of news in each tab.
  • Tabs that describe, and link to, different sections of your website. journey.

Add a Tabs element: Step-by-step

  1. Add the Tabs element to the canvas. For details, see Add elements to a page.
    The options for the Image element appear in the left panel.
    Image
    By default, the Tabs widget has three tabs. You can add or delete tabs by using the controls on the panel. For details see the Settings section below. 
    For this example, our chain has three branches – Downtown, University and West End.

    With the Tabs widget, each tab can have its own style and content. For this example, we’ll give each tab a unique name and background.

  2. To make our navigation easier, let’s change the names of the tab triggers. This will not affect the name that appears to visitors. Click the field labelled Tab 1 trigger.
  3. In the name field, change the name to University.
    Note
    This is also where you can use the Default toggle to set which tab will be open when visitors first view the page.

    Image
  4. Change the names of the other two tabs to Downtown and West End. 
  5. Click the center of Tab 1. This opens a paragraph element inside the tab. 
    Image
    Tip
    It may be easier navigating tabs by using the structure window. For details, see Use page structure to navigate your page.
  6. Enter University on the Paragraph box.
    Image
  7. Do the same to change the name of the other tabs to Downtown and West End.
    Image
    Let’s add a unique background to each tab. For this example we’ll add a different image for each tab.
  8. Select the University tab by either hovering over the tab and clicking the icon or by clicking University in the structure window.
    Image
  9. Click the Style tab. 
    Image
  10. Insert and image as the  Background. For details, see Style tab- Background.
    Image
    Now let’s add content to the tab. 
  11. Select the Tab 1 Content area by selecting it from the structure window. 
    Image
  12. Add a Paragraph element to the Tab 1 Content area. For details, see Add elements to a page.
  13. Add the branch details to the Paragraph element. For details, see Paragraph element.
    Image
    Note
    You can also add headings, images and any other elements to this area.
  14. Repeat this for the other tabs.
    Finally, we’ll add some effects to the tabs to help with navigation and UI. 
  15. Select the University tab trigger.
    Image
  16. Delete the background image as it will interfere with these effects.
  17. Create a class called tab_colors with the following characteristics:
    1. Hover: red background
    2. Active: light blue background
    3. Selected: yellow background
      For details, see Classes in Elementor and Element states.
  18. Add the class tab_colors to all the tab triggers.
     Image
    Note
    Now when you roll over or select tabs they will change color. The Active color may be difficult to detect as it only applies to the moment visitors click on the tab.

    Image
    Now let’s look at how the tabs would look if they were in a vertical, accordion style layout. 
  19. Select the Tabs widget.
  20. Click the Style tab.
  21. Open the Layout section.
    Image
  22. Change the tabs to Row.
    Image
  23. Select Tabs menu.
    Image
  24. Change Tabs Menu to column.
    Image
    The tabs are complete.

Settings for the Tabs element

You can customize your elements using content and style, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this element.

Image

Click the Plus sign to add a tab.

Click one of the Tab trigger fields to change the name of the Tab trigger.

Click one of tab trigger fields to use the toggle and set it as the default tab. The default tab is the tab that is open when visitors first view the page. 

Assign an ID to the element so you can target it with custom code.

Attributes are used by developers to target certain elements in order to customize them. For details, see Add and delete attributes.

Show or hide elements depending on different conditions. For details, see Show and hide elements on a page.

Image

See the individual articles on Style options:

On this page

Share this article

Image
Hosted with