# Engage Content Creation

Engage Studio's Email Editor, powered by [Beefree SDK,](https://docs.beefree.io/end-user-guide/builders/design-builder-overview) offers a robust and user-friendly interface for creating stunning, responsive email campaigns. This guide walks you through how to design emails using the intuitive drag-and-drop editor and how to personalize them using Liquid templates.

## Getting Started

* Navigate to **Email Messages > Create New**
* Choose to start with a blank template or select a pre-designed template


### Understanding the Interface

The Email Content Editor consists of three key sections:

* **Stage** : The canvas where you drag and arrange content blocks and rows.
* **Sidebar** : Where you configure layout, content, and style.
* **Toolbar** : Includes device preview (desktop/mobile), undo/redo, and preview/send test.


![](/assets/engage-content-creation-2025-05-25-10-25-20.6c506a324094be74fcdaca86bb881f5926b0a278a58fefcae2f328f8424fc829.5be018a0.png)

### Building Your Email

#### Step 1: Add Structure

* Drag "Row" elements from the Sidebar to the Stage to define layout.
* Choose from multiple column configurations.


**Tips:**

* Rows define horizontal structure (sections).
* Support up to six columns (emails)
* Customizable options: background color, borders, mobile behavior.
* Columns can be resized, added, or styled individually.


![](/assets/engage-content-creation-2025-05-25-10-26-32.63d47054b872244f8cb5d7413631fc6f8e301619944c6a464668e9badfabc49c.5be018a0.png)

#### Step 2: Add Content

* Drag content blocks like Text, Image, Button, etc., into row sections.
* Click on elements to open their settings in the Sidebar.


**Features:**

* Auto-fit to column width.
* Supports Text, Media (Image/Video/GIF), Interactive (Button, Social), and Layout (Divider/Spacer/Menu).
* Individual customization: padding, visibility, conditions.


#### Step 3: Customize Design

* Use the Sidebar to set colors, fonts, spacing, and alignment.


## Key Features

### Personalization with Merge Tags

* Click "Merge Tags" in the Content Sidebar.
* Insert tags like `{{ profile.name }}` into text blocks.
* Sample data and preview help visualize output.


### Mobile Responsiveness

* Switch between desktop and mobile preview.
* Layouts adapt automatically.


### Image Editor

* Double-click images to crop, resize, or apply filters.


### Dynamic Content & Conditional Display

* Add display conditions to rows or blocks based on profile attributes.
* Example: Show discount banner only to VIPs.


### Custom Attributes (Merge Tags Enhancements)

* Human-readable labels (e.g., "Customer Name" not `{{ profile.name }}`)
* One-click insertion and preview with sample content


## Advanced Features

### Dynamic Content Using Liquid

Engage Studio supports Liquid syntax in email templates for advanced personalization.

**Basic Syntax:**

* Variables:__`{{ profile.name }}`
* Logic: `{% if profile.vip %}Thank you{% endif %}`
* Loops: `{% for product in profile.products %}{{ product.name }}{% endfor %}`
* Filters: `{{ profile.name | upcase }}`


**Use Cases:**

* **Conditional Content** : Display content only if profile conditions match.
* **Dynamic Image URLs** : Loop through JSON list of items and show personalized products.


**Example:** Displaying a discount to VIPs

## Testing and Preview

* Click "Preview" to open a real-time rendering.
* Use "Send Test" to deliver a sample email.
* Dark Mode Preview included.


The Beefree-powered editor ensures:

## Current Limitations

The following features are not yet available or under development:

* Link validation
* Spell check
* Import HTML file (contact support to try)
* Export HTML file
* Email QA automation
* Global Style Settings
* **Image Hosting** : Images uploaded in the Image Manager are hosted in Beefree’s AWS S3 and CloudFront. These will not migrate to TD storage. Use external image URLs if permanence is needed.