Drag & Drop Builder: Manage content elements

This article will tell you how you can manage the content elements in the Drag & Drop Builder - one of the three tools Flexmail offers you to create messages. If you want to learn how you can create an entire message in the Drag & Drop Builder, you better start off here

The Drag & Drop Builder is a drag and drop message editor. You have a canvas (the body of the message), which contains structures. A structure contains the elements - buttons, images, text, ... - and controls their layout - order, size, margins, ... 

Read on to learn more about what elements there are and how you can use them to arrange your content.


Content management

Move

To add an element or structure onto the canvas, you can drag it from the menu to your right and drop it onto the canvas. In a similar way, you can grab an element already added to the canvas and move it to another place on the canvas.

Element options

Any time you click on the element, its Properties will appear to your right. However, if you hover over the element on the canvas, you will see a gear icon that will show you several options. The options are typically to Duplicate, Remove, Edit, or 'Visible for'. 'Visible for' will allow you to set up Dynamic Content for that element. Click on the link to learn more about Dynamic Content.

Support tip
If you want to access the options for the element, you need to click on the gear icon within the message borders. If you click on the gear icon outside the message borders, you will be accessing the options of the structure and not the element. 


Content elements list and specifics

Text
  1. Drag and drop a structure containing a predefined text field from the Structure tab or the Text element from the Element tab onto the canvas. 
  2. Double click onto the newly added element on your canvas to open the Text Editor. Type in your text. 
  3. In the Text Editor menu, you can edit the style of your text, add links or personalised content. You can add a link to an external source, a file, a landing pageform or survey.
  4. When you just click onto the added element you open the Text properties
  5. Next, you can adjust the color, fontline-height and margins.
Image
  1. Drag and drop a structure containing a predefined image element from the Structure tab or the Image element from the Element tab onto the canvas. 
  2. Click onto the newly added element on your canvas to open the Image properties
  3. Click on Change image to browse and insert an image in your message. 
  4. From the Image properties, you can add alt text and adjust the alignment and margins
  5. Next, you can also link to an external source, to an email address, a form, surveylanding page or a file for download.
  6. Click on the gear icon in the upper right corner of an image to access the Image Editor where you can adjust and refine the image with different filters.

Support tip
Click here for a detailed instruction on how to add and edit an image.
Button
  1. Drag and drop a structure containing a predefined button element from the Structure tab or the Button element from the Element tab onto the canvas. 
  2. Click onto the newly added element on your canvas to open the Button properties.
  3. You can type in the Button Text. You can edit the shape of your button by setting the width, height, background color, alignment, radius and borders
  4. Scroll down to the Action and select a Link type - you can link to an external source, to an email address, a form, survey, landing page or a file for download. 
  5. Next, you can adjust the text style, margins and the padding of your button.

Support tip
Click here for a detailed instruction on how to add a button (call to action).
White space
  1. Drag and drop a structure containing a predefined white space element from the Structure tab or the Spacer element from the Element tab onto the canvas. 
  2. Click onto the newly added element on your canvas to open the Spacer properties.
  3. Adjust the height and background color to your liking. 
Line
  1. Drag and drop a structure containing a predefined line element from the Structure tab, or the Line element from the Element tab onto the canvas. 
  2. Click onto the newly added element on your canvas to open the Line properties.
  3. You can adjust the line weightcolor, widthalignment and the margins.
Social media
  1. Drag and drop the Social element from the Element tab onto the canvas. 
  2. Click onto the newly added element on your canvas to open the Social properties.
  3. First, adjust the theme/style of your social media icons by clicking on Select icon.
  4. Click on the Edit button (the pencil) to add the links of your social media accounts to the icons. 
  5. Next, you can add other social media accounts, different from the default, via the +Add button.
  6. You can also edit the sizealignmentspacing and the margins.
Support tip
Click here for a detailed instruction on how to add social media buttons to your message.
Barcode
  1. Drag and drop the Barcode element from the Element tab onto the canvas. 
  2. Click onto the newly added element on your canvas to open the Barcode properties.
  3. You can choose between the following codes CODE39, CODE128, EAN13 and QR. You can add personalised or non-personalised barcode, e.g. a discount coupon that is valid for all your contacts.
    • Non-personalised barcode - In Value add the (12) digit version of the code, then click away. The  Builder will generate your image. Alternatively, for a QR code, you can add a URL or piece of text. The Builder will generate the image corresponding to the information you code in.
    • Personalised barcode - Before you can use the barcode element as personalised barcode is necessary to first add a custom field (and placeholder #barcode#) to link with the barcode in your message. You can assign a different value for the barcode to your contacts. Then, add the placeholder as the value. That way, when they receive your message each contact will be given a different code. 
  4. Next, you can adjust the size, font size, alignment and the margins of your barcode.
Calendar
  1. Drag and drop the Calendar item element from the Element tab onto the canvas. 
  2. Click onto the newly added element on your canvas to open the Calendar properties.
  3. Add one or more events to your message - add the name, date and time
  4. Next, you can adjust the color, the line height, the alignment and whitespace.
  5. You can link your calendar item to external resources, to an email address, to an invitation form, survey, landing page or a file.
  6. Most important, you can create a downloadable .ics calendar event - an attachment that is sent to your message which can be added as an event to your contact's calendar easily. Insert a title, location, description and add the start and end time (date and time).

There is more that you can do in Flexmail
Looking for some background information?
Did this answer your question? Thanks for your feedback There was a problem submitting your feedback. Please try again later.

Didn't find what you were looking for? Contact Us Contact Us