Create Tabs Sections

You are here:
Estimated reading time: 1 min

Adding tab content:

To create tabs in Elementor, create a new Section and look for the Tabs Settings options section eg: https://d.pr/i/jVILVz and enable Tabs.

As soon as you enable it, the outlines of the section will become green and the columns inside will be shown full-wide as rows.

Tabs section.

As you can imagine, each tab is a column. You can insert content or even an Inner Section to have more layout flexibility, eg:

Adding tabs (triggers):

Create a new section before or after (doesn’t matter) and inside it, add the element called “Toggle Boxes“.

In this element’s options, select the target type as “Tabs” and you should notice a new text field called Tabs ID. This is where the magic happens that connects this element to the Tabs section.

Now you need to go back to the Tabs section, open its options and look for the Tabs ID field, which contains the unique ID of this section. Copy and paste it back into the Toggle Boxes element’s Tabs ID field.

Screen Shot 2019-08-22 at 16.27.12.png

There isn’t any automatic way of determining how many tabs there are so you’ll need to make sure the same number of tabs (columns) is the same as the Toggle boxes Items.

Keep in mind that the functionality is disabled in Elementor edit mode, so you’ll need to preview the changes.

Here’s a screencast video: Creating the tabs and previewing them (proper video tutorials coming soon!)

Here’s a live example of tabs:

Screen Capture on 2019-08-22 at 16-33-40.gif
Amsterdam demo’s Just landed section.

Was this article helpful?
Dislike 0
Views: 52

Join the conversation