Advanced Icon Box – EMCP Widget Demos

← All widgetsWidget 149 · emcp_custom_149

Advanced Icon Box

Elementor widget6 layouts18 content options36 style options6 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: icon box, feature, service, card, info box.

Setup guide

Open a page in Elementor, search the panel for Advanced Icon Box and drag it into a container.
Content › Content: Media, Icon, Image, Number, Title, Title Tag, Description, Link and 5 more.
Content › Layout: Layout, Alignment, Icon Shape, Hover Effect, Stretch to Column Height.
Pick a Layout: Icon on top, Icon left, Icon right, Icon inline with title, Icon as watermark, Icon band on top. Each one is shown below.
Style tab sections: Box, Icon / Image, Text, Button & Badge. Colours, typography and spacing set here are scoped to this widget instance.
Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.

Conditional options: Icon appears when Media is icon; Image appears when Media is image; Number appears when Media is number.

Layout

Icon on top

Layout = top

Popular

Fast by default

Pages ship with clean markup and no bloat, so they load quickly on any device.

Layout

Icon left

Layout = left

02

Numbered step

Pages ship with clean markup and no bloat, so they load quickly on any device.

Layout

Icon right

Layout = right

02

Numbered step

Pages ship with clean markup and no bloat, so they load quickly on any device.

Layout

Icon inline with title

Layout = inline

02

Numbered step

Pages ship with clean markup and no bloat, so they load quickly on any device.

Layout

Icon as watermark

Layout = overlay

02

Numbered step

Pages ship with clean markup and no bloat, so they load quickly on any device.

Layout

Icon band on top

Layout = split

Pro

Fast by default

Pages ship with clean markup and no bloat, so they load quickly on any device.

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

Content

Option	Type	Choices / range	Default	Notes
Media `media`	Dropdown	Icon, Image, Number / step, None	icon
Icon `icon`	Icon		fas fa-bolt	Shown when media = icon
Image `image`	Image			Shown when media = image
Number `number`	Text		01	Shown when media = number
Title `title`	Text		Fast by default
Title Tag `tag`	Dropdown	H2, H3, H4, H5, div	h3
Description `desc`	Textarea		Pages ship with clean markup and no b...
Link `link`	Link
Link Applies To `link_mode`	Dropdown	Button / read more, Whole box, Title only	button
Button Text `btn_text`	Text		Learn more
Button Icon `btn_icon`	Icon		fas fa-arrow-right
Badge / Ribbon Text `badge`	Text
Badge Style `badge_style`	Dropdown	Pill, top right, Corner ribbon, Inline above title	pill

Layout

Option	Type	Choices / range	Default	Notes
Layout `layout`	Dropdown	Icon on top, Icon left, Icon right, Icon inline with title, Icon as watermark, Icon band on top	top
Alignment `align`	Button group	Left, Center, Right	left	Responsive
Icon Shape `icon_shape`	Dropdown	None, Circle, Rounded square, Square, Blob, Hexagon	rounded
Hover Effect `hover`	Dropdown	None, Lift, Fill with accent, Accent border, Icon flip, Icon bounce, Slide background up	lift
Stretch to Column Height `equal`	Toggle	on / off

Style tab

Box

Option	Type	Choices / range	Default	Notes
Background `box_bg`	Background
Padding `box_pad`	Dimensions
Border `box_border`	Border
Radius `box_radius`	Slider	min 0, max 80, px	16
Shadow `box_shadow`	Box shadow
Hover Shadow `box_shadow_h`	Box shadow
Accent Color `accent`	Color		#6a11cb
Text Color When Filled (hover) `fill_text`	Color		#ffffff

Icon / Image

Option	Type	Choices / range	Default	Notes
Icon Size `icon_size`	Slider	min 10, max 120, px	28
Shape Size `shape_size`	Slider	min 24, max 200, px	64
Icon Color `icon_color`	Color		#6a11cb
Shape Background `icon_bg`	Color		#f4ebff
Hover Icon Color `icon_color_h`	Color
Hover Shape Background `icon_bg_h`	Color
Shape Border `icon_border`	Border
Image Width `img_w`	Slider	min 24, max 400, px/%	64
Image Radius `img_radius`	Slider	min 0, max 50, px/%	12
Space After Media `media_gap`	Slider	min 0, max 60, px	18

Text

Option	Type	Choices / range	Default	Notes
Title Typography `title_typo`	Typography
Title Color `title_color`	Color		#101828
Title Hover Color `title_color_h`	Color
Title Spacing `title_gap`	Slider	min 0, max 40, px	8
Description Typography `desc_typo`	Typography
Description Color `desc_color`	Color		#475467
Number Typography `num_typo`	Typography

Button & Badge

Option	Type	Choices / range	Default	Notes
Button Style `btn_style`	Dropdown	Text link with arrow, Solid button, Outline button	link
Button Typography `btn_typo`	Typography
Button Color `btn_color`	Color		#6a11cb
Button Background `btn_bg`	Color
Button Hover Color `btn_color_h`	Color
Button Hover Background `btn_bg_h`	Color
Button Radius `btn_radius`	Slider	min 0, max 60, px	8
Button Top Spacing `btn_mt`	Slider	min 0, max 60, px	16
Badge Typography `badge_typo`	Typography
Badge Color `badge_color`	Color		#ffffff
Badge Background `badge_bg`	Color		#6a11cb

Add it with the MCP tools

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