help center

On this page

Tabs with nested containers

Last Update: September 19, 2023

Tabs widget with nested containers

For users who’ve activated the container and nested elements experiments, (introduced in Elementor 3.10) the Tabs widget has become far more powerful with three major upgrades:

  • Nested elements – Tabs can hold widgets and other elements, allowing you to build complex layouts within an individual tab.
  • Improved tab styling – adjust the layout, positioning, and styling of tabs, including the use of icons in tabs. 
  • Improved responsive settings – Choose at which breakpoint the tabs’ display will turn to accordion style.  

Nesting elements

To use nested elements in tabs:
1 2 Tabs with nested containers 9

  1. Drag the Tabs widget to the canvas.
  2. Select an element and drag it to the tab – in this example we’ll place a Text Editor widget in a tab.
    2 2 Tabs with nested containers 11

Now, let’s try for something a bit more complex for tab #2 – a tab with a heading, an icon box and a countdown- aligned in a row. 

  1. Click Tab #2.
  2. Drag a container into tab #2.
  3. In the container settings, change the direction to row.
  4. Click the widget button.
    3 2 Tabs with nested containers 13
  5. Drag the Heading widget to the tab’s container.
  6. Click the widget button and drag the Icon Box widget to the container in the tab.
  7. Click the widget button and drag the Countdown widget to the container in the tab. Your tab should look something like this (you may have to adjust the widget sizes):
    4 2 Tabs with nested containers 15

Check here for more information about how many containers you should be using.

Nested Tabs Settings

Learn how to add content and style to your nested tabs.

Content – Tabs

In the Content tab, expand the Tabs section to configure what appears in your tabs. 

Content tabs Tabs with nested containers 17
Tabs with nested containers 35

Tabs Items

 Tabs that make up the widget. 

  • Click the copy icon () to copy a slide. 
  • Click the delete icon () to delete a slide.

Title

Enter the tab name here. Set the size, font, and color with typography.

Icon

Add icons to the title of your tab.  

  • No icon icon Tabs with nested containers 19 (default):  select this if you do not want any icons to appear. 
  • upload svg icon Tabs with nested containers 21: select this to upload an svg icon
  • upload icon from the icon library Tabs with nested containers 23:  select this to open the icon library 

Selecting option 2 or 3, opens a sub-menu that allows you to choose a 2nd icon that appears when clicking the tab.  

If you did not add a title, only the icon appears. 

If you did add a title, the icon appears according to the position set in the Styles tab (see below).

CSS ID

Tag individual elements on a page. This allows you to link to this specific element.

Add Tab

 Create a new tab.

Direction

Set the direction of the tabs to either column or row.

Note: If you set the direction to row, a slider appears allowing you to adjust the width of the tabs in either PX or %

You can also  adjust the alignment of the text/icon tab title to the right, left or center.

Justify

Determines the spacing between items in the container and the items’ distance from the container’s border.

Align Title

Places the title of the tab at the right, left or center of the tab.

Content – Additional Settings

In the Content tab, expand the Additional Settings section to determine your tab’s layout and responsive settings.

Contnent Additional settings Tabs with nested containers 25
Tabs with nested containers 36

Horizontal scroll

When you add more tabs than are visible on screen, the new tabs are added below the existing tabs.

Enable Horizontal Scroll to place these additional tabs next to the existing tabs, and not below them. Visitors must scroll horizontally in order to access these tabs.

Breakpoint

In mobile and tablet view, by default, if using a smaller screen, tabs automatically appear vertically to accommodate the smaller screen. 

From the Breakpoint menu, select either the breakpoint breakpoint for when the visitor is using a mobile (less than 767 pixel wide screen) or for a tablet (less than 1024 pixel wide screen).  

Choose None  to disable this feature. This means that visitors wil scroll horizontally to see all the tabs(not recommended).

Style – Tabs

In the Style tab, expand the Tabs section to configure how the tabs appear. 

Style tab Tabs Tabs with nested containers 27
Tabs with nested containers 37

Gap between tabs

Use the slider or the number field to adjust the distance between tabs. For details, see  System Measurements.

Distance from content

 Use the slider or the number field to adjust the space between the title of the tab and the contents of the tab. For details, see System Measurements.

Normal/Hover

  • Normal: (default) determine how the tabs appear.
  • Hover: (optional)determine how the tabs appear when you hover over them.
  • Active: (optional) determines how the tabs appear when selected. 

If you selected Hover, an additional setting appears called Transition Duration. In this setting, determine how long it takes for the color of the tab to gradually change.  

Background Type

Choose a background. For details, see Backgrounds.

Border Type

Choose a border type. For details see, border types.

Shadow

Add texture to your text with shadow. For details, see Shadows.

Note: If you set the direction to row, a slider appears allowing you to adjust the width of the tabs in either PX or %

You can also  adjust the alignment of the text/icon tab title to the right, left or center.

Border Radius

Make the corners of your element round  Learn more about border radius.

Padding

Add padding. For details, see Padding and margins.

Style – Titles

In the Style tab, expand the Titles section to configure how the tab titles appear. 

Style tabs titles Tabs with nested containers 29
Tabs with nested containers 38

Typography

Choose how your text will appear to visitors. For details, see Typography.

Normal/Hover/Active

  • Normal:  determine how the dots appear by default. 
  • Hover: determine how the navigation  appears when you visitors hover over them. 
  • Active: determines how the tabs appear when selected.

Color

Choose a color: either use the color picker or a global color.

Shadow

Add texture to your text with shadow. Learn more about Shadows.

Stroke

Color the outline of your text and images. Learn more about Text Stroke.

Style – Icon

In the Style tab, expand the Icon section to configure how icons appear. 

Style tab Icon Tabs with nested containers 31
Tabs with nested containers 39

Position

Determines whether the tab’s icon will be above, under, to the right or left of the tab title.

Size

Use the slider or the number field to increase and decrease the size of the icon. Learn more about System Measurements.

Spacing

Use the slider or the number field to increase and decrease the area between the tab’s name and the icon. Learn more about System Measurements.

Normal/Hover/Active

  • Normal:  determine how the dots appear by default. 
  • Hover: determine how the navigation  appears when you visitors hover over them. 
  • Active: determines how the tabs appear when selected.

Color

Choose a color: either use the color picker or a global color.

Style – Content

In the Style tab, expand the Content section to configure how the area below the tabs appears. 

Style tab Content Tabs with nested containers 33
Tabs with nested containers 40

Background

Choose a background. For more Learn more about Backgrounds

Border Type

Choose a border type to surround your element. Learn more about Border Types.

Border Radius

Make the corners of your element round. Learn more about Border Radius.

Padding

Add padding, for details, see Padding and margins.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article