Working With Slots
A practical guide to finding, editing, and binding the slots in a Proton widget, the text fields, link fields, and image pickers that let you update content without touching code.
Slots are the editable fields that Protuno automatically extracts from a Proton widget's HTML and surfaces in the Elementor panel. This guide covers how to find them, how to edit each type, how to bind them to dynamic data, and how to work efficiently when a widget has many slots.
Finding Your Slots
- Click on any Proton widget in the Elementor editor
- Click the Content tab in the left panel
- The slots appear under three sections: Text, Links, and Media
The number of slots depends on the widget's design. A simple hero section might have 5 to 8 slots. A large pricing section with multiple tiers might have 40 or more.
Editing Text Slots
Under Content → Text, you see one field per text element in the section, headings, paragraphs, button labels, list items, badge text.
- Click into the field and type to update the text
- The canvas updates live, no save step needed to preview
- Each field shows the current value (the text currently in the widget) as a placeholder
Identifying which slot is which:
If the slot labels are just "Slot 1", "Slot 2", click the field, the corresponding element highlights on the canvas. The current value in the field also helps identify the element.
If a text element does not appear under Text:
Text that is also a link (like a button with an href) appears under Links → Link Text instead of under Text.
Editing Link Slots
Under Content → Links, you see one entry per anchor in the section.
For each link:
| Field | What to enter |
|---|---|
| Link Text | The visible label of the link |
| URL | Any URL: https://, a WordPress page, tel:+1..., mailto:, or #anchor-id |
| Open in new tab | Toggle for target="_blank" |
| No follow | Toggle for rel="nofollow" |
Click the dynamic data icon next to the URL field to bind the link destination to a WordPress value, the current post's permalink, a custom field, an ACF URL field, etc.
Editing Image Slots
Under Content → Media, you see one entry per image, SVG icon, and background image in the section.
For standard images:
- Click the image thumbnail to open the WordPress media library
- Select or upload a new image
- Edit the alt text in the field below the thumbnail (important for accessibility and SEO)
For SVG icons:
- Click the SVG picker to upload a different
.svgfile or select one from WordPress media
For background images:
Protuno extracts background-image values from the widget's CSS and surfaces them as image pickers here. Click the picker to choose a different background image without opening the CSS editor.
Binding A Slot To Dynamic Data
Every slot field, text, URL, or image, has a small dynamic data icon on the right edge. Click it to open Elementor's dynamic data picker.
Common bindings:
| Slot type | Common dynamic data sources |
|---|---|
| Text | Post title, post excerpt, author name, ACF text field, user display name |
| URL | Post permalink, ACF URL field, term archive URL |
| Image | Post featured image, author avatar, ACF image field, WooCommerce product image |
When you bind a slot to dynamic data, the canvas in the editor shows a placeholder or the value from the current editing context. On the live site, the slot pulls its value from WordPress at page load time.
Using dynamic slots in templates:
When a Proton widget with dynamic slots is used in a Theme Builder template (a single post template, for example), every slot bound to post data automatically shows the data for the current post being viewed. One widget design serves all posts.
Tips For Working With Many Slots
When a widget has 30+ slots, the Content tab can get long. Use the section collapse toggles (Text, Links, Media) to hide sections you are not editing.
To quickly find the slot for an element you see on the canvas: click the element on the canvas first (you may need to hold Ctrl or Cmd to select inside the widget), then look at the Content tab, the active slot highlights.
If a slot does not appear for an element you expected: the element may use a technique the extractor does not recognize (CSS-generated content via ::before/::after, or text rendered by JavaScript after load). These require Developer Mode to edit.
What Slots Cannot Change
Slots update content values. They cannot:
- Add elements that do not exist in the HTML
- Remove elements from the design
- Change element types (turning a
<p>into an<h2>) - Change layout or structural properties
For structural changes, use Developer Mode or ask the AI.
Frequently Asked Questions
Can I reorder the slots in the panel? No. Slot order matches the order elements appear in the HTML from top to bottom. To change the slot order in the panel, change the order of elements in the HTML (in Developer Mode).
I updated a slot but the image still shows the old one on the live site. The Elementor editor preview updates immediately, but the published page only changes after you click Update or Publish. Also clear any page cache if your host uses caching.
A slot shows as empty even though the canvas shows text. Why?
The text may be hard-coded in the CSS (via a content property) rather than in the HTML. CSS-generated content is not extracted as a text slot. It needs to be moved into the HTML to become editable via slots.