How to Build a Homepage Banner in Convertri (With Video Tutorial)

Learn how to create a homepage banner in Convertri using background video. Follow this step-by-step guide to design and publish your header section.

Creating a website banner is one of the most effective ways to capture traffic and immediately communicate your brand story.

Whether you’re using web banners for your digital marketing campaigns or building a landing page, a well-crafted banner design with a call to action can drive conversions for your business.

In this guide, we’ll show you exactly how Convertri’s homepage banner is built, step by step, using a banner template approach to simplify the process.

What is a Homepage Banner

A homepage banner is the first visual element visitors see on your website or online platform. It usually spans the full width of the page and can include:

• Images, graphics, or animated banners
• Headlines and subheadlines
• Call-to-action buttons
• Overlay panels for text readability

Banners are used to capture attention, display your message, and encourage visitors to sign up, explore blogs, or engage with your platform. They are a great example of how your brand, logos, and fonts can be used effectively to tell a story online.

Step-by-Step: Building a Homepage Banner

Here’s how to create your homepage banner in Convertri.

Check out the video to see the full demo.

1. Create a New Page

• Go to your Convertri dashboard and select “Create New Page.”

• Choose a blank banner template or an existing layout to start with.

  
  

2. Add a Background Video

• Go to the Media tab and select Background Video.
• This will add a banner container to your page.

• In the Video Source field, paste the URL of your video (e.g., from Amazon S3, YouTube, or your Convertri Pro upload).

  
  

3. Add Overlay Panels

• To make your text easier to read, place a panel element over the video.
• Set the panel’s color to black (or dark gray) and reduce opacity to around 20–40%.

This ensures your message stands out without dimming the video too much.

4. Add Text and Buttons

• Customize by adding a text element over the overlay panel for your headline.
• Use fonts consistent with your brand and adjust size and alignment.
• Add CTA buttons for actions like “Sign Up” or “Download.

5. Adjust Styling of Web Banner Design

• Fine-tune the panel transparency, text size, and button placement.
• Add icons, animations, logos, or small graphics to reinforce your brand story.
• Preview your page in desktop and mobile view to check readability.

Adding a Background Video in Convertri

Animated banners are a powerful way to capture traffic instantly. Consider these points:

• When to use:
  • Product demos
  • Lifestyle imagery
  • Animated banner design for landing pages
• Requirements:
  • File formats: MP4 (H.264)
  • Resolution: 1080p recommended for desktop
  • File size: Ideally under 20–30 MB for faster loading
  • Hosting: S3, Convertri Pro upload, or another CDN

Tip: Always provide a fallback image for mobile or slow connections to prevent broken backgrounds. This is especially important if you plan to display the banner on Facebook or other online platforms.

Common Issues & Fixes

Examples of Effective Homepage Banners

• Convertri Homepage: Black transparent overlay, bold headline, animated video background—a great example of banner design.
• E-commerce Landing Page: Lifestyle video showing the product in action with a clear call to action and sign-up button.
• SaaS Service: Short looping demo video with concise headline, icons, logos, and download buttons for online engagement.

FAQs

Q: Can I upload videos directly to Convertri?

A: Yes, Convertri pro-level plans allow video uploads. Otherwise, host externally (S3, YouTube, etc.).

Q: What if the video is too heavy?

A: Compress the file to reduce size or use a shorter loop.

Q: Can I use GIFs instead of videos?

A: GIFs are not recommended due to large file sizes and poor performance. Use MP4 instead.