April 2020 Product Release Roll-Up

In this article we've outlined all of the new features and updates for all drag-and-drop editors in the system: Email Templates, Campaigns, Forms, Landing Pages, and Snippets.

Background Images

The background image feature allows our customers to use an image as a background in cells or for the email template as a whole.  The image can be modified image using our in-app image editor and styling controls are available that support full width, repeat, and center.

How do I apply a background image to my email design?
1. Open your email template or campaign in the drag-and-drop editor
2. Click "STYLE" tab seen above the editor controls (top right)
3. Locate "Background Image" section
4. Click image icon to open media library
5. Click on listed image, or upload new image and click "Insert"
6. Use styling options to apply image as Full Width, Repeat, or Center



How do I apply a background image to an individual cell in my email design?
1. Open your email template or campaign in the drag-and-drop editor
2. Click on desired cell
3. Locate and click "Cell Style" for additional format options
4. Locate "Background Image" section
5. Click image icon to open media library
6. Click on listed image, or upload new image and click "Insert"
7. Use styling check-boxes to apply image as Full Width, Repeat, or Center



TIP
1. If you want the background image for the template to show through each cell, set the template background color to transparent.  To do this, remove the hex color code (including #) seen below.
2. Background images will not display on mobile devices unless the background color is set to transparent.




Custom Web Fonts

The custom web font feature allows our customers to use their brand standards for fonts used in email campaigns.

Where do I setup custom web fonts in my account?
You will setup custom web fonts in the Settings dashboard of your account. 
1. Navigate to Settings > Account Management > Brand Styles
2. Using a website like fonts.google.com/ identify the font desired and in your Delivra account enter: Font Name, Font URL, Font Family
3. Saved custom web fonts will be available when selecting fonts in text editor in all drag-and-drop editors.

NOTE
Best use of custom web fonts are in forms and landing pages. Receiving email systems may not render the custom web font assigned to emails sent.


Button Styling

New button styling options give customers more control over how their buttons look, those updates include: 

• Define a style for all buttons at the email template level
• Specify height independent of padding applied
  

How do I define a button style for my email templates?
1. Open your email template or campaign in the drag-and-drop editor
2. Click "STYLE" tab seen above the editor controls (top right)
3. Scroll to locate "Buttons" section (seen in above image)
4. Define button color, width, height, border, radius, and padding



NOTE
Button styles can be overwritten at the cell style level, meaning even though button styling is applied to the template, buttons may still be edited for color, height, border, etc. in a campaign.


Cell Padding  / Template Padding

Updates to Padding allows customers  to easily add padding to individual cells or to email templates using our new controls and an Apply To All checkbox.

Cell Groups: Vertical columns & responsiveness

Updates to Cell Group customization allows our customers to create custom vertical columns in addition to creating custom rows. Also, specify if a Cell Group should be responsive when displayed on a mobile
device.

How do I create a cell group with custom columns?
1. Open your email template or campaign in the drag-and-drop editor
2. Insert row and assign as Cell Group
3. Click on Cell Group to edit
4. Locate and click "Change Cell Group Layout" (right)
5. Choose dimensions for Cell Group and click to select desired grouping from results
6. Click "Customize" button
7. Click dividers between each cell vertically to create a column
8. Click "Ok"

What is the difference between responsive and non-responsive Cell Groups?

When a Cell Group is specified to be responsive, it means that it will adapt to the receiving reading environment. In most cases, it means the cells will stack instead of shrink to fit. See example image below:



Social Share Buttons

Updates to Social Share/Follow buttons allow our customers more control of order and styling. Those updates include:

• New default social network icons:
  
• Change the order of the social share and social follow icons
• Change spacing between buttons
• Adjust styling of social icons

How do I change the display order of social icons?
1. Insert row into template layout and assign as Social Follow or Social Share
2. Click on the new Social icon row to edit
3. Use the move icons to drag-and-drop networks up or down to set display order (right)

How do I adjust the style of the social icons?
1. Insert row into template layout and assign as Social Follow or Social Share
2. Click on the new Social icon row to edit
3. Locate and click "Choose Icon Style" (right)
4. Use the drop-down menu for "Icon Style" to select another style

NOTE
The style selected will apply to all included social networks.


WhatsApp

Create specialized hyperlinks including country code, telephone number, and WhatsApp URL to generate conversations from the emails you send from Delivra.

Text Highlight

The text highlight feature allows our customer to call-out text in their emails. A new icon is available in the text editor toolbar for text background color, seen below.

How do I apply background color to my text?
1. With your mouse, highlight the text to apply background color to
2. Locate the text background color icon on toolbar
3. Click the down arrow to open color picker
4. Click on a displayed color to select it.

Brand Colors

An update to the display of color pickers throughout allows easy identification of the colors our customers are using in their design.  Easily choose a brand color versus a recently used color in the picker.