Using The Drag 'n' Drop Responsive Email Builder

Getting Started

OK, so you're ready to use the Drag 'n' Drop Now to design your email. You can either start an email from scratch, or if you want a bit of inspiration you can use one of the many templates you have access to in Campus.

To chose between the two options chose either 'Select' (to start from scratch with no template), or 'Use a Template' to, you guessed it, use a template.

Templates

The Campus email templates have been designed and built by our team of expert designers and email coders and are fully responsive and tested across all major email clients including mobile and tablet.

Currently there are two sets to choose from:

Set One – the 'Campsite' Range

This range consists of the 'Announcement', 'Blog', 'Newsletter', and 'Product' categories. Each of the four categories cater for a different type of email and they come in the 'Camper', 'Estate' and 'Tepee colour palettes.

Set Two – the 'Sleek' Range

The Sleek range gives you greater flexibility in terms of layout meaning you can build modular emails with different columns in different parts of your email with ease.

You can preview any of the templates to see them in all their glory by hitting the 'View' button and of course, to use any one of them, simply click 'Use' and go ahead and customise your email in the Drag 'n' Drop editor.

The Editor

So this is where all the fun begins!! For the purposes of this help guide we're going to assume you've opted to not use a pre-built template and instead are starting from scratch. If you are using a template, no worries, you'll no doubt want to tweak the template to suit your brand and needs so all of the following applies.

The Body Tab

A good place to start is over in the 'Body' tab:

Here you can set your email's content area width, the background colours, default font, and link colour.

N.B. The Drag 'n' Drop editor will only allow you to choose from a selection of 'email-safe' fonts that will work across all email clients. It's no good you designing your email with an obscure font that your recipients are unlikely to have loaded on their computers as they'd just see their default font instead (e.g. Times New Roman or Helvetica).

The Structure Tab

The 'Structure' tab gives you a bunch of different layout options that you can drag into your email. Once you've dragged in your structure section you can delete it by clicking on it and then clicking on the trash, or copy it by clicking on the copy icon (which looks like a couple of stacked up pieces of paper).

Now you can style your section by clicking on it and heading back across the page to the Structure tab where you'll have a bunch of options to edit the rows and columns you've added.

You can edit the background colours, padding and borders too.

Once you've got your structure sorted you can move the sections around by grabbing them on the blue cross-arrows, dragging them and dropping them.

The Content Tab

So now it's time to insert some content into the skeleton email you've created. In the 'Content' tab you're able to drag in text, images, buttons, dividers, and social media buttons.

Once you've inserted your content by dragging and dropping it into your email you can click on it and edit its properties. You'll notice that the Content pane on the right changes to 'CONTENT PROPERTIES' where you can do this. Below is an example of the Content Properties Pane when you want to edit text.

Adding Personalisation

We always recommend you personalise your email to improve your response rate. Adding personalisation in the Drag 'n' Drop builder is super-easy. Simply click in any text block where you want the personalisation to be and you'll see the text wysiwyg (what you see is what you get) editor appear.

Select the 'Merge tags' option and you'll see a list of available tags. Just click on the tag you want to insert and you'll see it appear in your email. Campus will then personalise your email when it sends it out.

Unsubscribe and View Online Links

Campus will not allow you to send an email to a list unless you have included an unsubscribe link in your email. Fortunately adding one is a breeze. Simply click in the text block where you want the unsubscribe link to appear and select 'Special Links' then hover over 'Required' and click 'Unsubscribe'.

This will insert the Drag 'n' Drop Unsubscribe link: [[unsubscribe_link]]

Adding a 'View Online' link is just as simple. Click on 'Special Links' again and this time hover over 'System Fields' and select 'View Online'.

This will insert the Drag 'n' Drop View Online link: [[view_online_link]].

Please note [[unsubscribe]] and [[view_online]] do not work in the Drag 'n' Drop builder.