How do I start adding/editing content?
- When you first open the designer, the layouts panel is open on the left. Each layout is a standalone piece of content you can add to your email and change to meet your needs. If you are not sure what a particular layout is for, hover the mouse over it to find out what it is. Drag a layout from that panel into the main email design area in the middle of the screen. When you see a wide blue placeholder on-screen, you can release the mouse button to drop the layout there. See "Layouts" section below for more information on Layouts.
How do I edit the contents in a panel?
After you have added a layout from the left into the design area in the middle, click the panel to select it. Once selected, a dotted line will appear around the panel.
To edit the text click onto the text and the content editor will open. From here you can update the text and change fonts/colors. Important: only use the pencil icon for advanced editing, this can break the responsiveness of the layout.
What are the icons at the top right while I'm editing a layout?
From left to right:
- Delete - deletes the line.
- Copy - copies the line into the space below.
- Edit - opens the advanced content editor.
- Move Line Up - moves the selected line up (swapping it with the line above)
- Move Line Down - moves the selected line down (swapping it with the line below)
- Close - deselects the panel, saving your changes.
What are the buttons at the top of the designer?
From left to right:
- CSS - View the CSS for the email.
- Styles - Open the Styles panel on the left.
- Done - Close the designer and return to the design list.
- Deselect Panel: Deselect the panel you are working with (only visible if a panel is selected).
- Save - Save your latest changes.
- Preview - Open a preview of the email in a popup window.
- Preview Mobile - Open a preview of the email in a narrow window, simulating a smaller screen.
- Test Email - Open the test panel, allowing a test email to be sent.
- Upload Images - Open the "Upload Images" panel.
- FAQ - This page.
How do I add images to my email?
On the layouts that have images, you will see a grey placeholder where an image is supposed to go. To replace an image, drag one from the "Recent Images" panel on the right onto the grey placeholder - the new image should appear in its place.
I have my own images. How do I upload them?
On the right side of the screen, click the "Upload Images" panel to open an image upload drop area. Drag images from your PC/Mac onto the area indicated and they will be uploaded automatically.
My images are strange sizes. How can I get them to fit the placeholders?
On the "Recent Images" panel, click on an image to open the image cropper. Select one of the preset sizes at the top. You can use the zoom buttons at the top right to zoom in and out. Once you have the image and size you need, click the "Crop" button to crop the image (you'll see a preview of the crop at the bottom). If you're happy with it, click the save button - this will create a new image (your original image will not be affected)
There are almost 70 layouts to choose from. What do they all do?
Layouts are content blocks that you can drag and drop into your email. These content blocks are all mobile responsive and they can all be edited inline once added to your email. There are 7 categories of layouts.
Headers and Footers
- Pre-Header: A hidden summary line that will appear underneath or beside your subject line in the inbox. The Pre-Header will not be visible in the email itself.
- View In Browser Link: Adds a view in browser link (typically added to the top of the email)
- Opt Out Link: Adds an opt out link (typically added to the bottom of the email).
- Survey Link: If you have created a survey and wish to deploy via email, this will facilitate a link to that survey.
- Small Logo: Adds a placeholder for a small centered logo (less than 270 pixels wide). Drag and drop your logo from the "Recent Images" panel. Note that images will be scaled to fit - logos that are 270px wide or less will work best here.
- Large Logo: Adds a placeholder for a large logo (banner size). Drag and drop your logo from the "Recent Images" panel. Note that if the image you want to use isn't suitable for this panel, you will be prompted to use the Small Logo layout.
- Social Follow : Adds a placeholder for social follow icons (large icons). Remember to click the images and update the links with your own!
- Social Share: Adds a toolbar that allows the recipient of the email to share the email contents with their friends and followers on Social Media.
- Round Colour Social Follow : Adds a placeholder for social follow icons (small rounded icons). Remember to click the images and update the links with your own!
- Round Grey Social Follow : Adds a placeholder for social follow icons (small rounded monochrome icons). Remember to click the images and update the links with your own!
- Insert Footer with Text and Social: Adds a full width footer containing links/phone number on the left and social media icons on the right.
- Insert Applications with Social, Background Colour : Adds a full width footer containing app store icons (Apple App Store and Google Play) on the left and social media icons on the right. Remember to click the images and update the links with your own! The footer is grey by default - use the "Content Background" option on the "Styles" panel to change the background colour to something else.
- Insert App Stores : Insert side-by-side badges for Apple App Store and Google Play Store.
- Insert Footer Navigation Bar : Insert a navigation bar with a collection of links to your site. Remember to update the links with your own!
- Insert Footer Block : Insert a large footer block which contains social media icons, large navigation buttons, disclaimer text and an unsubscribe link. Remember to click the images and update the links with your own! Use the "Content Background" option on the "Styles" panel to change the background colour to something else.
- Footer Text: Adds a placeholder for a block of footer text. Change the text to meet your requirements..
- Heading: A regular heading (style it using the "Styles" panel, see "Styles" section below).
- Block Heading: A heading with a background color (style it using the "Styles" panel, see "Styling" section below).
- Navigation Bar: A menu/navigation bar for your email.
- Heading with Underline: A stylised heading with a small underline.
- Text: A simple block of text.
- Text Offer Layout: A block of text with a heading, sub-heading and regular text. Suitable for offers.
- Dual Text Layout with Call To Action: Two columns of text with a call to action button underneath each.
- Dual Text Layout: Two columns of text.
- Highlight Panel: Insert a content block with a background colour. Use the style panel to change colour and inner/outer padding.
Images & Text
- Feature Image: A large rectangular image (600x300). For best results, the image needs to be at least 600 pixels wide. The height will be adjusted automatically to preserve the proportions.
- Feature Article: Inserts a feature image, a heading, a centred text block and a call to action button.
- Feature Article Combo: Inserts a feature image, an underlined heading, a centred text block and a call to action button.
- Dual Images: A pair of square images (270x270).
- Image and Text: Image on the left, text on the right.
- Image and Text with Heading: Image on the left, text (with heading) on the right.
- Image and Text with Call To Action: Image on the left, text and Call To Action button on the right.
- Dual Image and Text with Call To Action: Two images on the left, text and Call To Action button on the right.
- Text and Image: Text on the left, image on the right.
- Text and Image with Heading: Text (with heading) on the left, image on the right.
- Text and Image with Call To Action: Image on the right, text and Call To Action button on the left.
- Text and Dual Image with Call To Action: Text and Call to Action on the left, dual images on the right.
- Dual Text and Image: Two columns, each comprising an image and block of text.
- Dual Text and Image with Call To Action: Two columns, each comprising an image, block of text and Call To Action.
- Dual Text and Image with Heading and Call To Action: Two columns, each comprising an image, heading, block of text and Call To Action.
- Triple Text and Image with Call to Action: Three columns, each comprising an image, block of text and Call To Action.
- Triple Text and Image: Three columns, each comprising an image and block of text.
- Triple Text and Image with Heading and Call to Action: Three columns, each comprising an image, heading, block of text and Call To Action.
- Image and Text Layout (Wraparound): Text wraps around an image aligned to the left.
- Text and Image Layout (Wraparound): Text wraps around an image aligned to the right.
- Dual Images (Joined): Inserts two images side by side with no padding (so image appear joined on full screen, stacked on mobile)
- Logo bar (3): Insert a line of 3 small images (useful for logos)
- Logo bar (4): Insert a line of 4 small images (useful for logos)
- Logo bar (5): Insert a line of 5 small images (useful for logos)
- Insert Placeholder for a video, with heading.
- Dual Events Listing with Buttons: Inserts two events with images, heading, text and buttons.
- Full Width Event Listing with Image and Text: Image on the left and text/heading/button on the right.
- Full Width Event Listing with Text and Image: Text/heading/button on the left and Image on the right.
- Compact Event Listing with Image and Text: Image on the left and text/heading/button on the right (compact).
- Compact Event Listing with Text and Image: Text/heading/button on the left and Image on the right (compact).
- Compact Event Listing with Text and Button Only: A compact event listing with a heading, text and button (no image)
- Compact Event Listing with Text Only: A compact event listing with a heading and text only (no image or button).
- Double Buttons: Insert two buttons side by side.
- Triple Buttons: Insert three buttons side by side.
- Button: A regular solid button.
- Hollow Button: A transparent button.
- Underline Button: A borderless button with an underlined link.
- Line Divider: A horizontal line - perfect for separating pieces of content.
- Block Divider: A thicker separator line - used to add breaks to entire blocks of content.
- Spacer: A blank line used to add space between two panels. Use multiple spacers if more space is required..
- Dynamic Content: Add a block of dynamic content (add this block to your email to see a sample).
- Add your own code: Add a block of HTML to the email (useful if importing content from outside of our platform).
- Download Scraped Content: Scrape content from an external web page (the content is scraped when the email is built).
How do I style my buttons?
The style panel allows you to change style options for the entire email, or style individual panels if you prefer. To style your buttons, first note whether you are using solid buttons, hollow buttons or underline buttons.
On the "Select Style" dropdown list, select the button type that you want to change.
For Solid Buttons, you can change the text color and background color.
For both Hollow and Underline Buttons, you can change the color of the text/border, and you can change the line thickness.
How do I change the background colors for my email?
On the left side of the screen there is a panel called "Email Background". From here you can change the outer color (the color around the outside of the email) and the Content Background Color (the color behind the email content).
I don't like the default font. How do I change it?
In the Styles panel on the left, find the "Email Text Style" option. Use it to change the font, font size and font color for all regular (non-heading) text in the email. Tip: If you just want to change the font in one panel, select it first, then change this option - it will only change the selected panel.
How can I style an individual panel? (different fonts, colors for example. to the rest of the email)
Click a panel to select it. Any changes made using the style menu on the left will only impact the selected panel. You can change the following (independently from the rest of the email):
- Button Colors
- Outer Color
- Content Background Color
- Heading Styles
- Email Text Style
- Email Link Style
- Divider Lines
- Button Types
How do I add links?
There are two kinds of links that you can add to your email. Links to your own content (like website, blog, social media sites) and System Links (View In Browser, Document Links, Opt Out Links, Survey Links).
Add a link to your own site by highlighting the text you want to link and clicking the "Insert Link" button on the toolbar (labeled "1" above)..
Add a system link by highlighting the text you want to link and clicking the "System Links" list on the toolbar (labeled "2" above)..
For some system link types, you will be prompted to make a further selection (to choose a survey, choose a document for example.)
I want to add content from my blog or website. Can I do it?
Sure! On the content toolbar (see the screenshot in the last question), there is an option to "Download Content". From here, you can download content from "Wordpress" or "Other".
"Wordpress" uses a JSON plugin (more details here - you need to have that installed on your wordpress site). Add your wordpress link and click OK. The content will be formatted and added to the email designer.
"Other" allows you to enter any web address - content will be extracted from that page automatically.
How do I add a video to my email?
Videos cannot be embedded directly into an email - some email clients and servers may block them from appearing or break their functionality.
A workaround is to create an image that looks like a video. When contacts click it, it will launch the video in their browser.
- In the designer, click the "Video" panel on the right hand side to open it.
- Click the "Vimeo" icon if you are using a video on Vimeo, or click the "YouTube" icon for YouTube.
- You will be asked to paste a link to your video. Do this and click "Get Image".
- Now navigate back to the "Recent Images" panel (the top panel on the right hand side). Your video thumbnail should be here. Simply drag and drop it into your design (replacing an image placeholder).
- The image is linked to your video clip automatically. Preview your email to test.
"Warning: a button in your design is not linked to any web page. Ensure all buttons are linked before sending test emails. See FAQ for more information."
You have added buttons to your design. This is a warning message to let you know that the buttons do not have any links on them. To resolve, ensure that all buttons in your email have links.
"Design contains a button or link which is not linked to any content. All links should be set before testing email as it can lead to formatting issues with some email clients."
You have added buttons to your design. This message appears if you try to send yourself a test email without first adding links to those buttons (buttons with blank links are known to cause formatting issues with some email clients). To resolve, ensure that all buttons in your email have links.
I sent myself a test email and have not received it yet. Why?
Your email is sent to an email queue for processing. If the queue is busy (i.e. lots of other users sending emails at the same time), then your email will be processed in time. If you are waiting for a very long time, please contact email@example.com and we will investigate. Tip: Some of our queues are on a domain by domain basis - queues for webmail domains (gmail, hotmail, yahoo, eircom for example.) can be quite busy. Sending to your company address usually bypasses these busier queues and will result in getting your email more quickly.
My email is very long and renders incorrectly in Outlook for Windows/Mac. Why?
All of our layouts are tested as much as possible in as many different email clients as possible. By default they should render correctly. Be aware of the advanced edit, this allows access to the layout foundations and it is possible to break responsiveness accidently during editing.
Outlook is a quirky email client and the bane of many email marketers due to these quirks. In this situation, it is trying to add page breaks to your email for ease of printing. Unfortunately, this can make a mess of your email layout, particularly if you are using multiple columns. The easiest way to resolve it is to note where this break happens, and add a piece of single column content (text, an image or a button) at that location instead. This is an issue with Outlook and is unfortunately outside of our control. Please contact firstname.lastname@example.org if you need help or advice on your design.
My email looks terrible in Hotmail/Outlook.com (but looks fine everywhere else). Why?
If you have added buttons to your design but have not added links to those buttons, you may come across this issue. Ensure that your buttons are linked to go somewhere (a website, email address for example.) then retry your test. If you're still having issues, please email email@example.com and we will investigate.