Marketing Automation - Email Designer

Email Designer

We all want to send emails that look good and entice users to act. Email Designer in BzCRM makes it easy to create such emails in quick time. Build rich email templates by using the drag-and-drop email builder, and get a head start by picking one out of our many pre-designed templates.

In this article, we will walk you through the process of creating a custom template. To start with, you would select one of the pre-designed themes or blueprints from our Templates Library, to open the Email designer.

Elements in the Template Designer

Content

Style

Merge Tags

Source

Hide Template Properties to view the full page.

Working with Template Designer

Create a new template for your campaign.

Drag and Drop the Content.

You can drag and drop the required content block to the edit area and rearrange the blocks within.

Rearrange and Duplicate the blocks if needed.

In the above image,

  1. Icon for dragging the block. Hold here to drag block.
  2. Icon to duplicate the block. Click here to duplicate current block.

Customize Template View

Customize the template by adding background color and styles for template, blocks, cells, and elements.

Template styles

Customize the template’s style and size, add color to the background and embed CSS properties.

  1. To set the background color,
    • Enter the HEX color code within the text field.
    • Click on the square box inside the text field and choose the color from the palette.

  1. Re-size the Body Width and Padding(in Pixel Units).

  1. Set the Template border color, border type, and thickness using the default format.

Block styles

You can set the different background color, width, padding values and border values for different blocks by following the same steps as the Template style.

Note! The Block Border thickness cannot be altered.

Cell styles

Set the cell background color and padding value to customize the cell size.

Element styles

Select an element in the edit area and customize it using CSS.

Add Merge fields to the Template.

Use Merge Tags to add a CRM field value to your template, you can do so by clicking on the corresponding tags.

E.g., To address a Contact you can choose Hi $Contact:Firstname$.

Use Text Editor Menu Bar to Format the Text.

Click on any block, you’ll find a Web-Text Editor which can be used for formatting font size, color, type, etc.

Update Image Properties.

To add the image properties, double-click on the image in the edit area or right click on it and click on Image Properties.

You’ll find the following pop up once you click on Image Properties, wherein you can customize the image.

All the physical properties of the image can be customized in Image info option, also it has the URL of the image and the Alternative text that appear in case of image loading error.

You can add a link to the image and set the target window type for that link.

You can also upload an image from your system.

  • Step 1: Choose a file for your device.
  • Step 2: Click on Send it to the Server to add the image to your Email.
Note! When inserting images in emails, Outlook might show the image in actual size than the specified size. Please resize the image using tools such as Photoshop, Github, and Image-Resizer.

In Advanced Image settings, you can customize the Language direction, Style the image, set an ID for the image, etc.

Use Tables to Customize the Layout.

To add the Table properties, double-click on the table in the edit area or right click on it and click on Table Properties.

You’ll find the following popup once you click on Table Properties, wherein you can customize the Table.

All the physical properties of the table can be customized in Table Properties option, also you can Caption the table and Summarize it.

In Advanced Table settings, you can customize the Language direction, Style the table, set an ID for the table, etc.

Remove blocks.

You can remove the blocks from the edit area just by hovering the cursor on to the block and clicking on the X Icon.

Note! You cannot remove all the blocks i.e., if there is only one block, you cannot delete it.

Use Preview to see how your email appears on Desktop and in Mobile.

Desktop View.

Mobile View.

Note! To retain the BUTTON (Cell formatted link) Block, edit in between the existing text.