Campaign Editor

The v4 HTML WYSIWYG Editor is JangoMail's most advanced HTML WYSIWYG editor and the editor we recommend to clients.

Visit these links to navigate quickly to the section you are interested in, or read the whole tutorial:

• Add Links
• Add Images
• Use Templates
• Edit Source Code
• Insert Social Media Links
• Insert Unsubscribe, View as Webpage Links, HTML Snippets
• Add Tables
• Paste from Word, Paste as Plain Text
• Spell Check
• Locked Content (Read Only)

To select the v4 editor, go to Messages and then click New Message. Then choose how you want to create the message. You can choose with a New Blank Message. If your page does not default to the editor you want, you can use the Edit icon  then choose the v4 editor. 

 You can also change to the v4 Editor by navigating to Settings > Authoring and clicking the Edit Icon next to Preferred HTML Editor.

Exploring the HTML Editor Window:

You are now ready to use the HTML editor to compose your message. Let’s explore some basics about the Editor Window.

The editor has three Toolbars:

The editor has a composition area below these toolbars. You design your message and the editor will write the code needed to make your message render properly as HTML. If you want to view or edit your HTML code, you may click the Source icon at any time.

 

Selecting your working window:

The editor is fully functional within the JangoMail page. If you wish to work within a larger screen for easier design, click the Maximize icon. This will launch the editor into a window of its own so that you can compose. When you are done composing, you may click the Maximize icon again to return to the JangoMail window, with your changes intact. Note: Do not hit the Back button on your browser as it will leave the page. 

You may also choose to view guidelines and invisible elements by clicking the Show Blocks icon.

Using Templates

You may insert a JangoMail Smart Template by clicking on the Templates button, or by using our Template Tool.

Basic composition:

The editor uses standard word processor composition and formatting tools and commands. You may format text by selecting it, then using the appropriate tool. A brief description of each standard tool follows.

• Cut/Copy/Paste

  

  • Cut - Removes selected text to clipboard.
  • Copy - Copies selected text to clipboard.
  • Paste - Pastes clipboard contents where cursor is positioned.
  • Paste as Plain Text – Pastes clipboard contents as plain text.
  • Paste from Word – Pastes clipboard contents from Microsoft Word.

• Undo/Redo

  

  • Undo - Reverses last action.
  • Redo - Reverses an Undo.

• Insert Content (Unsubscribe Link, Social Media Sharing, HTML Snippets, etc.)
  
  
  
  

  • Insert Content - Inserts links to Unsubscribe, Confirmed Opt-In, View as Webpage, Modify Profile, Delete Profile, insert a CAN-SPAM footer, custom HTML Snippets you've created, share on Facebook, like on Facebook, share on LinkedIn, and share on Twitter.

• Bold, Italics, Underline, Strikethrough, Subscript, Superscript

  

  • Bold - Applies bold formatting to selected text.
  • Italics - Applies italics formatting to selected text.
  • Underline - Applies underline to selected text.
  • Strikethrough – Applies strikethrough to selected text.Subscript, Superscript
  • Subscript – Sets the style of selected text to subscript.
  • Superscript – Sets the style of selected text to superscript.

• Styles, Format, Font, Size

  

  • Style - Set style for selected text.
  • Format – Set the format for selected text (i.e. Paragraph, Heading, etc.)
  • Font - Set font for selected text.
  • Size - Set size for selected text.

• Text Color, Text Background Color

  

  • Text Color - Sets font color for selected text.
  • Text Background Color - Sets a background/highlight color behind the text. 

• Remove Format
  
  

  • Remove Format – Removes all formatting from a selected text area.

• Paragraph Formatting

  

  • Left Alignment - Sets alignment of selected paragraph to left.
  • Center Alignment - Sets alignment of selected paragraph to center.
  • Right Alignment - Sets alignment of selected paragraph to right.
  • Full Alignment – Sets alignment of a selected paragraph to full (justified).
     Tip: Pressing Enter always starts a new paragraph, giving the impression of a double space. If you want to remain in the same paragraph, but force a new line (single-spaced), then press Shift+Enter instead.

• Find, Find/Replace, Select All, Spell Check

  

  • Find – Searches for certain text in your email.
  • Find/Replace – Searches for certain text in your email and replaces it with different text.
  • Select All - Selects all items in the email.
  • Spell Check - Checks spelling in the email.

• Numbering, Bullets

  

  • Numbering - Converts selected paragraphs to an ordered list (numbers)
  • Bullets - Converts selected paragraphs to an unordered list (bullets).

• Indentation

  

  • Decrease Indent - Decreases indent of selected paragraph.
  • Increase Indent - Increases indent of selected paragraph.

• Block Quote, DIV

  

  • Block Quote – Adds a block quote, or indented quotation.
  • DIV - Inserts a DIV container (new section).

• Horizontal Line, Emotion, Custom Character

  

  • Horizontal Line - Inserts a horizontal ruling line to your specified width and height.
  • Emotions – Provides pop up window to select facial emotion.
  • Custom Character - Provides pop up window to select symbol characters.

• IFrame, Timestamp, QR Code

  

  • IFrame - Inserts an IFrame.
  • Timestamp – Inserts the current date and time.
  • QR Code - Inserts a QR code.

• Text Direction, Set Language
  
  

  • Text Direction from Left to Right – Sets the text to read from left to right.
  • Text Direction from Right to Left – Sets the text to read from right to left.
  • Language - Tells the editor what language you are writing in.

• Tables

  

  • Insert Table – Allows you to insert a table to use for alignment of items in your page. Often tables are used to keep text/images in desired alignment. A popup will appear when you click this button to customize the look of your table:
    

• Save, Preview, Print
  
  
  
  

  • Save – Saves your design.
  • Preview – Opens your design in a new screen.
  • Print - Prints your design.

Composing with Links:

You may include 3 types of links within HTML emails: web page link, email link, and bookmark link. Once created, you will need to Send or Preview the message to yourself to test the links. Links do not actually function within the HTML editor.

• Web Page Link

  • Select the text (or image) to be converted to a link.
  • Select the Insert Link tool.
    
  • You will see the Insert Link window.
    
  • Type (or paste) the full URL into the URL bar.
  • Click OK.
  • You can select the Unlink icon to delete the link you just created.
    

• Email Address Link

  • Select the text (or image) to be converted to a link.
  • Select the Insert Link tool.
  • Under Link Type select E-Mail.
    
  • Fill out an email address and if you would like, a subject line and message.
  • Click OK.

• Insert/Edit Anchor

  

  • Insert/Edit Anchor – Inserts or edits an anchor that you can link to from within your email.

Composing with Images:

HTML email messages can also include images. Instead of using copy/paste commands to insert images into HTML email, however, you will use upload/insert tools.  

• Click the Insert Image tool.
  
• You will open a pop-up window to select your desired image. Make sure you disable any pop-up blocker software.
• If you have already uploaded an image to the Files section of JangoMail, then you can click Browser Server to find and select that image. Make any adjustments to the width, height, border, spacing or alignment that you would like and click OK to insert the image. Note: If your image does not appear here, make sure it is a JPG, PNG, or GIF file type and make sure you uploaded it.
  
• If you have not yet uploaded your image to Files, you can upload it here, on the Upload tab. Choose File to find the image on your computer and then click Upload to Files. You will then move to the screen above. Make any changes that you would like and then press OK to insert the image.
  
  
  

Locked Content (Read Only) for Subaccounts:

If you have a master account with subaccounts, you can assign certain sections of your email as locked for editing. To lock a section of your email design as Read Only, assign one of the following attributes to the section of code you want locked:

1. contenteditable="false"
2. class="readonly"