Editor ModesSimple Mode: Build Without Code

Simple Mode: Build Without Code

title: Simple Mode: Build Without Code description: How to update text, images, links, and visual styles in a Proton widget using the Elementor panel and the visual layer editor, no code required.

Simple Mode is how you work with a Proton widget when the design is already built and you need to update what's inside it, swap a headline, replace a photo, change a button URL, or adjust a color, without writing or reading any code.

Simple Mode is the only mode available to WordPress users set to Content access in the Role Manager. Users with Full access can switch between Simple Mode, Developer Mode, and AI at any time.

What Simple Mode Is (And Is Not)

There is no switch that puts the widget into Simple Mode. It is the default state. When you select a Proton widget in Elementor, the left panel shows the Content tab with your slots and the Style tab with the layer editor button, that is Simple Mode.

If you never click Edit Code or Edit With AI, you are in Simple Mode.

Step 1: Select The Proton Widget

Click on any Proton widget on the Elementor canvas. The left panel switches to show the widget's Content and Style tabs.

Step 2: Edit Text

Click the Content tab. Open the Text section.

You see one text field for every heading, paragraph, button label, and span of text in the section. The fields appear in the order the elements appear in the design from top to bottom.

Click into any field and type. The canvas updates live as you type, no save step needed.

Things to know:

  • If a button's visible label is also a link, it appears under Links → Link Text, not under Text
  • If the section has no text elements, the Text section shows "No text found"
  • Every text field has a dynamic data icon on the right, click it to bind the field to a live WordPress value (post title, custom field, current user's name, etc.) instead of a static value

Open the Links section under the Content tab.

Each anchor in the section appears here. For each link you can change:

  • Link Text: the visible label
  • URL: accepts any URL, a WordPress page link, tel:, mailto:, or #anchor
  • Open in new tab: the standard target="_blank" toggle
  • No follow: adds rel="nofollow" for affiliate or sponsored links

Link URLs also support dynamic data binding, bind to the current post's permalink, a custom field URL, or any other dynamic value.

Step 4: Swap Images And Icons

Open the Media section under the Content tab.

You see one entry for each image, SVG icon, and CSS background image in the section. For each one:

  • Click the image picker to open the WordPress media library and choose a different file
  • Edit the alt text: the accessibility label for the image, visible to screen readers
  • Replace an SVG: upload a different .svg file or pick from WordPress media

Background images (elements styled with a CSS background-image property) also appear here. Protuno extracts them from the CSS and surfaces them as image pickers, you can swap them without touching any styles.

Step 5: Adjust Visual Styles With The Layer Editor

For changes beyond content, padding, colors, layer order, element visibility, go to the Style tab and click Edit Layer.

The layer editor opens alongside the canvas. You see:

  • The section rendered at its 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 on the canvas or in the layer tree
  • Double-click a text element to edit it in place on the canvas
  • Adjust padding and margin visually
  • Change background colors, text colors, and border colors
  • Reorder layers by dragging items in the layer tree
  • Toggle any layer's visibility without deleting it

What the layer editor cannot change: The layer editor works within the existing structure. You can restyle and reorder elements, but you cannot add new elements or change the layout structure (column count, grid definition). Those changes require Developer Mode or the AI.

What Simple Mode Cannot Do

Simple Mode is intentionally limited for content editors. It cannot:

  • Add or remove elements from the design
  • Change the layout structure (columns, grid, section structure)
  • Write Twig expressions or loops
  • Add a form (data-atom-form)
  • Load external libraries (GSAP, Swiper, etc.)
  • Change responsive CSS breakpoints

If a content editor needs something that requires structural changes, the workflow is: a developer makes the change in Developer Mode or AI, and the content editor handles text and image updates in Simple Mode afterward.

Frequently Asked Questions

Can I use Simple Mode on any Proton widget, even one I did not build? Yes. As long as the Proton widget has content in it, the slots appear in the panel. It does not matter who built the widget or how.

I changed a text field but the page still shows the old text. Why? The canvas in the Elementor editor updates live, but the published page only updates when you click Update or Publish. Make sure to save after editing.

The slot labels just say "Slot 1", "Slot 2". How do I know which element that is? Click the field, the corresponding element highlights on the canvas. You can also look at the current value in the field to identify which text or image it corresponds to.

Was this page helpful?