Documentation


Thank you for purchasing and using our items. If you have any comments or questions that are beyond the scope of this help file, please feel free to email us. Occasionally due to our busy schedule we may postpone the response for 2-3 days but we always reply all incoming queries.

The Email builder is a free tool that help you edit and build your own layout easily.

Using our email builder you can:

The builder is not included in the package. It includes a folder with a link which gives you access to the email builder.

Layout sections

Layout elements panel includes all content blocks that you can add to your email template.
Using these building blocks you can create your email quickly and easily by simply dragging and dropping elements on the virtual canvas.

When you add sections to the template you can move, delete or duplicate them using icons on the right side of section.
They appear when you hover over a section.

Some types of content blocks and buttons can be duplicated or deleted.
If block has this feature when you hover over it there appears a outline with icons. Clicking on the appropriate icon the element will be removed or duplicated.

Some types of elements can be only removed. In this case, when you hover on them appears a remove icon. For example you can remove any button.

Style options

Style options panel allows you to create your own colorful types. You can change color for all titles, buttons, some types of background.

Each layout module has ability to change the background color. You can do it using icon on the right side of section.

Background color can be also changed for some types of inner content elements. If block has colorpick icon you can change it background.

Text editor

The Builder has inline editing tools that allows easily edit text content. You can insert links, change font sizes, styles, colors.

You can set the font style to bold, italic, underlined style, change color of text.

If you want to create or change link you need to click by corresponding icon and in the opened window you should change or add the text of link, set URL of the page where this link goes to. You can also specify where to open the linked page (target field) and set link title.

Edit buttons

For editing buttons you need to click on this button and use link icon on the opened text editor. You should edit existing content in the opened window as on screenshot above, you don't need remove text directly in button and then add new, just edit all data for button in the special window. This way ensures that you do not break the button style.

But if you remove text in button accidentally and try to create new link it will have blue color and underlined style by default. To fix this you need:
1. change it color using colorpick icon on text editor

2. remove underlined style. For this you need to set text-decoration: none; in style attribute of link <a style=""></a> using source mode.

Image editor

You can easily replace all images with a valid URL using image editor. You can also insert link for any image.
All your images must be hosted on your own server or on a public server (image hostings) and links should be set as absolute paths that point directly to that server.
For example: http://www.yourwebsite.com/assets/images/logo.jpg

By clicking on the change image icon the popup will be opened which contains information about recommended size and field for image url.

Export templates

You can save your templates then upload them and continue to edit later. For this you should click on Save button and save the template on your computer.
For upload your templates you need use Upload button, in the opened window you have to find and choose the template. After it is loaded you can continue editing.

When you finish creating your template you can export it in the HTML, Mailchimp or CampaignMonitor versions by clicking download button.

Video

Here is a short video that shows how to edit the template using our email builder:

  1. HTML code uses a table layout and inline styles for a maximum compatibility with all mail clients. HTML are lightweight, has modular layout that makes the work of duplicate or remove modules very easy, just select your prefered module and copy/delete/replace as you want. HTML code is commented.
    To edit the content of email template without online template builder you can use any text or html editor that you like.

Editing of main elements:

Changing images is really easy. Just open the folder called 'images' and replace them with yours using the same names. The Template should automatically replace images.

Retina images

Retina has four times more pixels than standard screens. If you have a 200 x 200 px image, you’d need to use a 400 x 400 px alternative ones to render it well on high-density displays.

If you edit the template via Mailchimp you have to set sizes twice smaller for all retina images. Replacing placeholders set the same sizes as specified on them. If you edit template that was exported from our email builder, set sizes which specified in the image editor as recommended size.
You can resize images in the settings tab using design mode.

When you edit template via Campaign Monitor just replace images twice bigger.

If you are going to use Campaign Monitor service you can use the template from download package or generated template from the email builder. The email template that was exported from builder doesn't contain layout tags. It will contain a set of existing blocks which you have configured in the builder. You'll be able to edit only text content, images, links and buttons.

Please, follow these steps to import any Template to Campaign Monitor:

1. Go to Campaign Monitor:  http://www.campaignmonitor.com/
2. Sign Up or Log In to your account
3. Go to Temples page in your profile settings

4. Import the Campaign Monitor version of template. When you use template from download package you have to pack images folder to ZIP and upload them with the html file.

5. Click Add template to upload the files. Your template will be scanned and imported. The template will be added to your client's Saved templates.
6. Now you can create your campaign and choose your imported template from 'My templates' menu item.

7. Now this template can be opened with the content editor as on image below:

Campaign layouts can be added by clicking Add New button, text and images edited by clicking the Edit positioned above the editable sections of your template.

Notes: Campaign Monitor doesn't have feature to change background images so they must be replaced in images folder before you upload a template.
If you use the buider you can change images using it.

Here is a Video that shows how to upload and use template which has been exported from builder:

If you are going to use MailChimp service you can use template from download package or generated template from email builder.
The email template exported from builder (MailChimp version) doesn't contain mc:variant blocks. It will contain a set of existing blocks that you have configured in a builder.

If you are not going to edit a template using MailChimp's editor you can just upload the finished HTML version of your template and make a mailing.

Please, follow these steps to import any Template to MailChimp:

1. Go to http://www.mailchimp.com and login.
2. Navigate to the Templates page.
3. Click 'Create Template' and upload the template using option that you prefer.

Now you can create the campaign and find this template on the Templates page.

Notes: if you use retina images and icons in your template don't forget to change sizes for retina images in the settings tab when you upload Mailchimp version of template as described in changing images section.

Here is a Video that shows how to upload and use the template which has been exported from builder. It shows also how to resize images:

Video shows how to upload and use the template from the download package:

If you still don't know how to upload a template in MailChimp, below are some tips and instructions of them support.
Or just send email to us.

Here is a clear explanation of how to import a template: http://kb.mailchimp.com/article/how-do-i-import-a-template/

Template Language: Getting Started with MailChimp’s Template Language: http://kb.mailchimp.com/article/how-do-i-upload-an-image/
Template Language: Custom Template Showcase: http://eepurl.com/cdN2v

 
How to change the background color of the template?

You can't change the background color via builder. It can be changed directly in the code when you finish working with a template and export it. Then you can change background as described above in HTML structure section

How to change images?

All of your images have to be in free access (for example hosted on your own server, on image hostings) and links should be set as absolute paths that point directly to that server.

How to remove the underline of links
If you edit links, buttons, navigation you need to edit the current content using this button, no need to remove all content and create a new, but if you've deleted it you can read here how to fix this.

 


WEB4PRO Team