WYSIWYG email editor

Integrated WYSIWYG email editor

Create beautiful emails without needing to know how to design with the integrated WYSIWYG Email editor.
WYSIWYG is an initialism standing for "What You See Is What You Get".

Accessing the WYSIWYG email editor

The WYSIWYG email editor is available when you create either an automation or a real-time broadcast.

If you choose our default email app, during the final steps of creation you will be requested to select one of these options:

 mceclip15.png

Selecting Start From Scratch will open the WYSIWYG email editor.

Once you have an automation created, you may also access the WYSIWYG Email editor by clicking the email icon in your list of automations:

mceclip20.png

 

WYSIWYG email editor interface

In the WYSIWYG email editor, you can drag and drop the content modules displayed on the right hand side into the left area and design your own emails with ease, without any coding knowledge needed.

Editor_example.gif

 

Drag and drop content modules

The WYSIWYG email editor includes a series of pre-configured content modules that you can drag and drop into the editor area as displayed above. 

mceclip0.png

Text module

mceclip6.png

Drag and drop the text module into the email editor and add your own custom text; you can make adjustments to the text color, font, line height, and more. You can also use our dynamic merge tags here to personalize your text!

mceclip3.png

Image module

mceclip7.png

Drag and drop an image into the email editor and use the integrated royalty-free image search tool to add images into your emails.

With integrated image editing controls, you can do it all within your browser.

 

 

Button module

mceclip10.png

Drag and drop the button module into your email -- from here, you can change the look and feel of them on the right.

mceclip4.png

Divider module

mceclip1.png

Drag and drop the divider into the email editor to separate your email into different sections. Then, adjust its transparency, width, alignment, padding, and more.

mceclip4.png

 

Social module

mceclip11.png

Drag and drop the social media buttons into the email editor, and then you can configure them to suit you! You can remove each one individually, adjust their position, and more.

mceclip5.png

 

Toggle More options to view and edit the name or alternate text.

mceclip13.png

HTML module

mceclip9.png

Drag and drop the HTML content module into the email editor and add your own custom content.
We recommend that you either have HTML experience or hire a professional when coding custom content.

mceclip1.png

Video module

mceclip8.png

Drag and drop the video module into the email editor to add video in your emails. You can customize the video URL, adjust the video's padding, or choose to only display it on desktop or mobile devices.

mceclip2.png

 

Timer module

mceclip5.png

Add a timer to your email to add a sense of urgency, then adjust how the section looks.

mceclip7.png

Click Countdown Timer to set the date and time for your email to count down to and the look of your timer.

mceclip6.png

GIF module

mceclip8.png

Drag and drop the GIF module into the email editor to add an animated GIF to your email. You can adjust how it appears in your email, then click Search for animated GIFs to search GIPHY for your ideal GIF.

mceclip9.png

Stickers module

mceclip10.png

Drag and drop the stickers module into the email editor to add a sticker to your email. You can adjust how it appears in your email, then click Search for stickers with Giphy to search Giphy for your ideal sticker.

mceclip11.png

Email previews

Click Actions and then Preview within the top action bar, then you will be able to preview your custom emails in both desktop and mobile view.

email_editor_preview.gif

 

Saving a template

From the same action bar, click Save as Template.

Email_Editor_--_Save_as_Template.png

Your email will show up under Start from Previous when creating an email automation or broadcast.

Email_--_Start_from_Previous.png

 

Need Help?

If you have any questions, please contact our support team by clicking the support icon located in the bottom right-hand corner of this page.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.