TeddyBay - Premium Email Template

• Created: 10/23/2012
• latest Update: 10/23/2012
• By: talwinder
• http://themeforest.net/user/talwinder
• Email: sonuchahal@gmail.com

Introduction

What can you find in this package?

• 24 HTML layout files with embeded css.
• 24 HTML layout files with inlined css.
• 24 HTML layout files for mailchimp,with mailchimp tags.
• 24 full layered PSD files
• Sliced elements for each layout.

Structure arranged.

Editing Templates

Starting:

• Unpack the archive you will find 4 folders named color 1-4 mentioned for each folder.
• Open any folder u will find 6 sub folders named template 1-6.
• Choose your favourite color,and further choose your design by opening templates 1-6  in your web browser for editing.

Once you have chosen your color scheme and the best layout to begin your newsletter, remember not to edit the original files and to make a copy to work on it.

Editing:

To make HTML files easy to use,  we have made some comments (text that is ignored by the program) between the code in order to make it easy for editing. Look for the string <!-- in the source code.

Between <!-- name starts -- > and <!-- name ends -- > you'll find different content areas that you need to edit.See the example below for editing menu content.

Similarly Replace text for headings,paragraphs in different content areas.

Replacing images

Image replacement

You will find all images for respective template in images folder in that template.Suppose you want to  change the logo image:

• Look for image  in code and see its extension jpg or gif.
• Use sliced elements psd files for preparing your graphics.
• Save the graphic in images folder,and replace the original if it is named same.
• Remember to update the name of the image in code if your logo is named differently from the original one, which is logo.gif, or just name it like this.
• Watch the video below

Path replacement

• Upload images folder of respective template to your domain
• Now replace the path of the images from relative to absolute images/ to http://www.domain.com.com/images/ (or corresponding) in the HTML file.

It will be very frustating and time consuming to replace all paths,so simple method is use email services such as mailchimp or campaign monitor.U simply have to upload a zip file of images and html together,rest they will automatically replace relative paths with absolute,and store all your images on their server.

Using PSD Files

If you use Photoshop to edit your images, you will find full PSD and sliced elements for each layout.

Sliced elements:These include interface elements such as buttons,image placeholders for inserting images,banners, sale tags etc.They are named same as used in html files so easy to replace original.

Editing:

• If you want to change any text in the element.psd file, such as sale tags, and button price,coupon codes feel free to play around with them they are completely editable!
• Placeholder elements for inserting images are made using smart objects just double click to insert your image and save to update.

Exporting:

• After editing and deleting, you may want to export the resulting images. Go to File › Save for Web (or corresponding) or press Alt+Shift+Ctrl+S, make the adjustment and proceed.
• Use same extension .gif or .jpg as in original image that you want to replace, otherwise you have to update the image extension in code also if u use different.

• Locate the corresponding color and template folder from which u selected psd. Let's say you opened from color1/template1/psd files/sliced elements/...then save to color1/template1/images.
• Replace the original image.

Video - Using sliced elements - HD watch at full screen

Video - Using Full psd - HD watch at full screen

Using mailchimp templates

A. Preparing the templates before importing:

Open your favourite template folder .Select images folder and template u wish to import and zip up together and give zip a name without spaces.

 Note:Name the zip folder without any spaces otherwise mailchimp will give error The archive was empty or otherwise corrupt.

B. Importing the template:

Log in at MailChimp and follow the next steps:

•     Staring in your dashboard, click on Templates.
•     Choose the Code Your Own option.

•     Press from the top menu Import Zip File,and when dialog box opens select browse to import the previously zipped files and press upload.

• After uploading has completed select save from the top menu,a new dialog box will appear to enter template name.Give template a name and press save as... 

While importing the template allow the template to completely upload,till processing stops,otherwise resulting in incomplete saving of template.

Dont worry about css inliner,css will be automatically inlined while sending the campaign.

C. Editing template Styles:

Use top menu in mailchimp editor to edit styles

Rate This Item

Don't forget it!

Thanks for purchasing this newsletter template, remember to rate it if you are satisfied with it!

See screenshot below for how to rate.