Layout Editor

The Layout Editor is where you create and customize your email or onsite creatives. Each layout inherits your brand styling from the Brand Kit as well as individual block configurations from your block library, but you can override any element within the editor.

Editor Navigation Overview
Top Header Controls
Right-side header controls
Left Panel: Block Layers
Canvas: Visual Editing
Right Panel: Content & Design Controls

Editor Navigation Overview

The Layout Editor consists of three main sections:

1. Left Panel – Block layers and layout settings
2. Canvas (Middle) – Visual editor for your creative
3. Right Panel – Content and design controls for selected elements

The top header provides global actions like naming, variant management, version history, saving, and previewing.

Top Header Controls

• Back button – Return to the previous page.
• Creative name – View current name; use the dropdown to rename or duplicate.
   
• Variants – Manage subject line and preview text variations (A/B testing).
  • Add, rename, or delete variants.
  • Variants only affect the subject line and preview text at this time (creative body remains the same).
     
• Status – Displays current creative status (e.g., Draft).
• Template + Estimated size – Displays the template type (e.g., Low Stock) and estimated email size
   
• Version history (clock icon)
  • Revert to a past version or individual changes within the current session.
  • Add/edit version comments for cross-team clarity.
     
• More (⋮) menu
  • Download the creative as JPG, PNG, or HTML.
  • Archive / Unarchive (only available if the layout is not in use with a campaign).
  • Preview options:
    • View in browser (new tab).
    • Send test (custom subject/preview text and recipient email).
       
• Save dropdown
  • Save – Save draft in Studio.
  • Save & Publish – Save in Studio and update the campaign.
  • Save & Request Review – Save and flag the layout for team review.
     

Left Panel: Block Layers

• Add block (+ icon) – Opens block library to add new blocks. Blocks are added at the bottom by default and can be reordered.
• Collapse layers (stacked icon) – Show/hide the block layers panel.
• Code preview (<> icon) – Opens a non-editable HTML preview window.
  • Expand for readability, copy HTML once the layout is saved.

Layout Settings (top of panel)

The Layout Settings at the top of the left panel define global, layout‑level defaults that apply across your blocks unless you override them at the block or element level.

• HTML language tag – Set default accessibility language (important for screen readers & SEO).
• Background color – Background behind the email body.
• Body color – Default background for all blocks. 
• Custom code – Insert HTML logic/settings applied above <doctype>.
   

Blocks in panel

• Blocks are listed top-to-bottom, matching their order in the creative.
• Blocks can be dragged & dropped within the panel to reorder.
• Expanding a block reveals its elements (elements cannot be reordered individually).

Stoplight options for each block:

• Duplicate - inserted directly below the block it’s duplicated from.
• Swap - replace with another block from the library.
• Hide - remove from canvas view.
• Download - JPG, PNG, HTML.
• Delete.

Tip: For Image slot groups or Text slot groups, apply padding/margin settings to all grouped elements at once.

Canvas: Visual Editing

The central canvas displays the creative for editing.

Above the Canvas

• Zoom controls – Adjust view (default 100%).
• Device viewports – Desktop (1000px), Tablet (450px), Mobile (380px).
  • Desktop settings cascade down.
  • Tablet and Mobile can override the desktop for responsive adjustments.
    • Note: mobile overrides aren’t supported for Klaviyo users.
• Variable preview toggle – Switch between variable names (e.g., $PrimaryOffer) and values (e.g., “50% off”).
  • When OFF → allows inline editing of text in the canvas.
  • When ON → text must be edited in the right panel.

• Undo/redo – Supports actions and keyboard hotkeys.
   

  ---

Subject Line & Preview Text

• Enter text directly or use < > icon to insert Brand Kit text variables.
• Copy icon – Quickly copy subject line/preview text.
• AI copy (stars icon) – Generate subject/preview text using AI:
  • Enter value prop, brand tone/voice, and language (English, French, Spanish, German).
  • Regenerate or apply results.

In the Canvas

• Click any block/element → highlights in left & right panels.
• Text can be edited inline if the Variable Preview toggle is OFF.
• Links/buttons are not clickable in the editor (will open the settings panel instead to edit).

Right Panel: Content & Design Controls

The right panel adapts to the selected block/element.

Content Controls

• Text/Buttons
  • Copy box
  • URL field
• Images
  • Upload new (will save to Brand Kit Assets) or select from existing assets.
  • Supported formats: JPG, JPEG, PNG, GIF (max 32MB).
  • Toggle visibility by viewport (desktop/tablet/mobile).
  • Alt text (important for accessibility & SEO).
  • Link field (click-through URL).

Design Controls

• Text – Font (from Brand Kit), weight, size, color, line height, letter spacing, alignment, styling (bold/italic/underline/strikethrough), casing, width/height, padding.
• Buttons – Same as text + padding logic (averaged values), border radius/width/color, background color.
• Images – Size (px or %), padding, borders.

Tip: Collapse or expand the right panel using the controls icon at the top right.

Feedback & Support

To share feedback or request enhancements:

• Submit a ticket via the Wunderkind Help Center
• Contact your Customer Success Manager for feature discussions or roadmap visibility

For technical assistance, submit a ticket via the Wunderkind Help Center or reach out to support@wunderkind.co.