Email BuilderEmail Builder Extensionfor Magento 2User GuideVersion 1.0.0
Email BuilderTable of ContentsI) Introduction .3II) Where to Find Extension . 4III) Create Templates .61. General Information . 82. Magezon Email Builder . 93. Preview 12IV) Assign Templates To Specific Contact Grou ps . . 13V) Elements .151. Email Logo . 152. Email Menu .173. Social Buttons . 194. Footer Links . 225. Copyright . 246. Load Template . 26VI) Support .30
Email BuilderI) IntroductionEmail Builder for Magento 2 is a compelling set of tools for building and designingtransactional emails. Its user-friendly editor enables you to create any email templatesthat go inline with your web design and theme. You are also empowered to customizea large number of brilliant pre-built email templates without effort. Intuitive drag and drop email builder 13 elements supported 10 stunning pre-built templates Expand brand’s online presence Create dynamic email menu Live preview mode Create responsive design templates Other stunning featuresHOW IT WORKS:- In the backend, you first create an email template using drag & drop builder.- After that, assign the template to the contact group that you want.* You can create as many templates as wanted and assign them to any contactgroups.NOTE: Email Builder is developed on a core builder based on which we’ve built all ofour builder extensions. The core builder includes elements and settings that all builderextensions have in common.In this guide, we’ll focus on elements and settings that are specific to Email Builderextension.
Email BuilderII) Where to Find ExtensionAfter installing the extension, navigate to Store Settings Configuration .In the panel on the left, span Magezon Extensions and choose Email Builder .
Email BuilderOn the right side, you can see General Settings including: Current Version of the extension. Enable Email Builder : choose Yes/No to enable/disable the extension.
Email BuilderIII) Create TemplatesNavigate to Marketing Communications Email Templates to land on the pagewhere you can create a new template and manage all templates you created.- As can be seen in the image above, you can view all templates you created in a grid.- To create a new template, click Add New Template button on the top right corner.
Email BuilderThe edit page of the new template looks like this:
Email Builder1. General Information- Load Default Template Template : Choose types of the template you want to create Load Template : using Load Template element of Magezon Email Builder to getyour desired template loaded.- Template Information Template Name : Enter a name to identify the template in the Magento Admin. Template Subject : Add plain text to use as the subject of the emails sent usingthe template you create
Email Builder2. Magezon Email BuilderWhere you create and customize email templates using the drag & drop interface. Click the plus icon in the top bar to add elements from a popup: Click the icon next to the plus icon to select a template. You’ll see all templates in apopup:
Email Builder- Click drop-down icon to preview a template, like this:
Email Builder- Click plus icon to select the template. The selected template will be displayed in thebuilder section and you can customize it, like this:
Email Builder3. PreviewPreview Template to see how the templates look on the frontend.When finishing, click Save Template button on the top right corner to save thetemplate. After saving, you will navigate back to the template list like this:Your new template has been saved, click on Preview button to preview template rightat the back-end.Another way to preview is to click on the saved template in the template list, then clickon Preview Template
Email BuilderIV) Assign Templates To Specific Contact GroupsAfter creating a template, you need to configure it for specific contact purposes. Tomake it clear, we recommend that you should read the email template list fromMagento user guide to have a fully comprehensive instruction about how to assigneach type of template.For example, if you created a “New Order Template” and want to assign it, go toStores Settings Configuration Sales Sales Emails.In the left panel, locate the section that contains the template you want to configure.
Email Builder The configuration section will be Order as the following figure shows. Span Order , select your newly created template for New Order ConfirmationTemplate. Click Save Config .
Email BuilderV) ElementsNOTE: Here we only list elements that are specific to Email Builder extension andmention settings that are specific to these elements. For other elements and settings,you can look at Magezon Core Builder guide.1. Email LogoUsed to display the logo of your brand Logo Source : Select the source of the logo. There are 2 options that are Medialibrary/External link Logo : Click to upload a logo
Email Builder Logo Width : Enter the desired width of logo Logo Height : Enter the desired height of logo Alternative Text : Short description of the logo in case there are technicalproblems and the logo can not be displayed Logo ID : Identify logo, for example, the logo ID is A, then type “A” in Logo IDfield Email Logo element on frontend:
Email Builder2. Email MenuDisplay horizontal menu of pages in an email-General tab: Menu URL : enter the URL of the displayed pages Add : insert more URLs-Menus Settings tab: adjust the appearance of the menu
Email Builder General: settings when people do not hover mouse onto the menu Choose General Background Color and General Color for the menu Enter General Font Size and Border Radius for the menu Hover Settings : settings when people hover mouse onto the menu Choose Hover settings Background Color and Hover Settings Color forthe menu Enter Hover Settings Font Size Email Menu element on frontend:
Email Builder3. Social ButtonsDisplay social network accounts on emails.-General tab: Type Main Title of the social button Add a new social button
Email Builder Upload Logo of the social button Insert the social network URL-Social Settings tab: Adjust the appearance of social buttons Text Settings : setting the text of Main Title Turn on/off to Display Text or not Type Font Size for the text of Main Title Choose the type of Font Weight for the text of Main Title Add Title Color and Padding Top for the text of Main Title Image Settings : setting the image of the social button Set the desirable image Width for the image of social button
Email Builder Set the desirable image Height for the image of social button Toggle Border Image for the image of social button Image Hover Settings : setting the image when hovering mouse onto it Select Opacity value for the image of social button Display Types: Choose List / Bootstrap Column Social Buttons element on frontend:
Email Builder4. Footer LinksInsert related links and link groups in the Footer.-General tab: Type the Main title of the link group Link detail : Insert an URL Click Add under the Link detail to insert more links into the link group Click Add on the bottom left to insert more link groups-Footer Settings tab: Adjust the appearance of the footer link
Email Builder Select Heading Type (from heading 1 to heading 6) for the Main title Customize title Font Size and Title Color for the Main title Customize Link Font Size and Link Color Customize Link Hover Font Size and Link Hover Color , which means thesize and color of links will change when hovering mouse onto them. Footer Links element on frontend:
Email Builder5. CopyrightInsert and customize copyright notices Content : put the copyright notice into the field Select Font Size and Text Color for the copyright notice. Line Height : enter vertical distance (px) between lines of text for the copyrightnotice Font Weight : enter the thickness (px) of text for the copyright notice.
Email Builder Copyright element on frontend:
Email Builder6. Load TemplateThe element allows users to choose a type of templates that fits the transactionalpurpose. Users can also add variables to the default load template.-General tab: Templates : Choose any types of default Magento templates, like the imagebelow:
Email Builder Email content : Display the content of the selected template in a form of code
Email Builder Variables : Add variables for the email content, we offer a large number ofvariables like the image below:
Email Builder- Content Settings tab: Adjust the appearance for the content of the template. Enter Font Size for the content of the template Choose Text Color for the content of the template Line Height : enter vertical distance (px) between lines of text in the template Font Weight : enter the thickness (px) of text in the template Load template on frontend:
Email BuilderVI) SupportIf you have any questions or need any support, feel free to contact us via the followingways. We will get back to you within 24 hours since you submit your support request. Submit contact form. Email us at [email protected] Submit a ticket . Contact us through Skype : [email protected] Contact us via live chat on our website.
Email Builder for Magento 2 is a compelling set of tools for building and designing transactional emails. Its user-friendly editor enables you to create any email templates that go inline with your web design and theme. You are also empowered to customize a large numb