How to Build a Modal Template

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

Introduction to Modal Templates 

The Modal "Template Type" allows you to build content to be delivered via modal (or pop-up). 

This template type has six distinct layouts:

• Image Upload
• Background color
• Background image
• Blank
• Image on left with text
• Top image with text

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
• Image customizations allow you to change size, placement and opacity
• CSS/JS customizations allow you to add any custom css or js that you’d like to apply to your content

Modal Template Best Practices

• If you are going to recycle ad creative to use onsite, you will want to use the Image Upload template
• If you want to create dynamic content AND use an image, you will want to use the Background Image template, the Image on Left with Text template, or the Top Image with Text template. Both of these will allow you to insert content tokens in the text field
• If you want to create dynamic content without an image, you will want to use the Background Color template. This will allow you to insert a content token, but will not require an image
• If you want to insert an HTML element like a form or a video, the Blank template will provide a field for that code to be added. 
• Text and CTAs:
  • Because of the size and central focus of a modal, visual content performs very well (re-using high performing ad creative can be a very effective application) 
  • Try to keep headlines to 1-2 lines and subheaders to 3-4 lines 
  • Sub-headers are not always necessary 
• Where to use:
  • Top landing pages 
  • Other high traffic, interior pages 
• When to use:
  • Use when you have important, time-sensitive, or conversion-focused messaging
  • Thes are very powerful at driving directly to conversion points (forms, high-value assets, etc) 
  • Try to avoid using these for really broad audiences and keep them targeted 
• Size Recommendation:
  • We recommend 400 x 400 px as an initial starting point for modal banners

Note: Use the different screen size options in the top left to test your modal’s appearance.

Modal Template Layouts

Image Upload Layout

This layout is the best option for using existing creative assets - particularly existing ad creative. As seen above, this layout has the following elements available for customization:

• Base
• Image
• Close Button

The image customizations will allow you to upload an existing image file, provide a click through link, and add any alt or title attributes that you’d like. 

When to use:

• Use this layout when repurposing existing creative from other campaigns.
• Use this layout when the content you want to share is just a static image.

Background Color Layout

This layout allows you to create a simple, image-free modal. As seen above, you have the following elements available for customization:

• Base
• Close Button
• Heading
• Body
• CTA

When to use: 

• This layout is a good choice for text-only modals. The background can be any color and allows you to focus only on copy.
• This layout is also helpful if you want to serve a dynamic modal (one where the text updates based upon the visitor), but you don’t want to incorporate an image. This layout will allow you to insert content tokens into any of the three text fields (headline, body, call to action)

Full Background Image Layout

This layout allows you to create a modal where the text and the call to action sit on top of an image. The image comprises the full background. As seen above, you have the following elements available for customization:

• Base
• Close Button
• Background Image
• Heading
• Body
• CTA

When to use:

• This layout is a good choice if you have a primary image that you’d like to appear behind the text and call to action. 
• This layout works best if your background image is muted, allowing the text to stand out.

Blank Layout

This layout provides a blank field for text and/or html content. Additionally, the Custom CSS/JS is available in this template (as it is in all templates) to further customize your content. These are the primary fields available for customization:

• Base
• Content (text/HTML)
• Close Button

When to use:

• This layout is what you should use if you want to insert a form or video into your modal. The blank field will provide you the flexibility you need to use your embed code to directly insert forms, videos, and other custom content for use in your modal.

Image on Left with Text Layout

This layout allows you to create a modal with the image on the left and the text on the right. As seen above, you have the following elements available for customization:

• Base
• Close Button
• Image - left side
• Heading
• Body
• CTA

When to use:

• This layout is a good choice when you have an image you’d like to feature alongside text. It works particularly well for vertically oriented images (because serving a vertically oriented image on top of text fields can make the modal a bit too tall).
• This is also a good layout if you’d like to use content tokens to serve dynamic text.

Top Image With Text Layout

This layout allows you to create a modal with the image on top (either horizontally or vertically aligned) and the text below. As seen above, you have the following elements available for customization:

• Base
• Close Button
• Image - top
• Heading
• Body
• CTA

 When to use:

• This layout is a good choice when you have an image you’d like to feature alongside text. It works particularly well for horizontally oriented images (because serving a horizontally oriented image next to text fields can make the modal a bit too wide).
• This is also a good layout if you’d like to use content tokens to serve dynamic text.