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 without the need to know any HTML or CSS.

Creating a live content template using the Visual Editor includes the following tasks:

Provide the template a name and select a layout as per your content strategy.
Design the structure of the template by adding rows.
Add the design elements like paragraphs, lists, images, and so on, and configure the component settings to your liking.
Configure the template settings.
You can also include different types of links in the content.
Define custom conditions for rows so that a row is displayed only to users who meet the specified criteria.
Configure settings for a responsive design to control how the template renders on a mobile device.
Add comments for collaborators or view edit history to check previous changes.

Add a live content Visual template

To add a Live content Visual template, complete the following steps:

Go to Templates > Live Content.
Go to the Templates tab and click +TEMPLATE.
Click Visual Template.
In the next page, provide a template name and select from a library of templates to get started.
Click Create.

You can then edit the template to match your requirements.

The Visual Editor

Navigate to the Content tab on top. Here is your Visual Editor where you can design the template layout visually using the drag and drop system. You can then add personalizations and recommendations as required.

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 in the center is where you design your template, add text, images, tables, add personalization, and so on. To get you started quickly, in this screenshot of a Popup layout, you can see that we've included a default design for inspiration. You can modify the design element, or delete and create content from scratch.

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, meta title, and so on.

Locking rows and content blocks in the visual editor

Locking an entire row or a particular content block in the visual editor helps prevent accidental edits or deletions, ensuring better control over the template's structure.

Select a row or a content block on the visual editor.
Toggle the Locked option at the top of the left-side panel to lock or unlock the row or content block.

Please note:

Locked rows or content blocks can only be edited or unlocked by Admins and Authors.
A warning message appears if an unauthorized user attempts to edit a locked row or content block.

Design the template structure

Design the structure or skeleton of your Live content asset by dragging rows into the design panel. Each row represents a horizontal area of your live content 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 first row has 3 columns.

You can select a row and then set various properties for the rows and the content areas within it.

Row background color	Set the background color for the row.
Content area background color	Set the background color for the content in the row.
Row background image	Add a background image for the row.
Row background video	Add a background video for the row.
Vertical alignment	Control the vertical alignment of items within the row. Set the alignment as top aligned, center aligned, or bottom aligned.
Content area rounded corners	Add rounded corners for the content area.
Content area borders	Add a border for the content area.
Block identifier	Toggle Block identifier ON in the Content panel to assign a unique ID to a block. Blueshift automatically generates one (for example, `module_5a78048d-d6d9-4ddb-9e4f-1e68c068a723`), but you can rename it to something more readable and save your changes. You can reference this ID in Custom Head HTML to apply CSS styles to that specific block.
Content area padding	Adjust the spacing between the content and the edges of the row. Use the Top, Bottom, Left, and Right controls to set individual padding values. Turn on More options to configure each side independently, or turn it off to apply the same padding to all sides.
Mobile optimization options Do not stack on mobile Reverse stack order on mobile Hide on	Use the row properties to view and control how the template renders on a mobile device. For more information, see Responsive design for mobile devices.
Display Condition	Define a custom condition for a row so that the row is displayed only to users who meet the specified criteria. In this way, you can use a single template to target multiple audiences.
Cards style	Configure how individual cards within a row are styled and spaced. Use the Spacing control to adjust the space between cards. To round the corners of cards, use the Cards rounded corners settings. Turn on More options to set different corner values for the top-left, top-right, bottom-left, and bottom-right corners, or turn it off to apply the same radius to all corners.
Customize Columns	Add or delete the columns in a row. You can also adjust the size of the existing columns in a row by dragging the divider.
Column settings Background color Padding Border	Change the background color, add padding, or add a border for a column in the row.

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.
Paragraph	Add the paragraph component to add a rich text to your template. The paragraph block gives you more control over the text format. You can change the font family, font size, font weight, text alignment, text direction, paragraph spacing, and so on from the content properties settings in the Content tab. Additional settings are available in the text editor toolbar. You can also use Liquid merge tags in the text.
List	Add the list component to include ordered and unordered lists in your template. The list block is similar to a paragraph block and additionally supports numbered and bulleted lists.
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 set the alt text or title.
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, hover effects, 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.
Spacer	Add a spacer component if you want to add some vertical space between two components in your template.
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 live content 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.
AI+ Items	Add the AI+ Items component to include recommendations in your template. For more information, see Include recommendations using Visual Studio. Note: If Recommendations are not enabled for your account, you won’t see this component. Contact your account manager to enable recommendations.
Table	Add the table component to present data in rows and columns, perfect for presenting product comparisons, pricing plans, or any info that benefits from a structured format.

For example, here is a template in which there are 3 rows, but with components added to the rows. The following example also shows the component properties for the table component.

Configure template settings

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

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.
Background image	Add a background image for the row. You can upload an image or provide an image URL (for example, `https://example.com/background.jpg`). Use the Apply effects and Change image options to edit or replace the image. You can also control how the image appears by enabling Fit to background, Repeat, or Center. Note: Some email clients may not display background images. Add a fallback content area background color to maintain a consistent appearance.
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.
Optional properties > Page details	Set the landing page title and description. This page title is displayed on the browser tab when a customer opens your website.

Custom Head HTML

Use Custom Head HTML (under the Settings tab) to add code to the <head> of your live content template. You can include meta tags, custom fonts, or CSS rules, and use CSS to target specific content blocks by their Block IDs.

These changes appear in the preview (accessible from the Properties or Data tab) and in the published output, but not directly within the visual Content Builder.

Feature availability and rendering

This option isn’t available for Popup templates. Code added to Custom Head HTML can change how your message appears across different browsers and email clients. To check which CSS properties are supported, see Email client CSS support (Mailchimp).

Here’s a sample you can add to the Custom Head HTML section:

<style type="text/css">
/* Import font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

h1,
h2,
h3 {
	font-family: 'Poppins', Arial, sans-serif;
}

/* Target a specific content block by its ID (for example: #module_123abc) */
#module_5a78048d-d6d9-4ddb-9e4f-1e68c068a723 {
	padding: 20px !important;
}

/* Device-specific styles */
@media only screen and (max-width:600px) {
	h1 {
		font-size: 22px !important;
	}
}
</style>

Tips

Avoid vendor-specific CSS classes (for example, .row-content).
Use Desktop, Tablet, and Mobile preview modes to test your styles.

Live Content Membership trigger behavior

A Live Content Membership trigger only adds the user to a Live Content campaign. It does not pass any data or payload from the parent campaign, whether it is segment-triggered, event-triggered, recurring, or a one-time send.

Data from the parent campaign is not available in Live Content. Liquid expressions that reference upstream fields — for example, event data or interest-alert attributes — will not populate in Live Content templates.

Note: If you add such fields in your Live Content template, they may appear to work in Studio preview but will not render on your website or in your app.

Conditional display of rows

The Display Condition feature lets you to define a custom condition for a row so that the row is displayed only to users who meet the specified criteria. In this way, you can use a single template to target multiple audiences. For example, you can use conditional display of rows to implement localization.

Use Liquid syntax and personalization attributes to define the condition.
Add the Liquid expression for the condition in the Before field.
Add {% endif %} in the After field.

In the following example, a clothing sales promotion template contains promotions for both male and female customers.

The promotional content for female customers is in row 1 and the promotional content for male customers is in row 2.
Row 1 has the following display condition set: (condition = {% if user.gender == "female" %}). As such this row is displayed only for female customers and not for male customers.
Row 2 has the following display condition set: (condition = {% if user.gender == "male" %}). As such this row is displayed only for male customers and not for female customers.

Include links

You can include various types of links in the messages. The click activity for users clicking on these links is available in the live content report.

Blueshift supports the following links in the message content:

http:	For example, `http://www.blueshiftreads.com`
https:	For example, `https://www.blueshiftreads.com`
mailto:	Launches the user's default email app to send an email to a specified email address. For example: `<a href="mailto:[email protected]">Send email</a>`
tel:	Starts a phone call to a specified number. For example: `<a href=”tel:+1954123555”>Call us</a>`. You can use Liquid syntax to personalize the phone number. For example, add the contact number of a support agent - `{{user.customersupport_phone}}`.
sms:	Launch the SMS app to send an SMS to a specified number. For example: `<a href="sms://+14035550185">Send an SMS</a>` You can use Liquid syntax to personalize the phone number. For example, add the contact number of a support agent - `{{user.customersupport_phone}}`. You can add precompiled messages for SMS links. When customers click on such links, they do not have to type out a message. Instead, the message is pre-populated and they only have to send the message.
Deep links	Include deep links in the messages. (for mobile customers)
Dismiss	Applicable for Popup templates. Simply add dismiss in the ID field for the selected content row.

Comments for collaboration

When you select a component or a row, use the Comment icon (in the icon group to the right) to view comments that were previously added and to add your comments to the template.

When you click on the comment icon, all comments are displayed. You can add, edit or delete 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.

Edit history

Based on the edits that you make to the live content 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 small history timeline icon at the bottom right corner of the screen. 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.

Visual Builder: Email vs. Live Content

While both our visual builders share a similar drag-and-drop interface for building content without code, you might notice some key differences when working with live content compared to emails.

Feature	Email Visual Builder	Live Content Email Visual Builder
Content Area Width	Slider to adjust width for various devices	Fixed width based on properties tab settings (no slider)
Mobile/Desktop View	Always present for responsive design
Metadata	Limited to title	Additional fields like description, language, and favicon (except popups)
Content Blocks	Standard set of blocks	Standard set of blocks Standard blocks + new "Table" block for all types (except popups)
Custom Head HTML	Available	Available (except Popup templates)

Designing Live Content Using Visual Editor