See how to use and navigate the campaign editor to create or customize the content of your first email campaign.

Edit ready-to-use email templates

This is the easiest and probably most convenient way to build emails. All you have to do is choose the template you like, customize it to fit your brand design, insert your URLs, and replace our images with your own. That’s it! Your email is ready!

Screenshot 2024-05-07 at 15.24.22.png

Start from scratch

This option means you’ll need to drag and drop structures into your template, then fill them with content blocks or modules.

email marketing in tidio 2024-04-04 at 15.56.52.png

Understanding the template structure

The structure of our campaign editor is based on an HTML table structure. The central elements of the email are tracks that can contain an unlimited number of structures. You can determine the number and type of tracks you want here:

Screenshot 2024-05-07 at 15.42.45.png

Containers can contain an unlimited number of blocks when placed on top of each other. However, you need different containers to place blocks next to each other.

You can drag and drop blocks/structures/modules from the Settings panel to the editor area.

editor general 2024-04-05 at 13.14.44.png

You can select different elements of an email by clicking the left mouse button. When clicked, the menu and available settings for the selected element will open in the settings panel.

editor general 2024-04-05 at 13.11.41.png

Using the drop-down menu, you can delete, move, and copy email elements or save them as modules.

Screen_Shot_2021-12-17_at_15.03.55.png

You can navigate between email elements by selecting the required elements with the mouse. In this case, the selection priority belongs to the element at the lowest level.

For example, by clicking on the block in the container located in the structure which is in turn located in the strip, you will go to the block settings menu.

Screen_Shot_2021-12-17_at_16.00.16.png

Use the campaign editor

By clicking on any email or template in your account, you will enter edit mode. The entire editor in edit mode is divided into 2 parts: Appearance and Content.

appearance

This section contains almost all the functions of the built-in settings for editing emails. In the Appearance menu, you can access the following settings:

General settings

In General Settings, you can set the email width, which is 600 pixels by default. You can set any size between 320 and 900 pixels.

Screen_Shot_2021-12-17_at_16.25.18.png

Set the default spacing , which will be used as the default for all new structures added to an email from the Content tab or when adding new tracks .

You can choose the base font , font size, and font color for all subsequent text blocks.

Screen_Shot_2021-12-17_at_16.26.50.png

Additionally, you can set the color of links in the email (turn the underline on links on or off), and the default line spacing for all text elements of the email.

Keep in mind that this is the only way to set the line spacing that will be displayed on mobile devices.

editor general 2024-04-05 at 13.25.41.png

Headlines

In this menu, you can set the font, size, color, thickness, and italicization for the H1, H2, and H3 headings. To set any text as a “heading,” you must highlight that text and select the heading type.

Screen_Shot_2021-12-17_at_16.28.52.png

Straps

To set a strip (row) as a header, content, footer , or information strip , you need to click on it and set its value in the settings panel. In these menus, you can set any setting that will apply to each strip (row) respectively.

Here you can set the text size, the background color of the strip and the background color of the content, the font color, the link color, and select the image for the strip background (row).

In this menu, you have the ability to enable the highlighting of forwarded buttons , which are disabled by default when creating new emails. The button menu allows you to set some parameters that will be used for all buttons in the email by default.

Here you can set the button color, the button highlight color, the font color, the text style and size, the thickness and skew parameters, and also set the border radius (the default setting is 30 pixels).

Outlook support allows you to improve the display of buttons in Outlook by inserting a special VML code element.

Additionally, in this section of the menu, you can set borders and their colors. You can set them separately for each side or for all sides at once.

You also have the ability to change the button’s border color and enable the highlighted border color.

Additionally, in this menu, you can set the internal spacing for buttons, separately for each side.

Mobile design

Here you can control how your email will look on mobile devices. You can set the header text size, content text size, footer text size, info area text size, item text size for the “Menu” block, text size for H1, H2, H3 headings, set the horizontal alignment and email content spacing for them.

You can also set the text size for the buttons to be the full width of the mobile device.

Content menu

In the Content menu, you can add structures , blocks , and modules to your email – the central elements of the email or template .

To create such a “skeleton” of the template, you need to drag a structure that contains the required number of containers and then simply fill them with blocks or modules .

Buildings

You can select a structure that contains 1, 2, 3, or 4 tanks from the secondary structure menu.

Blocks

Currently, there are 8 basic blocks , including an HTML block that allows you to embed custom code and custom email elements.

Screen_Shot_2021-12-17_at_17.09.41.png

For example, a basic image block :

Screen_Shot_2021-12-17_at_17.10.32.png

This block can be used to add images in PNG, JPG or GIF formats with a maximum size of 3Mb. You can add an image from your computer by dragging and dropping or pasting a link to an external source.

Screen_Shot_2021-12-17_at_17.11.12.png

Modules

Modules menu contains previously saved modules that you can use and add to your email. You can also add your favorite strips , structures and containers to the Modules menu to use them later. In addition, you can use our ready-made modules by dragging them to your email.

Screen_Shot_2021-12-17_at_17.11.40.png

AI-assisted writing support

You can improve your writing with AI-driven suggestions to tailor your messages with different tones and styles. AI-powered writing support is designed to help you deliver high-quality, well-written text quickly. With the power of AI, writing support can produce neat paragraphs. You can let AI write the email content for you, ask it to translate the message, change the tone, correct grammar, and more!

Screenshot

Editing area

This area takes up most of the screen in edit mode.

Screen-Shot-2020-10-22-at-11.04.41.png

This is the area for editing emails and templates. You can drag blocks/structures/modules into it from the settings panel . Here you can set the number of strips required and their type.

Screen-Shot-2020-10-22-at-11.04.59-1200x489.png

Using the drop-down menus, you can delete, move, copy, or save any email element as a module.

You can select any element by clicking on it. Once selected, you will see the settings for it in the settings panel (see the list of available settings for different elements above).

Each structure can contain between 1 and 4 containers.

Screen_Shot_2021-12-17_at_17.18.07.png

Containers can contain an unlimited number of other elements when you place them one below the other, but if you want to place an element on the right or left, you will need to use different containers.

Working with text

To add text to your email:

Screen_Shot_2021-12-17_at_16.28.52.png

If you need to add links to text, and not just call-to-action buttons, you should:

editor general 2024-04-05 at 13.18.34.png

You can highlight links in emails — do what feels right to you.

To add a link to text, highlight the required text and click the link icon in the settings panel.

editor general 2024-04-05 at 13.21.50.png

Then, in the settings panel, select the most appropriate connection type (protocol) and enter its data.

editor general 2024-04-05 at 13.23.03.png

To remove the link from the text, simply click on the text and then click on the same link icon again.

Add photos

Images are the foundation of all emails. No matter how compelling your text is, images should definitely be there because they appeal to emotions by showcasing our products in the best possible way.

How to add an image in emails:

There are four ways to do this:

Here, you can simply drag and drop the image you intend to use in your campaign or upload it from your computer by clicking the “arrow” and selecting the image from your computer.

Screen_Shot_2021-12-20_at_09.05.48.png

If you don’t have the banner image saved on your computer, you are welcome to link to this image on the Internet. In the “External link” field, paste the link to your image.

If you only intend to use this image once, in the drop-down menu, select the “Keep as external link” option (as shown in the example above) and press “V”.

If you intend to use this image for other campaigns, then click on the “Project” tab above, insert the link and select the “Download to Gallery” option, and click “V”.

Screen_Shot_2021-12-20_at_09.07.44.png

When you upload or download images to the gallery as shown in the example above, your images are saved in your personal gallery. You just need to switch to the email tab.

Screen_Shot_2021-12-20_at_09.08.34.png

Images here are sorted by date, from newest → oldest. If the list of images is too long, you can search by their name. To use one in your current HTML email template, you need to click on the selected image and it will automatically appear in your email.

Using the image bank

First of all, all the images available in our campaign editor are completely free. Second, we offer over 100,000 images. Click on the “Inventory” tab, then enter the name or category of the images you are looking for.

Once you’ve selected an image and clicked on it, it will immediately appear in the template you’re working with. This way you can check if it’s suitable for your email. If you like what you see, click the “Use” button.

Screenshot 2024-05-07 at 15.55.15.png

Photo editing

In the previous paragraph, we showed you how to upload and save images. But how do you edit them within the campaign editor?

Screen_Shot_2021-12-20_at_09.09.57.png

Color and background

Backgrounds designed for individual containers/strips (rows) help draw recipients’ attention to specific elements. Backgrounds designed for entire emails make your design look complete and unified.

How to set a background color for a structure

368c76af52bdf407dcc10e6b1ce843c9.gif

Note: You can do this the same way to set the background color for all emails.

How to set a background image for all emails:

The background image will only be displayed on desktop devices. It will not be displayed on mobile devices.

Some email clients, such as Outlook, may not display the background image. Therefore, we also recommend setting the background color, which will be similar to the background image, for all emails.

The bottom of the email usually contains contact information, such as your website address, the reason why you reached out to the recipients, links to your social media accounts hidden behind the social media icons, an unsubscribe link, and the name of the person responsible for the newsletter email. The latter is optional, but all the elements that precede it are mandatory.

Screen-Shot-2020-10-22-at-11.11.54.png

How to build the email footer

This is a complex element of emails. To build one, you need to:

Send the campaign

Before you decide to send the campaign, always preview it to check how it will look on your customers’ devices.

How to view your email

editor general 2024-04-05 at 13.27.44.png

Bottom menu bar

Submit your campaign

Once you have edited (and corrected if necessary) your email, you can move on to checking and sending:

editor general 2024-04-05 at 13.28.26.png

email marketing in tidio 2024-04-04 at 16.00.03.png