This article will arm you with all the information you need about the new drag & drop email builder which is available immediately for GeckoPromote users.
To access the Drag & Drop builder, navigate to Settings > Email & SMS Templates and click + New Template in the top-right corner of the screen.
Choose the template type as Email, and pick Drag & Drop as the editor type.
Give your template a Name, to identify it internally, and give it a Subject, to appear in the subject line when the email eventually arrives in your inbox. Once satisfied, click Next in the bottom-right corner.
We're now taken to the Drag & Drop editor itself. On the right side of the template designer there are three important tabs. Let's look at each of these and discover what role they play in creating beautiful HTML emails:
- Rows - The basic building blocks of your email. These shape the structure of your email.
- Content - The substance to your email. Content is added directly into your Rows.
- Settings - the overarching settings for your email.
Rows are the building blocks of your content and make an ideal place to start. You can place a row into your email by simply identifying which style of row you'd like to add and dragging it across to your template.
Once added to your email designer, rows can be used to host Content. This is illustrated in the screenshot below, where we have two rows in use - one with content and one without:
Once added to your template, the properties of your Rows can be easily changed. To begin editing your row, simply click on any part of your row not currently occupied by Content.
In addition to being able to clone a row or delete it, the menu that appears to the right of the template builder gives you creative control over a range of options such as row background colours or images, and the properties of columns, borders and padding.
In short, Rows are the foundations of your template. They define where content appears, and how it appears in relation to the rest of the email.
Content is what you use to fill your email. To identify content on your template, simply hover the mouse over elements on your email - pictures, videos, text. A blue border will appear around the element with the word Content on its periphery.
There are currently seven types of content available for you to use on your emails:
- Text - Allows you to include rich text in your emails. Once you've dragged your text content onto a Row, simply double click on the text box and start typing. You can change the font, size, justification, colour of your text and include things like lists and hyperlinks. Clicking the Merge Tags option, or typing the '@' symbol allows you to quickly add template tags to your text. Lastly, padding and line spacing can be set in the Content properties menu to the right of the email designer.
- Image - This type allows you to include images in your communication. Once you've added your image content into a row, drag across an image file to upload it, or, click Browse to search for free photos to choose from over 500,000 free professional stock images. Once inserted, clicking on your image allows you to manage its properties: size, alignment, links and actions on click. Apply effects & more gives you access to a full suite of professional image editing tools:
- Button - This content type is a quintessential call to action. Once added to your email, clicking the button allows you to change it's text and also opens the content properties to the right of your email designer. There you can choose what action is associated with clicking a button, and other assorted properties. The screenshot below is good use-case. The top button links to a Gecko form to allow recipients of your email to book onto your upcoming event. The bottom button is a link to a contacts RSVP page to manage their booking.
- Divider - Serves, quite literally, as a divide between different sections of your email. Clicking it once added to your template will allow you to alter size, colour, line style and padding.
- Social - Once added to your template, you're able to add and customise which social media accounts you'd like to link to. There are currently 15+ platforms you can link to with customisable logos for each. Clicking the social content allows you to modify appearance and add URL's to your corresponding social media account.
- HTML - Clicking your added HTML content allows you to paste your source code directly into the properties to the right of the email builder. Using your own code may affect how the email is rendered. Not every email client will support this. We recommend only using this content type if you're an expert.
- Video - Allows you to add links to videos in your email in the form of a clickable thumbnail. Once added, clicking the content type allows you to link to your video, change the play icon and alter any padding values.
It's worth noting that for each of the above content types, you can toggle to hide on mobile, which will prevent the content from showing if the user opens the email on a mobile device.
Finally, we reach the Settings tab. Here you will be able to edit some key general settings for your email template, such as content area width, global fonts, background colours and more.
Once you're happy with your email, you can preview how it will look on both desktop and mobile devices. Simple click Preview in the top-right corner and select Preview Mode. To exit this view and return to the main designer, hit the cross icon.
As a GeckoPromote user, you have access to the Stats tab on the top-left of the email. This charts the impressions, open and click-rates and a range of other analytics which can help optimise your future email building endeavours.
Any questions? Feel free to start a live chat with a member of our support team or explore the rest of our academy at your leisure.