How the Proton Widget Works

Understand what the Proton widget actually is, how it stores your design, and the three ways to build and edit with it.

The Proton widget is a blank container that stores any HTML, CSS, and JavaScript design you put inside it. Unlike fixed-structure Elementor widgets, it has no predefined output — you fill it through the AI chat, the code editor, or Simple Mode, and the widget renders exactly what you build.

The core idea

The Proton widget is not a traditional Elementor widget. A traditional widget has a fixed structure, a Heading widget always outputs a heading, an Image widget always outputs an image. You configure it, but you can't change what it is.

Proton is different. It is a blank container that holds a complete section design, any HTML structure, any CSS, any JavaScript, all stored inside a single widget on your canvas. The section can be a hero, a pricing table, a team grid, a custom navigation bar, or anything else. The widget adapts to whatever design you put inside it.

The design gets into the widget in one of three ways: generated by the AI assistant, imported from Figma or a screenshot, or written directly in the code editor. Once it's inside, you edit it through either the visual layer editor or the Elementor panel, no need to open the code again unless you want to.

Every Proton widget stores three things internally:

HTML: the complete markup for your section (headings, images, links, cards, buttons, all of it)
CSS: the complete styles for that section (layout, colors, fonts, spacing, responsive breakpoints)
JavaScript: optional interactions (dropdown menus, tabs, counters, animations)

All three live inside the widget itself. This means a Proton widget is fully self-contained, copy it to another page and the design comes with it, no external stylesheets or scripts needed.

The CSS is automatically scoped to the widget. Styles you write for one Proton section cannot affect other elements on the page, the plugin rewrites every CSS rule to be specific to that widget's unique selector.

The slot system

After a design is placed inside the widget, Protuno automatically scans the HTML and identifies every editable piece, every text node, every link, every image, every SVG icon, every background image. These are called slots.

Slots appear in the Elementor panel on the left under three tabs:

Text: every paragraph, heading, button label, and span of text in the design
Links: every anchor tag, including its URL, link text, and whether it opens in a new tab
Media: every image (with alt text), every SVG icon, and every CSS background image

The widget supports up to 60 slots. Each slot is numbered and corresponds to a specific element in the design. When you change a slot's value in the panel, the widget immediately updates that element on the canvas, without touching the code.

This is how a content editor can update a hero headline or swap a team photo without knowing anything about HTML.

The three editing modes

The Proton widget has three ways to edit it, accessible from the Style tab in the left Elementor panel when the widget is selected:

Edit Layer

Opens the visual layers editor. You see the design rendered in a panel alongside its layer tree. Click any layer to select it, drag layers to reorder, and change styles visually. This is the primary mode for designers who want to adjust the look and structure without writing code.

Edit Code

Opens the raw HTML, CSS, and JavaScript editor. Full control over everything the widget contains. This is the mode for developers or power users who need to change the design's structure, add custom logic, write Twig expressions for dynamic data, or add a form or loop.

Edit With AI

Opens the in-editor AI chat panel. You describe what you want changed, "make the background dark blue", "add a fourth pricing card", "turn this into a two-column layout", and the AI modifies the widget's code to match. The change appears live on the canvas.

The panel sections

When you select a Proton widget in Elementor, the left panel has two areas beyond the three editing buttons:

Content tab: three sections:

Section	What you see
Text	One field per text slot, edit any heading, paragraph, or button label
Links	Link text and URL for each anchor in the design
Media	Image picker and alt text field for each image; SVG upload for each icon

Style tab: the three Edit buttons (Layer, Code, AI) and the section for Protuno-specific style settings.

Each slot field in the panel also shows a small dynamic data icon. Click it to bind that slot to live WordPress data, for example, bind an image slot to the current post's featured image, or bind a text slot to the current user's name. This is how Proton sections become dynamic content templates without requiring any Twig syntax.

The widget stores more than just the section's HTML/CSS/JS. It also supports code at two wider scopes:

Scope	What it is	When it loads
Widget	CSS and JS that belong to this section	Every page this widget appears on
Page	Code injected into `<head>` or before `</body>` only on the page containing this widget	Only on that specific page
Site	Code injected into `<head>` or before `</body>` on every page of the site	Everywhere, site-wide

A typical Proton widget uses Widget scope for everything. Page scope is useful for a tracking pixel or a stylesheet needed only on that page. Site scope is useful for loading a font or analytics script once across the whole site.

For loading third-party libraries (GSAP, Alpine.js, Swiper, etc.), the widget also supports an External dependencies list. You provide the CDN URL; the plugin automatically deduplicates it, if two Proton widgets on the same page both request the same library, it only loads once.

It does not output a fixed structure. If you need a widget with a predefined layout you configure through dropdowns, Elementor's own widgets or other plugins are more appropriate.
It does not handle WooCommerce cart/checkout flows. Product display works (price, stock, gallery via dynamic data), but transactional UI (add to cart, checkout) uses WooCommerce's own output.
It requires Elementor to be active. Gutenberg and Bricks support is planned.

Next steps

Design Mode, Editing Without Code, how to update text, images, and links using the panel and layer editor
Developer Mode, HTML, CSS & JavaScript, writing and editing the widget's code directly
Edit With AI, using the in-editor chat to modify the widget through conversation

Was this page helpful?