DriversRecommendedOutdated drivers can make a good PC feel brokenScan driver issues before chasing fixes manually.Scan NowHalloween DealsAmazon USHalloween week deals: useful picks before month-endAmazon US: current deals, useful picks and tech finds.Check DealsWindows FixRecommendedWindows errors stealing your time? Find the fix fastScan stability, cleanup and performance issues.Fix Now×
Skip to content
World desk11 min

How to Add Tabs to a WordPress Page With Elementor

A complete Elementor walkthrough covering the standard Tabs widget, Nested Tabs with widgets and containers, responsive accordion behavior, plan requirements, and troubleshooting.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

To add tabs in Elementor, open a page in the Elementor editor, drag the Tabs widget onto the canvas, then edit each tab’s title and content. Use Add Item for more tabs, and use the Style and Advanced panels to control orientation, typography, colors, spacing, borders, and responsive behavior. The basic Tabs widget is listed in Elementor’s free widget set; nested layouts and other advanced features can have different plan or capability requirements.

Choose the right Elementor tab type first

Elementor has two practical ways to organize tabbed content. Choosing correctly before you build prevents a common problem: creating a simple text tab and then discovering that you need a complete layout with buttons, images, or other widgets inside it.

As an Amazon Associate I earn from qualifying purchases.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Standard Tabs widget

The standard widget is intended for tab labels with text or basic content. Each item has a title and a content area. It is the quickest option for specifications, short explanations, policy sections, feature lists, or other content that does not need a separate visual layout.

Nested Tabs

Nested Tabs lets each tab contain additional Elementor widgets and containers. That means one tab can include headings, icon boxes, countdowns, images, buttons, and other Elementor elements instead of one undifferentiated text field. Nested layouts may require Elementor’s nested-elements capability to be enabled in the editor. If you need a different arrangement in each tab, choose this approach from the beginning.

#1 Best Overall
Sale
TOZO A1 Wireless Earbuds Bluetooth 5.3 Light Weight in Ear Headphones | IPX5 Waterproof,2 Mics for AI Calls,Immersive Premium Sound Bass Headset with Charging Case,32 EQ via App Black
  • [Ultra-Lightweight Ear Buds Designed for Small Ears] Each earbud weighs only 3.7g and features a compact, ergonomic in-ear design made especially for small ears. Secure, low-profile, and comfortable for workouts, all-day wear or overnight sleeping.The ultra-slim profile sits flush in your ear with no hard edges poking or rubbing, so you can even sleep on your side without discomfort.
  • [Immersive Stereo Sound with TOZO OrigX Technology] TOZO OrigX tuning delivers clear vocals, balanced mids, and natural stereo sound for music, podcasts, and videos.
  • [Long Battery Life for Daily Use] Get up to 7 hours of playtime on a single charge, with up to 32 hours total using the charging case—ideal for workdays, commuting, and extended listening sessions.
  • [Bluetooth 5.3 & Stable Connection] Bluetooth 5.3 provides fast pairing, stable wireless performance, and reduced dropouts as you move around home or office.
  • [Deep Bass with Clear Vocals] High-performance drivers produce punchy bass while keeping vocals clean and detailed for everyday listening.

Install Elementor and open the page

Install the editor

Elementor is available as a free WordPress plugin. In WordPress, go to Plugins > Add New, search for Elementor, install it, and activate it. WordPress also supports uploading the plugin package from the same installer. The official plugin listing describes both installation methods and identifies nested elements such as Tabs and Accordion: WordPress.org Elementor listing.

Open an existing page or create one

  1. In the WordPress dashboard, open Pages and select an existing page, or choose Add New.
  2. Click Edit with Elementor. If you created a new page, give it a title and launch Elementor before adding the tabs.
  3. Wait for the editor canvas and widget panel to finish loading. Keep the page in draft while you build, especially if the page is already public.

Add a standard Tabs widget step by step

1. Find Tabs in the widget panel

Click the plus or add control that opens Elementor’s widget list. Search for Tabs, then drag the widget onto the section or container where the tabbed content should appear. Elementor describes the widget as a way to “organize and divide content into tabs horizontally or vertically.” You can read the current control descriptions in the Elementor Tabs widget documentation.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

2. Edit the first tab

With the widget selected, open the Content panel. Each tab item has a title and a content field. Replace the sample title with a concise label that tells visitors what they will find, then enter the corresponding text in that item’s content area. Keep the title specific: “Delivery details” communicates more than “Tab 2.”

3. Add, delete, and reorder items

Use Add Item to create another tab. Open each new item, enter its title, and add its content. Remove an item from its item controls when it is no longer needed. If the editor exposes drag handles or reorder controls, arrange the items in the sequence a visitor should read them; put the most useful answer first rather than forcing people to open every tab.

4. Set the direction and alignment

Use the widget’s layout controls to choose a horizontal or vertical presentation where those options are available. Horizontal tabs place labels in a row; vertical tabs place them beside the content and can be easier to scan when labels are longer. Set alignment so the labels fit the surrounding design. Check the result at the content width you actually use, not only in the full desktop preview.

5. Style the widget

Open Style to adjust the tab labels and panel. Typical controls include text color, active-state color, typography, borders, divider lines, background colors, and spacing. Use Advanced for additional margins, padding, motion, custom positioning, and responsive settings exposed by your Elementor version. Change one group of settings at a time and preview the active and inactive states so the selected tab remains obvious.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #2
Sale
Smart Watch for Men Women Compatible with iPhone Samsung Android Phone 1.69 inch Full Touch Screen IP68 Waterproof Bluetooh Fitness Tracker Heart Rate/Sleep Monitor (Black)
  • 【IP68 Waterproof Multifunctinal Smart Watch】Torjalph fitness activity tracker smart watch is IP68 waterproof technology ,you can wear it when swimming,handwashing,it's rain-proof which means that you perform multiple exercise modes outside without worrying about sweat or rain corroding your fitness smart watch,and this watch equipped with a 230 mAh large capacity battery magnetic charging ,and this sports activity tracker watch can be used 5-7 days If fully charged.
  • 【Larger 1.83'' Full Screen Watch & Multi-dial Selection】1.83 inch full HD color touch screen smart watch for men / women provides excellent 240*284 resolution image quality ,This Bluetooth smart watch offers a better touch experience and remarkable immersion and ,more than 200 watch faces for you to choose from App"Da Fit ", you can change the dial style according to your mood to wear keeping the world on your wrist
  • 【Accurate Activity Tracker Smart Watch 】sports watch activity tracker uses sweat and dust resistant breathable silicone strap, our Fitness Tracker Smart Watch for Android iOS Phones supports 12 sports modes,walking,running,bicycle,swimming,badminton,basketball,football,rope skipping. This bluetooth calls smart watch for men women is lightweight and stylish, bringing more convenient and relaxing sports experience while also providing more protection.
  • 【Your 24 Hour Personal Daily Health Monitor】Fitness watch for women men full touch screen IP67 waterproof bluetooth smartwatch for Android iOS Phones with heart rate blood pressure monitor multifunction Andriod smart watch with steps counter sleep monitor sports fitness watch, monitoring blood oxygen saturation allows you to understand your physical condition in real time to track fitness progress ,to know your health status in time.
  • 【More Functions Bluetooth Call Smart Watch】This fitness activity smart watch full screen for iPhone and Android phones includes a bunch of new features including:The bluetooth smart watch can hang up the phone, receive and display WhatsAPP /Text /Facebook /Twitter /Messenger reminder.Support sedentary reminder, alarm clock, stopwatch, timer,weather information,music control, remote camera control compatible with Android 5.0 and above or iOS 9.0 and above smartphones.

6. Preview, save, and test

  1. Use Elementor’s responsive preview to inspect desktop and mobile widths.
  2. Click every tab trigger in the preview. Confirm that the correct content appears and that the active state is visible.
  3. Save as a draft or click Publish when the page is ready.
  4. Open the public URL in a separate browser tab and test again. The editor view can hide spacing, font-loading, or theme conflicts that appear on the live page.

Put widgets and containers inside each tab

When nested content is the better choice

Use Nested Tabs when a tab needs independent layout controls. For example, a “Features” tab might contain a heading, an icon box row, and a button, while a “Pricing” tab might contain a comparison layout. A standard text field cannot provide that structure as cleanly as nested Elementor elements.

Enable nested elements if the editor requests it

Elementor’s nested Tabs documentation notes that nested layouts may require the nested-elements capability to be activated. The exact location and label can vary between Elementor releases, so use the capability prompt or the editor’s feature settings shown by your installation. After enabling it, reload the editor if requested and insert the nested Tabs element again if the widget list does not update.

Build the first nested tab

  1. Add the nested Tabs element to the page from the widget panel.
  2. Open the first tab item in the Content panel and give it a descriptive title.
  3. Click into that tab’s inner container or content area.
  4. Drag in the widgets you need, such as a heading, image, icon box, button, or another container.
  5. Configure each widget normally. Its typography, spacing, link, and responsive controls remain separate from the tab trigger settings.
  6. Repeat the process for every tab. Keep related widgets inside the corresponding tab rather than placing them below the Tabs element, where they would appear for every tab.

Keep nested layouts maintainable

Give each tab a clear purpose and avoid duplicating the same widget in several tabs unless visitors genuinely need it in each context. Use containers to group related elements, then adjust container padding before applying individual margins. This makes later global design changes easier and reduces accidental differences between tabs.

Control orientation, spacing, and responsive behavior

Horizontal versus vertical tabs

Horizontal tabs work well when labels are short and there are only a few choices. Long labels or many items can wrap, collide, or push the content too far down. Vertical tabs give labels their own column and are often easier to scan for a longer list. Whichever direction you choose, check the active indicator, keyboard focus appearance, and the distance between labels at the narrowest desktop width you support.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Typography and active states

Set a readable font size and line height for both the labels and the panel text. Give the active label a clear visual difference using color, weight, an underline, border, or background. Do not rely on color alone: a visible indicator or weight change helps people who cannot distinguish subtle color differences.

Spacing and panel height

Use padding inside the panel to separate text from its border, and use consistent gaps between nested widgets. If one tab contains substantially more content than another, test what happens when visitors switch between them; sudden height changes are normal, but cramped content or an unexpected horizontal scrollbar indicates that a child widget needs responsive adjustment.

Rank #3
New Bee Guitar Cable 10ft Electric Instrument Bass AMP Cord
  • [Low Noise High Fidelity] New bee guitar cord with 22AWG oxygen-free-copper center conductors provides enhanced signal transfer, the PVC insulation material and the high-density stranded copper double shield provide noise rejection for quiet operation
  • [Ideal for Choice] New bee 1/4 straight and right angle metal connectors, ensures a secure connection in any instrument, pedal, or amp jack. L shape great fro on stage guitar stands
  • [Wide Compatible] Suitable for mixer, power amplifier, microphone, effector, decoder, equalizer, electoronic organ, electric guitar, electric bass and other electronic equipments. Widely used in the installation of smart home, karaoke speaker, professional stage audio, etc
  • [Easy Disassemble] Making incidental repairs quick and easy! Very nice, flexible cable
  • [Dont Hesite to Order] 24 hours customer services and professional technology team are standing by

Turn tabs into an accordion on mobile

Elementor’s Nested Tabs documentation includes a responsive breakpoint setting that can make tabs display as an accordion. An accordion stacks each trigger and reveals its content below it, which is usually more practical than squeezing many labels into a narrow row.

Choose the breakpoint

  1. Select the Nested Tabs element.
  2. Open its responsive or layout controls and locate the option for the breakpoint at which tabs become an accordion.
  3. Choose the breakpoint that matches your design. If most phones show cramped labels at the smallest preview width, switch before that width rather than relying on horizontal scrolling.
  4. Preview just above and just below the breakpoint. Confirm that the trigger changes presentation only where intended and that the content remains readable.

Test accordion interaction

Open and close every item on a phone-sized preview and on a real mobile browser. Check that the heading or label remains visible, that the open panel does not hide behind a sticky header, and that buttons and links inside the panel can be reached without awkward scrolling. If your design requires several items to remain open simultaneously, verify that the chosen Nested Tabs behavior supports that interaction before publishing.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Standard Tabs versus Nested Tabs

Implementation Content inside each tab Layout options Responsive behavior Plan or capability context
Standard Tabs widget Title plus text or basic content Horizontal or vertical where offered; alignment and style controls Responsive styling controls; test desktop and mobile views Listed in Elementor’s Free widget set
Nested Tabs Additional widgets and containers, including headings, icon boxes, countdowns, images, buttons, and other Elementor elements Independent layouts inside each tab, plus the tab-level style controls Can use a responsive breakpoint to display as an accordion May require the nested-elements capability; other advanced features can be plan-dependent

Do you need Elementor Pro?

For a basic tabbed block, do not assume that Pro is required. Elementor’s current official widget list places Tabs in the Free widget set. Elementor Developers also states, “Elementor Core is a free WordPress plugin,” while describing Pro as a paid version that adds advanced features and options. The practical answer is to match the requirement to the feature you are using:

  • Basic Tabs: the ordinary widget is available in the free widget set.
  • Nested layouts: the editor may require the nested-elements capability to be enabled, and availability can depend on the current Elementor release and configuration.
  • Other advanced features: a Pro plan may be relevant for a separate feature used inside or around the tabs, even when the Tabs widget itself is free.

Check the current plan matrix before purchasing or upgrading because widget availability and feature packaging can change. Elementor’s official pricing page is Elementor pricing, and the developer explanation of Core and Pro is available in What is Elementor?.

Troubleshoot the most common tab problems

The Tabs widget does not appear in the panel

  • Confirm that Elementor is activated under Plugins.
  • Use the widget search field and type “Tabs” rather than looking only at the first visible group.
  • Reload the editor after enabling a capability or updating Elementor.
  • Check that you are editing the page with Elementor, not the standard WordPress editor.

A tab is visible but its content is empty

Open that item in the Content panel and verify that text was entered in the item itself. In a nested layout, click into the tab’s inner container and confirm that the widgets were dropped inside it rather than beside the Tabs element. Save the page, refresh the public URL, and test the trigger again.

Changes appear in the editor but not on the live page

Use Update or Publish after editing. Then refresh the public page in a private browser window. If a caching layer or optimization plugin is active, clear its page and asset cache using that plugin’s controls. Also check the page at the same URL and device width used for the editor preview.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Labels wrap or overlap on phones

Shorten the labels, reduce horizontal spacing, change to a vertical presentation where available, or use Nested Tabs’ accordion breakpoint. Inspect the narrowest preview width and the real phone viewport; a layout that fits at one mobile width may still fail at a smaller one.

Rank #4
BSIMB 15.6" Digital Family Calendar & Chore Chart, No Subscription Fees
  • Digital Family Calendar: BSIMB digital calendar wall touch screen puts an end to your chaotic life. Designed for busy families, the digital calendar keeps you organised and in step with your family. Assign different colours and tasks to each family member to make family scheduling easier and more intuitive.
  • Easy Setup and Auto-Sync: Plug in, connect to WLAN and auto-syn your electric calendar in minutes. Digital wall calendar compatible with Google calendar, iCloud calendar, Outlook calendar, Cozi calendar and Yahoo calendar. Add events directly on the device or through the ecalendar app. Electronic calendar stays current whether you're at work or traveling—no manual updates needed.
  • All-In-One Home Assistant: Smart calendar builds habits and encourage independence with personalised chores. Display daily meal plan to reduce the daily ‘What's for dinner?’ stress. To-do lists keep track of everything you want. Turning chores into valuable achievements with stars and rewards, making life easier and more enjoyable.
  • Manage Anytime Anywhere: BSIMB electronic calendar for family stay connected with the powerful ecalendar app. Access and manage your digital wall calendar anytime, anywhere with free features like stars & rewards, photo screensaver, chore charts, meals plans, to-do lists etc. Electronic planner paid features like Magic Import tailor advanced tools for users with special needs.
  • Stay in Touch with Loved Ones: Share photos or videos from your phone to electronic wall calendar with app, instantly update your life moment, and keep in touch with your family, especially those who are far away; you can also surprise your smart calendar digital wall by sending him a wish card; it's also great for keeping tech-illiterate elders in touch with the youngsters.

Nested widgets overflow the panel

Select the overflowing widget or inner container and inspect its width, padding, margins, and responsive settings. Remove fixed widths that exceed the available column, reduce side padding at the mobile breakpoint, and check images or buttons for minimum-width rules. Test after each change so you know which setting solved the overflow.

The wrong tab opens first

Review the item order and the active or initially selected item in the widget’s Content or responsive controls. Put the most useful starting content first, then preview the published page rather than relying only on the editor’s initial state.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Make tab content usable and accessible

Write labels that stand alone

A visitor should understand each label without opening every panel. Prefer “Ingredients,” “Usage,” and “Shipping” to vague labels such as “Details” or “More.” Keep labels parallel in grammar and length where possible so the tab row is easy to scan.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Keep important information discoverable

Tabs hide content until a visitor activates a trigger. Put the page’s primary answer, pricing qualification, safety warning, or required action outside the tabs when it must be seen by everyone. Use tabs for secondary detail, alternatives, or supporting explanations rather than for information that should never be missed.

Check keyboard and contrast behavior

Navigate through the live page with the keyboard. The active tab should be apparent, focus should not disappear against the background, and links or buttons inside an open panel should be reachable in a sensible order. Check text and active-state contrast against the background, especially after applying a custom color scheme.

Plan headings inside nested tabs

Use heading levels in a logical order inside each panel. Do not add a large heading only because it looks attractive if it breaks the page’s document structure. Images need meaningful alternative text when they convey information, while decorative images should not compete with the tab labels.

Use this publishing checklist

  • Every tab has a specific title and matching content.
  • Additional items appear in the intended order and obsolete items are removed.
  • The active tab is visually distinct from inactive tabs.
  • Horizontal, vertical, or accordion behavior is correct at every chosen breakpoint.
  • Nested widgets stay inside the tab that owns them.
  • Text, buttons, images, and links display correctly in the live page.
  • Keyboard focus, contrast, and mobile scrolling are usable.
  • The page is saved or published, then tested from its public URL.

Practical ways to organize information with tabs

Product or service details

Use separate tabs for an overview, specifications, setup instructions, and support information. Keep the overview visible first, then use nested widgets for diagrams, buttons, or downloadable resources in the other panels.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Step-by-step instructions

For a process with independent stages, one tab per stage can work when readers need to jump between stages. Give each tab a verb-based label, such as “Install,” “Configure,” and “Verify,” and place prerequisites above the tabs so they are not hidden.

Frequently requested variations

Tabs can separate desktop and mobile instructions, regional procedures, or beginner and advanced options. If the differences are small, standard text tabs are simpler; if each variation needs its own images, buttons, or callouts, use Nested Tabs and test the accordion conversion on mobile.

What to do when your requirements change

Start with the simplest implementation that fits the content. You can replace a standard widget with Nested Tabs later, but the inner content must be rebuilt as widgets and containers rather than copied into one text field. Conversely, if a nested layout has become difficult to maintain, consolidate repeated elements and move simple copy into a standard tab where that improves editing speed and consistency.

Elementor’s tab workflow is therefore straightforward: add the widget from the editor, define each item, style the triggers and panel, and verify the responsive version before publishing. Use Nested Tabs only when the tab panels genuinely need independent Elementor layouts, and verify the current capability and plan requirements for any advanced feature you add.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Crashes, No Sound, or Screen Glitches?Free driver scan
PC Slower Than It Used to Be?Free scan - under a minute

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.