How to Enable and Use, Drag and Drop Templates (Unlayered HTML Email Editor)

Modified on Mon, May 20 at 11:56 AM

TABLE OF CONTENTS

Overview

Unlayer is a visual HTML editor for easily creating HTML email. Use Unlayer to quickly create HTML emails without the need for coding.


To enable the Unlayered HTML Email Editor, navigate to Membership>Organizations>Confirgure Tab(for Membership Communications) or Training>Training Centers>Configure Tab (for Training Communications) and check the box for “Enable Drag and Drop Communication Interface”.



Create and Edit Content

1. Navigate to Communicate > Communications from the Membership or Training main menu


2. Select the + button in top-right (click on a previously created communication to edit)


3. Add Title, Select Distribution List > Create (Channel/Content should be designated to “E-mail”)


4.Click “Save” in bottom right


5. Open newly created communication and go to the "Content" tab


6. Default layout and content are applied. Select another Template to apply a different layout


7. Type or paste your content as needed


8. Select text block, to format copy styles and apply hyperlinks (chain icon) through the block HTML editor strip. See below:


 

9. Update or delete banner image, and placeholder image.



10. To update an image, select the image in the layout, drag your new image to the upload area from your PC’s file folder. See below for reference

 

 

11. Save and or Send Test to verify operability

 

Create New Template


1. Navigate to Communicate > Templates from the Membership or Training main menu


2. Select the + button from top-right


3. You will be presented with the Add E-mail Template screen (see below)



4. Drag layout blocks from the right panel directly into the left-side template editor to build your desired template layout

 

5. For text blocks, formatting is also available directly in the block where the text is typed. A type menu bar appears above the type block to add formatting to the text itself.

 

 

6. Click on a layout piece in the left panel to see details and options available for that block in the right panel.



7. Blocks can be moved, deleted, or copied from controls in the edit panel when a block is selected.

 

 

Graphical user interface, text, application, chat or text message  Description automatically generated  

 

 

 

 

 

8. When complete select the Save button in the lower right corner


Edit Existing Template

1. Select Communicate > Templates from the Membership or Training main menu

2. You will be presented with a list of all Templates you have created

3. Click on a row to see the details of a previously created Template



4. Once opened, make any changes to existing template, and Save to update



Mobile Layouts

 

1. The Visual HTML editor can store 2 distinct layouts (mobile and desktop) which is very helpful when tailoring your message. The preset templates take advantage of this. Since the default is desktop, to see the mobile view select the Mobile tab in the right-side panel. The blue dot on the tab indicates this communication has existing mobile customization in place (inherited from the template)



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article