You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/engage/content/email/visual-html-editor.md
+12-6Lines changed: 12 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ title: Visual HTML Editor
3
3
beta: true
4
4
---
5
5
6
-
Use the Visual HTML Editor for both code and visual editing capabilities from a single view. With the Visual HTML Editor, you can build your email template with code, copy and paste existing code, or use the visual editor for a code free design experience.
6
+
Use the Visual HTML Editor to design your email template with both code and visual editing capabilities. Build your email template with code, copy and paste existing code, or use the visual editor for a code free design experience.
7
7
8
8
On this page, you'll learn how to use the Visual HTML Editor to build personalized email templates for your Engage campaigns.
9
9
@@ -14,14 +14,17 @@ You can navigate to the Visual HTML Editor in two ways:
14
14
- From a Send Email step in a Journey.
15
15
16
16
From the **Select Editor** screen, select **Visual HTML Editor** and click **Build Email**.
17
+
18
+
From the editor screen, click **Use HTML Editor** or **Use Visual Editor** to toggle between the two editors.
17
19
18
20
## Visual editor
19
21
20
-
Use the visual editor on the right for a no-code option to design your email. With the visual editor, you can:
22
+
Use the visual editor for a no-code option to design your email. With the visual editor, you can:
21
23
- Add or modify headings and text
22
24
- Modify text color, size, and style
23
25
-[Insert an image](#insert-an-image)
24
26
- Add [merge tags](#personalize-with-merge-tags) and links
27
+
- Use [liquid templating](#liquid-templating)
25
28
- Add emojis
26
29
27
30
Engage updates any changes you make in the visual editor to the [HTML editor](#html-editor) in real-time.
@@ -44,13 +47,16 @@ From the preview screen, you can toggle between desktop or mobile to view the em
44
47
45
48
## HTML editor
46
49
47
-
Use the HTML editor on the left to maintain your email template with code. Copy and paste existing code or build a new template in the editor.
50
+
Use the HTML editor to maintain your email template with code. Copy and paste existing code or build a new template in the editor.
51
+
52
+
Engage displays any changes you make in a preview screen to the right of your code. You can preview your email in both desktop and mobile display.
48
53
49
-
Engage displays any changes you make to the HTML editor in the [visual editor](#visual-editor) in real-time. However, if there are any errors detected in your code, you must fix the errors before Engage displays your updates.
54
+
> info ""
55
+
> When you toggle from the HTML Editor to the Visual Editor, Engage may make minor changes to your code formatting. If Engage re-formats your code, it will not affect the email layout.
50
56
51
57
### Error flagging
52
58
53
-
Engage displays in-line error flags in the code editor to help you debug your code. If there are errors, Engage doesn't render any of the updated content in the visual editor until you debug your code.
59
+
Engage displays in-line error flags in the code editor to help you debug your code. If there are errors, you might not see content as expected in the preview screen until you've debugged your code.
54
60
55
61
## Personalize with merge tags
56
62
Add merge tags to personalize your message with user profile traits.
@@ -105,7 +111,7 @@ For more on email unsubscribe links, view SendGrid's [best practices](https://se
105
111
106
112
## Save the template
107
113
108
-
After you design the email, click **Create Email Template**. Navigate to **Engage > Content > Templates** to view and maintain your email template.
114
+
After you design the email, click **Create Email Template**. You can navigate to **Engage > Content > Templates** to view and maintain your email template.
0 commit comments