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 support for the Zurb Foundation for Emails framework makes your mass mailing email messages look great without any extra work from you.

Layouts can be found in both the Mass Mailing -> Send a Message, and Mass Mailing -> Send a Webpage screen. Look for the row tabs:  HTML Version, PlainText Version, Attachments… – the next tab will be labeled, Layout.

Clicking the Layout tab will reveal the layout choices available:

• Full Layout
• Minimal Layout
• For Discussion List Messages
• Don’t use a Layout

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:

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. 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!

Here’s what our message looks like with the Full Layout applied:

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:

The top banner shows our company’s logo (set this in Mailing List -> List Information), 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:

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.

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!)

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  individual subscriber. You won’t have to handle this yourself.

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 screen.

Let’s try the Minimal layout:

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.

For Discussion List Messages is similar to the Minimal 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.

Don’t use a Layout is really the absence of a layout. Let’s try it on the message we have now:

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 be sent with an unsubscribe link. For our message, Don’t use a Layout 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.

We 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,

<!-- tmpl_var list_unsubscribe_link -->

When 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:

<html>
<head>
    <title></title>
</head>
<body>
<h1>Learn to Rock Climb Today!</h1>

<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>

<p>Climbing is the fastest growing sport world-wide! Scale our incredible, 20 meter walls - your first visit is free!</p>

<p><a href="<!-- tmpl_var list_unsubscribe_link -->">Unsubscribe Automatically - click here</a></p>
</body>
</html>

Now when we preview the message, the automatically inserted unsubscribe link is gone, leaving only our link:

So that’s an introduction to layouts! What’s your take on layouts, have you found them useful for your own mass mailings?

Dada Mail 10 introduces Email Themes, as well as also allowing you to create your own custom email theme. We cover how to to work with email themes in the docs at: http://dadamailproject.com/support/documentation-10_x_x/features-email_themes.pod.html

In this post, we’re going to go over how to do the actual customization, and start using our new theme live on our own site.

First, we’re going to make a project using the Foundation for Emails Sass workflow. In the command line, I need to type in the following:

foundation new --framework emails

I’ll be prompted for a new name for my project. I called mine,  dada_mail_site.

We’ll then download the starter theme, and merge these two directories together, as we’ve documented here. We’ll then start the build process,

npm run build

The build process will detect whenever we’ve changed any of the source files of the project, and recreate the distribution files (located in, dist) so they’re always up to date.

Now that everything is all set up, let’s do some customization!

I’d like the header and footer of my messages to have the same deep red that Dada Mail’s default UI has. I also want the text in the banner and footer to be white, rather than black, to stand out with the darker background. Finally, I’d also like the default text to be a little larger and a dark grey, rather than black.

Let’s work on the default text size and color first. This is controlled in the, src/assets/scss/_settings.scss file. This file contains Sass, which will be transformed in the cascading style sheet (CSS) that the theme will eventually use.

Among many things, Sass adds variables to vanilla CSS, letting you write less CSS, and do it more simply. For the color of the text, look for the following line:

$global-font-color: $black;

There’s a few ways to change this, but for this demo, we’re just going to change $black to a hex value that represents a dark grey:

$global-font-color: #808080;

Let’s now change the default size of our text. Look for,

$global-font-size: 14px;

We’re  going to change this to,

$global-font-size: 15px;

Now, let’s tackle that banner and footer color. For that, we’re going to open up the, src/assets/scss/app.scss file. There’s a few css classes that have the background set to the default grey, like this one:

.banner {
  background: #e9ebee;
}

We’ll want to change those, to our dark red. Here are the lines with the changes I’ve made – the original have simply been commented out,

.banner {
  //background: #e9ebee;
  background: #990000;
}

.banner .container {
  //background: #e9ebee;
 background: #990000;
}

.wrapper.secondary {
  //background: #e9ebee;
  background: #990000;
}

That takes care of the banner and footer background color.

Now for the color of our text inside the banner and footer. In the same app.scss file, find,

.banner p {
  color: #000000;
  margin-bottom: 0;
}

This css snippet sets the color to black. Let’s make ours white:

.banner p {
  color: #ffffff;
  margin-bottom: 0;
}

And, we’re all done! If the build process has been running, we can now just simply upload our new theme into Dada Mail’s support files directory:

On our site, we’ll navigate to the dada_mail_support_files directory, then go to themes/email. I’ll create a new directory with the same as the name of my Foundation for Emails project: dada_mail_site. I’ll change into that directory, and copy over the entire dist directory my project has made, inside the dada_mail_site directory. Once that’s complete, my theme is essentially, “installed”!

Let’s set up my mailing list to use it. I’m going to log into my list, then navigate to, Appearance -> Email Themes. Our new theme should now be listed when we click on the popup menu. Select it, and Save!

Done! Let’s test it out o the Mass Mailing -> Send a Message screen. This screen has the ability to preview a message, before sending it out. On this screen, I wrote a simple message, clicked the, Preview button:

Looks pretty good! I’m going to add the following as my Login Image URL in, Mailing List -> List Information:

Let’s try the preview again:

Looks great!

We’ve just scratched the surface on how to create a custom email theme for Dada Mail. Please try it yourself, and let us know if you have any questions or comments!