Section
Organize page structure and control backgrounds in one block.
Usage
The Section block lets you nest other components inside a container and apply a background color, image, overlay, video, pattern, or gradient underneath your content. Any block can live inside a Section — including other Sections. On design-heavy pages, wrapping content in Sections makes it easier to move groups around in the editor and establish visual rhythm on the page.
Section blocks can also be used as slides inside the Slider block.
A note: Background is now Section
Previously, this block was called the Background block. We still support every background option from that era, but the rename reflects how teams actually use it: as a structural container first, with background treatment second.
Block width
Sections support Default, Wide, and Full widths from the block toolbar. Default follows your Customizer content width (~50–60 characters per line for readability). Wide uses 75% of the page or your content width — whichever is larger. Full spans 100% of the viewport. Adjacent full-width sections sit flush against each other; mixing widths adds breathing room between blocks.
Minimum height
For an opening section that fills the first screen, turn on Minimum Height under Padding instead of adding padding by hand. Pick Half Screen or Full Screen: the section is at least that tall on every screen, and its content sits centered top to bottom. Padding still applies, and a section whose content is taller than the screen grows as usual.
Below Header (Full Screen only, on by default) takes your header's height off, so the section ends at the bottom of the first screen instead of just below it. With a transparent header the section already runs under the header, so only the utility bar is taken off. Turn it off for a full-screen section further down the page. While you're signed in, the WordPress toolbar is taken off too, so over a transparent header the section looks a little shorter to you than to visitors. On phones, Full Screen fits the screen with the browser's address bar showing, so visitors never have to scroll to see the section's bottom edge.
Minimum Height works with every background style and with transitions; a transition with Offset Transition Height adds its height to the padding as before.
Background styles
Use the Style control in the sidebar to choose a background type:
- Color — solid palette fill, with optional gradient overlay
- Image — photo background with focal point, attachment, overlay (color and opacity in 1% steps), and lazy-load options
- Pattern — repeating texture with size and overlay controls
- Video — background video; the first frame becomes the poster and mobile image automatically
- Two-Color Gradient — a smooth blend between two palette colors
- Two-Color Split — a hard split between two colors, with optional phone-specific angle and position
For a large or .mov video, a note under it in the sidebar offers Optimize for web: your browser makes a small MP4 copy and the section switches to it, while the original stays in the Media Library. See Optimize background videos.
Visitors can pause a background video. A small Pause button sits in the section's bottom-right corner: it shows when a visitor points at the section or tabs to it, and stays visible on touch screens. Pausing one background video pauses every one on the page, and they stay paused on the visitor's next pages until they close the browser tab. Phones that show the poster image instead of the video, and visitors who ask their device for reduced motion, don't get the button, since nothing moves for them. Keep the very corner of a video section clear of links and buttons.
Choosing a background Color sets Text Color to whichever of Dark or Light reads better on it. Switching the Style to Image or Video sets it from the Overlay Color as if the overlay were at full strength, and changing the overlay color or opacity re-checks it once the overlay is strong enough to set the tone (a dark overlay from its default opacity up, a light one from 70% up). Change Text Color any time; it carries down to every block inside the section, so you don't need to set text color on individual headings. Pattern and two-color backgrounds leave Text Color as it is.
Transitions (top and bottom) add shaped dividers between sections. A transition takes the background color of the block it joins (the one above for Top, below for Bottom) when you turn it on, and follows whenever the color next to it changes (you recolor that block, or add, remove or rearrange blocks), so the two stay joined. You can pick a different transition color any time; it stays until the color next to it changes again. Only solid color backgrounds are matched: next to an image, video, pattern or gradient, or a block with no background, set the color yourself.
To keep the transition panels short, Size, Color and Animation show their current values on one line: click Edit size for Offset Transition Height, Size and Size Mobile, Change color for the color swatches, or Change animation for Animate, Reverse Direction and Speed, and Done (or Escape) to fold them away again. You can also work on the page: select the Section and point at a transition (it lights up), then drag either of its edges to change its height (in mobile preview it sets Size Mobile), or click the Reflect button on the right of the transition to flip the shape. Both appear when you point at the transition.
Turn on Animate under a transition to slide its shape slowly along the edge, the way an animated Separator moves. Reverse Direction sends it the other way and Speed sets the pace. Shapes whose two ends don't meet repeat as the shape and its mirror image, so the motion never jumps; where that mirror crease shows, the editor plays the animation so you see exactly what visitors will. Visitors who ask their device for reduced motion see the still shape. The moving shape is drawn as a wide graphics layer, so a very tall animated transition (a large Size on a full-width section) costs graphics memory on phones; keep animated transitions to modest heights.
Block CSS
For a one-off style the settings can't cover, open Advanced → Block CSS and write CSS for this section only. Properties typed on their own (no selector) apply to the section itself, and rules like h2 { … } apply only to blocks inside it. See Styling one section with Section block CSS for examples.
Screenshots
Front-end
-
Dark section with a wavy top transition wrapping a headline and icon grid. -
Light section holding media-and-copy columns, with a wavy divider above.
Editor
-
Image style settings — padding, light text, background image, and focal point. -
Color background with gradient overlay and a wavy bottom transition.
Settings
Block Settings
Space inside the section around your content. Sizes step down on smaller screens, so LG is smaller on mobile than on desktop.
Makes the section at least half or all of the screen tall, for an opening section that fills the first screen without setting padding by hand. Content is centered top to bottom, and Padding still applies around it. Taller content makes the section grow as usual. Off by default.
How much of the screen the section fills at the least. The height follows the visitor's screen, so it changes between phones and desktops.
- Half ScreenHalf the screen's height.
- Full Screen defaultThe whole screen. On phones it uses the screen with the browser's address bar showing, so the section never needs a scroll to see its bottom edge.
On (the default), the header's height is taken off, so an opening section ends at the bottom of the first screen. With a transparent header the section already runs under it, so only the utility bar (if any) is taken off. Turn it off to use the full screen height, for example on a section further down the page. Only for Full Screen.
Light switches text in this section and every block inside it to light colors for dark backgrounds. Choosing a background Color picks Dark or Light for you, whichever reads better on that color; change it here any time. Set it here rather than on individual headings, so you can change the background later without restyling each one.
Chooses what fills the section background. Each style shows its own related settings below. Switching to Image or Video sets Text Color from the Overlay Color as if it were at full strength (black suggests Light, a near-white overlay suggests Dark); switching to Color reads the color. Change Text Color any time.
- Color defaultA solid color from your palette.
- ImageA photo or graphic behind the section content.
- VideoA looping background video. The first frame is used as the poster and mobile fallback.
- PatternA repeating texture or pattern image.
- Two-Color GradientA smooth blend between two colors.
- Two-Color SplitA hard split between two colors.
Adds a gradient fade over the solid color. Turn it on to reveal Gradient Depth and Gradient Direction.
How strong the gradient overlay is, in steps of 1. Higher values make the fade more noticeable.
Where the gradient starts. Center creates a radial fade out from the middle.
Choose the photo that fills the section. Set Style to Image first so these controls appear.
Drag the dot to the most important part of the image. That spot stays in view as the section crops on different screen sizes. It follows the image's focal point from the Media Library until you move it here; after that it's this block's own.
Default scrolls the background with the page. Fixed holds it in place while content scrolls over it, for a parallax-like effect.
Loads the background image right away instead of waiting until it scrolls into view. Only appears when Background Attachment is Fixed.
Tints the background image, video, or pattern with a palette color, black, or white. Use it when text needs more contrast against the media. Changing it also sets Text Color when the overlay is strong enough to set the tone: a dark overlay from the default opacity up, a light one from 70% up. Change Text Color any time.
How strong the overlay is, in steps of 1%. 100% is a solid color; 0% turns the overlay off. Dragging it also updates Text Color as the overlay starts or stops dominating the image; a dark overlay counts from the default opacity, a light one from 70%. Change Text Color any time.
Blurs the background image. Helpful when a busy photo makes text hard to read.
Higher values blur the background image more.
The video plays on a silent loop behind the section. Its first frame is used as the poster and mobile fallback. A large or .mov video shows an Optimize for web note, which swaps in a small MP4 copy.
The first color in a Two-Color Gradient or Two-Color Split.
The second color in a Two-Color Gradient or Two-Color Split.
Angle of the split between the two colors.
Where the split falls. Higher values give the start color more of the section.
Turn on to set a different Direction and Stop for phones.
Angle of the split on phones. Overrides the desktop Direction.
Where the split falls on phones. Overrides the desktop Stop.
An image from your media library that repeats across the background. Good for subtle textures.
Scale of the repeating pattern. Smaller sizes show more repeats.
Transition Top
Adds a shaped divider along the top edge of the section.
Each tile previews the shape in the transition's color on the Section's own color, reflected if Reflect is on. When the two colors match or are too close to tell apart (or the Section uses an image or video), tiles show a white shape on gray instead. Hover a tile to see its name. Each shape reacts differently to Size, so preview it in the editor before publishing.
Flips the shape horizontally. Also on the page: the Reflect button on the right of the transition when you point at it.
Adds space at the top of the section equal to the transition's height, so content doesn't sit on top of the shape. Under Edit size.
Height of the transition as a percentage of the screen height (vh), so 10 means 10% of the screen. Applies on tablet and desktop. Under Edit size, or drag the handle on the transition's inner edge on the page.
Height of the transition on phones. Under Edit size, or drag the handle on the page in mobile preview.
Follows the solid background color of the block above: set when you turn the transition on, and again whenever that color changes or blocks are added, removed or moved. Pick another color any time; it stays until the color next to it changes. Under Change color.
Slides the shape sideways along the edge, slowly and continuously. Shapes whose ends don't meet repeat as the shape and its mirror image, so the motion stays seamless. Off by default; respects visitors who ask for reduced motion. Under Change animation.
Moves the shape from right to left instead of left to right. Appears when Animate is on. Under Change animation.
How fast the shape travels, from a slow drift (1) to a brisk slide (10). Appears when Animate is on; shares the scale of the animated Separator. Under Change animation.
Transition Bottom
Adds a shaped divider along the bottom edge of the section.
Each tile previews the shape in the transition's color on the Section's own color, reflected if Reflect is on. When the two colors match or are too close to tell apart (or the Section uses an image or video), tiles show a white shape on gray instead. Hover a tile to see its name. Each shape reacts differently to Size, so preview it in the editor before publishing.
Flips the shape horizontally. Also on the page: the Reflect button on the right of the transition when you point at it.
Adds space at the bottom of the section equal to the transition's height, so content doesn't sit on top of the shape. Under Edit size.
Height of the transition as a percentage of the screen height (vh). Applies on tablet and desktop. Under Edit size, or drag the handle on the transition's inner edge on the page.
Height of the transition on phones. Under Edit size, or drag the handle on the page in mobile preview.
Follows the solid background color of the block below: set when you turn the transition on, and again whenever that color changes or blocks are added, removed or moved. Pick another color any time; it stays until the color next to it changes. Under Change color.
Slides the shape sideways along the edge, slowly and continuously. Shapes whose ends don't meet repeat as the shape and its mirror image, so the motion stays seamless. Off by default; respects visitors who ask for reduced motion. Under Change animation.
Moves the shape from right to left instead of left to right. Appears when Animate is on. Under Change animation.
How fast the shape travels, from a slow drift (1) to a brisk slide (10). Appears when Animate is on; shares the scale of the animated Separator. Under Change animation.
Advanced
Custom CSS that applies only to this section and the blocks inside it. For cases the regular settings can't cover.
