EVOLIA Email Marketing Template

Responsive Multipurpose email template with Fluid Grid

Thank you for purchasing EVOLIA HTML Email templates. If you have any questions that are beyond the scope of this help file, please feel free to email via user page contact form here(you need to login first). Thanks so much!

What’s Included In Package


 

What's Not Included in Package

All flat social media icons are not included in this package do to author's copyright and distribution rights, you can download all the icon for free from User10.com at their blog page Flat Social Icons.

Modules

For easy editing, EVOLIA email template is divided into several sections which we from now we call it module, each module is wrap with square bracket like example below. 

	<!-- [MODULE_NAME] --> // opening module
	...
	html tag and module content
	...
	<!-- [/MODULE_NAME] --> // closing module

 

To edit module content, find content_name (image, title, sub_title, text) comment wrapped in square brackets, then edit the content between opening content_name comment and closing content_name comment. 

	<!-- [content_name] --> // opening content_name
	...
	contents
	...
	<!-- [/content_name] --> // closing content_name

 

Modules Overview

Changing Text Font and Color

Each text is wrapped with <td> tag, and because email programs is not the same as today browser all styling was made inline. To change font-family, font-size and color find style attribute at td that is wrapped the text.

Image

If you're not using 3rd party services to send mail like Mailchimp or Campaign Monitor then you have to host the image at your server. Your images and any other files that you are referencing need to exist on your web server. All the current images are called from the local folder called "img". You will need to ensure that you change the references to your images in the html and place your images on your server before attempting to send a campaign.An example would be: 

	<img src="img/main.jpg" alt="" class="img_fix" style="border: 0;outline: none;text-decoration: none;
	-ms-interpolation-mode: bicubic;display: block;width: 100%;height: auto;">

You would need to change the img src to your specific location of the image file on your server - like this:

	<img src="http://www.your_domain.com/img/main.jpg" alt="" class="img_fix" style="border: 0;outline: none;text-decoration: none;
	-ms-interpolation-mode: bicubic;display: block;width: 100%;height: auto;">

Background Image

Modules like HEADER and NEW_COLLECTION has a background image, to change the background image find background property, then in the background properties change the default image to yours. And then in v:fill tag find src attribute change the default image to yours. 

    <!--[HEADER]-->
    <!--[if gte mso 9]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:386px;">
            <v:fill type="tile" src="img/header.jpg" color="#DFDFDF" ></v:fill>
            <v:textbox style="v-text-anchor:middle" inset="0,0,0,0">
    <![endif]-->
    <table class="ev-header" cellpadding="0" cellspacing="0" border="0" width="100%" background="img/header.jpg" height="386" style="border: 0;
    mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-image-width: 0;outline: 0;border-image-slice: 0;border-collapse: collapse;
    background-repeat: no-repeat;background-position: center;">
    ...
    <!--/[HEADER]-->

The backgound image size for HEADER is 600px X 386px and for NEW_COLLECTION is 600px X 408px.

Currently Mailchimp, Campaign Monitor, and myMail do not support background image to change in the editor, you have to change it localy first before uploading to the server. We recommend to override the default image with yours using the same file name as the default, so you don't have to edit the html code of the background.


Retina Display Ready Image

In order your image to be display correctly in high ppi (326ppi and above) display or usualy they call it retina display you need to create the image twice the size from the default size, if not the image would be display blurry like example below.

For example the logo image above default image size is 160px width and 25px height. You need to create it two times its size to 320px width and 50px height (remember keep it constrain proportion), but in image tag set the width to its default size do not change it and do not add height attribute, because the browser will automaticaly calculate image height. 

	<!-- logo -->
	<img src="http://www.your_domain.com/img/logo.png" width="160" // keep the width DO NOT change it
	alt="" style="border: 0;border-image-width: 0;
	outline: 0;text-decoration: none;-ms-interpolation-mode: bicubic;">
	<!-- /logo -->

Inline CSS

For easy content editing in inline css, the modules is seperated into several files. The main files is 00-main.html. Copy the all html code in each file after you edit the content then paste the code to 00-main.html file between the opening comment <!-- module_wrapper --> and closing comment <!-- /module_wrapper --> like example below. 

<!-- module_wrapper -->
paste the module code here
<!-- /module_wrapper -->

For example if you want to add MENU module, open 01-preheader.html file, change the content after that copy all the code then paste it to 00-main.html in area between <!-- module_wrapper --> and <!-- /module_wrapper -->.

Mailchimp

EVOLIA Email Marketing Template is support Mailchimp template language. You can easly edit text, link and change image in Mailchimp editor.


Importing to Mailchimp

  1. Open 02-Email_Templates>Mailchimp folder from the package
  2. Select index.html file and img folder and then ZIP both html file and folder
  3. Login to your mailchimp account, click on Campigns and then click on My Template on top right side
  4. Click on Create Template on top right side
  5. Click on Code a Template on right side
  6. Click on Import & Export and then select Import zip file
  7. Browse your ZIP file then click Upload
  8. Last click on Save and then give your template a name
For more information uploading a template to mailchimp see Import an HTML Template from mailchimp support.

Editing

First you have to create a campaign, follow this step if you have not done so.

On the design step, select My Templates then select the theme you've uploaded.

To edit text hover your mouse to text area you want to edit, usually it is wrapped with dashed border box then click the box or Edit button that's appear.

To editing an image hover, your mouse to an image you want to edit, then click Edit button that's appear in the screen.

When editing a button label, before adding link to the label apply the style Button label first from drop down style menu in edit mode.


Modules

The first 2 modules that will appear in design mode is Header, and Footer. To add other module at the bottom section of Icon and Picture clik the plus button, another module of Icon and Picture will appear.

In dropdown menu at thebottom section of Icon and Picture that is duplicated select other module that you want to add to the email design.

Campaign Monitor

EVOLIA Email Marketing Template is support Campaign Monitor template language. You can easly edit text, link and change image in Campaign Monitor editor.


 

Importing to Campaign Monitor

  1. Open 02-Email_Templates>CampaignMonitor folder from the package and choose your color in the folder color.
  2. ZIP the img folder.
  3. Login your Campaign Monitor account, then click on Templates on right side of the page.
  4. Click Add a new template button, on Or import your own selection click import it now button.
  5. In HTML page click Choose File button then select the index.html file to upload fron your computer.
  6. In ZIP file click Choose File button then select the img folder that you've zipped.
  7. Last click the Add template button to upload the html template and the zip file.
For more information importing a template to Campaign Monitor see Import an HTML Template from Campaign Monitor support.

Editing

Click Create a new campaign button, enter the required field in the first step. In the second step select Use one of my templates then select the template that you've upload.

To edit text and image click Edit button.


Modules

To add new module click Add New dropdown menu on right side then select module you want to add

MyMail

What is MyMail anyway, it's a wordpress plugin developed by revaxarts an elite author of Envato's. For more information about MyMail you can read it here or purchase it here.


Uploading Template

  1. In your wordpress admin menu, if you've installed MyMail goto Newsletter > Template then select the Upload tab.
  2. Click the Choose File button, a pupop window will appear. Goto folder where your unpack EVOLIA package then goto folder 02-Email_Templates>myMail. ZIP the evolia folder if no zip file is present in the folder. Then select the zip file of that folder.
  3. Clik the Upload button.
  4. If you succesfully upload the template it will appear in the Templates tab.
  5. Click Use as default if you want EVOLIA template to be your default template.


Editing

In Newsletter sub-menu click New Campaign. In Create a new Campaign page if you did not set bidadari enhanced to be the default template, you can change it in Base menu under Template section. To add module simply click the +Add Module button and choose the module you want.

To change the template colors you can change it in the Option section.

Credits

Lastly dont forget to rate this template if you find it very usefull for you. Thank You!.

GAINT DESIGN