Skip to main content

Design Editor Guide

The Design Editor is a block-based email builder that lets you create email templates visually without writing HTML. You build emails by adding, arranging, and styling content blocks, with a live preview that updates as you work.

Editor Layout​

The Design Editor interface is split into two panels:

PanelPurpose
Left panelStyles and properties. Shows global email styles by default, and block-specific properties when a block is selected
Right panelLive preview of the email. Updates in real-time as you make changes

The toolbar at the top of the editor provides access to the template tabs (Editor, Sender, Test Data, Attachments), export/import buttons, preview mode toggle (Desktop/Mobile), the Switch Editor button, and the Send Test Email button.

Adding Blocks​

The Design Editor uses a hover-and-click interaction model to add new content blocks. There is no drag-and-drop.

  1. Hover over the email preview area, between existing blocks or at the top/bottom of the content area. A + button appears at valid insertion points.
  2. Click the + button. A menu of available block types appears.
  3. Select a block type from the menu to insert it at that position.

The block is added immediately and you can begin editing its content and properties.

Available Block Types​

The following content blocks are available:

BlockWhat it does
HeadingA heading text block for titles and section headers
TextA rich text block for body content and paragraphs
ImageDisplays an image. Provide a URL or upload a file
ButtonA call-to-action button with customisable text, link, and styling
AvatarA circular image with optional text, useful for profile cards and signatures
DividerA horizontal line to visually separate sections
SpacerAn empty vertical space to control spacing between blocks
ColumnsA multi-column layout container. Place blocks side by side
ContainerA wrapper block for grouping and styling a set of child blocks
HTMLA raw HTML block for inserting custom code within the visual layout
UnsubscribeInserts a required unsubscribe link that resolves to a unique opt-out URL for each recipient

Editing a Block​

  1. Click on a block in the preview to select it.
  2. The left panel switches from global styles to the selected block's properties.
  3. Edit the block's content and settings using the controls in the left panel.

The available properties vary by block type. Common properties include:

  • Text content: edit the text directly in the properties panel
  • Padding: top, bottom, left, right spacing
  • Alignment: left, centre, right
  • Colours: text colour, background colour
  • Font: weight, size
  • URL/Link: for buttons and images

Changes are reflected in the live preview immediately.

Global Styles​

When no block is selected, the left panel shows global email styles under the Styles tab. These settings apply to the entire email:

SettingWhat it controls
Backdrop colourThe colour behind the email canvas (the outer background)
Canvas colourThe background colour of the email content area
Canvas border colourAn optional border colour around the canvas
Canvas border radiusRounds the corners of the canvas (in pixels)
Font familyThe default font for all text blocks (e.g. Modern sans)
Text colourThe default text colour for all text blocks

Click on the email background (outside any block) or deselect the current block to return to the global styles view.

Working with Images​

To add an image to your email:

  1. Add an Image block using the + button.
  2. In the block properties panel, you can provide an image URL directly, or click the browse icon to upload a file from your device.
  3. If you upload a file, it is stored in Outreach and the URL field is automatically set to the hosted image URL.

The image updates in the preview as soon as the URL is set or the upload completes.

Working with Variables​

Variables let you personalise email content for each recipient using data from your contact list (e.g. first name, email address).

To insert a variable into a block:

  1. Click on a text-based block (Heading, Text, or Button) to select it.
  2. In the block properties, place your cursor where you want the variable.
  3. Use the variable inserter to select the variable to insert.
  4. The variable appears as a pink tag (e.g. a tag showing "first_name") in both the editor and the preview.

In the preview, variables resolve to test data values when you have set them in the Test Data tab. If no test value is set, the raw placeholder (e.g. {{first_name}}) is shown instead.

Every email campaign requires an unsubscribe link. In the Design Editor, add one using the dedicated Unsubscribe block:

  1. Hover between blocks where you want the unsubscribe link to appear and click the + button.
  2. Select the Unsubscribe block from the block menu.
  3. The block is inserted with a pre-configured unsubscribe link that resolves to a unique opt-out URL for each recipient when the email is sent.

The Unsubscribe block is typically placed near the bottom of the email, such as in the footer area. You cannot finish an email campaign without an unsubscribe link present in the template.

Preview​

The right panel shows a live rendering of your email that updates as you edit blocks, change content, and adjust styles.

  • Toggle between Desktop and Mobile views using the dropdown in the toolbar
  • Variables resolve to test data values when available
  • The preview matches what recipients will see in their email client

Toolbar Actions​

The Design Editor toolbar includes:

ActionDescription
ExportDownload the template as an .or_design_template file. See Importing and Exporting Templates
ImportUpload a previously exported .or_design_template file to restore a template. See Importing and Exporting Templates
Desktop/MobileToggle the preview between desktop and mobile widths
Switch EditorSwitch to the Code Editor (clears body content after confirmation). See Choosing an Email Editor
Send Test EmailSend a test copy of the email to verify how it looks in a real inbox. Use Test Data to populate variables in the test email

Tips​

  • Start with global styles before adding blocks. Set your backdrop colour, canvas colour, font family, and text colour first to establish the overall look.
  • Use Columns blocks to create side-by-side layouts for content like feature comparisons or image-text pairs.
  • Use Container blocks to group related blocks and apply shared background colours or padding.
  • Preview on Mobile regularly. Email layouts can look different on smaller screens. Use the Mobile preview to verify your design works at both widths.
  • Export often when making significant changes. If something goes wrong or you want to revert, you can import the saved file.