Learn more
Understanding the Template Pak
Component name: Preheader
Display Details:
Use the preheader section to expand on the subject line to entice readers to open your email. Keep it outside of the body of the email like we have it by default or choose to change the background color by clicking to highlight the blue box around the section.
Best Used for:
Improving open rates
Expanding on the subject line
Eliminating extraneous code showing up in the inbox
What it can look like:
Component Name: Header Block
Display Details:
Create a streamlined header for your email campaign. Typically you will want to prominently display your organization’s logo at the beginning of the email for branding purposes. Here you have the option to show the logo either left, right or centered. Note: we’re not inserting a full width image in yet. An eye-catching banner can come after the header block, when you are in the body of the email. Instead focus on inserting a 220px wide image (for optimal display ratios) and choosing any text needs you want for newsletter volume number and date.
Best Used for:
What it can look like:
Association branding
Creating an eye catching header for your message
Prominently display your logo
Scroll through to see at a glance the full menu of options inside the Master Template. As you click to expand on a particular section, discover details about the section, best ways to use that particular set of modules, and the potential for what it could look like. Reference again and again as needed for details and inspiration.
Component Name: Articles
Display Details:
The Articles components can be used to grab readers’ attention and direct them to “Read More” on the related landing page or blog. They can also be used in cases where more text is needed along with the image. Article modules can render with several image size options and the image can be placed to the left, right, or above text blocks. Header, subtext, and link text are all optional items in this component. Images can also be omitted.
Best Used for:
What it can look like:
Featured blogs or articles
Featured products, services, or solutions
Adding visual appeal to heavy blocks of text
Component Name: Article Text Only
Display Details:
Sometimes you need to display a set of articles where there is no image desired. These elements combine a header 2 component with a text only component. One visual option is to create a header 1 block as a section header above a group of articles text only blocks and adding a Read More link.
Best Used for:
What it can look like:
Groupings of blog articles or news stories
Simple promotions where no image is needed
Component Name: Text Only Components
Display Details:
Sometimes you just need a simple text option. These elements offer the option with a text only component in a range of ratios of columns for inputting text. The rule of thumb is if you need larger text to choose from the headers and not enlarging text in a text box.
Best Used for:
What it can look like:
Groupings of blog articles or news stories
Articles where a citation or date is needed
Component Name: Articles
Display Details:
The Articles components can be used to grab readers’ attention and direct them to “Read More” on the related landing page or blog. They can also be used in cases where more text is needed along with the image. Article modules can render with several image size options and the image can be placed to the left, right, or above text blocks. Header, subtext, and link text are all optional items in this component. Images can also be omitted.
Best Used for:
What it can look like:
Featured blogs or articles
Featured products, services, or solutions
Adding visual appeal to heavy blocks of text
Component Name: Background Image 1:1
Display Details:
Use the background image to save space and give a web like appearance to your email while maintaining live text for screen readers. Make sure you contrast your text color to the image. Image size is 630 pixels.
Best Used for:
What it can look like:
Hero images
Background textures
Making important content stand out
Component Name: Articles
Display Details:
The Articles components can be used to grab readers’ attention and direct them to “Read More” on the related landing page or blog. They can also be used in cases where more text is needed along with the image. Article modules can render with several image size options and the image can be placed to the left, right, or above text blocks. Header, subtext, and link text are all optional items in this component. Images can also be omitted.
Best Used for:
What it can look like:
Featured blogs or articles
Featured products, services, or solutions
Adding visual appeal to heavy blocks of text
Component Name:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam lorem, vehicula eget metus nec, rutrum suscipit sem. Vivamus tincidunt placerat felis, a ullamcorper nisl luctus eget.
Display Details:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam lorem, vehicula eget metus nec, rutrum suscipit sem. Vivamus tincidunt placerat felis, a ullamcorper nisl luctus eget.
Best Used for:
What it can look like:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Component Name:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam lorem, vehicula eget metus nec, rutrum suscipit sem. Vivamus tincidunt placerat felis, a ullamcorper nisl luctus eget.
Display Details:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam lorem, vehicula eget metus nec, rutrum suscipit sem. Vivamus tincidunt placerat felis, a ullamcorper nisl luctus eget.
Best Used for:
What it can look like:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Component Name: Event
Display Details:
Use the Event components to highlight an upcoming event and encourage registration. The Event 1:2 “Hero” component features a bit more prominent space and can include additional details on the event. This can be added above or below featured Event content, or can be added as a subtopic to a newsletter or a different email campaign.
Best Used for:
What it can look like:
Upcoming webinar registration
Conference registration
Partner events
Component Name: Product
Display Details:
Use the Product component to feature a product with a description, price, and CTA button. While height can vary, width is fixed at 145px.
Best Used for:
What it can look like:
Featured products or services
Component Name: Image 1:2 50/50
Display Details:
Use the Image 1:2 50/50 component to display 2 columns of images. These images have an optional caption below the images as well and can be linked to a URL. While height can vary, width is fixed at 305px.
Best Used for:
What it can look like:
Featured products or services
Featured logos
Images or graphics to illustrate an article or text block above
Component Name: Image 1:3
Display Details:
Use the Image 1:3 component to display 3 columns of images. These images have an optional caption below the images as well and can be linked to a URL. While height can vary, width is fixed at 195px.
Best Used for:
What it can look like:
Featured products or service
Featured logos
Images or graphics to illustrate an article or text block above
Component Name: Image 1:4
Display Details:
Use the Image 1:4 component to display 4 columns of images. These images have an optional caption below the images as well and can be linked to a URL. While height can vary, width is fixed at 145px.
Best Used for:
What it can look like:
Featured products or services
Featured logos
Images or graphics to illustrate an article or text block above
Creating a consistent header plan for your email portfolio
Component Name: Hero Article Elements
Display Details:
The hero article in your email campaign typically contains a hero image, an article header, article copy and a read more button. You have the freedom to utilize the Image 1:1 component, Header Text 1, 2, or 3, Text 1:1, bullets, and/or a centered button to create one cohesive element. The hero image is an image set to 630px X 420px, but the height can vary. The rule of thumb is to avoid enlarging text in a text area and choosing from one of the header tags instead. Each component can be customized to have its own background color in the template. You can set the color for button colors as well.
What it can look like:
Best Used for:
The main article of your email
Creating full-width headers to break up the message
Creating bullet-proof lists that will render across all clients
Simple article copy to entice the user to click
Component Name: Articles
Display Details:
The Articles components can be used to grab readers’ attention and direct them to “Read More” on the related landing page or blog. They can also be used in cases where more text is needed along with the image. Article modules can render with several image size options and the image can be placed to the left, right, or above text blocks. Header, subtext, and link text are all optional items in this component. Images can also be omitted.
Best Used for:
What it can look like:
Featured blogs or articles
Featured products, services, or solutions
Adding visual appeal to heavy blocks of text
Component Name: Articles
Display Details:
The Articles components can be used to grab readers’ attention and direct them to “Read More” on the related landing page or blog. They can also be used in cases where more text is needed along with the image. Article modules can render with several image size options and the image can be placed to the left, right, or above text blocks. Header, subtext, and link text are all optional items in this component. Images can also be omitted.
Best Used for:
What it can look like:
Featured blogs or articles
Featured products, services, or solutions
Adding visual appeal to heavy blocks of text
Component Name: Source
Display Details:
The source component can be used to inject any external HTML code into your email template. This can be used in a variety of ways, but some examples might be real-time content, embedded videos, or RSS feeds. This module is flexible to the HTML injected, but will need to remain in the parameters of the email width.
Best Used for:
What it can look like:
Countdown timer
Video embed code
RSS feed code
Fundraiser or goal gauge
This interactive infographic is your guide to reference for every email you build out. As you scroll through, click the plus signs to open up a window that shares display details, use cases, and picture examples of how you can use that particular module. It's designed to show you the modules you have available to you as you break up your email content and build your emails at scale. The goal is to provide a framework that you can use to create great looking emails that convert, while still following email best practices without the need for custom modules.