Mailster

Mailster Integration

Our email templates include a Mailster WordPress plugin integrated version, which you can use to send email campaigns directly from your WordPress-powered site.


Structure

The Mailster-integrated files can be found in the /mailster folder.

This folder has the same structure as the standalone files from the /html folder, only that all files inside it are editable or ready to use with Mailster:

  • /all-in-one - all-in-one template .zip file
  • /components - buttons, navigation, spacers, and dividers
  • /grid - the grid system
  • /layout - the base layout file
  • /sections - all the template sections

Only the .zip file from the mailster/all-in-one folder can be imported in Mailster. All other folders are just for creating a Mailster-compatible template yourself.

If you're planning on creating a Mailster template yourself, please first take a look at their documentation, and then at our own templates to understand how to do it.


Uploading to WordPress

Inside the /mailster/all-in-one/ folder, you'll find the all-in-one template .zip file.

This file is what you need to upload under Newsletter/Templates, in WordPress. It contains all pre-built templates, as well as Base and Notification all-in-one templates, which you can choose if you want to start from scratch.

The pre-built templates also include all other sections.

Pro Tip: our Mailster integration comes with automatic download via Envato. Once you've purchased the product, you can simply go to Mailster → Templates → More Templates, and click the Download button for the product. This feature requires that you are logged in on Envato with the account you used to purchase our product.

Supported Template Tags

General functionality
  • Support for the "Auto" feature (magic wand)
  • Background image support - just click a background image to change it

The following Mailster template tags are included:

Template tags
  • module
  • single
  • multi
  • textbutton
Personalization tags
  • {webversionlink}
  • {unsublink}
  • {notification}
  • {copyright}
  • {can-spam}

Customisation

Mailster offers a solid and easy-to-use email builder, accessible right from your WordPress dashboard. Text and images can be customised in a way similar to how you edit your posts and pages, and modules can be ordered with drag and drop.

For advanced users, it also offers the possibility to edit the HTML source code of each module.

HERO With Video

There is currently no way to visually edit the HERO With Video in Mailster, so you will need to edit it entirely through code. To bring up the code editing window, click the </> button on the right, when hovering the section.

The following screenshot highlights all things that you need to edit or can customise:

When finished, hit Save to apply your changes.

Limitations and Other Notes

Although Mailster's builder is quite flexible and works well, it still has a few drawbacks, at least for now.

Conflicting Browser Plugins

The Grammarly browser plugin severely affects online email editors, including Mailster. By injecting itself into the page, it corrupts email HTML, resulting in a broken template.

Please disable any plugins such as Grammarly or Adblock when using an online email builder.

As a rule of thumb, we recommend disabling any plugins that manipulate content on a web page when using any of the integrations provided with our email templates.

Hamburger Menu Icon

To edit the hamburger menu icon, you need to click the 'code' button next to the module in the builder, then edit the icon in the HTML:

Editing the hamburger menu icon
In the code editor that shows up, you then simply replace the image URL with the new one that you want to use.

This is because the hamburger menu icon is only visible on screens no wider than 699px. You can see it when previewing the template in Mailster but, since there's no way of editing the template while previewing the responsive layout, you need to do it in the HTML source code.

Another idea would be to resize your browser window so that you trigger the responsive view of the WordPress dashboard. Adjust the width until the hamburger menu icon is visible, and you will be able to click to replace it.

Background Images

To edit the background image of a section in Mailster, simply click it and you will be presented with the image library modal, where you can choose what image to use.

Mailster will update the image path in all places required, so that background images will render as intended.

Auto content feature

Please keep in mind that this Mailster feature is still in its early stages. It currently cannot correctly fill in multi-column layouts (you can see this with the default Mailster template, too). Until further notice, use it only with single column sections.

Previewing the template in Mailster

Mailster has a preview button (a magnifying glass icon) that will try to show you approximately how the template would look like in desktop and mobile email clients.

Currently, this preview is a bit off when used on some of our templates, in the sense that the desktop preview shows the mobile layout. This is because Mailster's desktop preview area is 660px wide and our template is 700px, so that triggers our template's responsive breakpoint.

Never rely solely on that preview functionality - always send yourself an actual test email, to see exactly how it wil look like in an email client.