--- title: "Email Designer v2" canonical: "https://support.inphonite.com/space/KBPUB/1119420417/Email%20Designer%20v2" format: markdown --- # 🎨 Introducing Email Designer v2 – Powered by MJML ![Emailv2Designer-20231110-224300-20250425-174357.png](media://6fe53dbb-d596-4a00-bec6-3d09f83d8c66) Inphonite’s new **Email Designer v2** takes your message customization to the next level. Built on the flexible and mobile-responsive **MJML framework**, this designer allows you to craft stunning, CSS-rich email templates that display consistently across all modern email clients. Whether you're refining a message or building one from scratch, Email Designer v2 gives your communication the **encore it deserves**. --- ## 🧭 Getting Started You’ll find the new designer in the **same place as the original**, under the **Email Messages** tile on your dashboard. ![image-20240605-143305-20250425-174517.png](media://7306e0a8-f8a1-4feb-83b3-92b1b80917b6) > ℹ️ 🎯 **Tip:** Before making any changes to an existing message, we strongly recommend creating a **new message** from a template to test and design in a safe environment. > ⚠️ ### Important Notice on Upgrading > ⚠️ > ⚠️ If you switch an **existing email message** to v2, **the contents will be cleared**. Be sure to: > ⚠️ > ⚠️ - Use a **new message**, or > ⚠️ - Choose one that is **not currently in use** before upgrading. To preview our v2 capabilities, select the template: **🧩 "Deluxe Appt Reminder v2 Body"** --- ## ✏️ Using Email Designer v2 In this walkthrough, we’ll use **"Deluxe Appt Reminder v2 Body"** as our template reference. ### Top Toolbar Overview ![Emailv2DesignerToolbar-20250425-175810.png](media://8d87103a-d2f8-4282-b71e-b8252fba5f53) | **Tool** | **Purpose** | | --- | --- | | ♻️** Refresh** | Reload all the elements on the page | | **➕ Add Section** | Adds a section at the bottom of the page | | **🧭 Mobile Preview** | Edit view optimized for mobile layout | | **💻 Desktop Preview** | Displays a full preview as it would appear on desktop | | 🧠** Editor View** | Displays the default, more user-friendly email designer | | **🔤 Source Code Editor/Viewer** | Full access to raw HTML (advanced users only) | | 👁️** Preview** | See the end result of your completed email design | > ⚠️ **Note:** Editing HTML/CSS directly is not recommended unless you're experienced. > ⚠️ For more on HTML basics, visit [Mozilla's HTML Guide](https://developer.mozilla.org/en-US/docs/Web/HTML). --- ## 🧱 Layout Structure: Sections, Columns, and Elements Email templates are built using **stacked sections**, which contain **columns**, and inside those columns are **elements**. ### 🎛 Section Controls Each section includes its own floating toolbar (visible on hover): ![Emailv2SectionActions-20250425-175944.png](media://e163c814-9113-40c0-bdce-370a9b67352c) | **Control** | **Function** | | --- | --- | | **⚙️ Settings** | Opens the section editor to modify layout and behavior | | **➕ Add Section** | Inserts a section directly below the current one | | **⬆⬇ Move Section** | Reorders the section relative to adjacent sections | | **🗑 Delete Section** | Removes the section permanently | > ℹ️ The **Add Section** button in the top toolbar adds a **new section to the bottom** of the message. --- ## ⚙️ Section Editor The section editor defines layout properties for the **entire section container**. ![image-20250425-191911.png](media://4b79eeb3-671b-4a97-97ea-04f7375355c0) - Most fields correspond to **CSS styling** (margins, padding, background, alignment). - Use with care - **CSS experience is highly recommended**. For more, visit [Mozilla’s CSS Guide](https://developer.mozilla.org/en-US/docs/Web/CSS). At the top of the editor: ![Emailv2SectionEditorAddColumn-20250425-180258.png](media://d6a2a09b-345c-46a3-9477-fae8edd2c2d5) - See a list of columns in the section. - Add more columns with the **Add Column **button. Click on any column name to open its **column editor**. --- ## 🧱 Column Editor Each column contains vertically stacked elements. > ℹ️ 📌 Example: > ℹ️ The **Banner** section has one column with a logo image stacked vertically. To **display elements side-by-side**, use **separate columns** for each (e.g., button layout). Within a column: ![Emailv2ColumnEditorElementModule-20250425-180709.png](media://042a6fd4-25d9-477a-aa3f-9d1f1b24244d) - Reorder or delete elements using the internal toolbar. - Click on each element to open its settings panel. --- ## 🧩 Designer Modules | **Module** | **Function** | | --- | --- | | 📝 **Text** | Displays text; supports appointment variables | | 🔘 **Button** | Add a button with links; logs appointment status if applicable | | 🖼 **Image** | Displays images (uploaded, new upload, or AI-generated) | | ━ **Divider** | Adds a visual separator with a bold line | | ⬜ **Spacer** | Adds blank space (transparent or filled) | | 🧬 **HTML Block** | Add custom HTML (isolated from template CSS) | ![Emailv2ColumnEditorBlockOptions-20250425-181921.png](media://463b8026-6f84-44fc-9920-7f61d4a34de5) Each element includes a **drop-down settings menu** with extended styling options (mostly CSS). --- ## ✅ Finalizing Your Email Message ### 💾 Saving Your Work ![ColumnEditorSave-20250425-180826.png](media://4f6222a1-84f5-4c1b-8adc-e131eae38c54) - Each section in the email designer includes its **own dedicated Save button**, allowing you to preserve changes made specifically within that section. - To apply and finalize all changes made across your entire email message, use the **main Save button** located in the **top gray toolbar**. This action will return you to the main message list, where your updates will be reflected. > ✅ **Watch for the green notification** in the bottom-right corner confirming your changes. --- ### 🔧 Setting Up Test Variables To preview dynamic data (e.g., `[%=Appointment.Location%]`), use the **Test Contact** and **Test Appointment** buttons in the top designer toolbar. ![TestContactAppt-20250425-181715.png](media://6765e586-eb49-47b5-892e-3e0def973156) Fill in: ![TestContactEdit-20250425-181842.png](media://76277444-715f-494b-8a32-3d3df5d98821) - Example contact info - Example appointment details Click **OK** to save. The designer will then use these test values in preview mode and test emails. > ℹ️ 📘 To learn more, visit our [Test Contact and Appointment Data](https://support.inphonite.com/space/KBPUB/pages/1062109185) article. --- ### 👁 Previewing & Testing **To Preview:** ![sendTestMessage-20250425-181617.png](media://1635deb0-0475-44c7-8ed0-dff5c58204c3) - Use the **Preview** toggle switch in the toolbar. **To Send a Test:** 1. Select your test email from the drop down. 2. Click the **Test** button. 3. Look for the ✅ green confirmation. You can then continue iterating on your design, making changes and testing as needed. --- ## 🛠️ Support If you are unable to find answers to your questions, our Technical Support Department is here to help. **Contact Us:** - 📧 Email: [support@inphonite.com](mailto:support@inphonite.com) to open a support ticket. **Support Hours:** - **Eastern Time:** 9:00 AM – 6:00 PM - **Pacific Time:** 6:00 AM – 3:00 PM - **Days:** Monday – Friday > ℹ️ 💬 All support requests receive a response within **one business day**. Our Technical Support team addresses requests in the order they are received. > ℹ️ **Elite Support** clients are prioritized and connected with the next available technician. 📝 *Before contacting support, we recommend reviewing our article: **[Before You Contact Support](https://support.inphonite.com/space/KBPUB/56950798/Before+You+Contact+Support)* --- ## 📚 Additional Resources - [📖 Inphonite Blog](https://www.inphonite.com/resources/blog) - [📰 News & Announcements](https://support.inphonitehttps://www.inphonite.com/resources/news.com/news) - [▶️ Inphonite YouTube Channel](https://www.youtube.com/user/inphonite) --- ##### Related Articles