ResourcesKnowledge Base

Content Blocks

Content Blocks Visual builder has its own hierarchy of elements. We can start from the Stripes and proceed in descending order, through Structures and Containers to the Blocks.

All 12 basic blocks are available in the editor in the Content/Blocks menu.

Image
Text
Button
Spacer
Video
Social
Banner
Timer
Menu
HTML
AMP-Carousel
AMP-Accordion

Image

You can upload PNG, JPG or GIF images. There are three ways to insert an image:

1. Dropping/Uploading Image

You can simply drag an image from a folder on your computer, or paste it by clicking in the image drop zone and selecting an image from your computer.

2. Inserting an external URL

External URL If you do not have an image stored on your computer, you can enter a link to an image (stored e.g.g. on your FTP server or in the File Manager in Mailkit) in the “External link” field.

If you only want to use this image once, select "Leave as external link" from the drop-down menu (see example above) and click the checkbox .

If you are going to use this image for other email campaigns, click on "Download to the gallery" in the drop-down menu and confirm by clicking on. The image will be inserted into the gallery, from where you can then click to insert it into the email/template.

3. Using images from the gallery

Image settings You can use images that you have previously saved in the gallery (see the previous 2 points).

The images in the gallery are sorted by date - from newest to oldest. You can useicon to search for images in the gallery by their name.

If you want to insert an image from the gallery, just click on it and the image will be automatically inserted into your e-mail.

In the setting in the left menu you can e.g.:

set Link
add Alternate text to be inserted into “title” and “alt” attributes
set image Alignment (by clicking on the phone icon you can set the alignment for display in the mobile phone)
Resize the image
set the Padding

Text

To insert a text box into a template / email, drag and drop the block to where you want to insert the text.

In the left menu you can then edit e.g.:.

Text color and Background color
text Alignment (by clicking on the mobile phone icon you can set a different alignment when displayed on the mobile phone)
Line spacing
Padding
Show/hide block on desktop/mobile

The text can also be edited using the top toolbar.

Button

After dragging the block into the template, you can fill in the URL of the button and its text in the left menu. All other settings are based on the default settings defined in the Appearence –> Button menu.

Button - settings The parameters can of course be adjusted. If you insert another button elsewhere in the template, it will be set again with the default parameters.

If some parameters are not activated in the menu Appearance –> Button (for example, highlighting the color of the button when hovering the mouse), then it is not possible to work with them when editing the button.

Spacer

Dynamic spacer -> spacer without line, in the template you can easily adjust its height by simply dragging the mouse.

Dynamic spacer

Spacer - settings If the dynamic spacer is not set, you can set eg:

Line parameters (height, style, color)
Line Width (as a percentage of the block width)
Alignment (can be defined differently for display on mobile phones)
Padding

Video

You can add a video in your email in two ways:

Video - settings 1) By inserting the URL link to your video

This is a method that works in all email clients and on all devices. In the left menu, just insert a link to the video, fill in the fields for the attributes "Alt" and "Title" – the text is automatically inserted, it is of course editable. You can also set e.g.:

Play button style
Video Alignment and Size
Padding

2) Embedding video

Videos added in this way are played directly in emails. Therefore, recipients are not redirected to other websites to watch the video.

However, there are significant limitations to using this method - most email clients do not support this method. It is currently only supported in Apple Mail, native iOS mail, Thunderbird and Outlook for Mac.

How to add a video:

insert an HTML block into the template
in the template click “Insert your HTML in the code editor” to open the code editor
in the code editor, insert the code for the video instead of “Insert your HTML in the code editor”. The code might look like this:

<a href="https://vimeo.com/mailkit" class="esd-frame-element esd-hover-element esdev-disable-select"><img class="adapt-img" src="https://www.mailkit.com/video/preview_600x300.jpg" alt="" width="600" height="300"></a>
</video>

controls: displays video control bar on clients that support it
poster: URL of the video thumbnail
source src: URL of the embedded video

The first part of the code (above the “fallback”) is for those recipients whose devices and email clients support this interactivity.

The second part of the code (below the “fallback”) is for those whose email clients do not support interactivity –> they are redirected to Vimeo (or any other video hosting site).

By using this code, you make sure that all of your users will see the video you want to share.

Social

After dragging the block into the template, you can customize the block with links to your social networks according to your ideas. By default, 4 icons are inserted. If you need more icons, just click on the "plus" button.

You can choose from a large number of icon styles and three sizes (24 px, 32 px and 64 px) .

Social networks - icons

Social networks - settings After expanding the other settings, you can set for each of the icons:

Link to a profile on the social network
Insert Title
Insert Alt text

Of course, you can also set the block alignment (differently for display on mobile phones) or the padding. You can easily set the indent between icons.

Social networks icons - indent

Banner

image(22).png After dragging the block into the template and inserting the image, you can make further adjustments:

Select the part of the image that will be used in the banner (if necessary)
Set Image orientation – you can choose between vertical, square and horizontal (most popular type)
You can apply color filters to the image
Insert link URL and alternate text (alt)

If you need to place any text on the banner image, click thebutton on the top toolbar. Once the button is active, you can draw a text box in the banner where the final text is to be inserted. After placing the text field, the default text “Caption” will be inserted into it, which you can further edit and insert your own text instead. Use the tools in the top bar to set text parameters (size, color, font and more).

Additional picture You can place another image on the banner. It can be anything you like: sticker, frame, logo…

Timer

You can add a timer to your email to make your campaigns more efficient.

After dragging the block to the email template, you can further set e.g.:

the Date and Time of the end of the countdown
Time zone
set Timer background color
Size and color of numbers
if you want the recipients to see how many days are left, switch the "Display days" button. Otherwise, they will only see hours, minutes and seconds. It is easier to perceive "5 days and 20 hours" than "140 hours"
value Separator – a colon is used by default
displaying labels for numbers (“days”, “hours”, “minutes”), you can change in which language they are displayed

Expired time image You can also upload an image to be displayed to recipients after the countdown has expired, clearly informing the recipient that the coupon / offer has expired and can no longer be used.

whether the menu items appear as Links (text), or as Icons (images), or a combination of both types (in this case, you can choose the alignment of icons and texts)
Separator of menu items - style, color…
menu item Text style
Links color (by default, the color is set, which is based on the settings in the menu Appearance -> Stripes -> Link color)
Padding (top and bottom)
for each item you can set:
- Text of the item
- Icon (if set)
- URL link and its color (if it is to be different from the default setting)
- Background color of the item
- Displaying on desktop/mobile phone

HTML

After inserting the block into the email template, click on “Insert your HTML in the code editor” –> an editor will open where you can insert your code and continue working with it.

Code editor

AMP-Carousel

To create a carousel, drag and drop the block into the template and then just add the required number of slides/images. Because AMPHTML currently supports a minimum of providers (Google, Yahoo ..), we recommend always thinking about a backup variant for recipients whose provider does not support AMPHTML – ie. For example, add an image to the container and assign a view ONLY in the HTML version (thus it will be hidden in the AMPHTML version – recipients with providers who support AMPHTML would otherwise see the carousel and this backup image).
AMP-Carousel – settings

AMP-Accordion

AMP-Accordion is a useful component if you want to hide/show a large amount of content. Allows recipients to view the content outline and go to any section, reducing the need to scroll on mobile devices, for example.

AMP-Accordion – settings Drag and drop a block into the template to create it. You can set the background, outline or font color and size. Click on the “Add Section” button to add the required number of sections and fill them with content.

Because AMPHTML currently supports a minimum of providers (Google, Yahoo ..), we recommend always thinking about a backup option for recipients whose provider does not support AMPHTML.