Using The Drag 'n' Drop Responsive Email Builder

Learn how to use Campus's 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.

There are a number of templates to choose from:

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 Settings Tab

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

Here you can set your email's content area width and alignment, 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 Rows Tab

The 'Rows' 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 Rows 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, alignments 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, social media buttons etc.

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]].