The Newsletter Designer is one of the main tools you are going to use when working with the Avoori Newsletters service and where you will most probably spend most of your time creating beautiful newsletter emails.
We are going to explore the two major parts of the new designer, The Tools Sidebar (on the right) and The Newsletter Editor (on the left).
The Tools Sidebar
The tools sidebar is located at the right side of the designer. It consists of four panels:
- Content: from where you can add widgets, buttons, and other content items to your newsletter.
- Columns: This panel helps in adding pre-created columns to your newsletter
- Styles: from where you can change global newsletter styles.
- Preview: to let you preview your newsletter before sending out to subscribers.
It is the most versatile and detail-oriented panel of all yet provides with easy to use drag-and-drop tools.
The text tool allows adding any kind of text to your newsletter. Here’s how you can customize the text.
- Apply the same styles to a number of paragraphs or headers
- Make the text bold or italic
- Change the text color
- Add/remove hyperlinks
- Align the content to the left, right, center or justified
- Use bullets or numbered lists
- Add quotes and newsletter shortcodes
- Directly change the HTML from the text block
In addition, inside the text module you have the shortcode selector that allows you to insert the dynamic content elements (shortcodes) that will allow you to reach a personal connection with your subscribers.
If you need to add images, the image tool lets you choose from already uploaded WordPress images or upload your new images to the system.
As the name reflects, it lets you create buttons. As you drag and drop button to your newsletter. You will need to mouse-over button block and click over the small gear icon to edit the button settings. Most tools contain an options panel similar to this one. This option panel for button lets you edit the label, link, alignment, text, background, border, width, the height of the button and more!
The divider is used to separate content blocks, to provide clarity to readers. You can use as many dividers as you like throughout your newsletter.
You can also increase the top/bottom margin of the divider. Just hover over divider block and drag up or down as you see the ruler to change margin values in pixels.
The spacer works almost exactly like a divider. However, the difference is the lack of visible image. In the case of a spacer, it just provides the needed space and doesn’t add any visual separator, mostly used for empty spaces and margins between content.
The tool provides two main utilities. One to add links to your social media pages such as Facebook, Google+, and Twitter. Second is to add a link to your website or an email (mailto:) link.
Don’t worry if you can’t see to find your favorite social network out of the provided list. You can add your own custom image from the Tool > Settings panel providing an image, link, and text of your choice.
Using Posts panel, you can add any of your website Posts, Pages or even Custom Post Types to your newsletter. As you drag and drop the posts tool into the editor, you will be able to view settings panel options. You can check “Display options” for further configurations and click “Insert selected” when you’re done making the changes.
Automatic Latest Content
It’s similar to Post tool but it automatically adds latest posts in the newsletter without having to manually do it. It’s useful for creating a Post Notification campaign.
It adds the following link to the newsletter browser version only.
“Display problems? Open this email in your web browser”.
Just like the header, an Unsubscribe and Manage subscription links are added in footer. These are mandatory links; additionally, its recommended to also include your postal address.
Otherwise you get such an error:
The Columns Panel
It allows you to add one, two or three columns to the editor. Just drag the tool to the editor and then add other items to each content block.
The Styles Panel
It’s used to set the global styles for all the text inside your newsletter. You can use it to change the text color of the newsletter body and background color of the email. You can also use it to set fonts, color, and sizes for your text and different headings tag.
The Newsletter Editor
You can perform two things in the newsletter editor
- To drag-and-drop objects created using the tools section from the sidebar
- To perform Edit Settings, Delete or Move function on any object, such as a text block, an image, divider, spacer, button, post, etc.. These functions can also be performed at layout columns.
These can be accessed by hovering over content blocks. You will see two or three sets of small gray mini-icons. The icons are actions for the object and the layout, plus to perform discussed functions on objects.