Using separate banners for desktop and mobile

Easily control how content appears on desktop or mobile by using section visibility settings, letting you show or hide banners for each device and customize images, text, or layout for a better user experience.

Last updated 4 months ago

Sometimes you may want to actually use two banners — one for desktop and one for mobile — so you can control the layout with more nuance. This is a great little "protip" to allow making the text shorter on mobile, or use a smaller image (or a different/specific crop), or change the aspect ratio, etc.

You can show two banner sections—one for desktop and one for mobile — to fine-tune layout, copy length, image crop, or aspect ratio.

How to set it up

  1. Add two banner sections to your page.

  2. Open the first banner → Visibility → choose Hide on mobile.

  3. Open the second banner → Visibility → choose Hide on desktop.

  4. Adjust each banner’s text and imagery for its device.

💡 Tip: Use a shorter headline on mobile and a smaller or differently cropped image for faster loading and better readability.

📝 Note: The Visibility setting exists on all sections, not just banners — use it wherever device-specific content helps. Avoid overusing it to keep pages simple.