Section

Section Designer turns any spot on a SharePoint page into a full-bleed design band - a solid, gradient, image or ambient video background with a legibility scrim - plus top and bottom shape dividers that visually separate the native sections above and below. It is pure client-side design and needs no data.

Permissions

Section needs no Microsoft Graph permissions and reads none of your content. Any background image you upload lands in your own Site Assets. Everything runs as the signed-in user on the supported SharePoint Framework.

Set up

1. Install the package (see the Install guide). No Graph scopes are required.
2. Edit a page → add the Section Designer web part. The default is a theme-gradient band with a wave bottom divider, a sample heading and one CTA.
3. In the property pane, set the background, dividers and content.

Background

• Solid - a single colour from the picker.
• Gradient - theme-derived from the site primary, or a custom two-stop gradient with an angle.
• Image - upload or pick an image, with cover fit, a nine-point focal point and optional fixed/parallax.
• Video - pick or upload an MP4 (large files upload in chunks to your Site Assets). Plays as an ambient loop: autoplay, muted, no controls. An optional poster image shows instantly while the video loads - the band never delays the page - and people with reduced motion set in their system see the poster only. The same nine-point focal point as images decides which part a thin band keeps, and the poster follows it. If the video cannot load, the band falls back to your gradient or colour.
• Scrim - an opacity slider for legibility, plus auto, light or dark text for contrast.

Keep banner video light: trim to a short seamless loop (10-20 seconds), strip the audio track (autoplay is muted anyway), scale to 1920 wide and export H.264 MP4 with faststart - about 5-15MB plays smoothly without dragging page load.

Shape dividers

Independent top and bottom dividers, each rendered as inline SVG that scales crisply to any width:

• Shapes - wave, double wave, tilt, curve, curve asymmetric, arrow, triangle, split, book, or a custom SVG path.
• Controls - enable, shape, height, colour, flip horizontal, invert (point in or out), opacity, and layer (over or behind content).

Content and layout

• Content - optional eyebrow, a real H1 to H4 heading with a level selector, a subhead and one CTA button. Leave content off to use the band as a pure divider or spacer.
• Layout - content and vertical alignment, min-height and top/bottom padding.
• Full bleed - on by default, breaks out to viewport width with a scrollbar-safe guard; turn it off to stay within the column.
• Extend to whole section - opt-in; paints the background and dividers onto the parent canvas section so its other web parts sit on the band too.

Full bleed and extend-to-section are best-effort on unusual layouts (Teams, full-page apps): if the canvas cannot be found, the part falls back cleanly to its own self-contained band, and it never leaves anything it cannot restore on toggle-off.