Table Of Contents
Getting Started with Mailgun's Email Editor
Content Tools
Text
Image
Divider
Button
Spacer
Social Sharing
HTML Block
RSS Feed
Sections
Add a Section to Your Template
Move a Section
Duplicate a Section
Delete a Section
Personalizing Content
Manage Your Mobile View
Responsive Design
Preview Your Template
Save Your Template
Send Your Template
Getting Started with Mailgun's Email Editor
Email design with our intuitive drag-and-drop Email Editor is simple and the only tool you need for all your mailing needs. With Mailgun's Email Editor, you can choose how to design your templates:
- Responsive Drag-and-Drop Editor - Use Mailgun's Email Editor and its wide range of content tools to design your header & footer, and different sections within your email body.
- Use HTML - For anyone who is comfortable coding their emails with HTML directly.
One more thing - Mailgun's Email Editor is a responsive email editor. That means your mailings will be rendered properly on a computer, smartphone, or tablet regardless of the recipient's email client. Mic drop.
Content Tools
This area covers all the content elements that will appear in your message (text, images, buttons, social sharing, etc).
Adding content is easy - just click on the content block and drag it to the desired area in your template. If you want to move that block, just drag and drop it to the new location.
Click within the frame to customize the element using the toolbar that appears around the frame.
Text
Using the Text toolbar, you can easily format and customize your text block:
o Adjust line heights
o Align text
o Set the background color
o Change Margins
o Personalize your content using variables
o Format your text (font, bold, italic, etc)
Image
The Image toolbar allows you to:
o Set the horizontal positioning
o Add padding
o Apply a border (shape) to the image
o Mobile scale-up
o Set the background color
You will add an image by utilizing an external URL to an existing image online.
For this example, let's upload an image to our template. Once you click the upload image button, you'll need to enter the URL for an image via an external link.
Divider
You can add a dividing line to separate sections or elements within a section (as per the example below). The Divider toolbar allows you to:
o Set the background color
o Change Margins
o Format the line (design, color, weight)
o Adjust the horizontal and vertical spacing
Button
There are many options available in the Button toolbar including:
o Border Radius (set the roundness of the button corners)
o Button border color, weight, and style (solid, dotted, dashed, etc)
o Set horizontal positioning and padding
o Add a hyperlink
o Font alignment
o Adjust the margins
o Personalize the text using contact properties
o Format the font (font family, color, bold, etc).
Spacer
Add a blank space to separate elements or sections within your newsletter. With the Spacer Tool, you can:
o Set the height of the blank space (in pixels)
o Add a background color (optional)
Social Sharing
Add your favorite social icons to your templates such as Facebook, Twitter, LinkedIn, Instagram, YouTube, Medium, and Xing.
Click the 'Configure links' button to open the Social Media Configuration modal where you can:
• Select up to 10 social media icons
• Modify the label text
• Share the online version of your marketing newsletter to your social media account* or set the link to go directly to your social media page.
• Create your own social icon by clicking 'Add custom icon'
To show and configure the text labels, click 'Display labels'.
Click the block options (pencil) to configure the icon size, shapes, and color as well as the section background color and padding.
HTML Block
You can add some HTML code directly into your newsletter. Drag the HTML Block to your template, then click on the button from the toolbar to open the HTML editor window and code away!
RSS Feed
Pull blog posts and other dynamic content into your template with an RSS Feed.
Simply drag the RSS Feed tool to your template and add your RSS Feed URL link in the modal window. Then select the items you want to be imported by clicking on the drop-down list or searching by author or title.
Each imported item will appear as a section in your template where you can edit the content and image as normal.
The RSS content is retrieved only once upon import and will not be updated automatically. If you need to update your RSS content, just create a new RSS feed and delete the old one.
Every time you add an URL link to an RSS Feed, it will be stored locally at the API Key level. The next time you add an RSS Feed content block to a template, you will have access to the last 5 feeds added.
Sections
Add a Section to Your Template
You can build your template by adding sections. Then you add different elements (text, buttons, images, …) to each section. A section can have 1, 2, 3, or 4 columns, with varying widths.
Click on the section layout you want, then drag and drop it into your template.
Move a Section
Click within in the section background, then on the up or down arrows.
Duplicate a Section
Click within the section to highlight it, then click the duplicate icon on the right side of the screen.
Delete a Section
To remove a section from your template body, click within the section, then click the trash icon. Confirm the deletion by clicking on the red 'x' that appears.
You can also quickly delete a section or element, by dragging it to the content tools area.
Personalizing Content
You can customize your newsletter text and subject field by adding variables. Select the text frame where you want to display the personalized content. From the menu bar, click on 'Variables'.
Select or create the desired variable.
Manage Your Mobile View
You can arrange how the columns in each section of your message will appear on a mobile device: Stacked (default) or Side by Side
To change a column display, click on the section background then click on the 'Selection Options' icon.
Check the 'Keep multiple columns on mobile' options to display columns side by side. A small blue icon will appear in the section indicating the columns will be shown side by side on a mobile device.
Click on 'Preview & Test' to view how your columns will look side by side.
Responsive Design (Fullwidth vs Boxed)
Our tool allows you to build responsive design newsletters. This means that your newsletter can respond and adapt accordingly to the width of your viewing screen. Your template will look awesome whether you view it on a computer/laptop, mobile phone, or tablet.
The Settings Tab gives you two options for responsive design:
- Fullwidth: Your template width will automatically adjust to the width of the viewing screen.
- Boxed: The main template body width is static, regardless of the viewing screen.
Preview Your Template
To preview your template click on Preview.
Your template can be previewed on different devices:
Save Your Template
To view your templates, while in the Email Editor, click "Back to template details" in the upper-left portion of your screen > click "Back to all templates" in the upper-left portion of your screen.
Send Your Template
curl -s --user 'api:YOUR_API_KEY' \
https://api.mailgun.net/v3/YOUR_DOMAIN_NAME/messages \
-F from='A1 Car Rental <rental@YOUR_DOMAIN_NAME>' \
-F to='ruby.test@example.com' \
-F subject='Biggest Discounts Of The Year!!!' \
-F template='template.test' \
-F t:variables='{"firstname": "Ruby"}'
Got Questions?
Sinch Mailgun has answers! If you have any concerns or questions, please send us a Support ticket using the Support page within your Mailgun Control Panel. Our Support Team will be happy to assist!