How does Liberation Campaign work?
In this article, you will find information about the editor's functionality and learn how to work in the Liberation Campaign editor.
Liberation Campaign is a platform that allows you to build engaging, high-quality emails of any complexity in no time, with no coding skills.
The platform offers:
-
extensive collection of 1450+ fully responsive email templates or any purpose and any business;
-
tools for building emails with interactive and dynamic content, aka AMP emails, with little to no programming skills;
-
automation of email production due to the Content Modules, the Smart Elements option for product cards, and Real-time content that allows you to edit/change data in email even after it’s been sent;
-
testing tools to check out how your emails render across 90+ combinations of email clients and devices — see emails with the eyes of your recipients;
-
professional support at all levels of your experience
-
high-level support at all stages of your acquaintance and work with the platform.
Let's look at the editor tools a little closer:
You will enter edit mode by clicking on any email message or template in your account. The entire editor in editing mode is divided into 3 parts:
-
The Settings Panel;
-
Working space: is a Preview area same time;
-
The Top toolbar.
1) The Settings Panel:
For your convenience, you can position the settings panel on either the left or right side of the editor:
Additionally, you have the option to "Hide Content Blocks Area" to declutter the workspace while designing your email template:
It contains almost all the functionality of the embedded settings for editing email templates.
The Settings Panel is divided into 2 parts: the "Appearance" and the "Content" menu.
Appearance menu:
All the styles that you set in the "Appearance" menu will apply to the entire email. How does it work? You set design styles for a certain element just once, and these design styles will apply to this element across the entire email no matter how many times you are gonna use it. And there will be no need to work on its design every time from scratch.
In the "Appearance" menu, you can get access to the following settings:
-
General settings;
-
Stripes;
-
Headings;
-
Buttons;
-
Mobile Formatting.
General settings:
In this tab, you work on your email design styles: You customize email message width, default padding for structures, background color as well as image, font, line spacing, paragraph bottom space, underline links, RTL text direction, and responsive design.
We are now gonna cover only the most important controls:
-
By default, the message width is 600 pixels. Today, this is the most standard size among all email clients.
You can change it according to your preferences.
-
Message Alignment allows you to change the horizontal position of an email in the workspace of the inbox. You can align the template's position to the left or right edge of the screen, or keep it centered;
-
Default paddings stand for the fixed padding size for future structures that you add to your email message in the future. You can set separate padding for each side of the structure or remove them altogether.
-
Next, we would like to draw your attention to the difference between the two controls: the General background color and the Background image.
The General background color is the background color applied to the entire email message area. The background color will cover the entire message area if the email is opened on a desktop device. While on mobile devices, it is hidden.
The Background image is the image that will be applied to the email message over its background. To do this, you need to pick an image of the correct size and specify its position in the settings panel in the editor.
Click the "Repeat image" control if you want your image to be applied to the entire email message regardless of its length.
Important to note: The background image will only render on desktop devices and not on mobile devices.
-
The chosen font will be applied to all "Text" blocks in the email except for Headings. You can choose any standard or custom font from the list.
-
Line spacing is the distance between the text lines in text blocks. You use them to give your email a more formal or informal style — this is totally at your discretion.
-
The "Underline links" control helps you enable or disable links underlining for the entire email.
-
The "RTL text direction" option allows you to write texts from right to left. Meant for those who write emails in Arabic, Urdu, and other languages that use the RTL script. Enable this option to make your texts, including numbers and punctuation, readable for people worldwide.
-
Responsive design — this option is always ON by default.
If you turn this option OFF, your email on mobile devices will look just like it does on desktop devices.
Stripes:
Stripe is the email message area containing structures, containers, and basic blocks. Below, we will show you how to work with the stripes.
To add stripes, click the "+" icon at the bottom left corner of the stripe.
Every stripe might have its type: Header, Content, Footer, Info area. You can set it manually in the "Message area" settings;
Using different types of stripes can be helpful for advanced adjustments. In the future, the stripe design styles will directly depend on their area.
You will be able to:
-
set individual font sizes for each stripe (it is especially necessary for the "Footer" stripe, where small fonts are more preferred);
-
set the font and link colors;
-
also, highlight the stripe and its content with a color. This is especially useful when you want to draw users’ attention to a certain email element.
-
the "Background image" option is another way to help you customize the background. It is required when according to the corporate, there should be images in the background or backgrounds with a logo.
Please note: Some email clients, like Outlook, may not display a background image. Therefore, we recommend that you set a background color for the entire email as a fallback. The color should be close to the color of the background image.
Headings:
Sometimes we need to highlight certain words or entire sentences to emphasize the importance of information or just visually separate email sections.
This is when Headings help. To apply headings to a certain piece of text, we need to highlight the latter and choose a necessary heading in the text formatting menu.
Then, in the Settings panel, you set the necessary font type, size, style, and color for the headings as well as line spacing.
Buttons:
Buttons in emails are always a call to action. They invite users to go to the website, place an order, follow on social media, leave a comment, vote for the best product, etc.
In the editor, you work on their design, so they don’t go unnoticed :)
The button menu allows you to set some default parameters that will be applied to all buttons in the email, so you can set:
-
font size, font style and color;
-
button color;
-
border-radius;
-
the full content border, or do it separately for each side with an option to customize the border color;
-
internal padding;
-
activate the "Highlight hovered buttons" styles and set hovered colors. The button colors will change when you hover the mouse over it;
-
"Support of Outlook" control allows improving buttons displaying in Outlook by inserting a special VML-code element.
Mobile formatting:
Responsive email design comes as no surprise today, as we all know that mobile-friendliness, aka mobile optimization, is no longer just nice to have; it’s a must.
To make your emails fully legible across any device, you can apply font sizes to headings, to different stripes, to buttons, etc., that differ from the desktop version of your email. You can also work on internal paddings inside containers and hide/disable certain elements on mobile devices.
To do so, you need:
-
apply font sizes to headings H1, H2, and H3 and to different stripes;
-
set button text size. 18px or higher is the most optimal size here;
-
enable the "Full-width buttons" option to fit the button on a user’s mobile screen.
All emails that you build with Liberation Campaign are responsive by default.
The option allows the image to adjust to the width of the mobile device's screen. Warning: Adaptivity only works on devices that support it.
However, you can disable the "Responsive image" design for some email elements.
While building an email template, you will be shown a mobile icon. This means that you can adjust the element for the mobile display by clicking on it.
If you want to hide some elements on mobile devices, you don’t have to cope with HTML code anymore as now there is the "Hide on mobile" option.
With this option on, you literally forbid certain elements from displaying in the mobile version of your email.
Content menu:
In the "Content" menu, you can get access to the following settings:
-
Structures;
-
Blocks;
-
Modules
What is the Structure?
The stripe is on top of the hierarchy of email elements, this means it must contain child elements. A structure is one of them, and it is always present in every stripe by default.
To add an extra structure, drag and drop it from the "Content" menu to the desired position of your email template.
Each stripe can contain many structures. In turn, a structure can include up to 8 containers in a row.
Just like other email elements, structures can be saved as modules, moved, copied and deleted with the help of the corresponding drop-down menu that appears by mouse hover.
In the structure's "Appearance" tab, you can:
-
add more containers to the structure;
-
set the container size. You can set container size in the structure using parameters in numbers or "stretching" the container to the desired width;
-
adjust indent between containers;
-
set the background color of the structure as well as the background image;
-
you can set padding for a structure for desktop and mobile view;
-
configure the full content border, or do it separately for each side with an option to customize the border color;
-
configure the structure's responsiveness to locate their containers one below the other for mobile view or set inversion for responsive structures to display containers in reverse order on a mobile screen;
-
hide the structure for desktop or mobile view here if you want some structures not to be displayed in some versions;
-
specify the structure type below – HTML, AMPHTML, or both types.
In the "Data" tab, you can:
-
configure structures just like smart elements.
Smart Elements are functionality that allows you to automate email production. This is a true time-saver for those who build multiple product cards and email digests. You configure them once and use them across numerous promo campaigns.
Important to note: the "Data" tab is available for stripes and containers as well as for structures.
In the "Conditions" tab, you can:
-
apply Display Conditions allows you to dynamically change the content of the email/template displayed to recipients after mailing, depending on whether the specified condition is met or not.
What are Blocks?
Liberation Campaign has its own hierarchy of elements. We can start from the stripes and proceed in descending order, through the structures and containers down to the blocks.
Blocks are at the very bottom of the email elements hierarchy.
In editor mode, all the 13 basic blocks are available in the "Content" → "Blocks" menu.
Blocks contain the basics to create some email elements: image, text, button, spacer, video, social, banner, timer, menu, custom HTML element, and three AMP-powered elements.
To use any of them, you need to drag and drop them into your email template and then edit them.
Modules menu:
Modules are universal elements of an email template (containers, structures, stripes) that help reduce the time it takes to create an email. And Liberation Campaign platform allows you to create your own modules
Modules allow you to save stripes, structures, and containers to modify (if needed) and reuse them over and over.
How to save a custom module?
-
To save a module, hover over the desired element and press the "Save as module" button;
-
Give the module a name on the settings panel;
-
Enter a description (optional), the description will later help you understand what content this module contains;
-
Select a category for easy search;
-
Enter tags. The "Tags" field allows you to group the saved modules by tags. You can add one or several tags. Then, choosing the modules, you will see that your modules are grouped by tags;
-
Click "Save";
-
Having done that, your module is available in the "Modules" → "My modules" tab; even more, the module will also be available from other email messages and templates in your project. For further use, just drag and drop it to email.
In addition to the modules you crafted yourself, you can also use our pre-designed ones from the "Template modules" and "General modules" nearby tabs. All of them have a short essential description below and help you create similar element layouts faster.
"Template modules" contain various email elements created by our designers in their unique style. They are available only in the existing email crafted with a basic or pre-designed Liberation Campaign template.
They have ready-made styles of a particular template or their variations for replacement.
In the "Template modules", you can find interesting modules with a non-standard layout.
"General modules" are available from any email. Our library consists of a considerable number of already prepared modules that our designers have thought to the smallest detail. These modules are elegant and attractive; some contain pre-configured smart or AMP elements.
You can use these advanced modules as a basis for similar elements of your emails by replacing their content with your own.
The collection is replenished every day and has more than 250 modules. All these modules are at your disposal. You can find them in the "General modules" tab.
2) Working space: is a Preview area same time:
The preview area takes the major part of the screen in edit mode.
It’s the area for editing emails and templates, where you can drag blocks/structures/ modules into it from The Settings Panel.
3) The Top toolbar:
The following functionality is placed on the top toolbar (from left to right) :
- Back button – allows you to exit the editing mode and return to the menu for selecting email messages or templates in the current folder.
-
Form with the name of the email – allows you to change the email template's name and save it manually. The drop-down menu on the right part of the Form with the name allows you to save the email and exit, save as a new email message, save as a new template, or leave the email editor.
-
Undo, Redo, and Version History buttons – allow you to cancel or redo the change.
Also, you can view the Change History, see the previous email versions before the changes, and restore them.
You can restore the previous email version by clicking on the green "restore" button or use one of the 3 options in the drop-down menu to the right of the "restore" button: Restore as a new, preview in a new tab, or export as.
-
Localization button – allows translating emails into all major languages (over 100). Communicate with your customers worldwide in the languages they speak. You do not need to re-create an email and translate the text in it manually; Liberation Campaign will do everything for you.
If you'd like to find more info about translation functionality.
-
Code Editor Button opens the built-in Liberation campaign code editor, which allows you to make changes directly to the HTML and CSS code of the email.
-
The Preview button – allows you to switch to preview mode in which you can see how the email will look on desktop (on the left side of the screen) and mobile (on the right side of the screen) devices.
You can find two types of preview - AMPHTML and HTML.
熱門文章
The structure of Campaign emails is based on the HTML table layout. The core...
Campaign has its own hierarchy of elements. We can start from the stripes and proceed in...
Modules are universal elements of an email template (containers, structures, stripes) that...
What are the Structures and Containers? How to use them? What is the Structure? The...
What's the Appearance? To speed up email production and set one holistic style for the...