Getting StartedCreating Templates

Creating Templates

How to create a new theme template using the Add New button in Protuno's Theme Builder, build it with the Proton widget, and save it for publishing.

Creating a Theme Builder template means choosing a template type, building a layout with the Proton widget in Elementor, and saving it. After saving, assign display conditions to control where the template appears. This page covers the creation and build step.

Open The Theme Builder

Go to Protuno → Theme Builder in your WordPress dashboard. The page defaults to Grid view showing all your templates (or "No templates yet." if none exist).

Create A New Template

  1. Click the + Add New button in the top right, this opens a dropdown menu
  2. Choose the template type you want to create:
    • Header
    • Footer
    • Single (Post / Page)
    • Archive
    • Single Product
    • Products Archive
    • Search Results
    • 404 Page
  3. Elementor opens with the template canvas ready to build

You can have multiple templates of the same type, for example, two different headers, and control which one shows where using display conditions.

Build The Template

Once inside Elementor:

  1. Search for Proton in the widget panel
  2. Drag the Proton widget onto the canvas
  3. Build the section using one of the three editing modes:

Using the AI chat (Edit With AI): Click Edit With AI in the Style tab and describe what you want in plain English. Examples:

  • Header: "A sticky header with a logo on the left, navigation links in the center, and a Get Started button on the right. White background, dark text, thin bottom border."
  • Footer: "A three-column footer. Column one has the logo and a short tagline. Column two has navigation links. Column three has social media icons. Dark background, white text."
  • 404 Page: "A 404 error page with a large 404 number, a short message, and a button linking to the homepage. Centered layout, light background."

Using the code editor (Edit Code): Click Edit Code in the Style tab and write the HTML, CSS, and JavaScript directly.

Using the layer editor: If you are importing a design from an existing Proton widget, you can adjust it visually through Edit Layer.

Save And Assign Conditions

  1. Click Update to save the template
  2. A prompt appears to set display conditions, click Add Condition to define where this template appears on your site

See Display Conditions for the full guide.

A template does not appear on your site until at least one display condition is assigned to it.

Manage Existing Templates

From Grid view, hover over any template to see options:

  • Edit: reopens the template in Elementor
  • Conditions: manage where it displays
  • Delete: permanently removes the template
Was this page helpful?