Proton WidgetDesign Mode — Editing Without Code

Design Mode — Editing Without Code

title: Design Mode: Editing Without Code description: How to edit text, images, links, and visual styles in a Proton section without touching any code.

Design Mode is how you interact with a Proton widget when the design is already built and your job is to update what is inside it — swap a headline, replace a photo, change a button URL — without rebuilding the structure or opening the code editor.

What Design Mode is

Design Mode is how you interact with a Proton widget when the design is already built and your job is to update what's inside it, swap a headline, replace a photo, change a button URL, or adjust a color, not rebuild the structure.

There is no "switch" that puts the widget into Design Mode. It is simply the default state: you select the widget in Elementor, the left panel shows your slots and the Edit Layer button, and you edit from there. If you never click Edit Code, you never see code.

Design Mode is also the only mode available to users set to Content only in the Role Manager. Administrators and Full access users can switch to the code editor at any time; Content only users cannot, by design, so clients and content writers can update what's on the page without accidentally breaking the design.

Editing text

When you select a Proton widget, the Content → Text section of the left panel lists every editable text element in the section, headlines, subheadings, body paragraphs, button labels, captions, badge text.

Each item is a plain text field. Click into it and type. The canvas updates as you type, you see the change live without saving.

A few things to know:

  • The fields appear in the order the text elements appear in the design from top to bottom.
  • If a text element is inside a link (for example, a button that is also an anchor), it appears under Links → Link Text, not under Text.
  • If the section has no text elements in the current design, the Text section shows "No text found".
  • Every text field supports Elementor's dynamic data, click the small icon to the right of the field to bind it to live WordPress data (post title, user name, custom field, etc.) instead of a static value.

The Content → Links section lists every anchor in the section. For each link you can edit:

  • Link Text: the visible label of the link
  • URL: the destination. Accepts any URL, internal page link, tel:, mailto:, or anchor
  • Open in new tab: the standard Elementor toggle for target="_blank"
  • No follow: adds rel="nofollow" for affiliate or sponsored links

Links also support dynamic data, you can bind the URL to the current post's permalink, a custom field URL, or any other dynamic value.

Editing images and icons

The Content → Media section lists every image, SVG icon, and CSS background image in the section. For each one you can:

  • Swap the image: click the image picker to open the WordPress media library and choose a different file
  • Edit alt text: the accessibility label for the image
  • Replace an SVG icon: upload a different SVG file or pick from WordPress media

Background images (elements that use a CSS background-image property) also appear here. The plugin detects them in the CSS and surfaces them as image pickers so you can swap them without touching the style code.

All media slots support dynamic data binding. For example: bind the image slot on a team member card to the post author's avatar, or bind a product photo slot to the WooCommerce featured image.

The visual layer editor

For changes beyond swapping slot content, adjusting padding, changing a color, resizing a column, reordering elements, open the layer editor from the Style tab.

Click the Edit button next to Edit Layer in the Style tab. A panel opens alongside the canvas showing:

  • The section rendered at actual size
  • A layer tree listing every element in the design
  • A properties panel that updates when you click a layer

What you can do in the layer editor

  • Select any element: click it on the canvas or in the layer tree
  • Change text inline: double-click a text element to edit it in place on the canvas
  • Adjust spacing: change padding and margin on any element visually
  • Change colors: pick a new color for backgrounds, text, borders
  • Reorder layers: drag items in the layer tree to change stacking order or nesting
  • Toggle visibility: hide or show any layer without deleting it

What the layer editor does not change

The layer editor works within the existing structure of the design. You can restyle and reorder what's there. To add new elements, remove sections, or fundamentally restructure the layout, use the code editor (Developer Mode) or the AI chat instead.

Binding slots to dynamic data

Every text field, link URL, and image picker in the panel has a dynamic data icon, a small database symbol on the right edge of the field.

Click it to open Elementor's standard dynamic data picker. You can bind the field to:

  • Post data: title, excerpt, date, featured image, permalink, author name, any custom field
  • User data: display name, avatar, bio, website URL
  • Site data: site name, tagline, logo
  • Term data: category name, tag description, archive URL
  • WooCommerce data (when WooCommerce is active), product price, stock status, SKU, rating
  • ACF fields (when ACF is active), any text, URL, or image ACF field
  • Custom Twig expressions: any value the Twig engine can resolve

When a slot is bound to dynamic data, it no longer shows the typed value from the panel, it pulls the real live value from WordPress at page load. On archive pages and single post templates, every Proton widget bound this way automatically adapts to the current post or term being displayed.

What you cannot do in Design Mode

Design Mode is intentionally limited for non-technical users. It cannot:

  • Add or remove elements: you can only edit what the design already contains
  • Change the layout structure: columns, grid areas, section structure require code changes
  • Write Twig expressions or loops: {% for %} loops and {{ dynamic }} expressions require the code editor
  • Add a form: the data-atom-form attribute that makes a form work requires code editor access
  • Load external libraries: adding GSAP, Swiper, or any third-party script requires code or the dependencies panel in Developer Mode
  • Change responsive breakpoints: media query rules live in the CSS, accessible only in Developer Mode

If a Content only user needs something that requires structural changes, the workflow is: the developer makes the change in Developer Mode, then the content editor handles the text/image updates in Design Mode.

Next steps

Was this page helpful?