Template Pak

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:

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:

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

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

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

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:

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:

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.