a module based template with Template Builder
Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please use my knowledge base as starting point. Thanks so much!
The Template includes several ready-made HTML files. But to use its whole potential you may use the Template Builder
in your zip file you can found next to the 'documentation.zip', the 'jpgs.zip' and the 'png_psd.zip' these folders:
If you don't have an own webspace or you have troubles get the Template Builder running you can use "My Template Builder". Go to this section to get started
This theme is a fixed layout with one columns. The HTML code has been tested for all major mail applications. I’ve tested this extensively and it meets every major standard for email templates out there. The HTML templates have been tested with Litmus on Gmail, Yahoo Mail, Hotmail, GMX, AOL Mail, Apple Mail, Microsoft Outlook 2003, 2007, 2010 and 2013, iOS 4,5 and 6, Android 4 and Thunderbird as well. The general template structure is the same throughout the template.
Here is the general structure:
<!-- 1/2 Image on the Left start --> <table width="600" cellpadding="0" cellspacing="0" class="wrap"> <tr> <td valign="top" align="center"> <table width="100%" cellpadding="0" cellspacing="0" class="o-fix"> <tr> <td valign="top"> <!-- CONTENT start --> <table width="290" cellspacing="0" cellpadding="0" align="left" class="m-b"> <tr> <td valign="top" align="left"> <img src="IMAGPATH" alt="" title="" width="290" height="200" border="0" style="max-width:290px;" /> </td> </tr> </table> <table width="290" cellspacing="0" cellpadding="0" align="right"> <tr> <td valign="top" align="left"> <div class="h"><div>Headline goes here</div></div> <div> Li Europan lingu es es membres del sam familie. Lor separat existen.. </div> <div class="btn"> <a href="#"><img src="img/more.png" width="94" height="30" alt="read more" title="read more" style="background-color:#3E4344" border="0" /></a> </div> </td> </tr> </table> </td> <!-- CONTENT end --> </tr> </table> </td> </tr> </table> <!-- 1/2 Image on the Left end -->
Which represents this:
As you can see each block has its content.
<!-- CONTENT start --> <!-- CONTENT end -->
These comments are wraps for the content
With this template you get the Template Builder. Make sure you upload all the files to your server first or check out "My Template Builder".
Check out the Tour for the Template Builder
It's easy to work with the Template Builder:
First you have to build your layout. You can click on of the prebuilds or drag 'n drop modules into the dropzone on the right.
You can reorder the layout and save it.
Specify more options in step 2. Choose one version you would like to use.
If you would like to use a service like Mailchimp or Campaignmonitor you have to enter an API key.
Define your preheader to display a custom text in the preview area of the email clients
If you need just the HTML you can deside to get an inline CSS version or the embedded version
Choose absolute URLs if you need absolute pathes for the images
If you have uploaded all the files correctly your HTML is shown in the textfield. You can edit, preview or download the HTML.
If you use a service you can directly upload it to it's dashboard
You don't even need a webspace!
1. Go to the "My Template Builder" website and enter your purchase code and hit the submit button
After you've submitted your valid code you can see all templates where you have entered a purchase code
You can now start using the Template Builder by pressing the "Template Builder" button of your desired template
Try it know:
Each version comes with this file structure:
All images are in the img folder. For each layout you get 4 different html files:
Mailchimp and Campaign Monitor will inline your CSS before you send a campaign, so no need to have it here
I've included several psds and pngs with this theme (png_psd.zip). All pngs are fully editable fireworks png
For each version you get:
The screendesign.psd and screendesign.png are layered designs of the template.
You can change the graphics that they match your needs. But don't change the size of the slices or the layout will maybe get messed up
To change a color use the boxes on the right an apply the style in the "properties"
Export the slices into a folder and also check the html for hex color codes (#123456)
Preheaders are small phrases (up to 80 letters) which should help increasing your clickthrough rate. Many email clients display the first letters of an email in their preview area.
Preheaders are invisible in the normal email view and show up only in the preview pane of some clients
This Template comes with alot predefined colors. If you need your own color follow these steps:
We have to setup the file structure:
Now we have to add the new file to the Template Builder:
colors = ['61BC0F','...','123456'];
bgcolors = ['00404F','...','123456'];
Make sure you upload all your files to your server
It's easy to make a custom Productbox *
* requires at least Photoshop CS2
productbox.psdwithin the 'png_psd' folder
imgfolder of your desired version
Don't forget to upload your files to your server
I've used the following images, icons or other files as listed.
Files are maybe not included because of the license
Once again, thank you so much for purchasing this item. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Xaver Birsak – revaxarts.com