Questo articolo è attualmente disponibile in inglese e spagnolo. Puoi fare riferimento a questa documentazione mentre arriva nella tua lingua.
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.
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.
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).
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”.
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.
-
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.
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.
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).
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. -
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. -
Social.
Choose the social media platform you want to include and edit the link URL as well as the layout within the block. -
Divider.
Configure the color and layout of the vertical line that separates content visually. -
Space.
Define the amount of white space you want to insert between two blocks. -
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.
-
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.
-
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.
-
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”.
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.
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 ( ).
You can also send a preview email to your chosen address ( ) to see what the customer will receive.
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:
-
Create personalized product block in an email or web content, to tell clients about products they’re interested in.
- Links in emails: view in browser, unsubscribe, and buttons, to configure predefined links.
- Weekly recommend products campaign, to schedule automatic mailings to clients with recommended items.
-
Mass coupon email, to send an exclusive discount to your clients.