Simple Mode vs Developer Mode
The two primary editing modes inside the Proton widget, what each one does, when to use which, and how Role Manager controls who can access each mode.
The Proton widget has two primary editing modes: Simple Mode for visual, no-code editing and Developer Mode for direct HTML/CSS/JavaScript editing. A third mode, Edit With AI, is available to users who can access at least Developer Mode. Understanding when to use each one, and who can access each one, is central to how Protuno handles teams with mixed technical levels.
Simple Mode
Simple Mode is the default way to interact with a Proton widget when the design is already built and your job is to update what's inside it.
In Simple Mode you work entirely from the Elementor left panel. There is no switch to flip, if you do not click Edit Code or Edit With AI, you are in Simple Mode. You see:
- Content → Text: editable fields for every text element in the section (headlines, paragraphs, button labels)
- Content → Links: URL, link text, and new-tab toggle for every anchor
- Content → Media: image pickers and alt text for every image, SVG, and CSS background image
- Style → Edit Layer: opens a visual layer editor where you can select any element, change colors, adjust spacing, and reorder layers without writing code
What Simple Mode cannot do:
- Add new elements or remove elements from the design
- Change the layout structure (column count, grid areas)
- Write Twig dynamic expressions or loops
- Add a form (
data-atom-form) - Load external libraries
- Change responsive breakpoints
Simple Mode is intentionally limited so that content editors can safely update text and images without being able to break the design.
Developer Mode
Developer Mode gives you direct access to the widget's HTML, CSS, and JavaScript. Click Edit Code in the Style tab to open the code editor.
Inside the code editor you see three panels:
- HTML: the complete markup for the section
- CSS: all styles, which will be auto-scoped to this widget when rendered
- JavaScript: any interactive logic
Developer Mode is where you:
- Change the layout structure, add columns, restructure the grid, change the DOM
- Write Twig expressions for dynamic data (
{{ post.title }},{% for item in get_posts() %}) - Add a form (
<form data-atom-form="contact">) - Load external libraries via the dependencies panel (GSAP, Swiper, Alpine.js)
- Fine-tune CSS, including media queries for responsive behavior
- Add custom JavaScript interactions
There is no restriction on what you can write. The CSS you write will be scoped automatically; everything else runs as written.
Edit With AI
Edit With AI is the third mode, accessed via the Edit With AI button in the Style tab. It opens a chat interface inside Elementor where you describe changes and the AI writes or modifies the code.
Edit With AI is powered by the same code that Developer Mode edits. When the AI makes a change, it is writing HTML/CSS/JS directly into the widget, the same thing you would do manually in Developer Mode.
This mode is most useful when:
- You are starting from scratch and want the AI to generate the initial design
- You want to make structural changes (add an element, change the layout) without writing code yourself
- You want to ask "make the mobile layout stack vertically" or "turn this into a dark section" without editing CSS manually
Which Mode Should You Use?
| Goal | Mode |
|---|---|
| Update headline or copy | Simple Mode |
| Swap an image or icon | Simple Mode |
| Change a button URL | Simple Mode |
| Adjust padding or change a color | Simple Mode (layer editor) |
| Add or remove an element | Developer Mode or AI |
| Change the grid layout | Developer Mode or AI |
| Add dynamic data with Twig | Developer Mode |
| Add a form | Developer Mode |
| Load an animation library | Developer Mode |
| Generate a section from a description | AI |
| Make a structural change without coding | AI |
How Role Manager Controls Mode Access
Protuno's Role Manager assigns each WordPress user role to one of three access levels:
| Access level | What the user can do |
|---|---|
| None | Cannot see or interact with Protuno at all |
| Content | Simple Mode only, can update text, images, and links through the panel |
| Full | All three modes, Simple, Developer, and AI |
Administrators always have Full access regardless of Role Manager settings.
This is the key mechanism for agency workflows: a developer builds the section in Developer Mode or using AI, and the client or content writer updates copy in Simple Mode, with no risk of accidentally changing the code or structure.
Frequently Asked Questions
Can a Content user open Edit Code accidentally? No. For users with Content access, the Edit Code and Edit With AI buttons are hidden from the panel. They can only see the slot fields and the layer editor.
Can a Full access user lock themselves to Simple Mode? Not through a setting, Full access users always have the option to switch to Developer Mode. Role Manager works at the role level, not the individual user level.
Does switching between modes change the code? No. Edit Code, Edit With AI, and Simple Mode all read from and write to the same underlying HTML, CSS, and JavaScript. Switching modes does not change anything, it only changes how you interact with the code.