Skip to main content

Set Up and Configure Zenpo Banner

Add Zenpo Banner to a modern SharePoint page and configure it in the property pane. The groups are License, Content, Background, and Layout. Content lives in the web part on the page. There is no list and no starter list.

Write the heading and calls to action​

  1. Edit the page and select the web part.
  2. Open the property pane.
  3. Under Content, write Heading. The pane states The banner renders once a heading is written — without one it shows nothing on the published page.
  4. Optionally write Eyebrow and Subheading.
  5. Optionally complete Button 1, then Button 2.

A button renders only when it has both Button text and Button link. Button 2 controls appear once Button 1 is complete. The first button is filled with the accent color. The second is outlined. Each button has an Open in new tab toggle. New-tab CTAs carry rel="noopener noreferrer".

Without a heading, editors see Configure Banner / Write a heading and choose a background to publish your banner. Until then, nothing renders on the page. Readers see nothing.

Heading typography​

  • Heading font: Theme default, Modern sans, Editorial serif, or Condensed display. These are device fonts only. Nothing is downloaded. Theme default follows the site's configured typography.
  • Heading weight: Regular, Semibold, or Bold. Only weights the chosen family actually renders are offered. Editorial serif and Condensed display offer Regular and Bold only.
  • Heading size: slider 28–64 px. That value is the desktop target. Narrower screens scale down automatically. New instances default to 40. Pre-existing instances keep 44 and Bold.

The heading is an h2. The page already has its own title region. There are no per-breakpoint settings.

Button and media URLs accept http, https, mailto, tel, server-relative, and protocol-relative addresses. javascript: is rejected.

Choose a background​

Under Background, set Background to Solid color, Gradient (default), Image, or Video.

Solid color​

Set Color from Banner's ten-accent set. The shared six-color set plus Yellow/Gold, Red, Purple, and Neutral/Slate. See Appearance Settings: Color Vibe, Accent Color, and Corner Radius.

Gradient​

  • Gradient start
  • Gradient end (default Deepen automatically)
  • Gradient direction: Diagonal (default), Left to right, Top to bottom, or Radial

Image​

Use Background image to pick a file. Supported types: .gif, .jpg, .jpeg, .png, .webp.

The file picker browses this site, OneDrive, organization assets, and stock images under your permissions. Local uploads land in Site Assets under your own permissions.

Video​

  1. Set Background to Video.
  2. Use Background video to pick a file already on the site or in OneDrive, or paste a link to one.
  3. Upload large videos to a library first, then pick them.
  4. Set Poster image. That still image stands in for the video when the video is not shown.

Supported video types: .mp4, .m4v, .webm, .mov, .ogv, .ogg.

Stream player URLs are not supported — direct file URLs only.

The video is decorative. It is muted, loops, plays inline, and has no controls. It stands down to the poster when a visitor's device requests reduced motion, if playback fails, or if the browser cannot play the file.

Focal point​

For Image or Video, set Focal point. It is a nine-point grid. Center is the default. It chooses which part of the image or video stays in view as the banner is cropped at different widths.

Set layout and full-width​

Under Layout:

  • Content alignment: Left, Center (default), or Right
  • Vertical alignment: Top, Center (default), or Bottom
  • Height: Compact 240 px min, Standard 380 px min (default), or Tall 520 px min. The pane note is Text always fits — a long heading grows the banner rather than clipping.
  • Overlay: None (default), Light, or Dark. Photos and video always get a subtle automatic scrim even at None. Dark deepens it. Light flips to dark text on a light wash.
  • Accent color: the ten-option set. The pane note is Button text switches to white or dark automatically, whichever stays readable.

To run the background edge to edge, place the web part in a full-width section on a communication site. The text still uses SharePoint's normal content width. Banner also works in ordinary sections. Full-width rules are on Requirements and Supported Environments.

Banner has no Color vibe control. Accent lives in Layout.

Last updated on