JungleMail | Introduction to drag and drop builder
JungleMail Drag & Drop Builder lets you create original, colorful email messages simply by dragging and dropping text boxes and images. HTML code skills are no longer required to create stunning campaigns. What is more, all emails created with the builder are responsive and will look good on any device or at any screen resolution. In this tutorial, you will learn the basics of using the builder.
Drag & Drop Builder basics
Open JungleMail from the SharePoint ribbon and follow the steps in this tutorial to get acquainted with the builder.
1. To get started, select one of the built-in drag-and-drop templates or create a new one by clicking Blank Template.
2. Once you have chosen a template, you will continue onto the Content window. This window contains sections and blocks that you can use to build your email. Section and block settings can be customized in the Body tab. In this step, you can also provide an email subject, merge columns from recipients list to personalize subject line for every recipient and use other features.
3. Now you can start designing your email by simply dragging and dropping the sections you want to use into the email body.
The Section acts as a container. It has between 1 to 4 column's in which you can drop blocks.
Note: Sections cannot be dropped inside other sections.
Each section, by default, inherits the settings which are configured in the Body tab. However, each Section can have its own unique settings. A series of unique options that will help you configure the selected section will appear to the right. Here you will be able to find: Section background color, content background color, layout responsive (on/off), dynamic section (on/off), the section's column background color and padding, sections border type, color and width.
4. Next you can insert blocks into the sections you placed in the email body. Here are the blocks you will find in JungleMail.
5. After you have dragged a block into one of the sections in your email body, a series of unique options that will help you configure that block will appear to the right. For example, if you just selected a text block, this is where you will be able to edit the text, change the background, fonts and colors. And if, for example, you added an image block you will be able to choose a different image or upload a new one from this configuration window.
The builder is pretty straight forward to use. If anything is unclear about the blocks, we've included a more detailed description for each one of them below.
Note: By default the block will inherit the style settings from the section it is inserted to,. However, you can easily override these settings by configuring the settings for the block.
|Block Type||Description||Block Unique Options|
|Title||A block for <H1> text||background color, link URL, font family, font color, font size, line height, text alignment, style, padding, dynamic block|
|Subtitle||A block to <H2> text||background color, link URL, font family, font color, font size, line height, text alignment, style, padding, dynamic block|
|Text||A block of multiple lines of text||rich text editor, inherit editor background, background color, font family, font color, font size, line height, text alignment, style, padding, dynamic block|
|Image||A block to insert or upload an image.||Image URL, link URL, Alt text, adjust to width, image alignment, padding, dynamic block|
|Button||A block of button and the link to a webpage or a file to download||button text, link URL, Background Color, font family, font color, font size, border radius, alignment, style, button size, padding, dynamic block|
|Divider||A visual divider, or horizontal line, between blocks||border style, thickness, line color, width, alignment, padding|
|Spacer||Extra spacing between blocks||spacing (height)|
|Social||Social icons so recipients can follow you or your company on social networks.||icon set (5 designs), five social media icon options (Facebook, Twitter, Google Plus, Youtube, LinkedIn) all of which can be fully customized to match your individual branding and design. You can remove unnecessary icons or add them more.|
|Html||A block of your custom HTML scripts to further personalize your campaign||HTML editor|
Learn more about the builder
If you want to find out more about the different things you can do with the builder, also read the Builder Actions tutorial.