ConceptsSlots

Slots: How Editable Content Works

How Composer scans a widget's HTML and turns text, links, and images into editable slots in the Elementor panel.

When a design is placed inside a Composer widget, UiChemy automatically scans the HTML and identifies every piece of content that could be edited without changing the structure. Each editable piece becomes a slot. Slots let content editors update a hero headline or swap a product photo without knowing anything about HTML.

What Gets Extracted as a Slot

UiChemy identifies four categories of editable content in a widget's HTML:

Slot typeWhat it captures
TextEvery text node, headings, paragraphs, button labels, span text, list items, captions
LinksEvery anchor tag (and links attached to a whole non-anchor element, like a card), its visible label, destination URL, open-in-new-tab, a nofollow toggle, and a custom-attributes field
Media, ImagesEvery <img> tag, the image source and its alt text
Media, SVGEvery inline SVG or SVG used as an icon, replaceable with a different SVG file
Media, BackgroundEvery CSS background-image property, surfaced as an image picker

The extraction is automatic. Every time the widget's HTML changes, UiChemy re-scans and updates the slot list.

Where Slots Appear

Slots appear in the Elementor left panel when you select a Composer widget, under the Content tab, in three sections:

  • Text, one text field per text slot.
  • Links, one entry per anchor, with fields for label and URL.
  • Media, one image picker per image, SVG, or background image.

Each field is labeled with a number and, where applicable, a preview of the current value. The order matches the order elements appear in the HTML, top to bottom.

A freshly added Composer with no content yet shows "No text found" in the Text section, with an Add Text button, until there's HTML in the widget to scan for slots.

The 60-Slot Limit

A Composer widget supports up to 60 slots. For most sections this is more than enough, a complex hero section might have 10 to 15 slots, while a larger pricing table might use 40 to 50.

If a design exceeds 60 editable elements, the first 60 are surfaced as slots. Additional elements remain fully editable through the code editor.

Editing a Slot

To edit a slot in Design mode:

  1. Select the Composer widget in Elementor.
  2. Click the Content tab in the left panel.
  3. Find the slot you want to update (Text, Links, or Media).
  4. Click into the text field or image picker.
  5. Make your change, the canvas updates live.

Changes to slots don't modify the widget's HTML structure. Only the content value changes, the text, URL, or image. The design stays intact.

Binding a Slot to Dynamic Data

Every slot has a dynamic data icon on the right edge of the field. Click it to open Elementor's dynamic data picker and bind the slot to a live WordPress value instead of a static one, post data, user data, site data, term data, WooCommerce data, ACF fields, or a custom Twig expression.

Post-level dynamic data is available on the free plan. Site, User, Term, and Request providers require UiChemy Pro. See Free vs Pro and Dynamic Tags for the full breakdown.

When a slot is bound to dynamic data, the Elementor panel shows the binding label. The real value is pulled from WordPress at page render time. On archive pages or single post templates, every bound slot automatically adapts to the current post or term, one Composer widget becomes a dynamic template for every item in the loop.

Slots vs the Code Editor

Slots work within existing design content. They let you update values (headline text, image source) without changing structure.

To add a new element, remove an element, change the layout, or add a Twig loop, you need the code editor (Developer Mode) or Chat AI. Slots are the content editing layer; the code editor is the design layer.

Use Cases

  • Handing a finished section to a content editor, they update headline text and swap images through the panel, never touching code.
  • Turning a Composer widget into a dynamic template, bind slots to post, user, or term data so one widget adapts across every item in a loop.
  • Auditing what's editable on a page at a glance, the Content tab's Text/Links/Media sections show every slot in one place.

Frequently Asked Questions