Design template with Visual Editor

With the Visual editor, you can drag-drop HTML components as visual components into the design panel and design the template according to your requirements. The Visual editor provides a lot of advanced features to create a compelling template that you can use in your campaigns and send engaging messages to your customers.

When you create a template using the Visual Editor, you can select from a gallery of pre-created templates that Blueshift provides and then customize those templates to suit your needs.

Note: It is recommended that you keep the overall email file size under 102Kb and compress images before you add them to the email template.

Important

We recommend that you explicitly define any CSS classes that you use to design the content of an HTML block or a Shared Asset that you use in the Visual Editor to ensure that the styles are rendered correctly in the emails.

The Visual Editor

The left panel in the Visual Editor has 3 tabs: Content, Rows, and Settings. This panel provides the components that you can drag-drop into the design panel to create the template.

The design panel is where you design your template, add text and images, add personalization, and so on.

You can also use the toggle layouts option to view the template for desktops and mobile devices.

email_visualeditor_overview.png

The left panel in the template has 3 tabs that you can use to design the structure of the template.

Rows

Using the different types of rows, you can define the layout of your template.

A single row defines the horizontal layout of that particular area of the template. You can add multiple rows to define the entire layout of the template.

A row can include up to four columns, and it can either be empty or you can add content.

Content

Drag and drop the various content components into the rows that you have added to the template.

When you drag a content component into the required section of the template, it will auto-adjust to the column width.

Whenever you select a content component, the properties for that element are displayed in the Content tab.

Settings

Specify the global style settings for the template.

For example, you can specify the general width of the template, global font, background color, content alignment, and so on.

Basic template fields

All templates have the following fields.

  • Subject: This is the subject of the email. You can override this when you select the template in a campaign trigger by providing an alternate subject.
  • Preheader: This is the content that shows up in email previews.

You can use shared assets in your templates and include personalization using Liquid template language. To include personalization in the subject and preheader, use {{}} to insert liquid merge tags.

Design the template structure

Design the structure or skeleton of your email by dragging rows into the design panel. Each row represents a horizontal area of your email template. Stack up rows to design the entire structure. Using a row with more than one column allows you to put different content elements side by side. You can add all the structural elements you need at any time, regardless of the template you selected when you started.

For example, in the following image you can see 3 rows added to the template. The middle row has 3 columns.

visualeditor_drag_rows.png

Add components

The Content tab has various components that you can drag and drop into the rows and columns that you have added to your template. After you add a component, when you select the component in the design panel, the properties for that component are displayed in the Content tab. Some components also have an editor toolbar that you can use to edit the component.

The following components are available for you to use in your templates.

Title

Use the title component to add a heading in your template.

You can have H1, H2, and H3 heading levels in the template.

Text

Add the text component to add rich text to your template.

When you work on the template, you can use the text editor toolbar to change the paragraph formatting. For example, you can choose a different font, insert bullet lists or URLs into the text, highlight the text, and so on.

Use the content properties in the Content tab to change font color, link color, line height, padding, and so on.

You can also use Liquid merge tags in the text content of the template.

Image

Add the image component to add images to your template.

You can upload images from your computer, import images from a public location on the web (such as Dropbox, Google Drive, and more) or search for free images online.

Use the content properties in the Content tab to edit the image, add a URL, apply effects, and so on.

Button

Add the button component if you want your customers to complete an action. A button in your template adds a call to action (CTA) to it.

You can modify the button label, padding, border, radius, color, and so on.

For example, a button click can launch a web-page or an in-app page.

Divider

Add a divider component if you want a horizontal line break between the components of your template.

The divider can be a solid, slashed, or dotted line, or a transparent spacer.

Social

Add the social component to add social media icons that link to your social media profiles.

Blueshift provides Facebook, Twitter, Instagram, and LinkedIn icons by default.

You can add and remove social media icons based on your preference. You can add social media icons of your choice as well. You can provide links to your social media pages in the content tab as you work on the template.

HTML Add the HTML component to add custom HTML in your template. If you are comfortable with writing HTML, drop the HTML component in the template, select it in the design panel, and add your HTML code in the content tab.
Video

Add the video component to add a video in the email template.

Note: You cannot upload a video to Blueshift but you can provide a URL for the video in the content tab. If you provide a YouTube or Vimeo URL, Blueshift automatically generates a video preview.

Icons

Add the icon component if you want to add icons in your template.

Unlike the image component, you can add multiple icons in a single component and choose different icons for different purposes.

For example, you can add your company logo and link it to your company's website and add a star icon that links to the reviews page of your website.

Menu

Add the menu component if you want to provide menu items in your template. You can use this component to add clickable text components in your template.

For example, you can add a menu at the top of the template that links to different pages of your site.

For example, here is the same template in which we previously added 3 rows, but with components added to the rows.

visualeditor_drag_content.png

The following example shows the component properties for the image component.

visualeditor_content_properties.png

The following example shows the component properties and the editor toolbar for the button component.

visualeditor_content_properties_2.png

Template settings

From the Settings tab, you can configure settings that apply to the entire email. These global settings are overridden by settings that you apply to individual components when you edit them.

Content area width

The width for the content area.

Typically is set to 600px which provides enough space to design your email and also works well with most Web & desktop email clients. This width is ignored for smaller devices.

Content area alignment Set the content as left aligned or center aligned.
Background color

This is the default background color for the message.

You can override it at the row, column, and content block level by setting the properties for these components.

Content area background color The default background color for the overall content area, which is the area for which you set the width above.
Default font

The default font family for all the content components.

You can override it at the row, column, and content block level by setting the properties in the editor toolbar.

Link color

The default link color for all the links in the message.

You can override it at the row, column, and content block level by setting the properties for the component in the Content tab.

visualeditor_content_settings.png

Responsive design for mobile devices

You can use various options to view and control how the template renders on a mobile device.

  • Use the toggle layouts option to view the template for desktops and mobile devices.
  • Set the “Do not stack on mobile" option so that the columns in a row are not stacked on mobile devices.
  • Set the “Reverse stack on mobile” option to control how the components of a row are stacked.
  • For images, set the “Full width on mobile” option to define the image size.
  • You can also select an individual component and set if the component is hidden on desktop or mobile devices.

The following example shows how a row with columns renders on desktop and mobile devices.

visualstudio_responsive.png

Comments for collaboration

When you select a component or a row, use the Show comments button to view comments that were previously added and to add your comments to the template.

When you click Show comments, all comments are displayed. You can add new comments or resolve existing comments. This can be useful in cases where your team is working on a template and would like to discuss their designs and decisions.

mceclip0.png

Edit history

Based on the edits that you make to the email template, the Blueshift platform provides an edit history.

You can undo or redo your changes as you update the template. You can undo or redo up to 15 latest changes. To roll back your template to a point that's older than 15 last changes, click the history timeline button. The history timeline button provides changes that are older than the last 15 ones.

For each event in the timeline you can see the following information:

An icon to identify the type of content that was changed (such as an image or text).

  • A description of the change.
  • The time of the change.
  • When you select an edit in the timeline, the content or row that is tied to the edit is highlighted.

Note: This history is only available while you are editing the template. If you close the template and reopen it, the edit history is empty.

visualstudio_history.png

Include links

Blueshift supports the following links in the message content:

  • http:
  • https:
  • mailto: to launch the user's default email app to send an email to a specified email address. For example: <a href="mailto:someone@example.com">Send email</a>
  • tel: to start a phone call to a specified number. For example: <a href=”tel:+1954123555”>Call us</a>
  • sms: to launch the SMS app to send an SMS to a specified number. For example: <a href="sms://+14035550185">Send an SMS</a>
  • Deep links (for mobile customers). 

The click activity for users clicking on these links is available in the email template Click heat map report. You can also see these clicks in Campaign activity reports, Campaign performance reports, Insights reports and on the Creatives index screens.

Note: Clicks for mailto: links are not tracked.

Attributes for links

You can classify a link as web-only or as a deeplink by adding an attribute for the link.

  • To add an attribute to linked text, use the Text Editor toolbar to add or edit the link. Go to the Custom Attributes section to add the attribute.


    visualeditor_text_attribute.png

  • To add an attribute to a linked image or button, select the image or button and click Add New Attribute in the Content pane.


    visualeditor_link_attribute.png

Tips and Tricks

Here are some tips for including some commonly used and useful elements in your emails.

Email banner image

Here are some guidelines for the email banner image size:

  • For desktop screens, the recommended width is between 650px to 700px and the height between 90px to 200px.
  • For mobiles, the recommended width is between 320-385px and the height up to 100px.
  • On most devices, users can view approximately the first 300-500px section of the email without scrolling. As such, it is recommended that the email banner height should be small enough for the users to be able to view the email content without scrolling.

Anchor links

Anchor links at the top of a long newsletter are useful so that readers can quickly navigate to any section without having to scroll through the entire newsletter.  

An anchor link is made up of two parts: the URL link and the actual anchor tag that the link is “jumping” to in your email.

To add an anchor link in your email, complete the following steps:

  1. Add an HTML tag to the row to which you want to add the anchor link to. 

    In the following example, the link is added to the row for the Hot stone massage section.

  2. Add an anchor by editing the HTML code and adding the following code. The name is the keyword that you will use when linking to this anchor tag. 

    In this example, we are setting the name=”stone”.

    <a name="stone"><br /></a>

  3. Go to the top of the newsletter or to the section of the newsletter where you want to add the link to this anchor. 
  4. Select the text that you want to link.
  5. Click the link icon in the text editor panel and for the URL add a # followed by the name that you set for the anchor. 

    In this example, we set the name=”stone” and so the URL that we add will be #stone.

visualeditor_anchorlink_1.pngvisualeditor_anchoremail_2.png

CTA buttons

When you add call to action (CTA) buttons in your templates, use the Action properties to add a URL to the button.

visualeditor_cta_action.png

Increase visibility

 You can update the following properties to increase the visibility and impact.

  • Change the background color.
  • Update and style the text.
  • Increase the width and adjust the padding.
  • Change the border radius to change the shape of the button.
  • Change the border.
    • Add a thin border to add depth to the button.
    • You can also add a thicker border in a shade darker than the button to add depth.
    • Omit the background color for a lighter effect.

Button on a background image

To add a button on a background image, complete the following steps:

  1. Enable the “Row background image” setting and add a background image for the row.
  2. Add a button to the row.
  3. Edit the button properties to set the background color as transparent.
  4. Edit the button properties to set a border for the button.
  5. Add a text component and use it to increase the size of the row to display more of the background image.

visualeditor_button_on_image.png

Emojis

Emoji are creative emotion-conveying graphics that you can insert into text. While less common in email marketing, they can be very effective if you use them with proper consideration.

Blueshift currently supports up to Unicode Version 5.2.  However, any standard byte size emoji (4 bytes or less), regardless of the Unicode version, should work.

Here are few resources available to copy and paste emojis into your emails.

Note: Emojis do not render in all email clients. Always test to see if the emoji are properly inserted in various clients, and know which ones are the most commonly used by your target audience. If the symbol is not supported by the email client, recipients will typically see a little box character instead - ☐.

Supported emojis include the following:

😁, 😂, 😃, 😄, 😅, 😆, 😉, 😊, 😋, 😌, 😍, 😏, 😒, 😓, 😔, 😖, 😘, 😚, 😜, 😝, 😞, 😠, 😡, 😢, 😣, 😤, 😥, 😨, 😩, 😪, 😫, 😭, 😰, 😱, 😲, 😳, 😵, 😷, 😸, 😹, 😺, 😻, 😼, 😽, 😾, 😿, 🙀, 🙅, 🙆, 🙇, 🙈, 🙉, 🙊, 🙋, 🙌, 🙍, 🙎, 🙏, 🚀, 🚃, 🚄, 🚅, 🚇, 🚉, 🚌, 🚏, 🚑, 🚒, 🚓, 🚕, 🚗, 🚙, 🚚, 🚢, 🚤, 🚥, 🚧, 🚨, 🚩, 🚪, 🚫, 🚬, 🚭, 🚲, 🚶, 🚹, 🚺, 🚻, 🚼, 🚽, 🚾, 🛀, 🅰, 🅱, 🅾, 🅿, 🆎, 🆑, 🆒, 🆓, 🆔, 🆕, 🆖, 🆗, 🆘, 🆙, 🆚, 🈁, 🈂, 🈚, 🈯, 🈲, 🈳, 🈴, 🈵, 🈶, 🈷, 🈸, 🈹, 🈺, 🉐, 🉑, 8⃣, 9⃣, 7⃣, 6⃣, 1⃣, 0⃣, 2⃣, 3⃣, 5⃣, 4⃣, #⃣, 🀄, 🃏, 🌀, 🌁, 🌂, 🌃, 🌄, 🌅, 🌆, 🌇, 🌈, 🌉, 🌊, 🌋, 🌌, 🌏, 🌑, 🌓, 🌔, 🌕, 🌙, 🌛, 🌟, 🌠, 🌰, 🌱, 🌴, 🌵, 🌷, 🌸, 🌹, 🌺, 🌻, 🌼, 🌽, 🌾, 🌿, 🍀, 🍁, 🍂, 🍃, 🍄, 🍅, 🍆, 🍇, 🍈, 🍉, 🍊, 🍌, 🍍, 🍎, 🍏, 🍑, 🍒, 🍓, 🍔, 🍕, 🍖, 🍗, 🍘, 🍙, 🍚, 🍛, 🍜, 🍝, 🍞, 🍟, 🍠, 🍡, 🍢, 🍣, 🍤, 🍥, 🍦, 🍧, 🍨, 🍩, 🍪, 🍫, 🍬, 🍭, 🍮, 🍯, 🍰, 🍱, 🍲, 🍳, 🍴, 🍵, 🍶, 🍷, 🍸, 🍹, 🍺, 🍻, 🎀, 🎁, 🎂, 🎃, 🎄, 🎅, 🎆, 🎇, 🎈, 🎉, 🎊, 🎋, 🎌, 🎍, 🎎, 🎏, 🎐, 🎑, 🎒, 🎓, 🎠, 🎡, 🎢, 🎣, 🎤, 🎥, 🎦, 🎧, 🎨, 🎩, 🎪, 🎫, 🎬, 🎭, 🎮, 🎯, 🎰, 🎱, 🎲, 🎳, 🎴, 🎵, 🎶, 🎷, 🎸, 🎹, 🎺, 🎻, 🎼, 🎽, 🎾, 🎿, 🏀, 🏁, 🏂, 🏃, 🏄, 🏆, 🏈, 🏊, 🏠, 🏡, 🏢, 🏣, 🏥, 🏦, 🏧, 🏨, 🏩, 🏪, 🏫, 🏬, 🏭, 🏮, 🏯, 🏰, 🐌, 🐍, 🐎, 🐑, 🐒, 🐔, 🐗, 🐘, 🐙, 🐚, 🐛, 🐜, 🐝, 🐞, 🐟, 🐠, 🐡, 🐢, 🐣, 🐤, 🐥, 🐦, 🐧, 🐨, 🐩, 🐫, 🐬, 🐭, 🐮, 🐯, 🐰, 🐱, 🐲, 🐳, 🐴, 🐵, 🐶, 🐷, 🐸, 🐹, 🐺, 🐻, 🐼, 🐽, 🐾, 👀, 👂, 👃, 👄, 👅, 👆, 👇, 👈, 👉, 👊, 👋, 👌, 👍, 👎, 👏, 👐, 👑, 👒, 👓, 👔, 👕, 👖, 👗, 👘, 👙, 👚, 👛, 👜, 👝, 👞, 👟, 👠, 👡, 👢, 👣, 👤, 👦, 👧, 👨, 👩, 👪, 👫, 👮, 👯, 👰, 👱, 👲, 👳, 👴, 👵, 👶, 👷, 👸, 👹, 👺, 👻, 👼, 👽, 👾, 👿, 💀, 💁, 💂, 💃, 💄, 💅, 💆, 💇, 💈, 💉, 💊, 💋, 💌, 💍, 💎, 💏, 💐, 💑, 💒, 💓, 💔, 💕, 💖, 💗, 💘, 💙, 💚, 💛, 💜, 💝, 💞, 💟, 💠, 💡, 💢, 💣, 💤, 💥, 💦, 💧, 💨, 💩, 💪, 💫, 💬, 💮, 💯, 💰, 💱, 💲, 💳, 💴, 💵, 💸, 💹, 💺, 💻, 💼, 💽, 💾, 💿, 📀, 📁, 📂, 📃, 📄, 📅, 📆, 📇, 📈, 📉, 📊, 📋, 📌, 📍, 📎, 📏, 📐, 📑, 📒, 📓, 📔, 📕, 📖, 📗, 📘, 📙, 📚, 📛, 📜, 📝, 📞, 📟, 📠, 📡, 📢, 📣, 📤, 📥, 📦, 📧, 📨, 📩, 📪, 📫, 📮, 📰, 📱, 📲, 📳, 📴, 📶, 📷, 📹, 📺, 📻, 📼, 🔃, 🔊, 🔋, 🔌, 🔍, 🔎, 🔏, 🔐, 🔑, 🔒, 🔓, 🔔, 🔖, 🔗, 🔘, 🔙, 🔚, 🔛, 🔜, 🔝, 🔞, 🔟, 🔠, 🔡, 🔢, 🔣, 🔤, 🔥, 🔦, 🔧, 🔨, 🔩, 🔪, 🔫, 🔮, 🔯, 🔰, 🔱, 🔲, 🔳, 🔴, 🔵, 🔶, 🔷, 🔸, 🔹, 🔺, 🔻, 🔼, 🔽, 🕐, 🕑, 🕒, 🕓, 🕔, 🕕, 🕖, 🕗, 🕘, 🕙, 🕚, 🕛, 🗻, 🗼, 🗽, 🗾, 🗿, 😀, 😇, 😈, 😎, 😐, 😑, 😕, 😗, 😙, 😛, 😟, 😦, 😧, 😬, 😮, 😯, 😴, 😶, 🚁, 🚂, 🚆, 🚈, 🚊, 🚍, 🚎, 🚐, 🚔, 🚖, 🚘, 🚛, 🚜, 🚝, 🚞, 🚟, 🚠, 🚡, 🚣, 🚦, 🚮, 🚯, 🚰, 🚱, 🚳, 🚴, 🚵, 🚷, 🚸, 🚿, 🛁, 🛂, 🛃, 🛄, 🛅, 🌍, 🌎, 🌐, 🌒, 🌖, 🌗, 🌘, 🌚, 🌜, 🌝, 🌞, 🌲, 🌳, 🍋, 🍐, 🍼, 🏇, 🏉, 🏤, 🐀, 🐁, 🐂, 🐃, 🐄, 🐅, 🐆, 🐇, 🐈, 🐉, 🐊, 🐋, 🐏, 🐐, 🐓, 🐕, 🐖, 🐪, 👥, 👬, 👭, 💭, 💶, 💷, 📬, 📭, 📯, 📵, 🔀, 🔁, 🔂, 🔄, 🔅, 🔆, 🔇, 🔉, 🔕, 🔬, 🔭, 🕜, 🕝, 🕞, 🕟, 🕠, 🕡, 🕢, 🕣, 🕤, 🕥, 🕦, 🕧, ✂, ✅, ✈, ✉, ✊, ✋, ✌, ✏, ✒, ✔, ✖, ✨, ✳, ✴, ❄, ❇, ❌, ❎, ❓, ❔, ❕, ❗, ❤, ➕, ➖, ➗, ➡, ➰, Ⓜ, ‼, ⁉, ™, ℹ, ↔, ↕, ↖, ↗, ↘, ↙, ↩, ↪, ⌚, ⌛, ⏩, ⏪, ⏫, ⏬, ⏰, ⏳, ▪, ▫, ▶, ◀, ◻, ◼, ◽, ◾, ☀, ☁, ☎, ☑, ☔, ☕, ☝, ☺, ♈, ♉, ♊, ♋, ♌, ♍, ♎, ♏, ♐, ♑, ♒, ♓, ♠, ♣, ♥, ♦, ♨, ♻, ♿, ⚓, ⚠, ⚡, ⚪, ⚫, ⚽, ⚾, ⛄, ⛅, ⛎, ⛔, ⛪, ⛲, ⛳, ⛵, ⛺, ⛽, ⤴, ⤵, ⬅, ⬆, ⬇, ⬛, ⬜, ⭐, ⭕, 〰, 〽, ㊗, ㊙

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.