The Section is the most used section type. It holds any blocks you add, over an optional background photo or video. Heroes, post lists, newsletter forms, feature grids and footers are all Sections. You add one with the + beside Sections in the left sidebar, as Add a section to a page describes. Click a section on the canvas, or its name in the sidebar, to open its settings panel. In the tables below, "the + menu" is the + beside the group's name in that panel.
A Section placed from a pattern stays linked to the pattern. Its panel then shows Edit pattern, Detach and the Display group only. You change the other settings in the pattern, or detach the section first. How patterns work explains linked sections.
General
Setting
What it does
Justification
Lines up the section's text on the Left, in the Center (the default) or on the Right, and places blocks narrower than the column the same way. Set it with the Justification button on the canvas toolbar, which shows over a selected section. It shows in the panel only after you give it a different value for tablets or phones.
Colors
Setting
What it does
Color Scheme
The section's background and text colors, from your color schemes. Default uses the site's scheme. The Inherit, Light and Dark icons beside Theme in its list choose light or dark colors. Inherit follows the site's color mode. The Color Scheme button on the canvas toolbar offers the same choices as tiles.
Background
A color that fills the section in place of its scheme's background, such as Muted or Accent, or Custom for any color. None by default. Add it from the + menu.
Gradient
A gradient over the section's background: None, a gradient from Styles, or Custom. Add it from the + menu.
Text color
The color of the section's text, and of the blocks inside that have no Text color of their own. Default keeps the scheme's text color. Add it from the + menu.
How wide the column of blocks can grow: Full, Wide (the default, 1400 px), Standard (1140 px), Narrow (720 px), or a length you enter. The background always spans the section. Set it with the Content Width button on the canvas toolbar, or add it here from the + menu.
Min Height
The least height of the section: None (the default), Small (320 px), Medium (480 px), Large (640 px), Extra Large (800 px), Screen (the height of the browser window), or a length you enter. Add it from the + menu.
Vertical Align
Shows when Min Height is not None. Where the blocks sit inside that height: Top, Center (the default) or Bottom.
Width and Align
Show only on a section that already has a value for them, such as some patterns. Width narrows the whole section, background included. Align places the content column.
Spacing
Setting
What it does
Gap
The space between the blocks placed directly in the section, Small (24 px) by default. Click the link icon to set the space between columns and between rows separately.
Padding
The space between the section's edges and its blocks: Large (96 px) at the top and bottom and Small (24 px) at the sides by default. The control has two rows: the first sets the top and bottom, the second the left and right. Click the link icon to set each side separately.
Margin
Space outside the section's edges. A negative value pulls the section over its neighbor. Add it from the + menu.
Padding and Margin are the same on every screen size. The spacing names come from Page widths and spacing, where you can change them for the whole site.
Appearance
Setting
What it does
Fill image
A photo behind the whole section. Upload one, pick one from your media library or Unsplash, or paste a URL. Add it from the + menu.
Overlay
Shows with a fill image or video. A color laid over the picture, so text on it stays readable: None (the default) or one of your theme's colors, with its strength from 0 to 100%, 40% to start. To fade the picture itself, open Image settings or Video settings, the sliders icon beside the media field.
Video
A YouTube or Vimeo link, or the URL of a video file, that plays behind the section, muted and in a loop. Add it from the + menu.
Play on mobile
Shows with a video. Off, phones and tablets show the fill image instead of the video, to save data, or the background color when there is no fill image.
Corners
Rounds the section's corners and clips its background to them. None by default. Add it from the + menu.
Border
A line around the section, with its Color and Style. Add it from the + menu.
The + menu adds Screen sizes, to hide the section on desktops, tablets or phones, Audience, to show it only to visitors, members or some tiers, and content conditions, such as Locked post. A rule hides the whole section with everything in it. Display settings describes each rule.
Advanced
The + menu adds HTML element (<section> by default, or <header>, <footer>, <aside>, <article> or <div>), HTML anchor, CSS classes and Custom CSS. Choose <footer> for your site footer, so screen readers and search engines know it is one. Advanced settings describes each one.
Blocks
A Section holds up to 20 blocks at its top level, and more inside Groups. At its top level it takes these blocks:
Inside a Group, a Section also takes the Table of Contents. The Paywall goes only in a Post Content section.
A section with an empty post list
When a Section holds a post list, a Collection block, that finds no posts and has no No Results block to show instead, the whole section hides on your site, heading included. A related posts section on a post with no related posts disappears instead of showing an empty heading.
The Section is the most used section type. It holds any blocks you add, over an optional background photo or video. Heroes, post lists, newsletter forms, feature grids and footers are all Sections. You add one with the + beside Sections in the left sidebar, as Add a section to a page describes. Click a section on the canvas, or its name in the sidebar, to open its settings panel. In the tables below, "the + menu" is the + beside the group's name in that panel.
A Section placed from a pattern stays linked to the pattern. Its panel then shows Edit pattern, Detach and the Display group only. You change the other settings in the pattern, or detach the section first. How patterns work explains linked sections.
General
Colors
Colors and appearance settings describes the scheme picker, the colors and the gradients.
Layout
Spacing
Padding and Margin are the same on every screen size. The spacing names come from Page widths and spacing, where you can change them for the whole site.
Appearance
Add a background image, video or gradient walks through a hero with a photo.
Display
The + menu adds Screen sizes, to hide the section on desktops, tablets or phones, Audience, to show it only to visitors, members or some tiers, and content conditions, such as Locked post. A rule hides the whole section with everything in it. Display settings describes each rule.
Advanced
The + menu adds HTML element (
<section>by default, or<header>,<footer>,<aside>,<article>or<div>), HTML anchor, CSS classes and Custom CSS. Choose<footer>for your site footer, so screen readers and search engines know it is one. Advanced settings describes each one.Blocks
A Section holds up to 20 blocks at its top level, and more inside Groups. At its top level it takes these blocks:
Inside a Group, a Section also takes the Table of Contents. The Paywall goes only in a Post Content section.
A section with an empty post list
When a Section holds a post list, a Collection block, that finds no posts and has no No Results block to show instead, the whole section hides on your site, heading included. A related posts section on a post with no related posts disappears instead of showing an empty heading.