1. Introduction
Welcome to the all-new Newsletter Composer! Through this guide, we would like to offer an overview of the new features available within the Visual Composer and help our previous users migrating from the old editor. Please read on carefully and if still in doubt don’t be afraid to contact us through our forums or social accounts.
2. Starting the editor
Starting from the main Newsletter Dashboard, a simple click on the “New” button will take you to the new composer, which is now the default newsletter creation tool. If you still want to use the old editor, you will be offered an option to do so on the following screen: this is particularly useful if you have created your own custom themes, as they will show up exactly like they always did. However, please note that once a tool is selected you will be able to edit that newsletter only with that tool: composer-created newsletters cannot be edited with the old editor and vice-versa.
In the same place, you will find also the “Reset”, “Save” and “ Save And Preview” buttons. Let’s explain their behaviour:
Reset – Regardless of how many new blocks or sections you’ve added to your newsletter layout, pressing this button will always reset everything to the original status you first saw when you opened the page. This action is non-reversible, so an extra confirm button has been added to avoid accidental clicks.
Save – At any time during your newsletter customization, you can hit the “Save” button to secure your work. Should you interrupt the editing for any reason, you can always come back and start over from your last save. Do this frequently ; )
Save And Preview – This button saves your work exactly like the “Save” button but it also takes you to the Preview page (see point 11), where you will see a rendered preview of your newsletter, both in desktop and mobile version. To continue editing, just hit the “Back” button.
3. The working space
The main working space is divided into two sections: the newsletter area and the blocks sidebar.
Newsletter Area
In the main newsletter area, you will see your newsletter grow with the chosen blocks, based on your needs. Starting from the upper section, a standard newsletter is commonly made of a header, a body and a footer. The body area, in turn, may contain a text paragraph, a hero image, a call to action and so on. This is basically what you will see the first time you open the composer.
You can notice the header, with the logo and a service text, the body, with a hero image, a paragraph and a call to action, and a footer, with contact information and some “legal” text at the very end.
Sidebar Area
On the left, you can see the sidebar area with all the blocks. They’re grouped by functions: Header, Content, Footer, based on which section of the newsletter they are commonly related to.
4. Creating your newsletter
First Steps
Every time you will start composing a new newsletter, a default layout will be shown. You can start adding your own blocks from the sidebar (see point x), or you can remove the existing ones to start from scratch.
5. Adding a block
To add a block from the sidebar to your layout just click and drag it from the left area to the right, then release it in the desired position. If you feel a block is not where you would like it to be, you can always move it up or down just dragging and dropping it on the new position.
6. Removing a block
To remove a block from the layout, just hover on the blocks in the newsletter area and two icons will appear on the right. Clicking on the red x icon will remove that block from the layout. You can repeat this step until you have a blank layout and then start over by dragging your preferred blocks.
7. Editing a block
Our composer lets you edit the block and its content as well. Content-level customizations will always overrule block-level customizations. Keep this in mind when setting global font families, for example.
Block Options
If you click on the yellow pencil icon, a modal box with some layout options will come up. All the options set in this box will affect every item of that block: e.g., if you set a specific font family using this option, all the text blocks inside that block will use that font family. This lets you specify some general styling across the different parts of your newsletter. The same applies to the background color. We will take a more in-depth view of all these options in the 10. Editing the blocks section of this guide.
Content Options
Every block will have some specific elements that can be edited: e.g. the image block will let specify the image source and link, the header block will let you upload your custom logo and some introductory text. This edit box differs from element to element but they are all quite self-explanatory: the Edit Text box will let you edit your paragraph…and so on. We will take a more in-depth view of all these options in the 9. Editing the content section of this guide.
8. The blocks
Every block you will find on the left adds specific content to your newsletter: they should be used to customize the look and feel of your mail according to the goal it must achieve. Every block is made of one or more elements and they all have some special options you can tweak: e.g. clicking on the image edit icon inside the image block (just hover on it and the pencil icon will come up) will let you change the image source and its link.
Here’s a list of the blocks you can add to the newsletter with a basic explanation of their function and editing options. We will periodically add new blocks in the future, so stay updated and subscribe to our mailing list.
Header
Ideally the beginning of every newsletter, with a custom logo area and some text.
Hero
A big centred image, a strong text heading, a paragraph and a call to action button.
Heading
A big paragraph title you can use to start a paragraph or a new section
Text
A simple, editable text block.
Call To Action
A call to action (CTA) is an invite to your readers to make them act: something like “Read more..”, “Buy now” or “Fill the form”.
Image
A full-width image: this could be a banner, an image of your products, even an animated gif!
Blog Posts
These blocks will import the latest posts from your blog and show them in a single column with a thumbnail picture, post date, a title and a link to the article.
Post Columns
Same as Blog Posts block but with two columns and no post date.
Footer
A centered text block to show your contact information and/or a disclaimer.
Legal Text
A centered text block to show an Unsubscribe and a View this email in your browser links. These are both required by the CAN-SPAM Act.
Social
This block will show social networks icons that link to your social profiles. To configure your social profiles, please go to Company Info > Social panel under the Settings section of the plugin.
9. Editing the content
When editing the content, you may find different editing boxes. Let’s see them one by one.
Edit Text
This is a quite common text editor that lets you select font family, font sizes, font styles (bold, italic and underlined), you can set up a hyperlink, create some ordered list, insert an emoticon, align text. We’ve added a button with our icon that you can use to easily insert our shortcodes into any paragraph.
Edit Image
This a simple edit box that lets you specify the image source and set a link for that image. You can insert an URL or use the Ideakit media uploader. The image will be automatically centered.
Please note: we use stock images courtesy of Unsplash.com as placeholders, you can see the complete list here.
Edit Title
With this edit box, you can set the title itself and its colour.
Edit Button
With this edit box, you can style your button look. You can set the button label, link, text color and button background.
10. Editing the blocks
When editing blocks, you will find two different editing boxes: one for blocks with blog posts and one for all the other blocks. Let’s see them:
Edit Block (Blog Posts)
With this edit box, you can set how the blog posts should appear in this block. You can set a background color, font family, how many posts you would like to show, which category they should belong to and which tags.
Edit Block (All other blocks)
With this edit box, you can set the main font family and background color for the related block. Please note that this will have no effect if you set a different font family on one of the inner elements of a block.
11. Preview your newsletter
When you feel your newsletter is ready to be sent, you can hit the “Save And Preview” button.
You will be then taken to the preview page, where you can take a look at a rendered version of your newsletter, both in a desktop and mobile browser.
Important! While the rendered preview of your newsletter is very useful for testing layout issues, please note that some of the links may not work. This happens because some links are generated only when a real delivery is triggered. If you want to test all your links, use the “Save And Test” button.
