← All widgetsWidget 147 · emcp_custom_147

Advanced Tabs

Elementor widget12 layouts12 content options35 style options3 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: tabs, vertical, pills, accordion, toggle.

Setup guide

  1. Open a page in Elementor, search the panel for Advanced Tabs and drag it into a container.
  2. Content › Tabs: Tabs, Layout, Tab Style, Tab Alignment, Icon Position, Default Active Tab (1 = first), Switch On, Content Animation and 4 more.
  3. Pick a Layout: Horizontal (tabs on top), Horizontal (tabs below), Vertical (tabs left), Vertical (tabs right). Each one is shown below.
  4. Style tab sections: Tab Buttons, Content Panel. Colours, typography and spacing set here are scoped to this widget instance.
  5. Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.
Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.
Layout

Horizontal (tabs on top)

Layout = top

A short overview of the product, service or plan.

Overview

List the features that matter most to the buyer.

Features

Explain what is included at each level.

Pricing
Layout

Horizontal (tabs below)

Layout = bottom

A short overview of the product, service or plan.

Overview

List the features that matter most to the buyer.

Features

Explain what is included at each level.

Pricing
Layout

Vertical (tabs left)

Layout = left

A short overview of the product.

Overview

Feature list content.

Features

Pricing content.

Pricing
Layout

Vertical (tabs right)

Layout = right

A short overview of the product, service or plan.

Overview

List the features that matter most to the buyer.

Features

Explain what is included at each level.

Pricing
Tab Style

Underline

Tab Style = underline

A short overview of the product, service or plan.

Overview

List the features that matter most to the buyer.

Features

Explain what is included at each level.

Pricing
Tab Style

Pills

Tab Style = pills

A short overview of the product, service or plan.

Overview

List the features that matter most to the buyer.

Features

Explain what is included at each level.

Pricing
Tab Style

Boxed (attached to panel)

Tab Style = boxed

A short overview of the product, service or plan.

Overview

List the features that matter most to the buyer.

Features

Explain what is included at each level.

Pricing
Tab Style

Segmented control

Tab Style = segment

A short overview of the product, service or plan.

Overview

List the features that matter most to the buyer.

Features

Explain what is included at each level.

Pricing
Tab Style

Cards

Tab Style = cards

A short overview of the product, service or plan.

Overview

List the features that matter most to the buyer.

Features

Explain what is included at each level.

Pricing
Tab Style

Minimal text

Tab Style = minimal

A short overview of the product, service or plan.

Overview

List the features that matter most to the buyer.

Features

Explain what is included at each level.

Pricing
Switch On

Click

Switch On = click

A short overview of the product, service or plan.

Overview

List the features that matter most to the buyer.

Features

Explain what is included at each level.

Pricing
Switch On

Hover

Switch On = hover

A short overview of the product, service or plan.

Overview

List the features that matter most to the buyer.

Features

Explain what is included at each level.

Pricing

Options reference

Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).

Content tab

Tabs

OptionTypeChoices / rangeDefaultNotes
Tabs
tabs		Repeater3 items
↳ Title
title		TextTab
↳ Subtitle
subtitle		Text
↳ Icon
icon		Icon
↳ Badge
badge		Text
↳ Content Image
image		Image
↳ Content
content		Rich textTab content goes here.
Layout
layout		DropdownHorizontal (tabs on top), Horizontal (tabs below), Vertical (tabs left), Vertical (tabs right)top
Tab Style
style		DropdownUnderline, Pills, Boxed (attached to panel), Segmented control, Cards, Minimal textunderline
Tab Alignment
align		Button groupStart, Center, End, Stretchflex-start
Icon Position
icon_pos		DropdownLeft of title, Above title, Right of titleleft
Default Active Tab (1 = first)
active		Numbermin 1, max 301
Switch On
trigger		DropdownClick, Hoverclick
Content Animation
anim		DropdownFade, Fade up, Slide, Nonefade
Autoplay Interval (ms, 0 = off)
autoplay		Numbermin 0, max 300000
Update URL Hash
hash		Toggleon / off
Accordion on Mobile
mobile_acc		Toggleon / offyes
Content Image Position
img_pos		DropdownRight of text, Left of text, Above textright

Style tab

Tab Buttons

OptionTypeChoices / rangeDefaultNotes
Typography
tab_typo		Typography
Color
tab_color		Color#475467
Hover Color
tab_color_h		Color#101828
Active Color
tab_color_a		Color#6a11cb
Active Text on Filled Tab (pills)
tab_color_a_fill		Color#ffffff
Background
tab_bg		Color
Hover Background
tab_bg_h		Color
Active Background
tab_bg_a		Color
Accent (underline / pill)
accent		Color#6a11cb
Padding
tab_pad		Dimensions
Gap Between Tabs
tab_gap		Slidermin 0, max 40, px4
Radius
tab_radius		Slidermin 0, max 60, px8
Border
tab_border		Border
Active Border Color
tab_border_a		Color
Nav Bar Background
nav_bg		Color
Nav Bar Padding
nav_pad		Dimensions
Nav Width (vertical layouts)
nav_w		Slidermin 120, max 600, px/%260
Icon Size
icon_size		Slidermin 10, max 64, px18
Icon Color
icon_color		Color
Active Icon Color
icon_color_a		Color
Subtitle Typography
sub_typo		Typography
Subtitle Color
sub_color		Color#98a2b3
Badge Color
badge_color		Color#ffffff
Badge Background
badge_bg		Color#d92d20

Content Panel

OptionTypeChoices / rangeDefaultNotes
Typography
panel_typo		Typography
Text Color
panel_color		Color#344054
Background
panel_bg		Background
Padding
panel_pad		Dimensions
Border
panel_border		Border
Radius
panel_radius		Slidermin 0, max 60, px12
Shadow
panel_shadow		Box shadow
Gap Between Nav and Panel
panel_gap		Slidermin 0, max 80, px20
Min Height
panel_minh		Slidermin 0, max 800, px
Content Image Width
img_w		Slidermin 20, max 80, %40
Content Image Radius
img_radius		Slidermin 0, max 60, px12

Add it with the MCP tools

Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_147" and a settings object using the keys above. Run get-custom-widget with id 147 for the full JSON spec.