Ten Layout Ideas for a Product Landing Page
A short excerpt for ten layout ideas for a product landing page that gives the reader a reason to click through.
Read more← All widgetsWidget 222 ·
emcp_custom_222Loop Tabs
Elementor widget4 layouts22 content options29 style options8 panel sections
Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: tabs, posts, products, loop, query, filter, categories.
Setup guide
- Open a page in Elementor, search the panel for Loop Tabs and drag it into a container.
- Content › Tabs: Tab 1 Label (posts), Tab 2 Label (posts), Tab 3 Label (posts), Tab 4 Label (products), Tab 5 Label (products), Tab Style, Tabs Alignment, Heading Beside Tabs and 9 more.
- Content › Tab 1 Query: Posts.
- Content › Tab 2 Query: Posts.
- Content › Tab 3 Query: Posts.
- Content › Tab 4 Query: Products.
- Content › Tab 5 Query: Products.
- Pick a Tab Style: Pills, Underline, Segmented, Minimal. Each one is shown below.
- Style tab sections: Tabs, Cards. 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.
Posts is a live query (source: posts). A "Posts" panel with filters, ordering and count is generated for it; results come from this site's data on every page load.
Posts is a live query (source: posts). A "Posts" panel with filters, ordering and count is generated for it; results come from this site's data on every page load.
Posts is a live query (source: posts). A "Posts" panel with filters, ordering and count is generated for it; results come from this site's data on every page load.
Products is a live query (source: products). A "Products" panel with filters, ordering and count is generated for it; results come from this site's data on every page load.
Products is a live query (source: products). A "Products" panel with filters, ordering and count is generated for it; results come from this site's data on every page load.
Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.
Layout
Pills
Tab Style = pills
How We Cut Page Weight in Half
A short excerpt for how we cut page weight in half that gives the reader a reason to click through.
Read more
Writing Headlines That Convert
A short excerpt for writing headlines that convert that gives the reader a reason to click through.
Read more
What Changed in Elementor 4.2
A short excerpt for what changed in elementor 4.2 that gives the reader a reason to click through.
Read more
A Colour System for Small Teams
A short excerpt for a colour system for small teams that gives the reader a reason to click through.
Read more
Shipping a Theme Without a Framework
A short excerpt for shipping a theme without a framework that gives the reader a reason to click through.
Read moreNothing to show here yet.
Writing Headlines That Convert
A short excerpt for writing headlines that convert that gives the reader a reason to click through.
Read moreWhat Changed in Elementor 4.2
A short excerpt for what changed in elementor 4.2 that gives the reader a reason to click through.
Read moreTen Layout Ideas for a Product Landing Page
A short excerpt for ten layout ideas for a product landing page that gives the reader a reason to click through.
Read more
Spring Release Notes
A short excerpt for spring release notes that gives the reader a reason to click through.
Read moreShipping a Theme Without a Framework
A short excerpt for shipping a theme without a framework that gives the reader a reason to click through.
Read moreHow We Cut Page Weight in Half
A short excerpt for how we cut page weight in half that gives the reader a reason to click through.
Read moreNothing to show here yet.
Layout
Underline
Tab Style = underline
Ten Layout Ideas for a Product Landing Page
A short excerpt for ten layout ideas for a product landing page that gives the reader a reason to click through.
Read moreHow We Cut Page Weight in Half
A short excerpt for how we cut page weight in half that gives the reader a reason to click through.
Read moreWriting Headlines That Convert
A short excerpt for writing headlines that convert that gives the reader a reason to click through.
Read moreWhat Changed in Elementor 4.2
A short excerpt for what changed in elementor 4.2 that gives the reader a reason to click through.
Read moreA Colour System for Small Teams
A short excerpt for a colour system for small teams that gives the reader a reason to click through.
Read moreShipping a Theme Without a Framework
A short excerpt for shipping a theme without a framework that gives the reader a reason to click through.
Read moreNothing to show here yet.
Writing Headlines That Convert
A short excerpt for writing headlines that convert that gives the reader a reason to click through.
Read moreWhat Changed in Elementor 4.2
A short excerpt for what changed in elementor 4.2 that gives the reader a reason to click through.
Read moreTen Layout Ideas for a Product Landing Page
A short excerpt for ten layout ideas for a product landing page that gives the reader a reason to click through.
Read moreSpring Release Notes
A short excerpt for spring release notes that gives the reader a reason to click through.
Read moreShipping a Theme Without a Framework
A short excerpt for shipping a theme without a framework that gives the reader a reason to click through.
Read moreHow We Cut Page Weight in Half
A short excerpt for how we cut page weight in half that gives the reader a reason to click through.
Read moreNothing to show here yet.
Layout
Segmented
Tab Style = segment
Ten Layout Ideas for a Product Landing Page
A short excerpt for ten layout ideas for a product landing page that gives the reader a reason to click through.
Read moreHow We Cut Page Weight in Half
A short excerpt for how we cut page weight in half that gives the reader a reason to click through.
Read moreWriting Headlines That Convert
A short excerpt for writing headlines that convert that gives the reader a reason to click through.
Read moreWhat Changed in Elementor 4.2
A short excerpt for what changed in elementor 4.2 that gives the reader a reason to click through.
Read moreA Colour System for Small Teams
A short excerpt for a colour system for small teams that gives the reader a reason to click through.
Read moreShipping a Theme Without a Framework
A short excerpt for shipping a theme without a framework that gives the reader a reason to click through.
Read moreNothing to show here yet.
Writing Headlines That Convert
A short excerpt for writing headlines that convert that gives the reader a reason to click through.
Read moreWhat Changed in Elementor 4.2
A short excerpt for what changed in elementor 4.2 that gives the reader a reason to click through.
Read moreTen Layout Ideas for a Product Landing Page
A short excerpt for ten layout ideas for a product landing page that gives the reader a reason to click through.
Read moreSpring Release Notes
A short excerpt for spring release notes that gives the reader a reason to click through.
Read moreShipping a Theme Without a Framework
A short excerpt for shipping a theme without a framework that gives the reader a reason to click through.
Read moreHow We Cut Page Weight in Half
A short excerpt for how we cut page weight in half that gives the reader a reason to click through.
Read moreNothing to show here yet.
Layout
Minimal
Tab Style = minimal
Ten Layout Ideas for a Product Landing Page
A short excerpt for ten layout ideas for a product landing page that gives the reader a reason to click through.
Read moreHow We Cut Page Weight in Half
A short excerpt for how we cut page weight in half that gives the reader a reason to click through.
Read moreWriting Headlines That Convert
A short excerpt for writing headlines that convert that gives the reader a reason to click through.
Read moreWhat Changed in Elementor 4.2
A short excerpt for what changed in elementor 4.2 that gives the reader a reason to click through.
Read moreA Colour System for Small Teams
A short excerpt for a colour system for small teams that gives the reader a reason to click through.
Read moreShipping a Theme Without a Framework
A short excerpt for shipping a theme without a framework that gives the reader a reason to click through.
Read moreNothing to show here yet.
Writing Headlines That Convert
A short excerpt for writing headlines that convert that gives the reader a reason to click through.
Read moreWhat Changed in Elementor 4.2
A short excerpt for what changed in elementor 4.2 that gives the reader a reason to click through.
Read moreTen Layout Ideas for a Product Landing Page
A short excerpt for ten layout ideas for a product landing page that gives the reader a reason to click through.
Read moreSpring Release Notes
A short excerpt for spring release notes that gives the reader a reason to click through.
Read moreShipping a Theme Without a Framework
A short excerpt for shipping a theme without a framework that gives the reader a reason to click through.
Read moreHow We Cut Page Weight in Half
A short excerpt for how we cut page weight in half that gives the reader a reason to click through.
Read moreNothing to show here yet.
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
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Tab 1 Label (posts)tab1_label | Text | Latest | ||
Tab 2 Label (posts)tab2_label | Text | Design | ||
Tab 3 Label (posts)tab3_label | Text | |||
Tab 4 Label (products)tab4_label | Text | Products | ||
Tab 5 Label (products)tab5_label | Text | |||
Tab Stylestyle | Dropdown | Pills, Underline, Segmented, Minimal | pills | |
Tabs Alignmentalign | Button group | Left, Center, Right | flex-start | |
Heading Beside Tabsheading | Text | |||
Card Layoutcard | Dropdown | Grid cards, Horizontal list, Image with overlay text, Compact (no image) | grid | |
Columnscolumns | Dropdown | 1, 2, 3, 4 | 3 | Responsive |
Image Ratioratio | Dropdown | 16:10, 16:9, 4:3, 1:1 | 16/10 | |
Show Date / Category (posts)show_meta | Toggle | on / off | yes | |
Show Excerpt / Priceshow_excerpt | Toggle | on / off | yes | |
Show Buttonshow_button | Toggle | on / off | yes | |
Post Button Textbtn_text | Text | Read more | ||
Switch Animationanim | Dropdown | Fade up, Fade, None | fade-up | |
Empty Textempty_text | Text | Nothing to show here yet. |
Tab 1 Query
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Postsq1 | Query | Source: posts |
Tab 2 Query
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Postsq2 | Query | Source: posts |
Tab 3 Query
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Postsq3 | Query | Source: posts |
Tab 4 Query
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Productsq4 | Query | Source: products |
Tab 5 Query
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Productsq5 | Query | Source: products |
Style tab
Tabs
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Typographytab_typo | Typography | |||
Colortab_color | Color | #475467 | ||
Active Colortab_color_a | Color | #ffffff | ||
Accentaccent | Color | #6a11cb | ||
Paddingtab_pad | Dimensions | |||
Gaptab_gap | Slider | min 0, max 30, px | 6 | |
Space Below Tabsnav_mb | Slider | min 0, max 80, px | 28 | |
Heading Typographyheading_typo | Typography | |||
Heading Colorheading_color | Color | #101828 |
Cards
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Backgroundcard_bg | Color | #ffffff | ||
Bordercard_border | Border | |||
Radiuscard_radius | Slider | min 0, max 40, px | 14 | |
Shadowcard_shadow | Box shadow | |||
Hover Shadowcard_shadow_h | Box shadow | |||
Content Paddingcard_pad | Dimensions | |||
Grid Gapgap | Slider | min 0, max 60, px | 24 | |
Title Typographytitle_typo | Typography | |||
Title Colortitle_color | Color | #101828 | ||
Title Hovertitle_color_h | Color | #6a11cb | ||
Meta Colormeta_color | Color | #98a2b3 | ||
Category Colorcat_color | Color | #6a11cb | ||
Excerpt Typographyexcerpt_typo | Typography | |||
Excerpt Colorexcerpt_color | Color | #475467 | ||
Price Typographyprice_typo | Typography | |||
Price Colorprice_color | Color | #101828 | ||
Button Colorbtn_color | Color | #6a11cb | ||
Button Hover Backgroundbtn_bg_h | Color | #6a11cb | ||
Sale Badgesale_bg | Color | #d92d20 | ||
Overlay Layout Tintoverlay | Color | rgba(16,24,40,0.55) |
Add it with the MCP tools
Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_222" and a settings object using the keys above. Run get-custom-widget with id 222 for the full JSON spec.