Table of Contents
Using the Email Designer
Updated
by Christy Cook
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:
- Top menu bar - includes the name of the email, buttons and more options
- Design Canvas - the area where design widgets are placed
- Widget Menu - widgets that are drag-and-dropped onto the Design Canvas
- 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.
- 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.
- Edit HTML When a widget is selected on the design canvas clicking Edit HTML opens a popup window with the HTML for that widget.
- 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:
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.
Adding a widget
To add a widget drag-and-drop it from the Widgets menu on the right.
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.
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:
Content is written or copy/pasted into the rich editor and is updated in the Design Canvas.
Image widget
When selected the Image widget opens a set of image specific options in place of the Widget Menu:
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 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.
- 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
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.
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
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.