Using Prefinery Email Layouts

Layouts let you wrap your email messages reusable CSS styles, headers, and footers. 

This allows all of your email messages to share common elements. Each individual email message only contains the content of the email, while the reusable content is shared with the chosen Email Layout.

Using Layouts

To give you a head start, Prefinery comes with a few starter Email Layouts. The adventurous can also code their own Email Layout from scratch.

Adding a Layout

1. Navigate to Email, and select Layouts.
2. Prefinery will show our built-in starter layouts.
3. Click Edit next to a starter layout or Click Add a Layout to add your own from scratch.

Editing Layouts

Visual Editor

Prefinery provides an easy to use block-based visual editor to help you create an amazing Email Layout.

This editor will auto-save your changes, every 20 seconds. Or, if you need to leave the page, just click the Save Layout button.

HTML Editor

Alternatively, you can choose to use our HTML editor for full control over the Email Layout.

Note: Changes you make in the HTML editor are not reflected in the Visual Editor. If you make HTML edits to your layout, then switch back to the Visual Editor and make additional edits, your HTML edits will be overwritten. 

Required Tags

To indicate where your Email Message content will go, use the content placeholder {{content}}.

A single content placeholder is required to save a layout. By default, the content placeholder is added to the starter Email Layouts.

You are also required to include an unsubscribe link using the tag {{unsubscribe_url}}. This tag should be wrapped in a link, such as <a href="{{unsubscribe_url}}">unsubscribe</a>. 

Optional Tags

When editing messages, you can specify your Preheader Text which is dynamically inserted into the email layout used by this email message. 

To have your email layout dynamically replace the Preheader Text with the value set in your email messages, you'll need to make sure that the {{preheader}} tag is set in your email layout Body settings as shown below:

To learn more about Preheader Text and steps on how to set the tag/variable, please see: Setting Email Message Preheader Text

CSS Inlining

CSS inlining is controlled at the Email Message level. It is automatically enabled for all new Email Messages, but can optionally be disabled. See this CSS inlining article for more information.

Associating Email Messages with a Layout

New or existing Email Messages can use Layouts.

To apply a layout to all messages, just navigate to Email > Layouts, find the layout you'd like to use, click on its Actions dropdown and select Apply to all emails.

If you prefer to only apply a specific layout to specific email messages, go to Email > Messages, then edit the message. In its Settings tab, set the Layout and Save your changes. 

After selecting a Layout, choosing Preview will show the Email Message content as it will appear in the Layout. This lets you see how your Email Message will look when sending an email. If you have multiple Layouts, you can also switch between Layouts to see how the Email Message content would appear in different Layouts.