← Back

How to Create a Banner Section

Sections•Beginner•10 min read

How to Create a Banner Section

A Banner Section is a conversion-focused call-to-action typically placed at the bottom of pages to encourage visitor action.

What you'll create:

Finished Banner Section
Finished Banner Section

The finished Banner Section with call-to-action

Overview

Banner sections (also called CTA sections) are designed to convert visitors into customers. They typically appear at the bottom of pages as a final push toward action.

Key features:

  • Eye-catching full-width design
  • Compelling headline and copy
  • Primary and secondary CTA buttons
  • Background image (desktop and mobile)
  • High-contrast design for visibility
  • Mobile-responsive

Quick Setup

  1. Add Section: Pages → Your Page → Sections → Add "Banner Section"
  2. Add Heading: Strong, action-oriented headline
  3. Add Description: Brief value proposition
  4. Configure CTAs: Primary and optional secondary button
  5. Upload Images: Desktop and mobile backgrounds
  6. Publish

Step 1: Write Compelling Copy

Heading

Create urgency or value:

  • "Ready to sync up?"
  • "Start your free trial today"
  • "Join thousands of happy customers"
  • "Get started in minutes"

Best practices:

  • Keep under 8 words
  • Use action words
  • Create urgency or FOMO
  • Focus on outcome

Subheading (Optional)

Add context if needed:

  • "No credit card required"
  • "14-day free trial"
  • "Cancel anytime"

Description

1-2 sentences maximum:

  • "Join hundreds of stores ditching the mess and selling seamlessly, online and in-store."
  • "See why businesses love our platform. Start your free trial today."

Step 2: Configure CTA Buttons

Primary CTA

  • Text: "Get Started", "Start Free Trial", "Sign Up Free"
  • Link: /signup, /trial, /register
  • Style: High-contrast, filled button

Secondary CTA (Optional)

  • Text: "Book a Demo", "Learn More", "Contact Sales"
  • Link: /demo, /features, /contact
  • Style: Outline or ghost button

CTA Best Practices:

  • Use first-person: "Start My Trial" vs "Start Trial"
  • Create urgency: "Get Started Now"
  • Remove friction: "No Credit Card Required"
  • Make buttons large and tappable

Step 3: Background Images

Desktop Image

  • Size: 1920x600px (wide aspect ratio)
  • Format: JPG (compressed)
  • File Size: Under 300KB
  • Content: Eye-catching, relevant visual
  • Text Overlay: Ensure good contrast

Mobile Image

  • Size: 768x1024px (taller aspect ratio)
  • Format: JPG
  • File Size: Under 200KB
  • Content: Can be different from desktop
  • Important: Test text readability

Image Tips:

  • Use dark overlay for text readability
  • Avoid busy backgrounds
  • Ensure brand consistency
  • Test on real devices

Design Considerations

Contrast

  • Text must be easily readable
  • Use overlay if needed (0.4-0.6 opacity)
  • White text on dark OR dark text on light
  • Test in different lighting conditions

Color Psychology

  • Green: Action, go, positive
  • Blue: Trust, calm, professional
  • Orange/Red: Urgency, excitement
  • Purple: Premium, creative

Position

Banner sections work best:

  • At page bottom (most common)
  • Between major sections
  • Before footer
  • After testimonials

Example Configurations

SaaS Trial Signup

Heading: "Ready to transform your business?"
Subheading: "Start your 14-day free trial"
Description: "No credit card required. Cancel anytime. Get up and running in minutes."

Primary CTA: "Start Free Trial" → /trial
Secondary CTA: "Book a Demo" → /demo

Desktop Image: team-collaboration.jpg (1920x600px)
Mobile Image: mobile-app.jpg (768x1024px)
Overlay: Dark, 0.5 opacity

E-commerce Product

Heading: "Ready to sync up?"
Description: "Join hundreds of stores selling seamlessly, online and in-store."

Primary CTA: "Get Started" → /signup
Secondary CTA: "Book a Demo" → /demo

Desktop Image: store-checkout.jpg
Mobile Image: mobile-pos.jpg

Service Business

Heading: "Let's build something amazing together"
Description: "Schedule a free consultation and see how we can help."

Primary CTA: "Schedule Consultation" → /contact
Secondary CTA: "View Our Work" → /portfolio

Desktop Image: team-meeting.jpg
Mobile Image: consultation.jpg

Conversion Optimization

A/B Testing Ideas

Test these variables:

  • Headline wording
  • CTA button text
  • Button colors
  • Number of CTAs (1 vs 2)
  • Image choice
  • Offer type

Trust Signals

Add credibility:

  • "No credit card required"
  • "14-day money-back guarantee"
  • "Join 10,000+ customers"
  • "Rated 4.9/5 stars"
  • "Free forever" (if applicable)

Urgency Tactics

Create FOMO:

  • "Limited time offer"
  • "Offer ends soon"
  • "Only X spots left"
  • "Join today"

(Use ethically - don't create false urgency!)

Mobile Optimization

Critical Checks

✅ Text is readable on small screens

✅ Buttons are easy to tap (min 44x44px)

✅ No horizontal scrolling

✅ Image loads quickly

✅ Doesn't look cropped awkwardly

Mobile-Specific

  • Stack buttons vertically if needed
  • Larger font sizes
  • More padding around CTAs
  • Shorter headlines if necessary
  • Different image orientation

Schema Reference

File: sanity/schemas/sections/bannerSection.ts

Fields:

  • heading (required): Portable Text
  • subheading: Portable Text
  • description: Portable Text
  • buttonText (required): String
  • buttonLink (required): URL
  • secondaryButtonText: String
  • secondaryButtonLink: URL
  • desktopImage (required): Image
  • mobileImage: Image
  • overlayOpacity: Number (0-1)
  • overlayColor: String

Troubleshooting

Text not readable

  • Increase overlay opacity
  • Change text color
  • Choose less busy background
  • Add text shadow

Low conversion rate

  • Strengthen value proposition
  • Reduce friction (remove requirements)
  • Make CTA more prominent
  • Add social proof/trust signals
  • Test different offers

Looks good on desktop, bad on mobile

  • Upload mobile-specific image
  • Adjust text sizes
  • Reposition elements
  • Test on real devices

Best Practices Summary

✅ DO:

  • Place at strategic page locations
  • Use action-oriented language
  • Create visual contrast
  • Test on mobile devices
  • Include trust signals
  • Keep copy concise
  • Make CTAs prominent

❌ DON'T:

  • Use vague CTAs ("Click Here")
  • Overcomplicate with too many options
  • Use low-quality images
  • Forget mobile optimization
  • Make text hard to read
  • Overuse urgency tactics
  • Ignore analytics

Related Sections

Combine Banner with:

  • Testimonials: Social proof before CTA
  • Pricing: Price comparison then CTA
  • FAQ: Answer objections then convert
  • Features: Show value then ask for action

Pro Tip: The bottom of your page is prime real estate. Your banner section is often the last thing visitors see before leaving - make it count! Focus on removing objections and making the next step crystal clear.