Email editor

 

Este artigo está atualmente disponível em inglês e espanhol. Você pode usar esta documentação enquanto ela não estiver disponível em seu idioma.

Connectif’s email editor enables you to responsively personalize the email content you send to clients from your account, using dedicated workflows.

 

How to access it

You can access the email editor via two routes:

1. From “Content > Emails”. Click   Create new email to generate new content or click More   and select Edit to modify an existing email.

Editor_de_Email_-_1.png

 

2. From the "Send email" node in a workflow, by clicking   (Edit node configuration). You can click   Create new email to generate new content or   Edit to modify an existing email.

Editor_de_Email_-_2.png

 

Interface

The email editor is made up of three panels:

1. Preview and save: to save or discard the changes you’ve made. You can also preview the final result of the email that will be sent to your clients.

2. Design: to visually build the email using the structures and components of panel 3 (tools).

3. Tools: to configure all the email properties, access templates and add variables. This panel can be contracted or expanded by clicking   (Open tools) or   (Close tools).

Editor_de_Email_-_3.png

 

How it works

The email editor has a drag-and-drop design to give you a quick, easy and very visual way to build your emails.

1. Classify the email

In the design panel (2), catalog your email and locate it quickly by clicking   Add tags and adding key words that will help you identify it.

 

Tags are a very useful way to find your workflows quicker as well as to generate reports using Data Explorer. We recommend adding tags that include:
Campaign name.
Launch date.

Target audience.

Campaign objective (sales, loyalty, capture, etc.).


For example, using the tags “Christmas 2022”, “B2B clients” and “Capture”.

Editor_de_Email_-_4.png

2. Edit general style

In the Tools (3) panel, click on the General tab to edit the parameters of the overall look. You can also access this by clicking   General properties on the design panel (2).

The parameters to define are:

  • Content name: name you want to give the content to identify it in your Connectif account.

  

The content name is not the email subject. To configure the email subject, read the Email campaigns article.

  • Colors: background color of the content and general background color.

Editor_de_Email_-_5.png

  • Layout: width in pixels of the content and responsive breakpoint (maximum width of the screen to be recognized as a mobile device).

  • Text: default font or typography for email texts.

  

You can add new fonts to fully customize your emails. To do this, we suggest asking an expert in layout, CSS and HTML design.

  • Summary: text that appears to the client in the email preview, after the subject line.

  • Header: title that the contact’s browser tab will adopt when they click “view in browser”.

  • HTML options: general style configuration based on CSS and HTML.

  

We recommend that you only edit this section with the help of an expert in layout, CSS and HTML design.

Editor_de_Email_-7.png

 

3. Build the email by blocks

In the Tools (3) panel, click the Components tab to create your composition by dragging and dropping structures of elements in the design panel (2).

Structure

Layout to be adopted by a content block in the email. Can be presented in one or more columns, with different or identical proportions.

The structure must be inserted first. If none is included, the single column structure will be used by default.

Once the structure is created, hover the mouse over it and click  (Edit block) to modify it,  (Duplicate block) to create another, identical one, or  (Delete block) to delete it.

Editor_de_Email_-_7.png

 

Elements

Multimedia contents that you can add to your email by dragging to the design panel (2). Like the structure, you can edit them by hovering the mouse over the element and clicking  (Edit element) or over the content itself. You can also duplicate them by clicking  (Duplicate element), or remove it by clicking  (Delete element).

Editor_de_Email_-_8.png

The elements available to you are:

  • Text.
    Edit your text by applying rich text format (bold, italics, links, etc.), inserting dynamic variables or modifying its layout in the inserted block.

 

Dynamic variables allow you to personalize your text according to the data gathered in each contact’s profile. To find out more about variables and how to improve your email results, check out this article Predefined variables for personalized email and content.

  

The    Convert to HTML button in this and future elements will convert the text element to HTML, which cannot be reversed. To use this function, you’ll need basic knowledge of HTML and CSS. If you can’t find an expert to help you, we recommend not converting the text.

  • Image.
    If your image is already published on the internet, paste the image URL to include it in the web content. If you prefer to upload it from your device, click  Upload image or on the mountain icon, then select the file in the explorer window that will appear. Once uploaded, the image URL will automatically be completed.
    As additional settings, you can edit the alt text (which will appear if no image loads), the title text (also known as alt attribute, this appears when you hover the mouse over the image) and the layout within the block.

    Editor_de_Email_-_10.png

  • Button.
    Define the text that appears on your button, the ‘title’ attribute and the link (can be a single specific link or a predefined one to carry out a particular action). To configure its appearance, select the text and background colors and adjust the position inside the box.Editor_de_Email_-_11.png

  • Social.
    Choose the social media platform you want to include and edit the link URL as well as the layout within the block.
    Editor_de_Email_-_12.png

  • Divider.
    Configure the color and layout of the vertical line that separates content visually.
    Editor_de_Email_-_13.png

  • Space.
    Define the amount of white space you want to insert between two blocks.
    Editor_de_Email_-_14.png

  • Dynamic content.
    Insert a carousel of products that will be filled with items of interest for the contact. You can select one of the three default templates (Basic product, Product with brand or Product with price) or customize the final look in the text editor. You can also define its structure of rows and columns on desktop and mobile.

 

For the product carousel to be filled with items that the contact shows an interest in, it’s essential to use a “Get products” node before the “Send email” node. You can find out more in the articles Show personalized products in the abandoned cart email and “Get products” node.

Editor_de_Email_-_15.png

  • HTML.
    Embed custom HTML code and adjust its layout.

  

To insert this element, you’ll need an expert in layout, CSS and HTML design to ensure that content is correctly displayed.

Editor_de_Email_-_16.png

  • View in browser.
    Predefined text to insert a link for users to view the content of the email in a browser window. When editing the link, you can adapt the text to be displayed, the title, and whether it should open in a new window.

  

The link is always “#__cn_view_in_browser” and is configured by default. You can access it via the option   Insert/Edit link in the editor.

Editor_de_Email_-_17.png

 

  • Footer.
    Predefined text to insert a footer to your email, where you can provide your company details and give customers the opportunity to cancel their subscription or forward the email.

 

The GDPR requires us to give customers a visible opportunity to cancel their subscription, so the “Cancel subscription” link must always be included in newsletter-type emails. The link to cancel must always be “#__cn_unsubscribe”.

Editor_de_Email_-_18.png

 

4. Use existing template or save a new one

Save time creating emails by using Connectif’s or your own predefined templates in the Tools (3) panel, the Templates tab or by clicking   Use template. You can also save the design you’ve created as a template by clicking  Create a template from this content.

Editor_de_Email_-_19.png

 

5. Review variables

Check the variables created and how many times they appear in the text elements using the Tools (3) panel, on the Variables tab. To edit its format, click  .

If you’ve recently added a new variable and it doesn’t appear here, click   to refresh.

 

Learn more about the variables format by clicking here.

 

6. Preview final result and save

You can see the final result of your email in the preview and save panel (1). All the content created is responsive, so you can click  Preview to open a new panel and review the final result as displayed on a desktop (  ) or mobile device (  ).

Editor_de_Email_-_20.png

You can also send a preview email to your chosen address (  ) to see what the customer will receive.

Editor_de_Email_-_21.png

Once you’re happy with the result, click   Save.

  

Connectif is able to retrieve content that has been closed by accident. However, to avoid data loss between the device you’re editing on and its network, we recommend saving your email every few minutes.

 

 

 Congratulations!
You’ve reached the end of the tutorial.

  

Do you have questions?
Don’t forget, our Connectif specialists are here to help you. To contact them, just open a Support ticket by clicking the blue “Help” button on your dashboard.

 


Keep learning!

To make the most of your Connectif account, we recommend reading these articles next:

 

Esse artigo foi útil?
Usuários que acharam isso útil: 0 de 0