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

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

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. 

 

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.

 

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:

 

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 videoVideos 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:

1. insert an HTML block into the template
2. in the template click “Insert your HTML in the code editor” to open the code editor
3. in the code editor, insert the code for the video instead of “Insert your HTML in the code editor”

 

 

 

 

 

 

 

 

 

 

 

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) .

 

 

 

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.

 

 

 

Banner

 

 

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).

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
   

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.

 

Menu 

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:

• 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.

 

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-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.

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.