Slots: How Editable Content Works
title: Slots: How Editable Content Works description: What slots are in Protuno, how they are automatically extracted from a Proton widget's HTML, and how they let content editors update text and images without touching code.
When a design is placed inside a Proton widget, by the AI, by a Figma import, or by a developer writing code, Protuno automatically scans that design's HTML and identifies every piece of content that could be edited without changing the structure. Each editable piece becomes a slot. Slots are how a content editor can update a hero headline or swap a product photo without knowing anything about HTML.
What Gets Extracted As A Slot
Protuno identifies four categories of editable content in a widget's HTML:
| Slot type | What it captures |
|---|---|
| Text | Every text node, headings, paragraphs, button labels, span text, list items, captions |
| Links | Every anchor tag, its visible label, destination URL, and open-in-new-tab setting |
| Media, Images | Every <img> tag, the image source and its alt text |
| Media, SVG | Every inline SVG or SVG used as an icon, replaceable with a different SVG file |
| Media, Background | Every CSS background-image property, surfaced as an image picker even though the image is defined in CSS |
The extraction is automatic. Every time the widget's HTML changes, through the AI, through the code editor, or through an import, Protuno re-scans and updates the slot list.
Where Slots Appear
Slots appear in the Elementor left panel when you select a Proton widget. They are organized 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 (Slot 1, Slot 2, etc.) and, where the content is descriptive enough, a preview of the current value. The order of slots matches the order elements appear in the HTML from top to bottom.
The 60-Slot Limit
A Proton widget supports up to 60 slots. For most sections this is far more than enough, a complex hero section with a headline, subtitle, two buttons, and a background image might have 10 to 15 slots. A larger section like a pricing table with three tiers, each with a name, price, description, five feature bullets, and a button, might use 40 to 50 slots.
If a design exceeds 60 editable elements, the first 60 are surfaced as slots. Additional elements are still fully editable through the code editor.
Editing A Slot
To edit a slot in Simple Mode:
- Select the Proton widget in Elementor
- Click the Content tab in the left panel
- Find the slot 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 slots do not touch the widget's HTML structure. Only the content value (the text, the URL, the image) changes. The design stays intact.
Binding A Slot To Dynamic Data
Every slot has a dynamic data icon, a small symbol 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.
You can bind any slot to:
- Post data: title, excerpt, featured image, permalink, author name, custom fields
- User data: display name, avatar URL, bio
- Site data: site name, tagline, logo
- Term data: category name, description, archive URL
- WooCommerce data: product price, stock status, SKU, rating
- ACF fields: any text, URL, or image field
- Custom Twig expressions: any value the Twig engine can resolve
When a slot is bound to dynamic data, the Elementor panel still shows the binding label (not a static value). 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 being displayed, one Proton widget becomes a dynamic template for every item in the loop.
Slots vs The Code Editor
Slots work within the content that already exists in the design. They let you update values, the text of a headline, the source of an image, without changing the 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 the AI chat. Slots are the content editing layer; the code editor is the design layer.
Frequently Asked Questions
How does Protuno know which text elements to extract as slots?
Protuno scans the HTML for text nodes and classifies them by type. Any visible text node (inside a <p>, <h1>–<h6>, <span>, <a>, <li>, <button>, etc.) becomes a text or link slot. It excludes script content and hidden elements.
Does editing a slot change the HTML?
Yes, but only the content, not the structure. Changing the text of a headline updates that text node in the HTML. Swapping an image updates the src attribute. The surrounding tags, classes, and CSS are untouched.
Can I have a slot bound to dynamic data AND have a fallback static value? When a slot is bound to dynamic data, the dynamic value always takes precedence. If the dynamic value is empty (for example, a post has no featured image), the slot renders empty. You can handle fallbacks in Twig expressions if needed.
I see slots that I do not want to be editable. Can I hide them?
Not directly through the panel. Slots are auto-extracted from all text nodes and images. If you want to prevent a specific element from being a slot, you can restructure the HTML in the code editor to move that content into a CSS content property or use a different approach that the extractor does not surface.