Editing your Template – Using the Drag and Drop feature of MyMail

Once you have opened your template by simply clicking on the picture of it, or choosing the preview feature from the kebab menu, you will have a full screen view of the mailer, to start editing.

The Drag and Drop features are located on the right of your template screen.
There are 3 tabs to work from, the Layout, Design and Styles tab.

• The Layout Tab

To access and insert particular elements in your template, you can use the Layout tab features with a simply drag and drop motion. Click on the element, hold your mouse key in and drag it to where you want it in your template on the left – then simply drop.

The Layout Tab includes elements like text, image, button, seperator (spacer), inseting a line, unsubscribe footer and preheader and more! Below we will discuss some of the elements.

Layout > Text Element

To insert a new section of text, simply click on the text element and drag it to your mailer. The text edit toolbox will become available for you edit and format the text as you please. (Also discussed here.)

You could also add a second text section next to a previous one – in other words creating two columns next to each other, as previewed below.

(Please keep in mind that most mailers need to be responsive for mobile view, which means the second column of text will probably land up below the first text column on a mobile device. Also, the height of each column is determined by the amount of text and styling within.) See screenshots below:

Layout > Image Element

Drag and drop the Image element from the Layout tab to your mailer template. You will be prompted to browse and upload your image.

(Always keep in mind that your image’s actual size must be less than 600 px in width, otherwise some mail clients like Outlook might display it at its actual size, thus scewing your mail template layout.)

Image editing toolbar is discussed here.

As with the text element, you can also place two images next to each other, creating columns.

Remember responsively when viewed on a mobile device, the images might appear below each other on a small screen. Also, halve the width of your images’ actual px size, since you are placing 2 next to each other.

For horizontal alignment to be even, both images height must be the same (and width for that matter). Test your mailer in different mail clients before sending to see that it views correctly. Screenshots below:

Layout > Separator Element

The Separator is used to create more spacing above or below or next to another element. It is basically a blank row, with which you can toggle the padding to increase or decrease the spacing. You can also change the row or cell background colour should you want to create such an effect.

Layout > Line Element

To insert a line in your mail template, simply click on the line element in the Layout tab and drag it into your template.

Options include the line colour and style (solid, dotted, dashed, etc). The margin setting allows for top and bottom margins, as well as left and right. The left/right margins will decrease the size of your line.

Layout > Unsubscribe footer

The Unsubscribe footer includes pretyped text indicating to your readers that they have the option to unsubscribe. This is a mandatory feature and all mailers being sent out must include the unsubscribe merge field. It’s easiest to just include the unsubscribe footer in your template, if it didn’t already have one.

The footer also includes the Account Address merge field where the MyMail system will pull in your Account setup address fields.

Layout > Preheader

Most Gallery template will already include a preheader. Alternatively you can drag and drop the Preheader element from the Layout tab.

It will include the Read Online merge field, which gives your reader the option to click through and read your mailer in their browser.

Another option that is handy from the preheader is the pre-text it insert (which you can edit and customise) – it functions basically as an additional message space. Some email clients will display this text next to the subject line of your mailer – many designers use this as extra marketing space.

All elements in the Layout Tab can simply be dragged and dropped into your template. Each has its own toolbox to allow additional customisation.

See the Button toolbar here and See the Social Media toolbar discussion here.