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
- Navigate to Email, and select Layouts.
- Prefinery will show our built-in starter layouts.
- 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>
.
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.
When viewing or creating an Email Message within Prefinery's editor, there is an option to associate the Email Message with a Layout.
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.