This article provides detailed documentation on the visual editor of our template editors. Before getting into the visual editor, we suggest that you review the template editor's documentation that corresponds to the template that you want to create.
You can use the visual editor to drag-drop components from the content tab into the design panel to create templates for your campaigns. Using these components, you can create a rich HTML template that you can use in your campaigns to send amazing messages to your customers.
The benefit of using the visual editor is that you don't need knowledge of HTML to create beautiful templates for your campaigns.
The content tab of the visual editor provides three tabs under it that you can use to customize and create your template:
The CONTENT tab provides the components that you can drag-drop into the design panel to create the template. Specifically, it provides the components that define the content of the template. For example, you can drag-drop a text component if you want to add a text block in your template. Or an image component if you want to add an image to your template.
As you work on your component, the visual editor provides customization options related to the component. For example, you can insert a liquid merge tag or drop a list. When you select the component to work on it, you get options to customize the CSS properties of the component on the left panel.
Here's the list of components that the visual editor provides out of the box:
Add the title component to add a heading in your template. You can have the following heading levels in the template: H1, H2, and H3. You can choose the heading levels when you work on the component.
|Text||Add the text component to add rich text to your template. When you work on the template, you can choose a variety of customization options that the visual editor provides. For example, you can choose a different font, drop lists or URLs into the text, highlight the text, and more.
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. We provide options to 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.|
|Button||Add the image component if you want your customers to do something on the template. Normally, a button click launches a web-page or an in-app page. A button in your template adds a call to action to it.|
Add a divider component if you want a horizontal line break between components of your template.
|Social||Add the social component to add social media icons that link to your social media profiles. We provide 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. You can't upload a video to Blueshift at the moment. You can provide the video's URL in the content tab. If you provide a YouTube or Vimeo URL, we can automatically generate 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 icons alongside that link to the reviews page of your website.|
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.
When you select a component or a row, the left panel provides a button that you can use to add comments to the template.
When you click on the Show comments button, the visual editor displays a dialog that you can use to add or resolve comments. This can be useful in cases where your team is working on a template and would like to discuss their designs and decisions.
You can also delete or duplicate the component from this menu.
Based on the edits that you make to the email template, our platform provides an edit history. You can undo or redo your changes as you update the template.
You can use the buttons to undo or redo up to 15 latest changes. If you want to roll back your template to a point that's older than 15 last changes, you can click on the history timeline button. The history timeline button provides changes that are older than last 15 ones. For each event in the timeline, you see:
- 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, our web app's UI highlights the content or row that is tied to the edit.
You can also use the toggle layouts option to customize the template for desktops and mobile devices.
The ROWS tab provides different types of rows that you can add to your template to customize the template's layout. For example, you want to add a row that contains multiple columns.
You can drag-drop the row from the rows tab into the design panel.
You can then insert component from the content tab into the column of the row.
You can customize the columns of the row to your liking.
There might be times when you would want to reverse the stacking order of components if the email is viewed on a mobile device. For example, if you render this template on a mobile device, this is how the image and its title appear.
Now this is odd, since you would want the title to precede the image component. To fix this, you can toggle the Reverse stack order on mobile setting to reorder the components for a mobile display.
When you do this, this is how the template renders.
You can use multiple such settings available in the Rows tab to specify the layout of your template.
The SETTINGS tab provides the options to specify the global settings of the template. For example, you can specify the general width of the template, global font, background color, content alignment, and more.