With our new email builder, you can now design stunning branded emails directly within your back-office, without any external tool or technical skills!

Getting started

First, go to Animation > Community emails > + Create new email.

By choosing Build from scratch, you'll enter a drag-and-drop editor where you can freely design your email using blocks and pre-defined layouts. Here's what it looks like:

First, fill in the subject line of your email. Be careful, it must not be spammy. Avoid excessive capitalization, words that trigger spam filters (e.g. free) and exclamation points, be clear and precise about the content of the email.

Global styling

To change the global look of your email:

1. Click the purple cross icon in the upper-left to open Layers
2. Then select the Body section in the panel displayed on the left side of the editor.
3. You can customize the general email width and its background color.
4. In the left side of the editor, you can also select individual elements of your email to customize their appearance or rearrange them.

Layout blocks

In Blocks > Layout, in the menu on the left side of the visual editor, you can directly configure the column layout of the email. Several types are available (number of columns, column size distribution).

To insert them, click on the layout you want and drag it to the desired location in the email.

Key content blocks

Before adding content blocks to the email, it is important to know that the community header and footer are automatically added to Community Emails. You are therefore building the body of the email.

Click on each type of customizable element to learn more:

Text Button Image Divider & Spacer Social & Social Element Navbar Hero HTML

 

 

Add any text-based content to your email. To add or edit a text block:

1. Drag a Text block to the desired location in your email.
2. Click on the text in the visual editor to write your message.
3. Use the right-side panel Properties to change the size and space of the element, as well as the typography (font, size, color, etc.) and the decorations (background color).

 

What are the specifications to be aware of?

• It is best to leave the default setting auto in Properties > Size (panel on the right of the visual editor) to avoid the risk of "cutting” the block of text.
• It is not possible to import a font.
• To ensure that your text is legible based on the colors you select, you can check the contrast ratio on this website (WCAG / RGAA norm).

 

Example:

 

Drive action with a clear and clickable call-to-action (CTA). To add or edit a button block:

1. Drag a Button block to the desired location in your email.
2. Edit the button text in the visual editor to add your CTA.
3. Add a redirect link at the top of the Properties pannel.
4. Use the right-side panel Properties to change the typography (font, size, color, alignment), the borders (radius, width, style, color) and the decorations (background color of the button and element).

 

What are the specifications to be aware of?

• For optimal readability, it is best to leave the button width and height set to auto (Properties > Size).
• The first background color field is for the button color, and the second is for the element color.

 

Example:

 

Visually enhance your email or reinforce your brand identity. To add or edit an image block:

1. Drag an Image block to the desired location in your email.
2. Choose an image already uploaded to the back office or select a new one.
3. Adjust size and styling in the Properties pannel (link, image size, alignment, borders, background color).

 

What are the specifications to be aware of?

• The alt field (Properties pannel) allows you to add a description, which is useful in case of a slow connection or to improve accessibility (tools that dictate content).
• In Properties > Size, the width and height are set to auto by default. Use the size in % so that the image occupies 100% of the block and automatically adapts to the user's device; this is good responsive practice. If you need to change the width or height settings, only change one of the two to avoid distorting the image.

 

Example:

 &  

 

Structure your email visually, separate sections, and create breathing room. A Divider is a horizontal line used to separate blocks, while a Spacer adds vertical empty space between blocks. To add or edit them:

1. Drag a Divider or Spacer block to the desired location in your email
2. Use the right-side panel Properties to configure them. Choose the thickness, length, color and alignment for your Divider, define the height and optional background color for your Spacer.

 

Spacer example:

Divider example:

 &  

 

Add links to your social media pages. Use the Social block as a container, then, add individual Social Element inside it (icon + optional text). To add or edit them:

1. Drag a Social block to the desired location in your email.
2. Then, drag Social Element inside it if you need more than 3.
3. For each, define the link, the image and optional text in the Properties pannel.

 

What are the specifications to be aware of?

• The optional text accompanying the icon is added in Properties > Content.
• Make sure all your icons have correct links.

 

Example:

 

Add a horizontal menu. This can be useful if you want to allow members to access parts of the community or external links directly from the email. To add or edit it:

1. Drag a Navbar block to the desired location in your email.
2. For each section, define the link (href), the padding and typography settings in the Properties pannel.

 

What are the specifications to be aware of?

• On mobile devices, Navbar may display incorrectly or appear vertically: ensure that elements are short and clear, or enable the hamburger icon option in Properties by clicking directly on the Navbar section.

 

Example:

 

Grab attention with a bold visual + message combo, perfect for the email header. This saves time and allows for quick formatting. To add or edit it:

1. Drag a Hero block to the desired location in your email.
2. Customize each section of your Hero block (image, logo, title, text, CTA, backgroung color or image) in the Properties pannel.

 

What are the specifications to be aware of?

• Add a colored background for the text if it is not sufficiently visible over the image.
• Keep the text minimal and dynamic to engage readers from the very first seconds.

 

Example:

 

Insert advanced and customized code snippets in HTML to integrate external elements. To add or edit it:

1. Drag a HTML block to the desired location in your email.

2. Paste any HTML you’ve prepared using the Code icon.

 

What are the specifications to be aware of?

• Check the visual display of your HTML code.

 

Example:

Preview, test and export

Preview: Once the email has been created, you can preview it in two ways:

• Test the rendering on a computer/mobile device using the drop-down menu at the top of the editor
• Scroll down in the back office to the Preview email section and click on the computer or mobile icon

Test: If you are satisfied with the result, you can now test the email by clicking on Test email at the bottom of the page in the back office. It will be sent to the email address of the account requesting the test.

Export: It is also possible to export the HTML of the email to keep a version (for example, a global template, or before making changes if you want to keep the current state). To do this, click on the Code icon and then on the double square to copy the HTML code.

Schedule, select recipients and send

Once your email has been drafted and proofread, it's time to send it. Here are the final steps to follow:

1. Schedule your email
   Choose Send immediately or Set date and time if you want to schedule the sending.
   Scheduled emails are displayed in Animation > Community emails > Scheduled.
2. Select recipients
   Click on Select recipients at the bottom of the back-office page to display the user sorting table.
   You can use the desired fields and filter them to best target your audience.
3. Send email
   When everything is ready, click on Send email to X members. 
   It will be sent according to the desired settings: immediately or later, automatically by the system.

FAQ

Can I save custom blocks for reuse?

Yes! You can save a column, block, or element for reuse in the same email. How to do it:

1. Click on the element you want to save.
2. Click on the three small vertical dots ⁝.
3. Select Create Symbol.

 

You will then find your element in the Symbols tab (at the top of the Blocks column). Simply drag and drop it into your email to reuse it.

Will my email be responsive?

Yes, all builder blocks are natively responsive. On mobile devices, certain elements (such as navbars or columns) automatically reorganize themselves into a vertical stack for better readability.

 

Remember to use the icon at the right of Preview email section in the back-office.

Can I duplicate an element or an entire section?

Absolutely. Hover over the desired block, then click on the double square Duplicate that appears in the block options. You can also do this from the Layers panel at the top left.

Can I save an entire email template or duplicate an email to reuse later?

Yes, totally! Here's how:

1. Create your email (specifically for a template) or choose an email you already sent or scheduled
2. Click on the 3 dots on the right, then click Use as template (from the Scheduled or Sent tabs)

Can I copy and paste text from Word or Google Docs?

Yes, but be careful: this can sometimes result in unwanted styles being added (fonts, margins, colors, etc.). It is best to write directly in the builder or paste as plain text (Cmd+Shift+V | Ctrl+Shift+V).