{"id":6747,"date":"2024-03-11T03:43:55","date_gmt":"2024-03-11T02:43:55","guid":{"rendered":"https:\/\/help.expertsender.com\/emp\/how-does-the-editor-v2-work\/"},"modified":"2024-03-19T13:29:18","modified_gmt":"2024-03-19T12:29:18","slug":"how-does-the-editor-v2-work","status":"publish","type":"es","link":"https:\/\/help.expertsender.com\/pl\/emp\/how-does-the-editor-v2-work\/","title":{"rendered":"How does the editor v2 work?"},"content":{"rendered":"<style>\nspan{\nfont-style: normal!important;\n}\n<\/style>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">The Drag&amp;Drop editor consist of three parts:\u00a0<\/span><o_p><\/o_p><\/p>\n<ol>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">The Setting panel\u00a0<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">The Working space<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">The Top toolbar\u00a0<\/span><o_p><\/o_p>\n<\/li>\n<\/ol>\n<p class=\"MsoNormal\"><o_p><\/o_p><\/p>\n<figure class=\"image\"><img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687515471105-01howeditorworks.png\"><\/figure>\n<h2 class=\"MsoNormal\" id=\"the-setting-panel-0\" data-toc=\"true\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>The Setting panel<\/strong><\/span><o_p><\/o_p><br \/>\n<\/h2>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">The Setting panel is located on the left side of the Working space. It contains all the building elements used to create email templates and individual settings for these elements.<\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">The Setting panel is divided into:<\/span><o_p><\/o_p><\/p>\n<ul>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Appearance menu<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Content menu<\/span><o_p><\/o_p>\n<\/li>\n<\/ul>\n<h2 class=\"MsoNormal\" id=\"-1\" data-toc=\"true\">\u00a0<\/h2>\n<h2 class=\"MsoNormal\" id=\"appearance-menu-2\" data-toc=\"true\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Appearance menu<\/strong><\/span><o_p><\/o_p><br \/>\n<\/h2>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Appearance menu contains basic settings that apply to the entire email. Once you set them for a specific element, such as a stripe, heading or button, they will apply to that element throughout the entire email, regardless of how many time you use it.\u00a0<\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">The Appearance menu provides access to:<\/span><o_p><\/o_p><\/p>\n<ul>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">General settings,<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Stripes,<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Headings,<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Buttons,<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Mobile formatting.<\/span><o_p><\/o_p>\n<\/li>\n<\/ul>\n<p class=\"MsoNormal\"><img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687515546739-02howeditorworks-appearance-menu.png\"><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<h2 class=\"MsoNormal\" id=\"general-settings-3\" data-toc=\"true\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>General settings<\/strong><\/span><o_p><\/o_p><br \/>\n<\/h2>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Here, you will decide on the style for the entire email. The most important controls are:<\/span><o_p><\/o_p><\/p>\n<ul>\n<li class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Message width<\/strong> \u2013 we recommend keeping it at standard 600 pixels for desktop email clients.<\/span><\/li>\n<\/ul>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">\u00a0<\/span><\/p>\n<figure class=\"image\"><img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687515752799-03howeditorworks-appearance-menu-general-settings-width.png\"><\/figure>\n<ul>\n<li class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Default paddings<\/strong> \u2013 fixed paddings for the structures used in the email template. You can set padding for each side separately or remove them. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687515811855-04howeditorworks-appearance-menu-general-settings-padding.png\"><\/span><\/li>\n<li class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Background color and image<\/strong> \u2013 applies to the entire area behind the email message and will only be visible on desktop email clients, not on mobile devices. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687515899248-05howeditorworks-appearance-menu-general-settings-background-color.png\"><\/span><\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Font \u2013<\/strong> this setting apply to all text block excluding headings. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687515955616-06howeditorworks-appearance-menu-general-settings-fonts.png\"><\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Line spacing<\/strong> \u2013 the distance between text lines. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687515969721-07howeditorworks-appearance-menu-general-settings-spacing.png\"><\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Underline links<\/strong> \u2013 helps underline specific texts, such as subscribe or unsubscribe links. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687515976547-08howeditorworks-appearance-menu-general-settings-underline-links.png\"><\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>RTL text direction<\/strong> \u2013 enables setting the text direction form <strong>R<\/strong>ight <strong>T<\/strong>o <strong>L<\/strong>eft. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687515986330-09howeditorworks-appearance-menu-general-settings-underline-rtl.png\"><\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Responsive design<\/strong> \u2013always on by default. If you turn it off, your emails on mobile devices will look like on the desktop email client.<\/span><o_p><\/o_p>\n<\/li>\n<\/ul>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<h2 class=\"MsoNormal\" id=\"stripes-4\" data-toc=\"true\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Stripes<\/strong><\/span><o_p><\/o_p><br \/>\n<\/h2>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">A stripe is an email area, that contains structures with containers and content blocks. Stripes organize the email content into groups with defined roles and general settings, such as header, footer, content. Stripes are on the top of hierarchy of email template elements in this Drag&amp;Drop editor.<\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">To add stripes, click the <strong>+<\/strong> icon at the bottom left corner of the stripe in the working area. The edit menu will open on the left, where you can choose the stripe type: header, footer, content, info area.<\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\"><img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687515997803-10howeditorworks-appearance-menu-stripe.png\"><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">To define general settings for each stripe type, go to <strong>Appearance menu<\/strong> &gt; <strong>Stripes<\/strong>. Set the font size for each stripe, choose the font, link and content background color. These settings will apply each time you add a new stripe to the message you are working on.\u00a0<\/span><\/p>\n<figure class=\"image\"><img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516092999-11howeditorworks-appearance-menu-stripe-settings.png\"><\/figure>\n<p class=\"MsoNormal\"><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">You can <strong>save the entire stripe as a Module<\/strong>, and reuse it in other email messages. This way, you will reduce the time you spend on creating emails. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516132255-12howeditorworks-appearance-menu-stripe-save-module.png\"><\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<h2 class=\"MsoNormal\" id=\"headings-5\" data-toc=\"true\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Headings<\/strong><\/span><o_p><\/o_p><br \/>\n<\/h2>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Headings contains settings for texts, that needs to be highlighted, e.g. quotations, headlines or buzzwords. You can choose font and line spacing for all headings and also set different font requirements individually for each heading. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516141659-13howeditorworks-appearance-menu-stripe-headings.png\"><\/span><o_p><\/o_p><\/p>\n<figure class=\"image\"><img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516146038-14howeditorworks-appearance-menu-stripe-headings-2.png\"><\/figure>\n<h2 class=\"MsoNormal\" id=\"buttons-6\" data-toc=\"true\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Buttons<\/strong><\/span><o_p><\/o_p><br \/>\n<\/h2>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Here, you can adjust the button style across the entire email, ensuring they appear consistent throughout the message and grab users\u2019 attention efficiently. The parameters you can set in the <strong>Button<\/strong> section include:<\/span><o_p><\/o_p><\/p>\n<ul style=\"list-style-type:disc;\">\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Highlight hover buttons<\/strong> \u2013 the button colors will change when you hover the mouse over them.<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Support of Outlook<\/strong> \u2013 allows improving buttons displaying in Outlook by inserting a special VML-code element. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516218387-15howeditorworks-appearance-menu-stripe-buttons.png\"><\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Font size<\/strong>, font <strong>style<\/strong> and <strong>color<\/strong>.<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<strong>Button color<\/strong>.<o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<strong>Border radius<\/strong>.<o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">The <strong>content border<\/strong> with an option to customize the border color.<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<strong>Internal padding<\/strong>, <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516227390-16howeditorworks-appearance-menu-stripe-buttons-2.png\"><o_p><\/o_p>\n<\/li>\n<\/ul>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<h2 class=\"MsoNormal\" id=\"mobile-formatting-7\" data-toc=\"true\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Mobile formatting<\/strong><\/span><o_p><\/o_p><br \/>\n<\/h2>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Adjusting email content to mobile devices is essential. To keep your messages available and legible for the users across any device, use the Mobile formatting section.<\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Here, you may:<\/span><o_p><\/o_p><\/p>\n<ul style=\"list-style-type:disc;\">\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Define <strong>text size<\/strong> for all stripe types and headings,<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Adjust <strong>button width<\/strong> and its text size,<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Adjust <strong>content margins<\/strong>.<\/span><o_p><\/o_p>\n<\/li>\n<\/ul>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">You can also <strong>manage responsive design<\/strong> for images while formatting the <strong>image content block<\/strong>:<\/span><o_p><\/o_p><\/p>\n<ul style=\"list-style-type:disc;\">\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Click the <strong>mobile device icon<\/strong> to adjust the image display in mobile devices,<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Use the option <strong>Hide on mobile<\/strong> to forbid chosen elements to be displayed in the mobile version of the email.<\/span><\/li>\n<\/ul>\n<p class=\"MsoListParagraphCxSpLast\" style=\"mso-list:l3 level1 lfo7;text-indent:-18.0pt;\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">\u00a0<\/span><\/p>\n<figure class=\"image\"><img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516335679-17howeditorworks-appearance-menu-mobile-formatting.png\"><\/figure>\n<p class=\"MsoListParagraphCxSpLast\" style=\"mso-list:l3 level1 lfo7;text-indent:-18.0pt;\"><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<h2 class=\"MsoNormal\" id=\"content-menu-8\" data-toc=\"true\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Content menu<\/strong><\/span><o_p><\/o_p><br \/>\n<\/h2>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">In the Content menu, you will find all the elements for building an email:<\/span><o_p><\/o_p><\/p>\n<ul style=\"list-style-type:disc;\">\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Structures,<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Blocks,<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Modules.<\/span><o_p><\/o_p>\n<\/li>\n<\/ul>\n<p class=\"MsoNormal\"><img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516379449-18howeditorworks-content-menu.png\"><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<h2 class=\"MsoNormal\" id=\"structures-9\" data-toc=\"true\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Structures<\/strong><\/span><o_p><\/o_p><br \/>\n<\/h2>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Structures serve as frames for organizing your email content. Each structure holds a container, which is where you place a content block. Similar to stripes, <strong>structures can be saved as Modules\u00a0<\/strong>for reuse in other email messages.<\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">A structure is second in the hierarchy of elements that contribute an email template. The third element is a container.<\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">To add structure, drag and drop it from the <strong>Content<\/strong> menu onto the working area. Place the structure within a stripe. One stripe can contain multiple structures. Each structure has a capacity to<\/span><span style=\"mso-ansi-language:EN-US;mso-spacerun:yes;\" lang=\"EN-US\">\u00a0 <\/span><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">accommodate up to 8 content containers in a row. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516407966-19howeditorworks-content-menu-structures.png\"><\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Click on the added structure to access the edit menu on the left side. Customize the structure with options available in the <strong>Appearance<\/strong> tab:<\/span><o_p><\/o_p><\/p>\n<ul style=\"list-style-type:disc;\">\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Add more containers<\/strong> to the structure.<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Set the <strong>container size<\/strong>.<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Adjust indent<\/strong> (the padding) between containers.<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Set the <strong>background color<\/strong> and the <strong>background image<\/strong> of the structure.<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Configure the <strong>full content border<\/strong>.<\/span><o_p><\/o_p>\n<\/li>\n<\/ul>\n<p class=\"MsoNormal\"><img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516417063-20howeditorworks-content-menu-structures-2.png\"><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">You can also adjust structure layout and appearance on mobile devices:<\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<ul>\n<li class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Set <strong>padding<\/strong> for a structure for desktop and mobile view.<\/span><\/li>\n<li class=\"MsoNormal\">Configure the structure&#8217;s <strong>responsiveness<\/strong>.<o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Hide the structure<\/strong> for desktop or mobile view.<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Specify the <strong>structure type<\/strong> \u2013 HTML, AMPHTML, or both.<\/span><o_p><\/o_p>\n<\/li>\n<\/ul>\n<p class=\"MsoNormal\"><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\"><img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516424971-21howeditorworks-content-menu-structures-3.png\"><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<h2 class=\"MsoNormal\" id=\"blocks-10\" data-toc=\"true\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Blocks<\/strong><\/span><o_p><\/o_p><br \/>\n<\/h2>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Block are the content pieces that you fill the structure with. Blocks are at the bottom of the hierarchy of email template elements.<\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">To add a block to the email template, drag and drop it from the <strong>Content<\/strong> <strong>menu\u00a0<\/strong>to the container within a chosen structure. Alternatively, you can use shortcuts for adding image, text and button block by clicking on respective icons in the container.\u00a0<\/span><\/p>\n<figure class=\"image\"><img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516466084-22howeditorworks-content-menu-blocks.png\"><\/figure>\n<p class=\"MsoNormal\"><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">There are ten content blocks available in the editor:<\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>\u00a0 \u00a0 \u00a0 \u00a0<\/strong> 1.<strong>Image<\/strong> \u2013 upload an image from your computer or add a URL address. You can add alternate text, link the image to an external site, adjust its size and alignment, and manage responsive image settings.<\/span><span style=\"mso-ansi-language:EN-US;mso-spacerun:yes;\" lang=\"EN-US\"> <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516490608-23howeditorworks-content-menu-blocks-image.png\"><\/span><o_p><\/o_p><\/p>\n<p class=\"MsoListParagraphCxSpMiddle\" style=\"mso-list:l9 level1 lfo12;text-indent:-18.0pt;\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>\u00a0 \u00a0 \u00a0 \u00a0\u00a0<\/strong>2.<strong>Text<\/strong> \u2013 this block uses two kinds of menu for styling text content:<\/span><o_p><\/o_p><\/p>\n<p class=\"MsoListParagraphCxSpMiddle\" style=\"mso-list:l9 level1 lfo12;text-indent:-18.0pt;\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>\u00a0 \u00a0 \u00a0 \u00a0\u00a0<\/strong>3.<strong>Button<\/strong> \u2013 with the button block you can add external link corresponding to the button\u2019s call-to-action, which you define in the button label field. Style it by setting its color, text color, radius, borders, and padding. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516512222-25howeditorworks-content-menu-blocks-button.png\"><\/span><o_p><\/o_p><\/p>\n<p class=\"MsoListParagraphCxSpMiddle\" style=\"mso-list:l9 level1 lfo12;text-indent:-18.0pt;\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>\u00a0 \u00a0 \u00a0 \u00a0<\/strong> 4.<strong>Spacer<\/strong> \u2013 it helps keep the email content organized. You can choose the line type, adjust its width, padding and alignment. The <strong>responsive spacer<\/strong> option allows you to adapt the spacer for mobile view. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516521156-26howeditorworks-content-menu-blocks-spacer.png\"><\/span><o_p><\/o_p><\/p>\n<p class=\"MsoListParagraphCxSpMiddle\" style=\"mso-list:l9 level1 lfo12;text-indent:-18.0pt;\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>\u00a0 \u00a0 \u00a0 \u00a0\u00a0<\/strong>5.<strong>Video<\/strong> \u2013 with video block you cany embed a video by pasting an external link. Additionally, you can add alternate text, specify a custom thumbnail image, choose a play button style, and adjust video\u2019s size and alignment. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516551806-27howeditorworks-content-menu-blocks-video.png\"><\/span><o_p><\/o_p><\/p>\n<p class=\"MsoListParagraphCxSpMiddle\" style=\"mso-list:l9 level1 lfo12;text-indent:-18.0pt;\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>\u00a0 \u00a0 \u00a0 \u00a0<\/strong> 6.<strong>Social<\/strong> \u2013 a handy block with a set of predefined social media icons. You can choose between multiple icon styles, layout options, and order. It also allows you to add direct links to your social profiles and pages. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516590295-28howeditorworks-content-menu-blocks-social.png\"><\/span><\/p>\n<p class=\"MsoListParagraphCxSpMiddle\" style=\"mso-list:l9 level1 lfo12;text-indent:-18.0pt;\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">\u00a0 \u00a0 \u00a0 \u00a0 7.Banner \u2013 it is a form of image with unique settings such as banner orientation, a set of filers and a fixed height. You can add a link to make the banner act as a call-to-action, directing users to an external landing page. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516598880-29howeditorworks-content-menu-blocks-banner.png\"><\/span><o_p><\/o_p><\/p>\n<p class=\"MsoListParagraphCxSpMiddle\" style=\"mso-list:l9 level1 lfo12;text-indent:-18.0pt;\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>\u00a0 \u00a0 \u00a0 \u00a0<\/strong> 8.<strong>Menu<\/strong> \u2013 a useful addition to the header section. You can add menu categories that you want to promote and link them to external landing pages. Each category can be styled by adding an icon, changing the text font, size, and color.\u00a0<\/span>You can add multiple menu items. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516607054-30howeditorworks-content-menu-blocks-menu.png\"><o_p><\/o_p><\/p>\n<p class=\"MsoListParagraphCxSpMiddle\" style=\"mso-list:l9 level1 lfo12;text-indent:-18.0pt;\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>\u00a0 \u00a0 \u00a0 \u00a0\u00a0<\/strong>9.<strong>HTML<\/strong> \u2013 enables adding custom code to the email template. You can add the block to the working space and click to open a code editor window for making modifications.<img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516619472-31howeditorworks-content-menu-blocks-html.png\">\u00a0<\/span><\/p>\n<p class=\"MsoListParagraphCxSpMiddle\" style=\"mso-list:l9 level1 lfo12;text-indent:-18.0pt;\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">\u00a0 \u00a0 \u00a0 \u00a0 10.<\/span><o_p><\/o_p><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Code<\/strong> \u2013 use this block to introduce <\/span><a href=\"https:\/\/sites.google.com\/expertsender.com\/dynamic-content-documentation\/introduction?authuser=0\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong><u>dynamic content code<\/u><\/strong><\/span><\/a><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"> to your email messages. Using this block ensures the proper execution of the code. If you plan to apply dynamic content code in a different way, it may not work as intended.<\/span><span style=\"mso-spacerun:yes;\"><img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516649604-32howeditorworks-content-menu-blocks-dynamic-content.png\"><\/span><o_p><\/o_p><\/p>\n<p class=\"MsoListParagraphCxSpMiddle\">\u00a0<\/p>\n<p class=\"MsoListParagraphCxSpLast\"><span style=\"mso-ansi-language:EN-US;mso-spacerun:yes;\" lang=\"EN-US\">\u00a0<\/span><o_p><\/o_p><\/p>\n<h2 class=\"MsoNormal\" id=\"modules-11\" data-toc=\"true\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Modules<\/strong><\/span><o_p><\/o_p><br \/>\n<\/h2>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Modules are containers, structures or stripes that you design and save for a future use. Modules help reduce time required to create an email.\u00a0<\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">To save an email element as a module:<\/span><o_p><\/o_p><\/p>\n<ol>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Hover over the desired element and press the <strong>Save as module<\/strong> button.<\/span><span style=\"mso-ansi-language:EN-US;mso-spacerun:yes;\" lang=\"EN-US\">\u00a0<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Name<\/strong> the module in the settings panel.<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Add an optional <strong>description<\/strong>.<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Select a <strong>category<\/strong> for easy search.<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Enter <strong>tags\u00a0<\/strong>that allow grouping modules by similar features, use, or style.<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Save<\/strong> the changes. <img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516680372-33howeditorworks-content-menu-blocks-modules.png\"><\/span><o_p><\/o_p>\n<\/li>\n<\/ol>\n<p class=\"MsoListParagraphCxSpLast\">\u00a0<\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">To use the saved module in an email, drag and drop it on the working space.<\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<h2 class=\"MsoNormal\" id=\"working-space-12\" data-toc=\"true\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Working space<\/strong><\/span><o_p><\/o_p><br \/>\n<\/h2>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">The working space is where you build and edit your email template. It serves as a visual representation of how your email will appear to recipients. You can drag and drop elements from the Setting panel onto the working space to add them to your email.<\/span><o_p><\/o_p><\/p>\n<p class=\"MsoNormal\">\u00a0<\/p>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">As you add elements to the working space, you can arrange and customize them to create the desired layout. You can move elements around, resize them, and adjust their properties using the edit menus and settings available. The working space provides a real-time preview of your email, allowing you to see how it will look before sending it out.\u00a0<\/span><o_p><\/o_p><\/p>\n<figure class=\"image\"><img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516696710-34howeditorworks-working-space.png\"><\/figure>\n<h2 class=\"MsoNormal\" id=\"top-toolbar-13\" data-toc=\"true\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Top toolbar<\/strong><\/span><o_p><\/o_p><br \/>\n<\/h2>\n<p class=\"MsoNormal\"><span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">The top toolbar provides you with additional functionalities and tools to enhance your email creation process:<\/span><o_p><\/o_p><\/p>\n<ul>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Undo\u00a0<\/strong>and <strong>redo <\/strong>any email editing action. This allows you to revert changes or restore previous versions of your design.\u00a0<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\">Access <strong>code editor<\/strong> to make advanced modifications to the HTML or CSS code of your email template. This option is useful for users with coding expertise who want to customize their email design further.\u00a0<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Cancel<\/strong> your work and close the editor without saving any changes.<\/span><o_p><\/o_p>\n<\/li>\n<li class=\"MsoNormal\">\n<span style=\"mso-ansi-language:EN-US;\" lang=\"EN-US\"><strong>Save\u00a0<\/strong>your email template.<\/span><o_p><\/o_p>\n<\/li>\n<\/ul>\n<p class=\"MsoNormal\"><img decoding=\"async\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2024\/03\/1687516713862-35howeditorworks-top-toolbar.png\"><o_p><\/o_p><o_p><\/o_p><\/p>\n","protected":false},"author":5,"featured_media":9145,"parent":0,"menu_order":175,"template":"","format":"standard","emp-category":[125],"class_list":["post-6747","es","type-es","status-publish","format-standard","has-post-thumbnail","hentry","emp-category-email-messages"],"acf":[],"_links":{"self":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/es\/6747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/es"}],"about":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/types\/es"}],"author":[{"embeddable":true,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/users\/5"}],"version-history":[{"count":2,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/es\/6747\/revisions"}],"predecessor-version":[{"id":9179,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/es\/6747\/revisions\/9179"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/media\/9145"}],"wp:attachment":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/media?parent=6747"}],"wp:term":[{"taxonomy":"emp-category","embeddable":true,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/emp-category?post=6747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}