DIY Drag and Drop Editor

Now you have more options to create your web message campaigns, choose as per your use from below mentioned options:

  1. Pseudo Editor
  2. Custom HTML
  3. DIY Drag and Drop Editor

Explore the DIY editor

Build visually stunning, mobile-responsive web message templates with our intuitive DIY editor.

Head over to the content section of building your web message campaign, a new thumbnail for DIY editor will be visible as shown below.

13191319

📘

Note

If the DIY editor is not visible, please contact your Account Manager to enable the same.

Click on DIY thumbnail to open a pop-up and set criteria for your web message's modification of position and dimension

Position

PositionLayout
bar topSticky
bar bottomSticky
classic-centerBanner & Modal
classic-top-rightBanner
classic-top-leftBanner
classic-bottom-rightBanner
classic-bottom-leftBanner
drawer-leftBanner
drawer-rightBanner

Dimension

DimensionSettings
WidthAdjustable up to 1200 pixels
HeightAdjustable according to the added components
13151315

📘

In case you want to change the width of the web message, you will have to discard the template and start with fresh settings

Editing Window

Once the editor opens, you will see below features that you can use to build your web message campaign

FeatureDescriptions
Template NameMake sure you are saving a template with a new name in case you want to make a new template and not overwrite.
SaveIn case you want the template you made to be available for other campaigns, save the template here. In case while reusing you make some changes in this template and do not change the template name, it will be rewritten
ScheduleClick here to go to scheduling web message, if not saved, the template will not get added in your gallery
Undo, Redo & HistoryUndo, redo & History buttons are provided at the bottom left side at the DIY panel
Live PreviewHave a look at how your web message appears in a real-time setting.
RowsYou can change the alignments of components and add two or more components together in a row with the help of Row option.
13181318

Components

You will get an option to choose the content from the option provided in the sidebar, you can drag and drop the components.

13201320

Title

Enter one line title using this component.

13181318 13181318
ComponentsFeatures
TitleGives you three customizable header settings for the title
Font FamilyChoose the font among various options provided
AlignCustomize the alignment of the title
Text DirectionType in different directions, increased comfort for typing in multiple languages

Text

The text block allows you to enter the message body to your web message.

13181318 13171317
ComponentsFeatures
Text ColorChoose the the color of the texts from different hues.
Line HeightDecide on four presetting of spacing between two lines
Letter SpacingCustomize the spacing between two letters of a text

Image

The image option allows you to insert the image in your content.

13191319 13151315 13191319
ComponentsFeatures
Browse ButtonWhen a user clicks on the browse button of the image content box, he gets the option of upload an image, import an image and image free search.
Upload ImageAllows you to upload an image from the system
Import ImageAllows you to import the image from various cloud storages and social media
Search Free ImageYou can search for high quality images from a collection of over 500,000 images
Dynamic ImageThe “Dynamic Image” option which when enabled, makes the URL location of a sample image shown in the editor. Dynamic URL is used in the HTML code. The size of the dynamic image will be set on the sample one, so use an image of the same size.

Buttons

Users can add call-to-action buttons that can be adjusted according to the event.

13201320 13181318
ComponentsFeatures
UrlEnter the Url depending on where you want the button to redirect the user
Auto WidthIt determines the button's optimal fit width automatically.
Background ColorCustomize the background of the button
AlignAlign the button to left, right or center.

Forms

Add multiple fields to capture data, flexibilities provided for form building allows you to explore multiple form building capabilities.

13191319 13181318
ComponentFeature
Select FormChoose from single field and multiple field lead generation, sign-up/subscribe and discount offer.
You can also modify and make your own form.
WidthAdjust the width of the form
AlignCustomize the alignment of the form contents
Manage FieldsAdd or remove the fields in the form.
Customization of Text and BackgroundThe option of customization of text and the text background is also provided.

HTML

To render your message, write your own code.

411411
ContentFeature
HTML boxIt allows you to write your own HTML message. It is always advisable to use correct and responsive HTML

Common functionalities

Here are some explanation of few common functionalities which can be applied throughout the web message built.

414414
FeatureDescription
Row BackgroundSet background color of the entire row.
Content backgroundSet background color of the content boxes.
Do not stack on mobileChoose to override the default behavior and prevent columns from stacking vertically on mobile devices.
Reverse Stack on mobileIn some cases, the columns stacked on mobile can work better in a reversed order.
Row background imageInsert image as row background
407407
FeatureDescription
Customize columnsAdd new columns and drag the size of the existing columns.
Column BackgroundChange the background color of each column.
410410
FeatureDescription
PaddingPadding can be adjusted for the columns in the row from four sides - top, bottom, left and right.
BorderBorder can be added to each column in a row separately for each side - top, bottom, left and right. The borders can be either solid, dotted or dashed.