Content · Elementor
Tabs widget for Elementor
Tabbed content so related blocks share one footprint: specs, shipping, and reviews without separate sections.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
Tabbed content so related blocks share one footprint: specs, shipping, and reviews without separate sections.
render() writes HTML data attributes: data-options, data-tab.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Tabs”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Label”, “Icon Type”, “Upload Image”, “Select Icon”. Style and Content tabs are listed on this page.
When to use it
- A product page with Description / Specs / Reviews.
- A pricing page that switches monthly vs yearly copy.
- A services page that groups three offerings in one block.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Tabs.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| tabs — Label | Text inspector control (`tab_title`). |
| tabs — Icon Type | Options: None; Icon; Image. |
| tabs — Upload Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| tabs — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| tabs — Content Type | Options: Editor; Custom Field (Pro); Elementor Template (Pro). |
| tabs — Select Custom Field | Note: This option only accepts String(Text) or Numeric Custom Field Values. |
| tabs — Select Template | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| tabs — Use custom colors for this tab (Pro) | Switcher inspector control (`tab_custom_color`). |
| tabs — Text Color | Writes CSS (color, display) onto the widget’s front-end markup. |
| tabs — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| tabs — Content | Wysiwyg inspector control (`tab_content`). |
| Tabs | Repeater rows; render() loops each item to build the list or slides. |
| Tabs — Label Position | Options: Default; Left; Right. |
| Tabs — Invert on Mobile | Switcher inspector control (`tabs_invert_responsive`). |
| Tabs — Horizontal Align | Options: Left (Pro); Center (Pro); Right (Pro); Stretch. |
| Tabs — Vertical Align | Writes CSS `align-items` onto the widget’s front-end markup. Options: Top; Middle; Bottom. |
| Tabs — Label Alignment | Writes CSS (justify-content, align-items) onto the widget’s front-end markup. Options: Left; Center; Right. |
| Tabs — Label Width | Writes CSS `min-width` onto the widget’s front-end markup. (min 0, max 600). |
| Tabs — Position | Options: Left; Center; Right. |
| Tabs — Distance | Writes CSS (margin-right, margin-left, margin-bottom) onto the widget’s front-end markup. (min 0, max 100). |
| Tabs — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Labels (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Labels (Normal) — Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Labels (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Labels (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Labels (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}}`. |
| Labels (Normal) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}}`. |
| Labels (Normal) — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 0, max 100). |
| Labels (Normal) — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Labels (Normal) — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Labels (Normal) — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Labels (Normal) — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Labels (Normal) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Labels (Hover) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Labels (Hover) — Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Labels (Hover) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Labels (Hover) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Labels (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}}`. |
| Labels (Hover) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}}`. |
| Labels (Hover) — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 0, max 100). |
| Labels (Hover) — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Labels (Hover) — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Labels (Hover) — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Labels (Hover) — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Labels (Hover) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Labels (Active) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Labels (Active) — Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Labels (Active) — Background Color | Writes CSS (background-color, border-top-color) onto the widget’s front-end markup. |
| Labels (Active) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Labels (Active) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}}`. |
| Labels (Active) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}}`. |
| Labels (Active) — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 0, max 100). |
| Labels (Active) — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Labels (Active) — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Labels (Active) — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Labels (Active) — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Labels (Active) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Labels — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Content — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content — Background Color | Writes CSS (background-color, border-top-color, border-right-color) onto the widget’s front-end markup. |
| Content — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}}`. |
| Content — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}}`. |
| Content — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Content — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Content — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Content — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Content — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Triangle | Switcher inspector control (`tab_triangle`). |
| Triangle — Triangle Points to | Options: Tab; Content. |
| Triangle — Size | Writes CSS (border-width, bottom, left, right) onto the widget’s front-end markup. (min 0, max 30). |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which Tabs options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
How do I add Tabs in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Tabs”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related content widgets
Advanced Blog Posts Carousel
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Advanced Card Carousel
A carousel of cards you fill yourself (image, text, button) — not a post query.
Accordion
Collapsible panels for FAQs, policies, and long answers. One heading per panel; the body stays hidden until the visitor opens it.
Charts
Bar, line, pie, or radar charts from values you enter in the widget.
Reading Progress Bar
A thin bar that fills as the visitor reads the page. Put it on long articles, not on a homepage grid.
Advanced Callout Box
A note, tip, or warning box with an icon and optional button.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Tabs after you activate it.