Paste And Import Code Into The Editor

How to bring HTML and CSS from external sources into the Proton widget code editor, including AI-generated code, Figma exports, and HTML templates.

The Proton widget's code editor accepts any HTML and CSS you paste into it. This page covers the three most common sources and what to do with the code after pasting.

This workflow applies to Protuno Free and Pro. Free users rely on this as their main build path. Pro users can also use the AI chat to generate code directly in the editor.

The Two Tabs You Need

Every Proton widget has two code tabs:

Tab	What goes here
HTML	The section markup — all your `<div>`, `<h1>`, `<p>`, `<img>`, and other tags
CSS	All styles for the section — class rules, media queries, custom properties

Paste HTML into the HTML tab and CSS into the CSS tab separately. Protuno automatically scopes everything in the CSS tab to the widget, so your styles cannot affect the rest of the page.

Source 1: AI-Generated Code (Claude, ChatGPT, Gemini)

The fastest free workflow is to describe your section to an external AI and paste the result.

Prompt an external AI like this:

"Write a complete hero section in HTML and CSS. Large headline, one sentence of subtext, and a primary button. White background, dark text, centered layout, 80px vertical padding. No external dependencies. Return the HTML and CSS in separate blocks."

Then in Protuno:

Open the Proton widget → Edit Code
Copy the HTML the AI returned → paste into the HTML tab → click Save
Copy the CSS the AI returned → paste into the CSS tab → click Save
Check the canvas preview

Common cleanup:

If the AI wrapped the CSS inside a <style> tag inside the HTML, cut it out of the HTML and paste it directly into the CSS tab (without the <style> tags)
If the AI used a <link rel="stylesheet"> to an external CDN (Bootstrap, Tailwind), replace it with the specific utility classes you need, or paste the relevant CSS directly

Source 2: HTML Templates And Design Kits

Free HTML templates from sites like HTML5 UP, Tailwind UI, or component libraries typically come as a .html file plus a .css file.

Open the .html file in a text editor
Copy just the section you want (the <section> or <div> block, not the <html> and <head> wrapper)
Paste into the Proton widget's HTML tab
Open the .css file, copy the rules that apply to your section
Paste into the CSS tab
Save and check the canvas

What to watch for:

Inline style="..." attributes: these work but are not scoped automatically. If you want them editable through the panel later, move them into the CSS tab as class rules
External image URLs (src="https://..."): these display on the live front end, but for production use, upload the images to your WordPress media library and swap the URLs

Source 3: Figma Inspect / Dev Mode

If your design is in Figma:

Select a frame or component in Figma
Open the Inspect panel (or Dev Mode if you have it)
Copy the CSS properties shown — Figma outputs these as individual property values (not ready-to-use class rules), so you will need to wrap them in a selector:

.hero-section {
  /* paste Figma CSS values here */
  padding: 80px 40px;
  background: #ffffff;
  gap: 24px;
}

Build the HTML structure in the HTML tab to match the Figma layout
Apply the Figma CSS values to the matching selectors in the CSS tab

Figma Inspect exports CSS properties per element, not a complete stylesheet. You construct the selectors and structure yourself, using the Figma values to fill in exact spacing, color, and typography numbers.

After Pasting: Making Content Editable

Once a section is saved in the widget, Protuno automatically detects text nodes, links, and images as editable fields (slots) in the Elementor Content tab — no extra markup required for most cases.

If you want to control exactly which fields appear:

Add data-slot="field-name" to any element to give it a named slot
Add data-slot-type="link" to anchor tags to expose the URL as a separate field

See Working With Slots for the full slot reference.

Frequently Asked Questions

Can I paste a full HTML page (with <html>, <head>, <body> tags)? Do not paste the full page wrapper — only paste the section content (the <section>, <div>, or inner body content). The <head> tag is not valid inside a Proton widget.

Can I include a <script> tag for a JavaScript library? Yes. Paste <script> tags at the bottom of the HTML tab. Libraries referenced from a URL (CDN) load normally on the live front end. For complex libraries, test on the live page rather than the Elementor canvas preview, as the canvas environment differs slightly.

My pasted CSS is not applying. What is wrong? Make sure you pasted the CSS into the CSS tab, not inside a <style> block in the HTML tab. Protuno processes the CSS tab for scoping; a <style> block in HTML is not processed the same way.

Do I need to keep the section in a single file? No. The HTML and CSS live in separate tabs and are stored separately. You do not need a single combined file.

Was this page helpful?