Table of Contents

Using the Email Designer

Rob Howard Updated by Rob Howard

The Email Designer is a drag-and-drop design canvas used to more easily build and design beautiful  emails. We put together this guide to help you understand how to use the DailyStory Email Designer.

Overview 

The Email Designer has 4 main sections:

Email Designer
  1. Top menu bar - includes the name of the email, buttons and more options
  2. Design Canvas - the area where design widgets are placed
  3. Widget Menu - widgets that are drag-and-dropped onto the Design Canvas
  4. Save buttons - buttons for saving, copying and more

Top menu bar

The top menu bar displays the name of the email you are editing and also show contextual buttons.

The contextual buttons shown in the top menu bar will change when widgets on the design canvas are selected.

Email Designer
  • Select None - When a widget is selected on the design canvas clicking Select None will unselect the widget.
  • Clear When a widget is selected on the design canvas clicking Clear will remove the widget from the canvas.
A selected widget may also be removed by clicking the trash can or pressing the delete button.
  • Edit HTML When a widget is selected on the design canvas clicking Edit HTML opens a popup window with the HTML for that widget.
Editing the HTML of a widget is not recommended.
  • Undo Undo a previous action, e.g. undo removing a widget from the canvas.
  • Redo Redo a previous action, e.g. remove a widget from the canvas.

On the far right of the menu bar you can also find the more options button.

Design Canvas

The Design canvas is where widgets are placed or selected.

Selecting a widget

When moving the mouse over the canvas a blue box will highlight widgets. To select the highlighted widget click on the widget. When the widget is selected it is outlined and a contextual toolbar is shown on the top right of the widget:

Email Designer

Widget toolbar

  • Up arrow - select the parent of this widget
  • Cross arrows - click and drag the widget to move it
  • Copy - click to create a copy of this widget
  • Trash - remove the widget

Removing a widget

A selected widget is removed from the canvas by clicking the trash icon or pressing the delete button.

Some widgets cannot be selected or removed.

Adding a widget

To add a widget drag-and-drop it from the Widgets menu on the right.

If the widgets menu is not available, click "Select None".

When a widget is dragged on to the design canvas the parent widget where the widget is placed is highlighted in yellow and a green bar indicates where the widget will be placed.

Email Designer drag-and-drop

Widgets Menu 

The Widgets Menu displays design widgets that can be added to the Design Canvas by clicking, dragging and dropping to place them.

The Widget Menu display area changes when a widget is selected in the Design Canvas and has additional options.

See email designer widgets for details on individual widgets.

Widgets with Custom Menus

When selected, some widgets will replace the Widget Menu with options specific to that widget.

Text Section widget

When selected the Text Section widget opens a rich text editor in place of the Widget Menu:

Text Section

Content is written or copy/pasted into the rich editor and is updated in the Design Canvas.

Content that is copy/pasted is stripped of any special information, such as bolding or links.

Image widget

When selected the Image widget opens a set of image specific options in place of the Widget Menu:

Image widget options

Optionally specify if an image should be clickable. The Open File Manager button opens the DailyStory File Manager where files can be picked or uploaded.

To set the dimensions of the image, click the style tab and set the width and height.

Video widget

When selected the Video widget opens a set of video specific options in place of the Widget Menu:

Video widget options
  • Video URL URL to the video. When set, DailyStory will replace the default Video widget in the Design Canvas with a preview of your image.

Supported video sources:

  • Youtube
  • Vimeo

Styling Widgets

When a widget is selected the Widgets menu the Style tab is used to set style details about the selected widget.

The options shown in the Style menu change based on the widget selected.
  • Font family the font used for text, e.g. Helvetica
  • Font size the size of the font, e.g. 20px
  • Font weight the weight of the font, e.g. bold
  • Line height the spacing between lines, e.g. 24px
  • Color the color of the text, e.g. #FFCC2A
  • Background color the background color of the widget, e.g. #FFFFFF
  • Text align the alignment of the content in the widget, e.g. center
  • Padding the whitespace surrounding the widget, e.g. 15px
  • Width the width of the widget, e.g. 100%
  • Height the height of the widget, e.g. 250px
  • Min width the minimum width of the widget, e.g. 100px
  • Min height the minimum height of the widget, e.g. 100px
  • Max width the maximum width of the widget, e.g. 500px
  • Max height the maximum height of the widget, e.g. 500px
Some style values, such as Min and Max height and width are not supported by Microsoft Outlook.

Recommendation when possible, use percentages to express image dimensions. This enables the  email to scale based on the size of the client, such as mobile devices.

Creating a new email using the Designer

The Email Designer is built to support working with pre-made email templates or building new emails 100% in the designer.

If you are working with a pre-existing HTML template for your emails. This email should be created as a new Email Template. Furthermore, HTML elements within the template can use special mark up to identify which HTML sections are editable and which are not.

Start with an Email Container

The Email Container widget is a widget that creates an HTML layout with a 640px center area of content optimized for mobile and desktop email clients.

An email should use multiple Email Containers to logically separate parts of the email:

  • Header title and logo
  • Body main content of the email
  • Footer footer content, such as unsubscribe links
Email sections

This enables you to design an email with a colorful header area that spans the width of the email and a body and footer area that shows a white content area with a grey gutter area.

How did we do?

Create or Edit an Email

Email Options Menu

Contact