Build Your First Section

Protuno supports two build paths. Choose the one that matches your plan.

Building With Code (Free)

Free plan users build sections using the HTML code editor (Developer Mode). The AI tab is not available, but the full HTML, CSS, and JavaScript editor, slot editing through the panel, Dynamic Tags, and Theme Builder are all available on the free plan.

Before you begin: Make sure Protuno and Elementor are both active. See Install And Activate Protuno if you have not done that yet.

Step 1: Open A Page In Elementor

1. Go to Pages in your WordPress dashboard
2. Open an existing page or click Add New
3. Click Edit with Elementor

Step 2: Add The Proton Widget

1. In the Elementor left panel, click the widget grid icon to open the widget search panel
2. Type Proton in the search box
3. Drag the Proton widget onto your canvas

Step 3: Open The Code Editor

1. Click the Proton widget on the canvas to select it
2. In the left panel, click Edit Code (Developer Mode)
3. The HTML, CSS, and JavaScript tabs open

Step 4: Write Or Paste Your HTML And CSS

Add your section markup in the HTML tab and your styles in the CSS tab. Protuno automatically scopes your CSS to the widget so styles you write cannot affect other elements on the page.

Click Save. The section renders live on the canvas.

Step 5: Update Content Through The Panel

After saving, Protuno scans the widget HTML and surfaces text, link, and image fields in the Content tab of the left panel. Click any field to edit the corresponding content without reopening the code editor.

Step 6: Publish

1. Click Update (for an existing page) or Publish (for a new page) in the Elementor editor
2. Click View Page to see the live result

Frequently Asked Questions

Where do I get HTML and CSS if I do not want to write it from scratch? You can copy section code from any HTML template, paste output from a CSS framework, use Figma Inspect to export code from a design, or ask an external AI (Claude, ChatGPT) to write section code from a description and paste the result into the editor.

What does the CSS scoping do? Protuno rewrites every CSS rule so it only applies inside that specific Proton widget. You write .hero { padding: 80px; } and it becomes something like .proton-abc123 .hero { padding: 80px; }. Styles from one widget cannot affect another widget or the rest of the page.

Can I switch to the AI chat later if I upgrade to Pro? Yes. The AI reads the current HTML in the widget before responding, so it can pick up where your code left off.

Building With AI Chat (Pro)

Before you begin: Make sure Protuno Pro and Elementor are both active. See Install And Activate Protuno if you have not done that yet.

Step 1: Open A Page In Elementor

1. Go to Pages in your WordPress dashboard (or Posts, or any custom post type that uses Elementor)
2. Open an existing page or click Add New
3. Click Edit with Elementor to open the page in the Elementor editor

Step 2: Add The Proton Widget

1. In the Elementor left panel, click the + icon to add a new section, or click into an existing empty section
2. Click the Widget icon (the grid icon) to open the widget search panel
3. Type Proton in the search box
4. Drag the Proton widget onto your canvas

The widget appears as an empty placeholder on the canvas. The left panel shows the Proton widget's Content and Style tabs.

Step 3: Open The AI Chat

1. In the left panel, click the Style tab
2. Click Edit With AI

The AI chat panel opens. This is an in-editor conversation interface, you describe what you want, and the AI writes the HTML, CSS, and JavaScript directly into the widget.

Step 4: Describe Your Section

Type a description of the section you want to build. Be specific about:

• What type of section it is (hero, features list, pricing table, testimonials, team grid, etc.)
• The content you want inside it (headline text, number of columns or cards, button labels)
• The visual style (color scheme, whether it is dark or light, rounded or sharp corners)

Example prompts:

"A hero section with a large headline, a one-sentence subtitle, and two buttons side by side. White background, dark text. The primary button is filled, the secondary is outlined."

"A three-column features section. Each column has an icon at the top, a bold heading, and two lines of description text. Light gray background."

"A full-width dark testimonial section with a quote, the customer's name, their job title, and a 5-star rating."

Send the message. The AI will generate the section and it will appear live on the canvas.

Step 5: Refine And Adjust

If the first result is not quite right, you can:

• Ask the AI to change it: type a follow-up message in the same chat: "Make the background dark navy", "Move the button to the center", "Add a fourth feature card"
• Edit slots directly: go to the Content tab in the left panel. You will see text fields for every headline, paragraph, and button label in the section. Edit any of them without touching the AI or the code
• Change images: under Content → Media, each image in the section has a picker. Click it to open the WordPress media library and choose a different photo

Step 6: Publish

1. When the section looks the way you want, close the AI panel
2. Click Update (for an existing page) or Publish (for a new page) in the top-left of the Elementor editor
3. Click View Page to see the live result

What Just Happened

The AI wrote real HTML, CSS, and JavaScript, not a set of dropdowns and toggles. The code lives inside the Proton widget. The text fields you saw under the Content tab were automatically extracted from that HTML (these are called slots), so you can update the content without reopening the code or the AI.

Frequently Asked Questions

The AI generated something I do not like. Should I start over? No, just ask it to change specific things. "Change the background to white", "remove the subtitle", "make the headline bigger". The AI edits what it already built rather than starting from scratch.

Can I edit the AI-generated HTML directly? Yes. In the Style tab, click Edit Code instead of Edit With AI. The raw HTML, CSS, and JavaScript are all there and fully editable.

My section looks different on mobile. Can the AI fix that? Yes. Tell it: "Fix the mobile layout, the columns should stack vertically on phone screens." The AI can add or update responsive CSS media queries in the widget.

Does the AI remember what it built if I close the panel and come back? The AI chat history does not persist between sessions, but the section the AI built is saved in the widget. You can open Edit With AI again and the AI will inspect the current code before making changes.

Related

• Developer Mode: The Code Editor
• Simple Mode: Build Without Code
• How The Proton Widget Works
• Connect Any AI Client Over MCP
• A Tour Of The Dashboard
• Free vs Pro: What's Included