To Access the Editor: Begin at the main Newsletter Dashboard, select “Newsletters,” and then click on “Create Newsletter.” You will be directed to the newsletter composer.
Working Space Overview: Once you select the preset, you will enter the working space, which is divided into two sections: the newsletter area and the blocks sidebar.
Newsletter Area: In the main newsletter area, you will see your newsletter layout. Simply drag and drop the blocks you want to include! Starting from the top, a typical newsletter consists of a header, a body, and a footer. The body area can include elements such as text paragraphs, hero images, calls to action, and more. This is the default view when you first open the newsletter composer.
In this area, you’ll notice:
- The header, featuring the logo and a service text
- The body, contains a hero image, a paragraph, and a call to action
- The footer, which includes contact information and some legal text at the very bottom
- Sidebar Area: On the right side, you will find the sidebar area with all the available blocks.
- These blocks are categorized by function: Header, Content, and Footer, based on the section of the newsletter they typically belong to.
Newsletter Composer Settings:
By clicking on “Settings” at the top right corner of the composer, you can modify the global styles of your newsletter. This includes changing the main background color, block colors, fonts, and button styles.
Adding a Block:
To add a block to your layout, simply click and drag it from the sidebar on the right to your desired position on the left, then release it. If you want to rearrange a block, you can always move it up or down by dragging and dropping it into the new position.
Removing a Block:
To remove a block from the layout, hover over the blocks in the newsletter area until two icons appear on the right. Click on the “x” icon to remove that block from the layout. You can repeat this step to clear the entire layout and start fresh by dragging in your preferred blocks.
Editing a Block:
Our newsletter composer allows you to edit both the block and its content. Note that content-level customizations will always override block-level customizations, so keep this in mind when setting global font families, for example.
Block Options: Clicking on the pencil icon will open a modal box with various layout options. Any settings applied in this box will affect every item within that block. For instance, if you set a specific font family here, all the text blocks within that block will use that font family. This enables you to apply general styling across different parts of your newsletter. The same applies to the background color.
Content Options: Each block contains specific elements that can be edited. For example, the image block allows you to specify the image source and link, while the header block enables you to upload your custom logo and add some introductory text. This edit box varies from element to element but is generally self-explanatory: the Edit Text box will let you edit your paragraph, and so on.
The Blocks:
Each block you find on the right side adds specific content to your newsletter. Use them to customize the look and feel of your email according to its goal. Each block consists of one or more elements and includes special options you can tweak. For example, clicking on the image edit icon inside the image block (just hover over it and the pencil icon will appear) allows you to change the image source and its link.
Here’s a list of blocks you can add to the newsletter, along with a basic explanation of their function and editing options. We will periodically add new blocks in the future, so stay updated by subscribing to our mailing list. Orlando Web Wizard offers premium blocks available to you with our WP Care Packages.
- Header: The beginning of every newsletter, featuring a custom logo area and some text.
- Hero: A large centered image, a strong text heading, a paragraph, and a call to action button.
- Heading: A large paragraph title you can use to start a paragraph or a new section.
- Text: A simple, editable text block.
- Call To Action: Invites your readers to take action, such as “Read more,” “Buy now,” or “Fill out the form.”
- Image: A full-width image, which could be a banner, a product image, or even an animated GIF.
- Blog Posts: Imports the latest posts from your blog, displaying them in a single column with a thumbnail picture, post date, title, and a link to the article.
- Footer: A centered text block to display your contact information and/or a disclaimer.
- Legal Text: A centered text block to show “Unsubscribe” and “View this email in your browser” links. These links are required by the CAN-SPAM Act.
- Social: This block displays social network icons that link to your social profiles. To configure your social profiles, navigate to Company Info > Social panel under the Settings section of the plugin.
Editing the Content:
When editing content, you’ll encounter various editing boxes. Let’s review them one by one.
Edit Text: This is a versatile text editor that allows you to select the font family, font sizes, and font styles (bold, italic, and underlined). You can set up a hyperlink, create ordered lists, insert emoticons, and align text. We’ve included a button with our icon to easily insert our shortcodes into any paragraph.
Edit Image: This simple edit box lets you specify the image source and set a link for that image. You can insert a URL or use the WordPress media uploader. The image will be automatically centered.
Please note: we use stock images courtesy of Unsplash.com as placeholders.
Edit Title: With this edit box, you can set the title itself and its color.
Edit Button: This edit box allows you to style your button. You can set the button label, link, text color, and button background.
Editing the Blocks:
When editing blocks, you will encounter two different editing boxes: one for blocks with blog posts and one for all other blocks. Let’s explore them:
Edit Block (Blog Posts): This edit box allows you to customize how the blog posts should appear in the block. You can set the background color, font family, number of posts to display, their category, and tags.
Edit Block (All Other Blocks): This edit box lets you set the main font family and background color for the specific block. Please note that these settings will not apply if a different font family is set for any inner elements of the block.
Preview Your Newsletter and Send a Test:
Once you feel your newsletter is ready to be sent, remember to click the save button. Now, it’s time to check how it will be displayed when it arrives at its destination. There are two ways to preview it:
Click on the mobile or PC icon in the newsletter area.
Click on “Next” and go to the “Preview” tab.
Important: While the rendered preview is helpful for testing layout issues, please note that some links may not work, as they are only generated during a real delivery.
Send a Test:
After completing the newsletter, it’s a good practice to send a test to yourself. This helps you identify any layout issues and verify that the links and buttons you added are working correctly. By clicking on “Test,” you can either insert an email address or send it to your test subscribers. For more information about subscriber management, click here.
Subject and Snippet:
The subject is the “title” of your email—the first thing your subscribers see when they receive your message. It’s crucial to write an engaging subject line as it significantly influences whether your readers will open or skip your email. Take your time to craft the best possible subject line by asking yourself: if I received an email with that subject, would I open it?
The snippet is a hidden part of the email text displayed by some email clients, like Gmail. If not provided, Gmail will extract the first words of your message to create a snippet. This is particularly important if the first line of your email contains generic links like “view online” or generic text like your site’s title, which may not be relevant to your subscribers.
Common Issues with Images:
Images Not Displayed: Check the Help/System panel for warnings about the images/upload folder configuration: sometimes it is set to “relative,” which is incompatible with emails.
If the email client prompts the user to press a button to unlock images, it is due to privacy settings or lack of trust in the sender. This is beyond the plugin’s control.
For issues with images not displaying on iPhone or Apple devices, refer here for more information, as provider intervention is required.
Emails Look Bad on Outlook, Gmail, Etc.:
Emails created with our composer generally look good across all email clients. However, rendering may vary. For example, Outlook does not support certain types of formatting.
If you created the newsletter using the free editor or HTML, ensure you use very simple layouts; complex layouts may not be rendered correctly by email clients, even if they look good during editing.
Avoid copying and pasting from Word or other editors, as the generated code is almost always unsuitable for email readers.
Recommended Tools:
https://mailtrap.io/html-email-checker/
Check HTML & CSS support for top email clients
See how Gmail, Outlook, Apple Mail, and others will treat your emails. Fix the issues right away.
BACK TO OUR NEWSLETTER:
