New? Start Here
Step 1: Set up your account
Step 2: Bring in your contacts
Step 3: Create customer lists
Step 4: Set up email
Step 5: Set up text messaging
Step 6: Create your first campaign
Your DailyStory Settings
Manage Personal Subscriptions
Changing Your Password
Personal Settings Frequently Asked Questions
Setting up Email Marketing
Setting up Text Message Marketing
Integrating With Your Website
Using Subscription Preferences
Install DailyStory WordPress Plugin
Install DailyStory Beacon in SquareSpace
Install DailyStory Beacon in WiX
Beacon Frequently Asked Questions
Licensing and Usage
Choosing your Plan
Understanding Plan Usage
Free Plan (Freemium) Account Verification
Free Plan (Freemium) Limitations
Upgrading Your Subscription
Purchase Managed Services
Cancelling your DailyStory Service
Credit Card Declined
Setting Up A Subdomain
Permissions Frequently Asked Questions
DailyStory Developer Guide
Build Popular Campaigns
Find New Customers
Work with Contacts
Managing Static Segments
Managing Dynamic Segments
DailyStory Segments Guide
Viewing the Contacts in a Segment
Disabling and Enabling Segments
Deleting and Restoring Deleted Segments
Archiving and Restoring Archived Segments
Contacts Feature Guide
Editing contact records
Adding contacts manually using the Create Contact option
Importing contacts using the Import Bulk tool
Adding contacts using automation
Arranging order of custom contact record fields
Merge duplicate contacts
Making Contacts Inactive
Searching for contacts
Getting started with contacts search
Using direct free text search
Using advanced search
Changing order of custom contact search fields
Filtering your search
Common searches used for segments
Managing custom contact fields
Accessing the custom contact fields
Creating custom contact fields
Sample custom field configuration
Enabling a custom field in search
Editing and arranging custom contact fields
Work with Campaigns
DailyStory Campaigns Guide
Creating a campaign
Managing a Campaign
Add Contacts to a Campaign
Editing a campaign
Pausing or Unpausing a campaign
Deleting a campaign
Cloning a campaign
Inbound Marketing Tools
Landing Page Guide
Creating or Editing a Landing Page
Using the Page Designer
Adding a Form to a Landing Page
Editing a Landing Page's HTML and CSS
Landing Page Frequently Asked Questions
Creating a Popup Using a Canva Image
Configuring a Popup's Basic Settings
Configuring a Popup's Display Options
Configuring a Popup's Layout Options
Popup Frequently Asked Questions
Tracking Links Guide
Create or Edit a Tracking Link
Test a Tracking Link
Tracking Link Advanced Options
Tracking Link Metrics and Reporting
Measure click performance and track link conversions
Tracking Links Frequently Asked Questions
Web Forms Guide
Create or Edit a Web Form
Design a Web Form
Styling your Web Form
Publishing your Web Form
Web Forms Frequently Asked Questions
Google Ads Conversion Tracking
Outbound Marketing Tools
Email Marketing Guide
Create an Email from a Template
Using the Email Designer
Create or Edit an Email
Email Designer Widgets
Preview an Email
Send a Test Email
Send an Email
Mocking a forwarded or replied to email
Scheduling an Email
Send an Email to a Single Contact
Built-in Email Guardrails
Create an Email Template
Edit an Email Template
Manage Email Revisions
Email Designer Advanced Topics
Email Merge Tags
Edit Email HTML, CSS and AMP
Import and Export Emails
Email Technical Details
Troubleshoot Email Delivery
Bounced Email Guide
How to Warm-Up an IP address
Send AMP Emails
Email Frequently Asked Questions
Email Designer Frequently Asked Questions
Cloning an email
Configuring SPF, DKIM and DMARC
Editing HTML in the Email Designer
Transactional Email Guide
Send a Text Message Quick Start
DailyStory SMS Marketing Guide
Creating or Editing a Text Message
Sending Text Messages
Sending a Test Text Message
Text Message Replies Report
Understanding Text Messaging Costs
Text Message Sending Guardrails
Text Message Deliverability Score
Sending Individual Text Messages
Replies to Text Messages
Understanding Text Message Delivery Codes
Setting up Keywords for Text Message Replies
Opting out of Text Messages
Text Message Frequently Asked Questions
Copying a Text Message
Purchase Text Message Credits
SMS Links with Restricted Content
Opting into Text Messages
Custom SMS URL Shortener
Built in Personalization Tokens
Custom Personalization Tokens
Using Conditional Logic with Personalization
Personalization Frequently Asked Questions
Web Push Notifications
Point of Sale
GoToWebinar integration using Zapier
Save SMS Replies to Google Sheets using Zapier
Integration for Slack
Google Analytics Integration
Google reCAPTCHA Integration
Design an Automation
Exporting and Importing Automations
Automation Frequently Asked Questions
Reports and Dashboards Guide
Sent Emails Report
Sent Text Messages Report
Sent Push Notifications Report
Web Activity Report
Tracking Links Report
Who is Visiting Report
Paid Search Summary Report
Email OptOut Report
File Manager Guide
Manage files and folders in File Manager
File Manager Frequently Asked Questions
ChatGPT Writing Assistant
Help & Support
Table of Contents
- Top menu bar
- Design Canvas
Updated by Christy Cook
- Top menu bar
- Design Canvas
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.
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.
- Undo a previous action, e.g. undo removing a widget from the canvas.
- Redo a previous action, e.g. remove a widget from the canvas.
- Revisions provide access to previous revisions of the email that may be restored.
- Select None unselects any widgets selected on the design canvas clicking Select None will unselect the widget.
- Remove a widget that is currently selected on the design canvas.
- Edit HTML opens the HTML editor for editing the HTML, CSS, Plain Text, and AMP content of the email.
- Preview opens a preview of the email in a separate browser tab.
- Send Test sends a test version of the email to an email address you provide.
The Design canvas is where widgets are placed or selected by dragging-and-dropping them from the Widget Menu.
The Email Designer is built to support working with pre-made email templates or building new emails 100% in the designer.
Start with Rows
The Email Designer uses Rows to control layout of a section of an email. And a new row should be used for each major section.
Rows are dragged-and-dropped on to the design canvas. In the screenshot below, 3 rows are added to the design canvas.
Each row can have separate backgrounds, padding, and other settings.
A row displays the text "Please add content" when new widgets are added to the row.
Next, you will drag-and-drop widgets onto the rows. In the example below, thre is a graphic for the top row and a graphic and text for the middle row, and social icons for the bottom row.
Selecting widgets on the design canvas
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:
There are multiple types of widgets in the designer that may be selected. In the above example, a button container widget is selected. You can also select the individual button in the container.
- Up arrow selects the parent of the widget
- Cross arrows enable click-and-drag to move the widget
- Copy create a copy of the widget
- Trash remove the widget
Adding and removing widgets
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.
To remove a widget, select it on the canvas and then click on the trash can.
Working with selected widgets
Once you select a widget on the canvas, you'll notice three tabs for most widgets on the right hand side:
- Design tab: rich text editor to insert and edit text.
- Style tab: set font styles, colors, alignement, padding etc.
- Settings tab: desktop sizing, etc.
Design for text / HTML widget
The Text / HTML widget is the most commonly used widget in the email designer. Use it for simple text or custom HTML.
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.
The Text / HTML contains common buttons that should be familiar: font family, font size, font color, bold, italics, bulleted list, numbered list, link, and image. To use these items, first select the text, then click the appropriate button.
You may notice that the Style tab is still accessible when using the rich editor. The style tabs setting apply to everything in the rich editor. Whereas within the text you can select individual portions of content to change color, font size and more.
There are two icons in the Text / HTML editor that are unique: the lightbulb and the code icon: lightbulb and code.
The lightbulb will switch the editor to dark mode. This is useful when working with light text:
When using dark mode the background color displayed in the editor does not affect the text in the email designer.
Using the Text / HTML widget enables you to edit or insert custom HTML directly into the designer.
To edit the HTML simply click on the code button. This will open a popup where HTML may be directly edited:
Design for image widget
When selected the Image widget opens a set of image specific options in place of the Widget Menu:
Within the image widget you can link the image to a URL (recommended). As well as set a title, which is also recommended.
At the bottom of the menu you'll find buttons that control how the image behaves on different screen sizes:
- Full width will attempt to display the image at full with. Most images should be set to full width.
- Current size will ensure that the widget remains at the current specified width and height. Caution should be used with this setting and we recommend only using current size when working with an image less than 600px wide.
- Hide will hide the image when displayed on mobile devices. This can be useful for creating more compact mobile versions of the email.
To set the dimensions of the image, click the style tab and set the width and height.
Design for video widget
When selected the Video widget opens a set of video specific options in place of the Widget Menu:
- Video URL is the URL to the video. When set, DailyStory will replace the default Video widget in the Design Canvas with a preview of your image.
Embedded videos are not supported in most email clients. When a video is selected DailyStory will automatically create a placeholder image for the video within your email. This is supported for video URLs from YouTube and Vimeo.
The Style tab is used to set style details about the selected widget. These options will change based on the type of 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
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.