Events and Behaviour Tracking
- Email Builder Review
- Designing your email
- Creating a Synchronized Module
- Setting Responsivity
- Building Smart Containers
- Creating a Gmail Promotions Annotation
- Adding a Rollover Effect
- Adding a Background to an Email
- Adding Anchor Links
- Adding a Video to an Email
- Adding a Table to an Email
- Adding a Custom Font
- Adding Social Media Buttons
- Editing HTML and CSS
- Working with “Images” block
Security and Compliance
Email Builder Review
Our visual adaptive email builder never stops improving - it’s even easier to work with it than with block online editors and other similar types. Really, you get rid of routine work and get more automation which is very important for a marketer. We also cannot ignore the important fact that you need no special skills of email development and don’t have to work with the HTML editor. This way, a time is saved for not less important things like segmentation, analytics and so on. So let’s start with the basics and continue with specific features to understand the principles of work with our newsletter creator.
Where is adaptive editor located?
You need to open the “Messages”, section, then click "Add new email message" button.
And select the required structure among the adaptive templates.
Clicking the structure you will open the template in a new drag and drop editor which looks like this:
This is default template, so you have to work with it to adjust it accordingly to your website style and to certain type of mailing: promo newsletter or trigger email.
On the left there is dashboard you will have to work with, it consists of two tabs: "Design" (we shall talk about it in a special article), and "Content" tab we will proceed now.
You can find three sections here:
A library where ready-to-use and saved structures and blocks are stored.
Using the newsletter builder you can easily select the required elements and compose them in order you want.
Only stripes may contain and unite blocks and structures. You can also move, copy and delete them as well as to format (set color and paste pics).
The stripes editor bar looks like this:
Background image option helps with emails design and simplify your work, for example, when you only need one single image placed below some certain structure. In our online newsletter maker you can set the alignment and paste pics in different ways: choosing from the bank of images, downloading the already prepared one, or paste an external link.
Structures may contain only blocks, for example: video, images, banners, buttons etc. Depending on what you want to do, you need to select the appropriate structure and then drag and drop it to the stripe. Blocks may contain several sections, one to four.
All the content blocks are correspondingly located in "Blocks" tab, they are important component of the drag and drop editor helping to fill your newsletters with content.
To choose a block, structure or stripe you only have to select them and then drag and drop to the position you want. Now let’s analyze each element of the "Blocks" tab separately and more detailed.
Email footer: logo + menu
It’s considered good manners and common rules for responsive email to start with a corporate designed footer, so customer will recognize you immediately.
Header of this type is composed of two blocks and two structures. Drag and drop two structures to one section first, and then do the same with "Menu" and "Image" blocks.
Next, we select or upload the prepared image and configure the size and alignment we need.
Does “Image” block have some more options?
A set of parameters is displayed below; you will have to work with them to paste image to email, here you can read more about work with this block.
In "Menu" block you can change its design (icons on/off), font, color of each item etc. All options are available in the drop-down window when you click the block.
Making the banner online
The next structure step is to add some attractive banner to newsletter using the "Create banner" built-in option. You can proceed with banner in different ways.
There are several ways to create a banner directly in the email builder.
- Upload the prepared image and add the required text to it
- Use the images bank. It means that you can choose the pic you need right in the newsletter creator. To do this, you can use the keyword search: girl, boyfriend, New Year, Christmas, and more. The selected image is attached in one click, you can freely add text to it turning a simple picture into attractive item of really responsive email design.
- Add the image URL from external source with further edition when it’s already added to email builder.
To compose the banner below we used the prepared picture uploaded to the newsletter creator and then enhanced it with formatted text:
You can edit the banner developed online via our email builder even after it’s converted into image file. For example, you can change the picture, delete or edit text. In particular, it’s easy to correct spelling errors which are used to happen sometimes :)
Basic adding of video file
Probably the most simple thing that may be done perfectly and look good. You just need a link to add video to your message.
- You should paste link in "Video link" field, then wait until picture is generated.
- Alt Text is added automatically.
- You can replace the default "Play" icon by item of another color just in one click.
Indents are easy to add too, as well as to enable or disable adaptivity. In the screenshot above you can see the main screensaver of the video identical to Youtube picture. As HTML5 is not yet supported everywhere, video is not playbacked in email itself but prepared pic looks just as good.
Product card and blocks library
Adding of product cards is a feature of most of promo newsletters, the more attractive cards the better. But it often takes a very long time to compose them. One of the successful product card versions may look like this:
In the new online newsletter maker you can configure the functions of advanced product cards generator using just one link and not getting offline the email builder.
Look at the screenshot; as we can see, the product card consists of:
- two pics;
- text blocks with different formatting;
The main photo frame is added online via built-in mini photoshop.
Any picture from the product card can be edited via our editor's built-in mini photoshop in every way you like.
It also happens very often that you uploaded some image but its size doesn’t fit, so you have to re-edit and then re-upload it, even several times. Therefore, mini photoshop features the most useful and interesting options that are helpful to improve the design easily and quickly: all types of frames, filters, adding text and stickers. And the most interesting and very simple option is Crop image.
We couldn’t say much about text, you can edit it just like before, and the toolkit is still the same. Just notice that more non-standard fonts are available now.
Non-standard fonts are recommended to use when you are making banner because they turn it into a full-value picture.
As for text block of product card, it was prepared in advance and then saved in our blocks library. Cards can be saved to destined folders, segmented by content type etc.
Using the blocks library you will never lose the structures you made for so long. Save all the required items and add them to your emails anytime you need.
“Social networks” block: it’s really simple
A block with social networks buttons can not be ignored. We are used to give clients an opportunity to surf the social networks in almost all newsletters hoping that they will join us somewhere else.
"Social networks" block is available in any regular newsletter creator but there are not so many editors where you can build a good-looking block quickly, configure size, color, icons displaying and add links in one click.
You can read here how to make the social networks block in other ways, for example by pasting your own prepared pictures.
Adaptive emails design
In conclusion I would like to tell you about adaptivity that can be configured for any composed email or particular block.
Adaptivity has so wide range of options that you can even disable the displaying of certain blocks for mobile devices, configure fonts, headers, turn on/off the adaptivity of imagesTwit it
Now, emails may look really cool on mobiles, they are just simple but styled. Make newsletters in a new adaptive email builder, learn new options, ask questions and be number one in your business!
If you feel creative mood or wish to learn more amazing things after reading this article, you can put your eyes on "another one about 100 popular lifehacks for email mailings", which are already tested in practice by the best experts in the field.
We wish you attractive and responsive emails, more adaptivity and less routine! See you next time :)