Create Your Own Drag & Drop Library

The Drag & Drop Email Builder is a powerful and easy to use email builder for eFlyerMaker. No coding skills necessary! Just give life to your design by using the Drag & Drop interface and build your email layout.

In order to simplify the text, we will use the expression "The Builder" to refer to the "Drag & Drop Email Builder" application.

In addition to offering a responsive web design, 'The Builder' offers a set of most used elements in marketing emails, such as blocks of texts, images, buttons, navigation bars, and separators. But what if you're looking for other elements that are not in this set? Furthermore, what if you want to develop an existing element of 'The Builder' ? Well, your devoted eFlyerMaker team did thought of that. This section is going to be a great help for you if you're comfortable with HTML coding.

Before jumping into the customizable files of the builder, you should know that the new version of the Drag and drop builder features a new element called Canvas which is a tool that simplifies the creation of your newsletters. To learn more about the use of the canvas,click here.

The Builder handles two types of files: .tpl and .tpo.

• A .tpl document is generated by The Builder when a user saves his work in it.

• A .tpo document is a custom draggable element. The user has coded it outside of eFlyerMaker and then uploaded it from the Document Library section. He can then use it as a draggable element located under the Custom tab in the "Drag & Drop" palette of The Builder.

Create a tpo file

The easiest way to create a .tpo, which is a custom block that you'll be able to reuse every time you open the drag and drop builder, is to save a custom block in the builder interface without having to use HTML coding is . All you have to do is to personalize the block and click on the Save button that is on the left side of the block. It will ask you to name this custom block and if you want to overwrite any other blocks saved with the same name.

You can also delete blocks in your custom section of the builder by simply clicking on the delete button on the top left of each block.

• You can also create a .tpo element when you build your template from The Builder and then save it as a .tpl element. Download it from the Document Library section of eFlyerMaker, change the extension to .tpo and modify the HTML content. Once you are done, you can upload the .tpo file to the Document Library section of eFlyerMaker.

The next time you visit "The Builder" you will find your custom template in the custom section and you will be able to use it as an element of "The Builder".

How to save as a tpl file?

• From The Builder, drag and drop your elements into the workspace then in the navigation bar click File -> Save. Type a name then close "The Builder".

• From the eFlyerMaker application, go to Content -> Document Library. Search the .tpl file you just saved and download it to your local hard drive.

• Change the file extension to .tpo instead of .tpl then use your favorite text editor to edit file content.

• The first thing to do with code modification is to remove the divs containers that you find in this file by keeping only its content. div containers look like this:

   1 <div id="template2" class="int-row ui-draggable active_tools"></div>

You will notice that inside each div element there is a table with a class table_container. This class determines the element container and is important to the good functionality of "The Builder".

Make sure to not use the class table_container inside an element that already has this class. In other words, A parent element with a table_container class should not have a child element with this same class. Otherwise, the user will find his layout behaving strangely when using the code in "The Builder".

Drag & Drop elements

You can use "The Builder" to create five types of elements. Each element is presented as a table with a class table_container which contains the element's code. The following table presents these elements:

We use some classes to help The Builder to recognize the type of element to handle. For example: if you want to handle an image element you should add a class named "editable-img".

The table below show you a list of master classes:

<!>Only one of these classes should be used within an element.

Examples:

- Text

   1 <td class="editable">Lorem ipsum</td>

- Image

   1 <td class="editable-img">
   2   <a href="#">
   3     <img src="link_to_my_image.jpg">
   4   </a>
   5 </td>

- Spacer

   1 <td class="spacer" width="700" height="10"></td>

These classes can be combined with other classes. For example, to apply a color to the background of an image element you should use the "editable-img" class described previously with a class named "ChangeImgBgColor" (see all classes). If "The Builder" find these two classes it will allow user to modify the image background color.

To apply theme color to an element you should add a class called "templateBgColor" (see all classes). For example, if the user want to change the background color of the email body, "The Builder" will look for all elements that have this class to change their background color.

We added some style classes. These classes can help you to control small devices style. You'll find here a list of these classes.

We also use some custom attributes that will be used by "The Builder". You'll find a list of attributes here.

Create your custom elements

In the following sections you will learn how to create your own elements to be used inside "The Builder". Click one of the following elements to get started :

• Create Text element

• Create Image element

• Create Button element

• Create Navigation element

• Create Separator element