Creating stylish email templates with Simple Inked

Follow

If you're ready to pop some style into your templates, you've come to the right place.

The article has two main points. We'll help you create a template to use, and we'll teach you some basic styling and image storage techniques so you may create a template with some style.

Before we begin

Before we begin, remember that we have third party email providers Mail Chimp and Campaign Monitor waiting for you to use!

Click here to learn more about Mail Chimp

Click here to learn more about Campaign Monitor 

We'd encourage you to make use of these wonderful platforms.

The benefit of using one of our third party email marketing add-ons is that they are specifically designed to handle large volumes of emails. The Simple Inked Email Marketing is great if you want to send up to 1,000 emails at one time. If you need to send more than 1,000 emails in one go, then connect with one of our email marketing add-ons and away you go. Additionally, Mail Chimp and Campaign Monitor have lots of cool extra features.

If you'd like to go ahead

Don't worry if it doesn't make any sense to you initially. The more you have a play around with the template, the easier this will become.

Preparing images for use in email templates

When you create a template, it's likely that you'll want to include some pictures. Part of this process most likely involves wondering where on earth you can store these pictures.

Well, the great news is that you can store them in Simple Inked. Every client has a place to store files or images, and we're going to utilise this feature to help you get some rocking pics:

Once you've found pictures you want to use:

1) In Simple Inked visit the client search and click the 'Add New Client' link

2) In the right-side panel create a new client (which we've called 'Email Images')

Screen_Shot_2019-06-12_at_3.30.39_pm.png

Let's load up our client with some images shall we:

In Email Images' client profile click 'Actions' > 'Images/Files'

Screen_Shot_2019-07-08_at_3.25.40_pm.png

So now we can see the images and files that Email Images has recorded:

Screen_Shot_2019-07-08_at_3.26.17_pm.png

This is a great opportunity to upload your photos. To do this click on the cloud icon  in the 'IMAGES' section

Upload as many images as you would like in the following window:

Screen_Shot_2019-06-12_at_4.20.31_pm.png

Click the 'X' when you've finished.

We need to learn how to copy the links to the images so that we can copy and use them later:

On a MAC:

1) Hold down the control button then click inside one of the images then click 'Copy Link Address'

\Screen_Shot_2019-07-08_at_3.31.56_pm.png

On a PC:

1) Right click inside the picture and click 'Copy link address' or 'Copy link location'

ImagesFiles.png

Preparing an email template

The next section will likely be tricky to get working, but if you follow our steps below, you're well on your way to preparing an email template.

Those fancy email templates you see across your everyday travels are not beyond your reach! We're always learning, and this is another opportunity:

What makes up our templates?

Templates are made up of HTML and CSS components.

HTML is the content. For example, the text and images you may want to include in a template.

CSS is for styling. For example, deciding what colour you may want the background to be.

Using an example template

Pop over to 'Admin' > 'Lists' > 'SMS & Email Templates'

Screen_Shot_2019-07-08_at_3.38.40_pm.png

Click the 'New Email Template' link to get started:

Screen_Shot_2019-07-08_at_3.39.07_pm.png

So we now find ourselves in the following view - design view:

 Screen_Shot_2019-07-08_at_3.39.33_pm.png

Now let's see what our HTML looks like - click 'HTML'...

Screen_Shot_2019-07-08_at_3.39.59_pm.png

Copy and paste the following template into the 'Message' field:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="background-color: black; opacity: 0.8; text-align: center;">
<article id="bImage">
<img alt="" src="https://res.cloudinary.com/simpleworld/image/private/s--xW4honmC--/v1562563887/inked/20440/2572064/luggage-1081872_1920_zzizso.jpg" width="100%" height="5%" />
</article>
<article id="appDets" style="text-align: center; color: white; font-family: calibri; opacity: 0.9;">
<p style="font-family: calibri; font-size: 40px;">Sunnies, phone, keys, jacket. Is there something you're forgetting?</p>
<h1>Appointment Reminder</h1>
<h2>Hey #ClientName#! Your Tattoo is coming up</h2>
<p>Get ready 'cause we've got you booked in to get some ink done!</p>
<p>Here are the details:</p>
Location: #CompanyName#<br />
Date/Time: #AppointmentDate# at #AppointmentTime#<br />
<br />
Remember to drink plenty of water before you come in. Our team will also help you on the day.</article>
<article id="goodbye" style="color: white; font-size: 30px; font-family: &quot;comic sans&quot;;">
<p id="cuthen" style="font-family: calibri; font-size: 40px; font-weight: lighter;">See you soon</p>
<p id="webAddress" style="font-family: calibri; font-size: 40px; font-weight: lighter;">www.simpleinked.com</p>
<p id="physicalAddress" style="font-family: calibri; font-size: 25px; font-weight: lighter;" class="footer">The Studio, 10 studio place, outlet. Ph: #CompanyTelephone#</p>
</article>
<article style="background-color: white;">
<img alt="" src="https://res.cloudinary.com/simpleworld/image/private/s--8Dx_YrQ2--/v1562563830/inked/20440/2572064/beach-84533_1920_hkj0rc.jpg" width="100%&quot; height=" />
</article>
</body>
</html>

 Your page should look something like the screen below:

Screen_Shot_2019-07-08_at_3.41.16_pm.png

Next in the 'Send a Preview to yourself' box, enter in your email address, then click 'Send' and check out the preview:

IMG_2041.jpg

The email isn't too advanced, but we can see there is some styling, and an image which keeps the reminder interesting.

Let's change the background colour

Feel free to click here if you would like to be provided with a list of colours and their names which you can use.

Go back to your template in Simple Inked and click 'HTML':

Screen_Shot_2019-07-08_at_4.29.32_pm.png

Scroll all the way to the top:

Screen_Shot_2019-07-08_at_4.30.26_pm.png

Look for the following line:

<body style="background-color: black; opacity: 0.8; text-align: center;">

Screen_Shot_2019-07-08_at_4.31.04_pm.png

Change the word 'black' to any colour that you would like:

Screen_Shot_2019-07-08_at_4.31.36_pm.pngIMG_2044.jpg

And change the colour of the text:

Changing the colour of the text

Click on the 'Design' link

Screen_Shot_2019-06-24_at_4.10.27_pm.png

Highlight the text that you would like to change the colour of and change the colour by selecting the 'A' drop down and choosing a colour:

Screen_Shot_2019-07-08_at_4.34.55_pm.png

IMG_2485.jpgIMG_2486.jpg

Why didn't all of the text change different colours?

Similar to changing different sections of text to different sizes, different sections of text can have different colours.

If you want to change the rest of the colours, look through the template and change the colour as you need.

Changing the font size

If you want to change font or text size you can pop back into 'Design' view, select the text, and change the font or text size:Screen_Shot_2019-07-08_at_3.47.52_pm.png

Changing the font

Change the font by selecting the font from the following drop box:

Screen_Shot_2019-07-08_at_3.48.41_pm.png

Changing the font-size

Change the font-size by selecting the font size from the following drop down:

Screen_Shot_2019-11-12_at_11.34.45_am.png

You're more than welcome to try out using the other links in 'Design' view too.

Sick of using our test pictures?

To change to your own pictures:

Switch to 'HTML' view and look for image tags:

Screen_Shot_2019-07-08_at_4.35.52_pm.png

 The actual link to the picture is stored in the src="" section

Screen_Shot_2019-07-08_at_4.36.31_pm.png

Insert Images

Remember how we showed you how to upload then copy images? You'll now need to copy and paste the image into your template.

Copy and paste your image link to replace the above link. You must paste the link inside the " ".

For example, src="https://mynewimagelink.jpg".

You can also switch to 'Design' view and try adding the pictures by clicking on the 'Insert Image' link.

Your picture should now be displaying! You can add in as many pictures as you'd like, or make any changes you'd like.

We've covered the basics, and you should be able to use this template for reminders, promotional emails, or other content you're interested in sending emails with.

They key take away is to have a play around, try different colours, fonts and sizes, images, and see how it all goes. It will probably take some time and patience.

PS. Remember to click 'Save' to keep your changes.

Adjust the sizing of Images

You can crop images outside of Simple Inked using programs such as paint, or by cropping the images in the 'Photos' app on the MAC. These images can then be uploaded to Simple Inked.

If your image is too stretched you can adjust the image in Simple Inked by:

1. Clicking on 'Design' view

2. Clicking on the image

Screen_Shot_2019-07-08_at_4.54.56_pm.png

3. Click on the image link

Screen_Shot_2019-07-08_at_4.55.30_pm.png

4. Change the width and height to sizes which suit you best

Screen_Shot_2019-06-25_at_5.15.49_pm.png

5. Click 'OK' to save the changes

Is this not what you're after?

If this isn't what you're after, or there's more you'd like to get done with emails, the next step is to try one of our third party email providers, Mail Chimp and Campaign Monitor.

Click here to learn more about Mail Chimp

Click here to learn more about Campaign Monitor 

Have more questions? Submit a request
Powered by Zendesk