{"Status":true,"Message":"","Response":{"post":{"postuid":"kw4n3vdfqc","tenantuid":"d8b744fc-2e70-4089-bb80-dd1d08f6c7b2","projectuid":"239698c5-f7eb-4574-8cc8-c6568f08b3a0","title":"Using the Email Designer","slug":"article/kw4n3vdfqc-using-the-email-designer","html":"\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003ERecommended\u003C/span\u003E\u003Cp\u003EPlease review our tutorial video or scroll below for step-by-step instructions:\u003C/p\u003E\u003C/cite\u003E\u003Cp\u003EThe Email Designer is a drag-and-drop design canvas used to more easily build and design beautiful \u003Ca href=\u0022/article/w474gmcg29-daily-story-email-marketing\u0022\u003Eemails\u003C/a\u003E. We put together this guide to help you understand how to use the DailyStory Email Designer.\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022969\u0022 data-height=\u0022772\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/d74024e673d47917aa90ab4cece2d371.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch2 id=\u0022overviewandnbsp\u0022\u003EOverview\u0026nbsp;\u003C/h2\u003E\u003Cp\u003EThe Email Designer has 4 main sections:\u003C/p\u003E\u003Col\u003E\u003Cli\u003E\u003Cb\u003ETop menu bar\u003C/b\u003E - includes the name of the email, buttons and more options\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EDesign Canvas\u003C/b\u003E\u0026nbsp;- the area where design widgets are placed\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EWidget Menu\u003C/b\u003E\u0026nbsp;- widgets that are drag-and-dropped onto the design canvas\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ESave buttons\u003C/b\u003E - buttons for saving, copying and more\u003C/li\u003E\u003C/ol\u003E\u003Ch3 id=\u0022top_menu_bar\u0022\u003ETop menu bar\u003C/h3\u003E\u003Cp\u003EThe top menu bar displays the name of the email you are editing and also show contextual buttons.\u003C/p\u003E\u003Ch4 id=\u0022buttons_shown_when_a_widget_is_not_selected\u0022\u003EButtons shown when a widget is not selected\u003C/h4\u003E\u003Cp\u003EThe contextual buttons shown in the top menu bar will change when widgets on the design canvas are selected.\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022969\u0022 data-height=\u002250\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/53df0bc5-2e08-46c5-8e71-a6a785f131af.png?v=-910461683\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EOn the left-side of the menu:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EUndo\u003C/b\u003E\u0026nbsp;a previous action, e.g. undo removing a widget from the canvas.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ERedo\u003C/b\u003E a previous action, e.g. remove a widget from the canvas.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ERevisions \u003C/b\u003Eprovide \u003Ca href=\u0022/article/o7g6t488u8-manage-email-revisions\u0022\u003Eaccess to previous revisions\u003C/a\u003E of the email that may be restored.\u003C/li\u003E\u003C/ul\u003E\u003Cp\u003EOn the right-side of the menu:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EAI Grammar and Spell Check\u003C/b\u003E provides a review of your emails grammar and checks for spelling errors.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ESettings \u003C/b\u003Ereturn to the email settings screen.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EHTML\u003C/b\u003E edit the HTML (see warning below).\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EPreview\u003C/b\u003E preview how the email will look.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ESend Test\u003C/b\u003E send a test to one or more email addresses.\u003C/li\u003E\u003C/ul\u003E\u003Ch4 id=\u0022buttons_shown_when_a_widget_is_selected\u0022\u003EButtons shown when a widget is selected\u003C/h4\u003E\u003Cp\u003EWhen a widget is selected in the designer the left-side menu buttons expand to include more options:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022247\u0022 data-height=\u002253\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/e85a3955-1856-431a-b23c-5e7e4c5cd66c.png?v=1597048853\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EThe revisions button is hidden and three new buttons are added:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EShow all widgets \u003C/b\u003Ethis button is a quick way to get back to the designer widgets. \u003C/li\u003E\u003Cli\u003E\u003Cb\u003EDelete widget\u003C/b\u003E deletes the selected widget.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ESave widget\u003C/b\u003E saves the selected widget as a reusable widget.\u003C/li\u003E\u003C/ul\u003E\u003Ccite class=\u0022warning\u0022\u003E\u003Cspan class=\u0022title\u0022\u003EWarning\u003C/span\u003E\u003Cp\u003EBe cautious making direct changes to the HTML of the email in the HTML designer. Emails built with the designer are optimized for multiple devices and screen sizes. Change to CSS, Plain Text, and AMP may be done safely.\u003C/p\u003E\u003C/cite\u003E\u003Ch2 id=\u0022design_canvas\u0022\u003EDesign Canvas\u003C/h2\u003E\u003Cp\u003EThe Design canvas is where widgets are placed or selected by dragging-and-dropping them from the Widget Menu.\u003C/p\u003E\u003Cp\u003EThe Email Designer is built to support working with pre-made email templates or building new emails 100% in the designer.\u003C/p\u003E\u003Ccite class=\u0022warning\u0022\u003E\u003Cspan class=\u0022title\u0022\u003EWarning\u003C/span\u003E\u003Cp\u003EIf 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.\u003C/p\u003E\u003C/cite\u003E\u003Ch2 id=\u0022widget_menu\u0022\u003EWidget Menu\u003C/h2\u003E\u003Cp\u003EThe widget menu contains various \u003Ca href=\u0022/article/8r1fmuxytm-email-designer-widgets\u0022\u003Eemail widgets\u003C/a\u003E that you can drag-and-drop onto the design canvas.\u003C/p\u003E\u003Cp\u003EThe easiest way to get started is to use one of the pre-built templates and then experiment with the widgets.\u003C/p\u003E\u003Ch3 id=\u0022selecting_widgets_on_the_design_canvas\u0022\u003ESelecting widgets on the design canvas\u003C/h3\u003E\u003Cp\u003EWhen 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:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022725\u0022 data-height=\u0022295\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/3141dfeb9069981e029b5670f4c1e840.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EThere 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.\u003C/p\u003E\u003Ch3 id=\u0022widget_toolbar\u0022\u003EWidget toolbar\u003C/h3\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EUp arrow\u003C/b\u003E\u0026nbsp;selects the parent of the widget\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ECross arrows\u003C/b\u003E\u0026nbsp;enable click-and-drag to move the widget\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ECopy\u003C/b\u003E\u0026nbsp;create a copy of the widget\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ETrash\u003C/b\u003E\u0026nbsp;remove the widget\u003C/li\u003E\u003C/ul\u003E\u003Ch2 id=\u0022adding_and_removing_email_widgets\u0022\u003EAdding and removing email widgets\u003C/h2\u003E\u003Cp\u003ETo add a widget drag-and-drop it from the widgets menu on the right.\u003C/p\u003E\u003Cp\u003EWhen 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.\u003C/p\u003E\u003Cp\u003ETo remove a widget, select it on the canvas and then click on the trash can.\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022698\u0022 data-height=\u0022590\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/8b978556c02e4047b229303787f25449.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch2 id=\u0022setting_widget_design_styles_and_other_options\u0022\u003ESetting widget design, styles and other options\u003C/h2\u003E\u003Cp\u003EOnce you select a widget on the canvas, you\u0027ll notice three tabs for most widgets on the right hand side:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EDesign tab\u003C/b\u003E: rich text editor to insert and edit text.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EStyle tab\u003C/b\u003E: set font styles, colors, alignment, padding etc.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ESettings tab\u003C/b\u003E: desktop sizing, etc.\u003C/li\u003E\u003C/ul\u003E\u003Ch3 id=\u0022styling_widgets\u0022\u003EStyling Widgets\u003C/h3\u003E\u003Cp\u003EThe Style tab is used to set style details about the selected widget. These options will change based on the type of widget selected.\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022324\u0022 data-height=\u0022552\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/ec476f947356ff0d45371980c080ba02.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EFont family\u003C/b\u003E\u0026nbsp;the font used for text, e.g. Helvetica\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EFont size\u003C/b\u003E\u0026nbsp;the size of the font, e.g. 20px\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EFont weight\u003C/b\u003E\u0026nbsp;the weight of the font, e.g. bold\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ELine height\u003C/b\u003E\u0026nbsp;the spacing between lines, e.g. 24px\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EColor\u003C/b\u003E\u0026nbsp;the color of the text, e.g. #FFCC2A\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EBackground color\u003C/b\u003E\u0026nbsp;the background color of the widget, e.g. #FFFFFF\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EText align\u003C/b\u003E\u0026nbsp;the alignment of the content in the widget, e.g. center\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EPadding\u003C/b\u003E\u0026nbsp;the whitespace surrounding the widget, e.g. 15px\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EWidth\u003C/b\u003E\u0026nbsp;the width of the widget, e.g. 100%\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EHeight\u003C/b\u003E\u0026nbsp;the height of the widget, e.g. 250px\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EMin width\u003C/b\u003E\u0026nbsp;the minimum width of the widget, e.g. 100px\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EMin height\u003C/b\u003E\u0026nbsp;the minimum height of the widget, e.g. 100px\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EMax width\u003C/b\u003E\u0026nbsp;the maximum width of the widget, e.g. 500px\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EMax height\u003C/b\u003E\u0026nbsp;the maximum height of the widget, e.g. 500px\u003C/li\u003E\u003C/ul\u003E\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003ERecommended\u003C/span\u003E\u003Cp\u003ESome style values, such as Min and Max height and width are not supported by Microsoft Outlook.\u003C/p\u003E\u003C/cite\u003E\u003Cp\u003EAn email is built using rows to control the layout and then content widgets are drag-and-dropped to determine how content is displayed.\u003C/p\u003E\u003Ch2 id=\u0022saving_and_reusing_widgets\u0022\u003ESaving and reusing widgets\u003C/h2\u003E\u003Cp\u003EAfter dragging-and-dropping a widget on the design surface it is common to further customize the widget\u0027s content, style (color, fonts, etc.) or other settings. For example, setting the city for the weather widget, choosing a destination address for the driving directions widget, or modifying the social icons widget to remove channels that you organization does not use.\u003C/p\u003E\u003Cp\u003ESaving widgets enables you to tailor a widget in the designer to your needs, save it, and then easily re-use it as a drag/drop widget.\u003C/p\u003E\u003Ch3 id=\u0022how_to_save_a_widget\u0022\u003EHow to save a widget\u003C/h3\u003E\u003Cp\u003ESelect a widget you want to save and in the toolbar click the save widget icon:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022247\u0022 data-height=\u002253\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/268599ca-65f4-43a8-b1a7-831e145c9e54.png?v=-2110261137\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EYou will be prompted to give your new widget a name. If you want to update one of your saved widgets, just use the same name.\u003C/p\u003E\u003Cp\u003ECurrently, you can have a maximum of 12 saved widgets. And all saved widgets are shared amongst all users.\u003C/p\u003E\u003Ch3 id=\u0022how_to_use_a_saved_widget\u0022\u003EHow to use a saved widget\u003C/h3\u003E\u003Cp\u003ETo use a saved widget scroll to the bottom of the Design tab and find the \u0022My Widgets\u0022 section. Next, just drag-and -drop your widget like you would any other.\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022398\u0022 data-height=\u0022486\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/e34c4c82-9d4f-4d0d-836f-121af4203314.png?v=23223235\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch3 id=\u0022how_to_delete_a_saved_widget\u0022\u003EHow to delete a saved widget\u003C/h3\u003E\u003Cp\u003ETo delete a saved widget find the widget in the \u0022My Widgets\u0022 section. Hover over it and click the X in the top right corner. This will remove the widget. However, any emails that used this widget will be unaffected.\u003C/p\u003E\u003Ch2 id=\u0022personalization\u0022\u003EPersonalization\u003C/h2\u003E\u003Cp\u003EYou can now insert personalization tokens directly into your email content. Once you click on a text box to edit, you\u0027ll see the option to select Personalization tokens to add:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022969\u0022 data-height=\u0022478\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/126ba6ba-0d52-4f5c-a5a3-85c22d3dba91.png?v=68700351\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch2 id=\u0022using_emoticons\u0022\u003EUsing Emoticons\u003C/h2\u003E\u003Cp\u003EWe now offer an easy way to add emojis to the body of your email, without having to copy/paste! In the email designer, after selecting a text box, you\u0027ll see the \uD83D\uDE00 emoji:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022969\u0022 data-height=\u0022492\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/2e6dce9d1532e8e6b877625632a50d2a.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EAfter clicking on the emoji symbol, a pop will appear, and you can select any emoji of your choice.\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022969\u0022 data-height=\u0022771\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/6d56413522c7da6014be0b2ac8ac64e9.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch2 id=\u0022working_with_columns\u0022\u003EWorking with Columns\u003C/h2\u003E\u003Cp\u003EFor more advanced email layouts, you\u0027ll need to familiarize yourself with columns.\u003C/p\u003E\u003Cp\u003EYou have the option for 1, 2 and 3 column content and these are dragged-and-dropped on to the design canvas. In the screenshot below, 3 columns are added to the design canvas. Each row can have separate backgrounds, padding, and other settings.\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022969\u0022 data-height=\u0022492\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/dece6cf774a57109737de4de1a031777.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EA row displays the text \u0022\u003Cb\u003EPlease add content\u003C/b\u003E\u0022 as a target where other widgets are dragged-and-dropped onto the canvas. You can see the below where an image, text and button widget were added:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022969\u0022 data-height=\u0022492\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/520031d21e97acd3c749658ca39a858a.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E","publish_status":0,"post_type":"Article","authoruid":"3dde8c16-763a-4a2b-ae0b-1d8c50c62e3d","author":{"authoruid":"3dde8c16-763a-4a2b-ae0b-1d8c50c62e3d"},"featured_image_updating":false,"meta_description":"Learn how to use the Email Designer with this step-by-step guide. Discover tips for widgets, layout, personalization, and more for email marketing.","display_toc":true,"has_workingcopy":false,"allow_indexing":true,"sort_order":18,"total_views":1386,"date_published":"2025-08-19T20:59:00","date_updated":"2026-06-16T22:02:39.04","date_created":"2025-04-24T15:02:24.373"}}}