Editable Fields: How Content Becomes Editable
How Composer scans a widget's HTML and turns text, links, and images into editable fields in the builder 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 an editable field. Editable fields let content editors update a hero headline or swap a product photo without knowing anything about HTML.
What Becomes an Editable Field
UiChemy identifies four categories of editable content in a widget's HTML:
The extraction is automatic. Every time the widget's HTML changes, UiChemy re-scans and updates the field list.
Where Editable Fields Appear
Editable fields appear in the Elementor left panel when you select a Composer widget, under the Content tab, in three sections:
- Text, one text field per piece of text.
- Links, one entry per anchor, with fields for label and URL.
- Media, one image picker per image, SVG, or background image.
Each field shows its type as the label:
| Section | Field labels |
|---|---|
| Text | Text |
| Links | Link Text and URL |
| Media | Choose Image and Alt for an image, Choose SVG for an icon, Background Image for a CSS background |
The order matches the order elements appear in the HTML, top to bottom.
When a section has nothing to edit, it shows a short message with a button: "No text found" with Add Text, "No link found" with Add Links, or "No images or "icons" found" with Add Media. Each button opens the layer editor so you can add that content.
Text or links written as Twig, like {{ post.title }} or loop code, don't get a field in the panel. Their value comes from WordPress when the page loads, so there's nothing to type in. Edit them in the Code tab.
The 60-Field Limit
A Composer widget supports up to 60 editable fields. For most sections this is more than enough, a complex hero section might have 10 to 15 fields, while a larger pricing table might use 40 to 50.
If a design exceeds 60 editable elements, the first 60 are shown as editable fields. Additional elements remain fully editable through the code editor.
Editing a Field
To edit a field in Design mode:
- Select the Composer widget in Elementor.
- Click the Content tab in the left panel.
- Find the field you want to update (Text, Links, or Media).
- Click into the text field or image picker.
- Make your change, the canvas updates live.
Changes to fields don't modify the widget's HTML structure. Only the content value changes, the text, URL, or image. The design stays intact.
Binding a Field to Dynamic Data
Every field has a dynamic data icon on its right edge. Click it to open Elementor's dynamic data picker and bind the field 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 field 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 field automatically adapts to the current post or term, one Composer widget becomes a dynamic template for every item in the loop.
Editable Fields vs the Code Editor
Editable fields 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 AI Chat. Editable fields 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 fields 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 field in one place.