Create a message: HTML Editor

The HTML Editor is one of the three tools you can use in Flexmail to create a message for your audience. It is a what-you-see-is-what-you-get (WYSIWYG) editor that allows you to add a custom HTML-based message to your messages and templates.

This article will walk you through the most interesting options in the HTML Editor. We encourage you to get creative and explore even further the capabilities of our tool.

You will find the HTML Editor in your Flexmail administration panel. 

Create a message

1. Click on Campaigns, and then on Messages, to open your Message administration area. Here you will be able to see the messages you have already created, ordered by category.

   

2. Click on Create new message.

   

3. Make sure HTML Editor is the selected option. You can name your message, select your category and your template. Select one of your previous saved templates or check No template if you want to add a new custom message. When you are ready with your choices, click on Save to start composing your message.

   

4. On the next step you can start customising your message or template. If you chose to work with a template, you can use the WYSIWYG editor options to customise the content you already have. If you want to add custom HTML Content, go straight to the HTML source editor by clicking on its icon. Add your code and click on Update to apply it.

   

HTML Editor options

1. Text edits
   • The first line in your WYSIWYG editor shows you your text editing options. You can adjust the style and typography, the alignment, the color of your font and background, the font family and font size.
   • You can add a subscript, a superscript and special characters to your text. 
2. Copy and paste
   • On the second line you will find several helpful options to copy and paste from other sources - cut, copy, paste, paste as plain text and paste from Microsoft Word. 
   • Make sure, if you copy content from Microsoft Word to use the specific button. This button will make sure that no underlying code from Word will be added into your HTML editor message. It will prevent you from having issues with the layout later on.
   • On the bottom line, you can use the Eraser icon to remove formatting.
3. Undo and redo
   • You can take a step back (undo) and a step forward (redo) after undoing.
4. Find and replace
   • There is a find and replace option which comes in handy when proofreading. 
5. Layout
   • You can create ordered or unordered lists - with the numbering or bullets.
   • Indent increase and decrease is available.
   • Use the quotation marks to add a blockquote.
   • You can add a horizontal line in your design.
6. Link 
   • You can select a design item and click on the Hyperlink button in your WYSIWYG editor to open the Insert/Edit Link pop-up. Here you can choose a URL, a file, a landing page, form or survey to link to. 
   • Check out the Popup, Events and Advanced tab to adjust the appearance of your link.
     • In the Popup tab, you can put a check in front of Javascript Popup and a URL to create a popup for the link to open into. You have turnkey options for the frame, the x/y position, and the size of the popup that appears for the user.
     • In the Events tab, you can add Javascript events, e.g. what will happen if a user hovers over your link.   

     • In the Advanced tab, you can play with several CSS options - add ID, Style, Language Direction, Language Encoding, ...

       

       Support tip

       we do not provide support for the custom code you need to use in the Popup, Events and Advanced tabs.

   • You can remove a link.

   • You will find an easy option to add an anchor link to other segments of your message.

     
     

     Support tip

     we recommend using anchor points with caution because they are not supported in all email clients.

7. Image
   • You can add an image with an image description and a title - either upload it from your local files or from the Media library.
8. Tables
   • You can add tables or manage existing tables.
   • You can manage the style or size of your rows and columns.
   • Add or remove cells, columns and rows easily.
   • Merge and split table cells. 
9. Document Properties
   • In the Document Properties, where in your General tab you can manage your
     • Meta Information (Title, Keywords, Description, Author, Copyright and robot indexing options),
     • Language and Encoding options (Character Encoding, Doctype, Language Direction, ...).
   • In the Appearance tab you can manage your
     • Text Properties, 
     • Background Color and Link color, 
     • Body Margins, 

     • Stylesheet and Style Properties.

       

10. Personalisation placeholders
    • Access a library of placeholders you can use to personalise your message.
11. Social Media 
    • With the Social Media pop-up you can add your social media accounts one by one. 
    • Click on the social media icon in the list to select the size of the icon and add it to your template. 
    • You can also pre-type a message your contacts could share on their social media or a message they could send to their contacts, sharing your social media. Sharing your social media in this way is only possible in the HTML Editor.

Preview and Save

If you feel like you are almost finished, go ahead and Preview your message. Just navigate to the top right corner and click on Preview. The visualisation of the message will appear in a new tab in your browser. 

If you are happy with your design, now scroll all the way down and click Save one last time to make sure you are saving the final version. Ideally, you want to Save your message after every significant change you do to your message.

Related articles