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.
You can upload PNG, JPG or GIF images. There are three ways to insert an 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.
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.
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.:
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.:.
The text can also be edited using the top toolbar.
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.
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.
Dynamic spacer -> spacer without line, in the template you can easily adjust its height by simply dragging the mouse.
If the dynamic spacer is not set, you can set eg:
You can add a video in your email in two ways:
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.:
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:
<video class="adapt-img" controls="controls" poster="https://www.mailkit.com/video/preview_600x300.jpg" width="100%" height="313">
<source src="https://www.mailkit.com/video/video_600x300.mp4" type="video/mp4">
<!-- fallback -->
<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>
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.
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) .
After expanding the other settings, you can set for each of the icons:
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.
After dragging the block into the template and inserting the image, you can make further adjustments:
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).
You can place another image on the banner. It can be anything you like: sticker, frame, logo…
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.:
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.
After inserting the block into the email, the menu will be displayed in the default appearance - ie. the 3-item menu appears. It is possible to add other items by clicking on the “Add menu item” button, which is located at the very bottom of the menu for editing the “Menu” block.
You can also set:
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.
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-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.
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.