JangoMail offers several different HTML editors, our newest being a Drag & Drop editor. This editor can be used with your own HTML message, one of our premade templates, or can be used to build a message from scratch.

Selecting the Editor

Once you have logged into your account, you will follow these steps to start your new message and selecting the editor.

Go to Messages.
Click the +New Message icon.
Select how you will be creating a new message (Blank Message, Template, JangoMail Template, etc.).
Hover over the Pencil icon towards the upper right of the page, in the Related Links tool bar.
Select the option for Drag & Drop.

Using the Editor

When you begin using the editor, you will be able start adding elements to your message immediately. Your message will start with a body, to which you can build on top of that by dragging the elements you wish to use, and placing them in the body.

What are the Elements?

1 Section - This will add one section/cell to the body of your email that will default to the length of the body.
1/2 Section - This will add two equal sections/cells into the body of your email.
1/3 Section - This will add three equal sections/cells into the body of your email.
3/7 Section - This will add two sections/cells, one being 30% and the other being 70% of the width of the body.
Button - This will add a very small cell that can be linked, and have text added to it, creating the appearance of a button.
Divider - This will add a table that spans the width of the body/cell that you add it to, separating the original cell into two pieces. This is roughly 1px in height, but can be adjusted.
Text - This will add a Text box into the cell/body that you place it in. You will be able to then type out the text you want in your message.
Text Section - This will add in a Text box, with a header and paragraph area for you to add text.
Image - This will allow you to insert an Image into your message by selecting from the Images you have in your account (under Files) or inserting a new Image from your computer. Inserting a new Image from your computer will also add the Image to your Files in your account.
Quote - This will add a Text box to be used as a quote, or even a disclaimer. It is smaller in size than a standard Text element, and centered automatically in the cell/body it is added to.
Link - This will add a small text box, that is ready to be linked.
Link Block - This will add a small box that is ready to be linked. This is instrumental in creating a hyperlinked image.
Grid Items - This will add a table with two equal vertical cells, that will include areas for an image, text header, and text paragraph box.
List Items - This will add a table with two equal horizontal cells, that will include areas for an image, text header, and text paragraph box.
Unsub - This will add in our unsubscribe link to your message. If you do not add this yourself, the system will automatically add the CAN-SPAM Footer at send time to the bottom of your message.
Opt-in - This will add in our Opt-In link, to allow your recipients to Opt-In to your emails. This is to be used with the Confirmed Opt-In list feature.
View Page - This will add in our View as Web Page link. This will allow your recipient to click a link and view your email message as a Web Page.
Member Edit - This will add in our Edit Member Profile link. This will allow your recipient to edit the data you have stored for them in your list.
Member Delete - This will add in our Delete Member link. This will allow your recipient to delete themselves from the list you sent to.
CAN-SPAM Footer - This will add in our CAN-SPAM Footer. If you do not add the unsubscribe link yourself, the system will automatically add this footer at send time to the bottom of your message.

Customizing your Elements

For every element you add above, you can customize the Dimensions, Typography, and Decorations.

Dimensions

When editing your Dimensions, you can adjust the width, height, margins, and padding of your cell/element.

For the Width and Height Dimensions, the default is set to auto. This means that the cell/element will automatically adjust to the device being used to view it. You can set that to 100% or to any px amount you want.

Width - This is the width of your cell/element.
Height - This is the height of your cell/element.
Max Width - This is the maximum width you want your cell/element to be when sent.
Min Height - This is the minimum height you want your cell/element to be when sent.

Margins and Padding are set to 0px but can be adjusted to anything you would like.

Margins - Used to create space around cells/elements, outside of any defined borders.
Padding - the space between the cells/elements content and its border.

Typography

Typography will apply to any Text that you place into your cell/element. You can set the Typography for a section, before adding text, and it will be applied to any text you add. You can also wait and change the Typography until you add the text element itself.

Font - This allows you to change the Font/Font Family that will be used for your text. There is no default Font Family assigned.
Font Size - This allows you to change the size of your text. The default is 12px.
Weight - This sets how thick or thin characters in text should be displayed. The default is "light".
Letter Spacing - This allows you to set how far apart the letters are spaced between each other. The default is "normal".
Font Color - This allows you to change the color of your font. You can use the color scale or put in your own RGB color code. The default is rgb(111, 119, 125), which is a grey color.
Line Height - This allows you to set how tall the lines are. The default is "normal".
Text Align - This is where you can set the alignment for your text. The default is left aligned.
Text Decoration - This allows you to set your text to be underlined or be struck through. The "x" icon, is used to remove either of the decorations you might have set.
Font Style - This is where you can set the style to be normal or Italic. The default is normal.
Vertical Align - This allows you to set the vertical alignment of your text. The default is "baseline".
Text Shadow - This allows you to add a shadow to your text. Once you add the shadow, you can specify the positions, blur, and color.

Decorations

When editing the Decorations of your element/cell, you can change the Background Color, Border details, and add a Background Image.

Background - This is the first of two options for your background. This allows you to change the color of the background in your cell/element.
Border Collapse - This is where you can set the border to be collapsed or not. The default is NO.
Border Radius - This is where you can set the radius of your border around your cell/element's corners.
Border - This is where you can set the Width, Style and Color of your border.
Background - This is the second of two options for your background. This option allows you to place an image as the background of your element.

Extra Icons/Features

You will notice while working in the Drag & Drop editor, that there are Icons/Features constantly displayed at the top. These offer the ability to view the HTML source code, edit the code, preview the message on different device types and more.

- This allows you to view the message as it should appear across Desktop Screens. This is the default view.
- This allows you to view the message as it should appear across Tablet Screens.
- This allows you to view the message as it should appear across Mobile Screens.
- This allows you to view the elements you have added to your message. The default is to have this turned on.
- This allows you to go Full Screen while working on your message. The default is to have this turned off.
- This allows you to view the HTML code of your message. You cannot edit the code here, but can view and copy it out.
- This allows you to import HTML code that you have built somewhere else.
- This allows you to Toggle the images in your message.
- This allows you to edit the HTML code.
- This allows you to customize the elements in your message. You will need to select the element you wish to customize (as discussed above) and then select this icon.
- This allows you to edit any component settings there might be for your element. This will be most used with Links and Images.
- This allows you to view the Structure List of your message's HTML code.
- This allows you to add elements to your message.

Linking Text and other Elements

Hyperlinking to text and other elements can be done. Each has a similar process to accomplish hyperlinking.

Text

Add the Text element.
Create the text you want to Link.
Highlight the text you want to Link, and then click on the hyperlink icon.
Once you have done that, you will want to select the link. You will see that the link element is selected above your words, if done correctly.
Click the Settings Icon.
You will then add the URL you want to link to in the Href option. You can also designate what window it opens in and a Title for the link.

Link Element

Add the Link element.
Change the wording if desired.
Select the Link element.
Click the Settings Icon.
You will then add the URL you want to link to in the Href option. You can also designate what window it opens in and a Title for the link.

Link Box Element

Add the Link Box element.
Select the Link Box element.
Click the Settings Icon.
You will then add the URL you want to link to in the Href option. You can also designate what window it opens in and a Title for the link.

Images

Add a Link Box element.
Select the Link Box element.
Click the Settings Icon.
You will then add the URL you want to link to in the Href option. You can also designate what window it opens in and a Title for the link.
Select the Elements icon.
Drag/Add an image into the newly linked, Link Box.

Need more assistance with Drag & Drop?

Please feel free to call or email our support team! 937-701-7140

Editors: Drag & Drop

Selecting the Editor

Using the Editor

What are the Elements?