How to Build a Banner Template

The information discussed in this article is related to Terminus's web experiences offering.

Introduction to Banner Templates

The Banner "Template Type" allows you to build content to be delivered via a content box that sits on either the top or bottom of the screen as a sticky header or sticky footer. 

This template type has three distinct layouts:

• Text
• Text with Bottom Button
• Text with Right Button

Below, we will show you what each layout looks like and the customizations that are available in each. In general:

• Container customizations allow you to change the size, format, colors, and borders associated with particular containers or elements
• Text customizations allow you to change size, font, style, colors, text alignment, and insert dynamic content tokens
• Button customizations allow you to change links, size, font, styles, colors, and alignment
• CSS/JS customizations allow you to add any custom css or js that you’d like to apply to your content

Though the template editor orients the banner at the top of the page for content creation, these banner can be used at the top or bottom of the page when applied to a Banner Campaign (this is discussed more in the “How To: Create/Edit Rules” resource.)

Banner Template Best Practices

• Banners are best used for short 1-2 line messages with 1-2 word calls to action.  
• If you want to provide an important piece of information with no associated action, use the Text template.
• If you want to prompt a specific action by your website visitors, use either the Bottom Button or Right Button templates. 
• If you’d like to provide a form input using the Text and Form template, we recommend limiting that input to a single field.
• Text and CTAs:
  • We recommend limiting banner text to 10-15 words to maintain a single line of text
  • Calls to Action (button text) and best limited to 2-3 words
• Where to use:
  • Banners are particularly useful when delivered sitewide.
  • Can be used at the top or bottom of the page, but using a contrasting color for the background to ensure they stand out from the page content. 
• When to use:
  • Effective for text-only content 
  • Very useful when you have a lot of mobile traffic (banners are a good mobile experience).
  • Alert-style messaging or time-sensitive messaging is a great application of banners 
• Size Recommendation:
  • Banners will size accordingly to the text. We typically recommend that users keep banners to a single line of text. If you need more text, consider using a smaller font. 

Banner Layouts

Text Layout

This layout is the best option for any text only messaging. As seen above, the fields available for customization are:

• Base
• Text
• Close Button

When to use:

• Use this layout if you have an important FYI to share with your website visitors.
• Use this layout when you have an alert or urgent message for a subset of your traffic.

Text with Bottom Button Layout

This orients the text in a row above the call to action button. These are the primary fields available for customization:

• Base
• Text
• CTA
• Close Button

When to use:

• This layout is good if you have longer text that you’d like to use in your messaging. Best practice is to limit your copy to no more than 1-2 sentences.
• It is important to remember that if you use a lot of text, this banner could become even more substantial, particularly on mobile, taking up a larger portion of the page.
  
  

Text with Right Button

This layout allows you to create a banner with a line of text and a call to action button. The primary fields available for customization are:

• Base
• Text
• CTA
• Close Button

When to use:

• This layout is a good choice when you have a short message with a CTA and you want to use as little real estate on the page as possible