How to Use the Valstorm Email Builder

Welcome to the Valstorm Email Builder! This tool allows you to create professional, personalized email templates using a simple drag-and-drop interface. This guide will help you understand how to build layouts, use dynamic data, and manage your templates.

1. Getting Started

To access the builder, navigate to Email Builder in your side navigation menu. You can start with a fresh canvas or open an existing template to make updates.

Template Metadata

At the top of the screen, you will see two important fields:

Template Name: Give your template a unique name for easy searching later (e.g., "Monthly Newsletter" or "Welcome Email").
Subject: The subject line your recipients will see. You can use dynamic data here too!

2. Adding and Arranging Content

The left panel contains your Content Palette. Simply click and drag any of these blocks onto the central canvas:

Text: Add paragraphs and headings.
Image: Insert images using a URL link.
Button: Create clickable call-to-action buttons.
Divider: Add a horizontal line to separate sections.
Columns: Choose between 1 to 4 columns to create side-by-side layouts.
HTML Code: (Advanced) For inserting custom snippets of code.

Moving Blocks

You can rearrange your email at any time. Simply click and hold a block on the canvas, then drag it up or down. A blue line will appear to show you exactly where the block will be placed when you release it.

3. Customizing Your Layout

When you click on a block already on the canvas, the Settings Panel on the right will update to show options for that specific item.

Content Editing: Change text, update image URLs, or modify button labels.
Styling: Adjust alignment (Left, Center, Right), padding (spacing around the block), colors, and font sizes.
Column Control: If you select a "Columns" block, you can dynamically change the number of columns (up to 4) right from the settings panel.

4. Using Dynamic Data (Personalization)

You can make your emails feel personal by using dynamic placeholders. Instead of typing a specific name, you use "Mustache" tags.

Smart Autocomplete

Whenever you are typing in a text field, a subject line, or a link field, type {{ to open the Smart Suggestion Menu.

You will see a list of available data from your system, such as:

{{contact.first_name}} – Inserts the recipient's first name.
{{user.first_name}} – Inserts your own first name.
{{system.date.today}} – Inserts today's date.

This works for every field in your organization's database—just start typing after the {{ to filter the list.

5. Viewing and Saving

The builder has three viewing modes at the top of the canvas:

Design: Your primary workspace for dragging, dropping, and editing.
Preview: Shows you exactly what the email will look like in an inbox, with all builder tools hidden.
HTML View: For advanced users who want to see or edit the raw code.

Saving Your Work

Click the Save (or Update) button in the top header.

New Templates: Saving a new template will automatically give it a unique ID and update your browser URL.
Existing Templates: Simply click Update to save your latest changes.

💡 Quick Tips

Nested Layouts: You can drag regular blocks (like Text or Images) inside your column blocks to create complex grids.
Syncing: If you make manual changes in the HTML View and want to start over based on your visual design, click "Sync from Design" in the code tab.
Clean Links: Always test your button links in the Preview tab before sending.