Amplify Designer Sections: Video Banner

Video Banners in Amplify are a flexible way to add motion and visual interest to a page. You can choose from multiple layout styles and customize colors to match your site’s look and feel.

This article walks through how to add a Video Banner, select a layout, and configure videos, titles, buttons, and colors.

Add a Video Banner to a Page

1. Go to the Amplify page you wish to add a Video banner to.

2. Click any blue + icon where you want to add a Designer Section.

3. Select Video Banner, then click Apply.

Choose a Layout

1. Click Change Layout. 

2.  Review the layout options below, select the style you want, then click Apply.

   Available Layouts

   • Banner Centered
     Displays the video with centered text overlay. This is a great all-purpose option for headlines or announcements.
   • Banner Left
     Positions the text overlay to the left, creating a more editorial or asymmetric look.

   • Overlay Centered
     Places the text directly over the video and centers it for a bold, focused message.

   • Overlay Left
     Aligns overlay text to the left while keeping it layered over the video.

   • Wave Bottom
     Adds a decorative wave shape to the bottom of the banner for a softer visual transition into page content.

   • Wave Top
     Displays the wave at the top of the banner, helping visually separate it from content above.

Add the Video

1. Click Add Video.

2. Choose a video that’s already uploaded, or select Upload a Video to upload one from your computer.

3. Click Save.

Recommended video sizes

• Video: 2000x700
  • It can be taller vertically, but it will take up more space on the screen. 

Add the Title and Subtitle

Before you can save the section, you must enter a Title and Subtitle.

1. Enter your Title in the Title field.

2. Enter your Subtitle in the Subtitle field.

Optional: Link a Page and Add Button Text

If you want the banner button to take users to another page:

1. Click Add Page.

2. Select the page you want to link, then click Save.

3. Enter Button Text.
   Button Text is required when a page is linked so visitors have something to click.

Customizing Colors

You can further personalize your Video Banner by adjusting colors:

• Overlay color
  Controls the background color behind overlay text to improve contrast and readability.

• Wave color
  Adjusts the color of the wave when using the Wave Top or Wave Bottom layouts.

Color controls are located toward the bottom of the Video Banner settings, making it easy to experiment and preview changes.

Save and Preview

When you’re finished configuring the Video Banner, click Save to publish and preview it on your page.

Step-by-Step Walkthrough

Use the step-by-step Scribe walkthrough to follow along with adding and configuring a Video Banner in Amplify.