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.
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 the vertical 3-dot menu next to a starter layout then Edit, 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 button.
When you start a project, all email messages will use the default Modern email layout, and this layout will take information you entered during the project creation wizard (e.g. company name and address) like what's set in the email footer.
To change this, you can either edit your existing custom layout (if you've already created and used one) or click on Edit for the Modern starter layout. You can then change the information in the footer content block.
Save your changes and make sure this newly edited custom layout is applied to your email message(s).
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 to the new one you just created/edited, 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.