Using separate banners for desktop and mobile

Show different banner content on phone and desktop.

Last updated About 5 hours ago

Use two Banner sections and Visibility settings — one hidden on mobile, one hidden on desktop.

Set it up

  1. On your page, add two Banner sections (or duplicate an existing one).
  2. Open the desktop banner → Visibility settings → Hide on mobile.
  3. Open the mobile banner → Visibility settings → Hide on desktop.
  4. Customize each banner's image, copy, and aspect ratio for its screen.
  5. Click Save.

Tips

  • Shorter headline and less body copy on mobile.
  • Upload a smaller or differently cropped mobile image (640–800 px wide is a good target).
  • Match button links on both so the CTA stays consistent.

💡 Tip: Visibility works on any section, not only banners — but use it sparingly so pages stay easy to maintain.

Other settings

More visibility patterns in Visibility settings. Banner image sizes in What is the recommended image size for a banner?