The RSVP Mailer email templating system for the WordPress editor now provides powerful styling options, and I’d love to see what those of you who have stronger design skills than I do can do with it. Send me a sample, and I’ll feature it here as part of a design showcase.
These capabilities are being developed in concert with the beta of RSVPMaker integration for Postmark.
On a technical level, one improvement I’ve added recently is the ability to set a background image for the “wrapper block” that defines the background of an email message. Here’s an example of a message that uses a variation on the stylized calendar image I use on the header of my website.
And another as an example of a fictional nature lover organization’s newsletter.
I’m not suggesting that everyone should use this special effect, only that it’s one of the tools RSVPMaker makes available to you within the WordPress editor when you compose your messages. One of the virtues of creating email content this way is you can apply most of the same techniques you would to authoring and styling a blog post or web page.
Here’s that nature walk email as it appears in the editor.
The default structure of RSVP Mailer messages is an Email Body Wrapper, which frames the rest of the content, wrapped around the Email Content Wrapper, within which you place your headings, images, paragraphs, and other content. To make it easier to select the body body wrapper block, you can may want to toggle on the List View from the stair-step icon at the top of the screen. This will allow you to see the background color selection controls shown in the right hand sidebar above.
Scroll down a little farther within that sidebar on the right, and you’ll see an option to add a background image and set a couple of relevant CSS parameters, such as whether the image should repeat and whether it should be set to “cover” (fill the available area within the email body) or “contain” (fit within the available area).
A vertical or “portrait” aligned image will tend to work better in an email context than a horizontal image.
If you do choose to use a background image, I recommend also setting a background color that will look good in your layout if the image is not displayed for whatever reason. Since the background image code will point to your web server, it might not be displayed if the user is viewing the message offline or if their Internet connection is not strong.
Mostly, I find it works fine.
In many cases, rather than adding a background image, you might want to stop at tweaking the background color and adding a logo up top, as in the examples below. This first one is for a client who runs an investigative news site with stories about Florida scandals (an embarrassment of riches), with the logo and background color matching those you can see at floridabulldog.org. The editor’s desire to find a more cost-effective way of sending out news bulletins is what got started me researching the new (beta) Postmark integration with RSVPMaker.
I also do a lot of work with Toastmasters, and this is the prototype of a newsletter for my clients at Toastmasters District 62, with an email template based on Toastmasters brand colors.
Defining a Default Email Template and Alternate Templates
Visit the Email Design Templates screen of the WordPress dashboard (a submenu item under RSVP Mailer), to change your default email template for newsletters and other broadcasts, your transactional template (for messages such as RSVP Confirmations), and any alternate designs you may use from time to time. You can see previews of your current Email Templates and add any Custom CSS you would like used with your messages.
This screen is handy for creating a new message based on the design of one of your previous messages, as well as for choosing a design you want to serve as your default template going forward.
Codes like *|EMAIL|* included in the default templates are MailChimp template codes, also used by RSVPMaker independent of WordPress. Including an unsubscribe link and information about who is responsible for messages sent from your website is important for regulatory compliance. You should leave those codes in place, but you can reformat them as you think appropriate.
