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.
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, and lazy-load options
- Pattern — repeating texture with size and overlay controls
- Video — background video (first-frame cover is generated automatically for poster and mobile)
- Two-tone — split or gradient color backgrounds with optional mobile-specific settings
Reverse print flips inner content to the light palette on dark backgrounds and cascades to all nested blocks — prefer this over setting text color on individual headings.
Transitions (top and bottom) add shaped dividers between sections. Match transition color to the adjacent block background for a seamless join.
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
The padding control changes the amount of space given to the content inside the block. Padding uses predetermined step sizes from None to XXL so spacing adapts across screen sizes — for example, LG padding is smaller on mobile than desktop. When padding appears as a range slider, the exact value you choose applies at all breakpoints.
Toggling reverse print flips text to white for better contrast on dark backgrounds. It affects the block and all inner blocks. We recommend using reverse print at the block level instead of setting text color on individual headings or paragraphs, so you can change the background later without re-styling each element.
Chooses what fills the section background. Each style shows its own related settings below.
- 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.
Choose a background color from your palette. The default color is a light gray, but you can select any color to match your design.
Toggle this on to add a gradient overlay to your solid background color. This allows for more complex visual effects on a simple color background.
Adjust the intensity of the gradient overlay. A higher depth makes the gradient more pronounced, blending more noticeably with your chosen background color.
Select the direction from which the gradient effect will emanate. This determines the angle or position of the gradient's start and end points.
Choose the photo that fills the section. Set Style to Image first so these controls appear.
Click and drag the focal point to specify the most important part of your background image. This ensures that key elements of your image remain visible across different screen sizes.
Choose whether the background image scrolls with the content (Default) or remains fixed in place as the user scrolls (Fixed). Fixed backgrounds create a parallax-like effect.
Enable this to prevent the background image from being lazy-loaded. This is useful for critical background images that you want to load immediately, especially when the background is fixed.
Choose an overlay color from your palette (plus pure black or white) to darken or tint a background image or pattern. Use overlays when you need stronger text contrast or a stylistic color wash over media.
Controls how strong the overlay appears, from transparent to solid. At 100% opacity the overlay is a flat color. Set opacity to 0% or choose the clear overlay swatch to disable the effect.
Toggle this to apply a blur effect to your background image. This can be used for stylistic purposes or to make text more readable against a busy image.
Adjust the intensity of the blur applied to your background image. A higher value will result in a more blurred image.
Choose a video from your media library to play as the background for this section. The video loops without sound; its first-frame cover is the poster and mobile fallback.
Select the starting color for your two-tone background. This color will blend with the end color to create a split or gradient effect.
Select the ending color for your two-tone background. This color will blend with the start color to create a split or gradient effect.
Set the angle of the split or gradient for your two-tone background. This determines how the two colors are arranged relative to each other.
Adjust the point at which the two colors in your two-tone background transition. A higher stop value means one color will take up more space before the transition begins.
Enable this to set different two-tone background settings specifically for mobile devices. This allows for responsive design adjustments.
Set the angle of the split or gradient for your two-tone background specifically for mobile devices. This overrides the desktop direction when viewed on smaller screens.
Adjust the transition point of the two colors in your two-tone background specifically for mobile devices. This overrides the desktop stop when viewed on smaller screens.
Choose an image from your media library to use as a repeating pattern for the background. This is useful for adding subtle textures or decorative elements behind your content.
Adjust the scale of the repeating pattern in your background. A smaller size will show more repetitions of the pattern, while a larger size will show fewer.
Transition Top
Toggle this to add a decorative shape or divider to the top edge of your section. This can create visual interest and smooth transitions between sections.
Enable this to adjust the height of the top transition. This allows you to fine-tune how much of the transition shape is visible.
Pick a preset shape for the top transition. Each shape interacts differently with the Size control — preview the shape in the editor before publishing.
Toggle this to mirror the top transition shape. This can create symmetrical designs or alter the visual flow of your section divider.
Sets the transition height in vh (viewport height). A value of 10vh means the transition occupies 10% of the viewport and scales with the device.
Sets the size of the top transition on mobile devices. Adjust this value to ensure the transition appears correctly on smaller screens.
Choose the transition color from your site palette. Match the adjacent block's background so the transition feels seamless — gray above a gray block, white above white, and so on.
Transition Bottom
Enables or disables a decorative transition at the bottom of the section. Use transitions to add visual interest and create seamless joins between sections.
Offsets the height of the bottom transition, allowing it to overlap or recede from the adjacent block. This helps in fine-tuning the visual flow between sections.
Selects the shape of the bottom transition, such as Wavy, Angle, or Curve. Choose a shape that complements your design and creates the desired visual effect.
Reflects the bottom transition horizontally, creating a mirrored effect. This can be used to achieve symmetrical designs or unique visual patterns.
Sets the size of the bottom transition. Adjust this value to control the prominence and scale of the transition.
Sets the size of the bottom transition on mobile devices. Adjust this value to ensure the transition appears correctly on smaller screens.
Selects a color for the bottom transition from your palette. Match the transition color to the adjacent block's background for a seamless visual connection.
Advanced
Adds custom CSS to this specific block. Use this for advanced styling when the available controls don't provide the exact design you need.
