Valentine Email template Documentation

Thank you for using the "Valentine" email template from Libai Zhuo Design Studio. This is a FREE Email template which is suitable for Valentine special offers and newsletters. Enjoy!

Created: 11/01/2011
By: Libai Zhuo Design Studio
Email: libai@libaizhuo.com


Table of Contents

  1. HTML Structure
  2. Quick Start Guide
  3. PSD Files
  4. Sources and Credits

A) HTML Structure - top

The general template structure is the same throughout the template. Here is the general structure. Look out for comments like these for adding in/taking out certain sections of the template:

<!-- LOGO IMAGE starts here -->
some code
<!-- LOGO IMAGE ends here -->
<!-- HEADER IMAGE starts here -->
some code
<!-- HEADER IMAGE ends here -->

<!-- TWO COLUMN PRODUCTS starts here --> 
some code
<!-- TWO COLUMN PRODUCTS ends here --> 
etc. etc.
        

There are also some divider lines to divide all the sections, which look like this:

<!-- DIVIDER LINE starts here --> 
some code etc.
<!-- DIVIDER LINE ends here -->

So if you are adding in more sections you might want to include some more divider lines as well.


B) Quick Start Guide - top

Please follow the steps below to customize this email template to suit your need.

  1. Choose a colour theme first, e.g. red, and then open the html file - red.html
  2. Change the logo image. Find the code below:
    <!-- LOGO IMAGE starts here -->
    some code
    <!-- LOGO IMAGE ends here -->
    and tweak it according to your need. You will need to place your logo against a background colour, which is #8b0101 for the red theme, #ed8686 for the pink theme and #faebb6 for the gold theme.
  3. Change the header image (voucher graphic).
    1. Open the red.psd file and change the text to suit your need, and then choose "File" > " Save for Web and Devices"
    2. Select the slice (as shown below)and click save.
      Select the slice
    3. Please follow the settings below and click save.
      Save settings
    4. Open red.html again and find
      <!-- HEADER IMAGE starts here -->
      some code
      <!-- HEADER IMAGE ends here -->
      and change it to insert the image you just created.
  4. Make other content changes as you wish and save the file.
  5. Please refer to this article Sending HTML Email on how to send an HTML Email from different email clients.

C) PSD Files - top

I've included the three psd files for the three colour themes of this email template - red, pink and yellow.


D) Sources and Credits - top

I've used the following icon set and font.


I'd be glad to help you if you have any questions relating to this email template. No guarantees, but I'll do my best to assist.

Go To Table of Contents