How to use ThemeForest email templates
Below is an example of how to use the excellent ThemeForest Airmail email template with this system.
- Look in the "templates/" folder, you will see two folders by default "blue" and "dark". These are the two default email templates that come with this system. We're going to create a new template for the Airmail theme so this system can use it.
- First make a new folder to contain the template, try to avoid spaces so name it "airmail" instead of "air mail".
- Copy the "img" folder from the Airmail theme into our new airmail folder. This will contain all the images used in this theme.
- Choose which Airmail variation you would like (for example: white/full-width.html) and copy that file to "airmail/template.html"
- You should now have this:
"templates/airmail/img/" contains all the images in this theme
"templates/airmail/template.html" contains the full template html file from the Airmail theme. - Optionally, make a 100x100 preview jpeg and save it to "templates/airmail/preview.jpg" this preview will show up in the newsletter system. You can simply copy the blue or dark preview file if you don't want to create a new one.
- We now need to choose which part of the template we will edit each time we send out a newsletter.
- Open "templates/airmail/template.html" in your favorite html editor (eg: notepad) and cut the main content area out - then paste it into a new file called "templates/airmail/inside.html" - Important: you need to add {EMAIL_BODY} to template.html in the place that you cut the main content area from. This tells us where the main content will go each time a newsletter is sent.
(in the Airmail theme - the main content table starts just after <!--BEGIN THE CONTENT--> and should end at the second last </table> in the file - your own theme may be different) - You should now have something like this:
"templates/airmail/img/"
"templates/airmail/template.html"
"templates/airmail/preview.jpg"
"templates/airmail/inside.html" - Now all the hard stuff is done :) there are some customisations that you can do:
- To create an unsubscribe link, use this code: <a href="{UNSUBSCRIBE_URL}">Unsubscribe</a>
- To create a view online link, use this code: <a href="{VIEW_ONLINE}">View newsletter online</a>
- To insert the email subject automatically somewhere in the template, use this code: {EMAIL_SUBJECT}
- To insert the date the email was sent, use this code: {SENT_DATE}
- To insert the email address of the receiver, use this code: {TO_EMAIL}
- To insert the email address of the sending, use this code: {FROM_EMAIL}
- You can use the above to make a nice footer like so:
This email was sent from <a href="mailto:{FROM_EMAIL}">{FROM_EMAIL}</a>
to <a href="mailto:{TO_EMAIL}">{TO_EMAIL}</a> on {SENT_DATE} |
<a href="{UNSUBSCRIBE_URL}">Unsubscribe</a>
- You can always copy the default "dark" or "blue" templates and adjust them to suit your needs.