CORE MODULE

Convert from the Visual Editor to an Advanced HTML Template

What you'll learn in this guide

How to switch a template from the drag-and-drop Visual Editor to a fully customisable Advanced HTML template, when it's the right call, and what to think through before you commit.

Overview

The Visual Editor is built for speed. Drag in structures, drop in blocks, tweak the styling — most templates can be built start to finish without ever touching code. For day-to-day work, it's the right tool, and it's where most users will spend their time.

Every now and then though, you'll hit something the Visual Editor can't quite stretch to. Maybe a tricky layout, custom CSS for a specific client, or HTML you've had built elsewhere that you just want to drop in as-is. That's where Advanced HTML templates come in — they hand you full control over the markup and styling, so you can build exactly what you need.

Converting an existing Visual Editor template to an Advanced template is a quick one-click job, but it's worth pausing before you do it. Once converted, you can't switch back.

Heads up — this is a one-way conversion
‍
Once a template is converted to Advanced HTML, the Visual Editor is no longer available for it. If there's any chance you'll want to keep editing it in the drag-and-drop builder, duplicate the template first so you've got a Visual Editor version to fall back on.

‍

When to convert

A few signs that converting is the right move:

  • You need custom CSS or HTML that the Visual Editor doesn't support
  • You've had a template built externally (by a design agency or your in-house dev team) and want to use it as-is
  • You need precise control over the rendered markup, for example to meet accessibility standards or a specific client's requirements
  • You're comfortable working in HTML and CSS and want the extra flexibility

If none of those apply, stick with the Visual Editor. It'll save you time and you'll keep all the drag-and-drop convenience.

Convert your template

  1. Open the template you want to convert in the Visual Editor.
  2. In the top right of the editor, click the small arrow next to Save to open the dropdown.
  3. Click Convert to Advanced template.
  4. Confirm when prompted. The template will reload in the Advanced HTML editor, ready for you to work on.

‍

Here's where you'll find the option in the editor:

Settings Panel
</> View HTML / CSS
✎ Save
▼
✎ Convert to Advanced template
Structures ▸
Blocks ▾

The Convert to Advanced template option lives in the dropdown next to the Save button.

‍

What happens after conversion

Once you've converted, the template opens in the Advanced HTML editor. You'll see the raw HTML and CSS that made up your Visual Editor design, and you can edit it directly from there.

A few things to know:

  • The View HTML / CSS button stays available so you can preview your changes as you work
  • Personalisation tokens (like %%FirstName%%) carry across and continue to work the same way
  • The Structures and Blocks panel is no longer available, since you're now editing the markup directly
  • All template-level settings (From details, BCC, headers) are unchanged and still configured the same way

‍

A safer way to experiment
‍
If you're curious about Advanced HTML but not ready to commit, copy your template first and convert the copy. You'll get to explore the code-editor side of things while your original stays untouched in the Visual Editor.


What's next

That's it — your template is now an Advanced HTML template, and the full HTML and CSS is yours to shape. From here you can paste in custom code, fine-tune the styling, or rebuild the layout from scratch, all without leaving the platform.

When you're ready to dive deeper, take a look at our guide on editing Advanced HTML templates for tips on working efficiently in the code editor.

‍