Zurb Foundation for Emails <\/a>framework makes your mass mailing email messages look great without any extra work from you.<\/p>\nLayouts can be found in both the Mass Mailing -> Send a Message<\/strong>, and Mass Mailing -> Send a Webpage<\/strong> screen. Look for the row tabs:\u00a0 HTML Version, PlainText Version, Attachments… – the next tab will be labeled, Layout<\/strong>.<\/p>\nClicking the Layout<\/strong> tab will reveal the layout choices available:<\/p>\n\n- Full Layout<\/li>\n
- Minimal Layout<\/li>\n
- For Discussion List Messages<\/li>\n
- Don’t use a Layout<\/li>\n<\/ul>\n
Let’s use a simple email message with a header, an image, and some text to illustrate how these layouts all work. I’ve put together this message as my HTML Version:<\/p>\n
![\"rockclimb_example1\"](\"http:\/\/blog.dadamailproject.com\/wp-content\/uploads\/2016\/10\/rockclimb_example1-1024x806.jpg\")
<\/p>\n
Now, let’s see what this message will look like when we apply one of the included layouts. In v10, there’s a new button on the top bottom bar labeled, Preview<\/strong>. Clicking this button will show a preview of your mailing list message in a modal window with your selected layout applied. This saves you quite a bit of time with testing: no need to send yourself test email messages anymore, just to double-check that your email looks good!<\/p>\nHere’s what our message looks like with the Full Layout <\/strong>applied:<\/p>\n![\"rockclimb_example2\"](\"http:\/\/blog.dadamailproject.com\/wp-content\/uploads\/2016\/10\/rockclimb_example2.jpg\")
<\/p>\n
Looks great! With the full layout, we’ve made a simple email message look professional, with minimal effort. Let’s break down what we’re looking at:<\/p>\n
The top banner shows our company’s logo (set this in Mailing List -> List Information<\/strong>), as well as the preheader. The preheader will also show up in mail readers as the first bit of text revealed in the email message, like this:<\/p>\n![\"rockclimb_example3\"](\"http:\/\/blog.dadamailproject.com\/wp-content\/uploads\/2016\/10\/rockclimb_example3.jpg\")
<\/p>\n
After the banner, there is a small (literally!) line of text, which gives a link to the publicly available archived message, so that if the message below isn’t viewable, you can still see the message from the archive.<\/p>\n
Then, there’s your fine message. You’ll notice that the text has been styled to use what’s set in the email theme, so there’s no need to do that while authoring your message in the Send a Message screen (although, you can, if you’d like!)<\/p>\n
Afterwards, there is a section that has buttons and links to forward the message to a friend, manage the subscription, and unsubscribe from the mailing list. These links are specific to the\u00a0 individual subscriber. You won’t have to handle this yourself.<\/p>\n
Below this information is the message footer, which has contact information, and social networking links. This information can also be added to, and edited in the Mailing List -> List Information<\/strong> screen.<\/p>\nLet’s try the Minimal<\/strong> layout:<\/p>\n![\"rockclimb_example4\"](\"http:\/\/blog.dadamailproject.com\/wp-content\/uploads\/2016\/10\/rockclimb_example4.jpg\")
<\/p>\n
If your main content deserves front and center treatment, this is the template to use. Gone is the top banner and bottom social networking links for a more clean appearance. The unsubscribe link is still present, to keep with mailing list best practices.<\/p>\n
For Discussion List Messages <\/strong>is similar to the Minimal<\/strong> layout, but as you may have guessed, is designed specifically for discussion list messages, with a large button to start a new post. This theme is used by default if you’re running a discussion list.
\n<\/strong><\/p>\nDon’t use a Layout<\/strong> is really the absence of a layout. Let’s try it on the message we have now:
\n<\/strong><\/p>\n![\"rockclimb_example5\"](\"http:\/\/blog.dadamailproject.com\/wp-content\/uploads\/2016\/10\/rockclimb_example5.jpg\")
<\/p>\n
As you can see, no layout or styling is applied. One curious artifact of this is that a unsubscribe link is added to the top of the message, since Dada Mail did not detect one in the mailing list message itself. This is done since Dada Mail enforces the rule that all public mailing list messages MUST<\/strong> be sent with an unsubscribe link. For our message, Don’t use a Layout<\/strong> wouldn’t be the best suggest for a layout, but if you have a full-blown message with its own layout that you don’t want encased in one of the other provided layouts options, this would be a good option choose.<\/p>\nWe can move that unsubscribe link from the top, to the bottom of our message by just adding our won unsubcribe link. To do that in Dada Mail, we use the following tag,<\/p>\n
<!-- tmpl_var list_unsubscribe_link --><\/pre>\nWhen the message is sent, this tag will be replaced with an unsubscribe link that is unique to the subscriber and specific mass mailing. Here’s the source of my simple message, with that unsubscribe link added at the bottom:<\/p>\n
<html>\r\n<head>\r\n\u00a0\u00a0 \u00a0<title><\/title>\r\n<\/head>\r\n<body>\r\n<h1>Learn to Rock Climb Today!<\/h1>\r\n\r\n<p style=\"text-align: center;\"><img alt=\"\" src=\"http:\/\/dancingindigochild.local\/dm\/dada_mail_support_files\/file_uploads\/images\/climbing(1).jpg\" style=\"width: 500px; height: 283px;\" \/><\/p>\r\n\r\n<p>Climbing is the fastest growing sport world-wide! Scale our incredible, 20 meter walls - your first visit is free!<\/p>\r\n\r\n<p><a href=\"<!-- tmpl_var list_unsubscribe_link --><\/strong>\">Unsubscribe Automatically - click here<\/a><\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nNow when we preview the message, the automatically inserted unsubscribe link is gone, leaving only our link:<\/p>\n
![\"rockclimb_example6\"](\"http:\/\/blog.dadamailproject.com\/wp-content\/uploads\/2016\/10\/rockclimb_example6.jpg\")
<\/p>\n
So that’s an introduction to layouts! What’s your take on layouts, have you found them useful for your own mass mailings?<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
Easily wrap your mass mailing message in one of the provided layouts that come with Dada Mail. Layouts provide the necessary information for your mailing list message, so you don’t have to: things like making sure the unsubscription link is included correctly in every single mass mailing message you send out. Layouts and Dada Mail’s […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[1],"tags":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paVOyw-1b","_links":{"self":[{"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/posts\/73"}],"collection":[{"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/comments?post=73"}],"version-history":[{"count":2,"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/posts\/73\/revisions"}],"predecessor-version":[{"id":81,"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/posts\/73\/revisions\/81"}],"wp:attachment":[{"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/media?parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/categories?post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.dadamailproject.com\/wp-json\/wp\/v2\/tags?post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}