Visual Editor

The Visual Editor in the Zeta Marketing Platform enables marketers to focus more on content and less on writing, maintaining, and fixing HTML.

The templates created with the Visual Editor are responsive by default and should render correctly in all popular email clients. The first step in creating a new template is to choose your starting point. There are a number of pre-built templates and examples to choose from as well as the option to start from scratch in the Basic Designs. Once you choose a template to work with, the editor will load in and you're able to give the template a name. Templates in the Visual Editor are built using Rows, and Content is added to those rows to create the email.

The Visual Editor also has a number of default settings in the Settings tab on the right side of the editor. Start by setting the global default options in the settings tab and then continue to build out your template.

Rows

Rows are used to define the general structure of your email, help break up the template, and enhance the flexibility of settings that need to be set for specific parts of the email.

Rows allow up to six columns of content, and in mobile, these columns always stack left above right. Stacking can optionally be disabled, but this may lead to undesirable rendering. Additional row properties are available by clicking on the row outside of the highlighted content area.

Column properties are also available here. These options can be used to adjust background colors for specific rows, add or remove padding, and adjust borders. Once the overall structure of the template is configured using rows, it's time to start working on content.

Content

To add a content block to your email, click and drag it into the appropriate row. To see further options for the content block, click on the block in the email template.

There are eleven types of content available in the Visual Editor, as listed:

Content Types	Details
Text Note: This will be disabled by 2023. Start using the other text-based content blocks for optimum experience: Title, Paragraph, and List content blocks.	The text content block is used to add copy to the email. Clicking on the placeholder text gives further options to change font size and color among other options. Linking text can be done by highlighting the text that needs to be linked and then clicking the chain link icon to insert/edit a link. Special links, like webview and unsubscribe, can also be added in a similar fashion using the Special links option. Emojis can be added through the toolbar. Merge tags will appear with borders, making them easier to spot. Click on a merge tag to style, replace, or delete it.
Title	This content block is used to add text headings to email content. Clicking a Title block would show a toolbar that provides options to edit the blocks' texts. Only those highlighted texts and not the entire block are affected when the text toolbar is used to configure the following: Bold, Italicize, Underline, Strikethrough, Font color, Highlight color, Superscript, Subscript, Special Characters, Emoticons, Nonbreaking space, Collapse/Expand toolbar, Clear Formatting, Add Links, Remove Links, Special Links, Merge Tags. Other formatting options are available in the sidebar. Sidebar formatting options apply to the entire block to configure the following: Title type, Font Family, Font Weight, Font Size, Text Color, Link Color, Align, Line height, Letter spacing, Text direction, Padding options, Hide on options, Commenting, Delete, Duplicate
Paragraph	This content block adds text for paragraphs without the heading styling. Clicking a Paragraph block would show a toolbar that provides options to edit the blocks' texts. Only those highlighted texts and not the entire block are affected when the text toolbar is used to configure the following: Bold, Italicize, Underline, Strikethrough, Font color, Highlight color, Superscript, Subscript, Special Characters, Emoticons, Nonbreaking space, Collapse/Expand toolbar, Clear Formatting, Add Links, Remove Links, Special Links, Merge Tags. Other formatting options are available in the sidebar. Sidebar formatting options apply to the entire block to configure the following: Font family, Font Weight, Font Size, Text Color, Link Color, Align, Line height, Letter spacing, Text direction, Padding options, Hide on options, Commenting, Delete, Duplicate
List	This content block is used to add texts in list format with the option to configure the list styling. Clicking a Paragraph block would show a toolbar that provides options to edit the blocks' texts. Only those highlighted texts and not the entire block are affected when the text toolbar is used to configure the following: Bold, Italicize, Underline, Strikethrough, Font color, Highlight color, Superscript, Subscript, Special Characters, Emoticons, Nonbreaking space, Collapse/Expand toolbar, Clear Formatting, Add Links, Remove Links, Special Links, Merge Tags. Other formatting options are available in the sidebar. Sidebar formatting options apply to the entire block to configure the following: Font family, Font Weight, Font Size, Text Color, Link Color, Align, Line height, Letter spacing, Text direction, Padding options, Hide on options, Commenting, Delete, Duplicate
Image	The image content block is used to add images to a template. Upload an image by clicking and dragging it onto the grey placeholder or by clicking browse. Clicking browse will open the image library for the visual editor. The image library allows images to be: Uploaded Stored Organized into folders and reused as needed Simply click Insert next to the image you want to add to the template. The Zeta Marketing Platform also gives marketers access to thousands of free stock imagery to be used in content without attribution and for no additional cost. Just click Search Free Photos. Enter the relevant search term and click Import on the photo that will be used in the content. To close the image library, click the round X icon in the top right of the UI. After an image is added, additional options for the image content can be seen by clicking on the image. These options are where the width can be adjusted and links can be added.
Button	The button content block is used to add a CTA to a template.
Divider	The divider content block is used to add a divider or negative space to content in a controlled manner. The line can be: Transparent Solid Dotted or dashed and the color can be set in the content options.
Social	The social content block is a quick and easy way to add social icons to content. The icon style can be switched between 20 different styles depending on the desired look and feel. Icons can also be reordered and the specific URL can be set in the content options. Image files can be uploaded and used as custom icons in the content.
HTML	The HTML content block is used to add any custom content to a template that cannot be achieved using the five other content blocks. The following tags are allowed: `a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, center, cite, code, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var` The following attributes are allowed: general attributes: `style, id, class, data-, title` a: `href, name, target` img:* `align, alt, border height, hspace, src, vspace, width, usemap` table: `align, bgcolor, border, cellpadding, cellspacing, width` tbody: `align, valign` td: `align, bgcolor, colspan, height, rowspan, valign, width` tr: `align, bgcolor, valign` tfoot: `align, valign` th: `align, bicolor, colspan, height, rowspan, valign, width` thead: `align, valign` li: `type` map: `name` area: `alt, coords, href, shape, target`
Spacer	The spacer block is used to add space between blocks.
Menu	The menu block is used to add a simple, text-based navigation element. Clicking on a menu block would show more options to configure the menu items and click actions.

Mobile Design Mode

By default, the Visual Editor is launched on the web editing view. Click on the Mobile icon in the top-left area to switch to mobile view. You can continue to edit your content while in mobile design mode. An eye icon will also appear when there are contents hidden on mobile. This icon can be used to show these contents.

Dark Mode Preview

On preview, the Dark Mode Preview toggle can switch to dark mode preview. This allows you to simulate how the email content will render on a device or application in dark mode.

Note: This feature provides only a general approximation of dark mode experience with full-color inversion. Every application or device may have different behaviors when dark mode is enabled.

Content Defaults

Reach out to your account team to set default settings on any of the content blocks

Defaults may be set on your ZMP account for each content block. This may be font settings, alignment, image placeholder, etc. These settings will be applied when adding a new block to the email content. For example, different styles can be set as defaults set for H1, H2, and H3 title headings in Title Block.

Collaborative Editing

Reach out to your account team to get this feature enabled for your ZMP instance.

The visual editor supports collaborative editing with multiple users in real time. This feature is only available in Campaigns > Content & Audience and is not supported at the template level.

When a user joins the editing session, the editor will display a colored block containing the user's initials on the bottom left of the screen. The block's color indicates the color others will see when that user has selected content. As additional users join, different blocks will be added, displaying the number of users that have joined along with their selector color.

There is a hard limit of 20 simultaneous users in the same editing session, but we recommend keeping it to 10 or less to help prevent confusion and ensure performance.

Auto-Saving

Reach out to your account team to get this feature enabled for your ZMP instance.

The Visual Editor will save automatically once the content changes are made, ensuring that all your changes are saved. This feature is only available in Campaigns > Content & Audience and is not supported at the template level.