Common section settings

Most Reign sections and container blocks share the same controls, grouped under the same headings in the editor. This article documents them once. Other articles link here instead of repeating them, and cover only what is unique to a given section.

Not every section shows every group. A simple section shows Color, Padding, Margin, and Visibility. The flexible Section and the group blocks add Layout, Size, Appearance, and Border. You see the groups that apply.

Color

On simple top-level sections these controls sit in their own Color group. On the flexible Section and container blocks they sit under Appearance instead.

Color scheme: the set of colors (background, text, accent, buttons) applied to the section. Schemes are defined in Theme settings under Colors. Change a scheme there and every section using it updates together.
Inherit color scheme: only on container blocks (under Appearance), keeps the parent section's scheme. Turn it off to set a Color scheme for that block alone.
Use dark header theme over this section: switches the header to its dark styling while it sits over this section. Turn it on when the section background is dark enough that the default header is hard to read.

Layout

How the blocks inside the section are arranged.

Direction: Vertical stacks the blocks. Horizontal places them in a row.
Wrap elements when space is limited: with a horizontal direction, lets blocks drop to the next line instead of overflowing.
Gap: the space between blocks, in pixels.
Horizontal alignment and Vertical alignment: where the blocks sit inside the section. The options follow the direction, and include Left, Center, Right, Top, Bottom, and the distributions Space between, Space around, and Space evenly.
Use different layout on mobile: turn this on to set a separate Direction, Gap, and alignment for phones. The controls split into a Desktop layout group and a Mobile layout group.

Size

Width: Full spans the screen edge to edge, Page matches the standard content width, and Custom lets you set your own. Custom adds a Desktop width and Mobile width in pixels. (Inside a container block the first option is Fit, which shrinks to the content.)
Minimum height: Fit sizes to the content. Pixels sets a fixed height with Desktop height and Mobile height. Percent sets the height as a share of the screen, useful for a full-height banner.

Appearance

Background: None is transparent. Image adds an Image, an optional Mobile image, and Sticky background (the image holds still while the page scrolls). Video adds a Video picker.
Overlay: tints the area over the background so text stays readable. None, Solid (pick a Color), or Gradient (pick a Gradient).

Border

Style: None, Solid, Dashed, Dotted, Inset, or Outset. Any style but None adds a Border thickness and a Color.
Corner radius: rounds the corners, in pixels.
Shadow: a drop shadow. None, Subtle, Medium, or Strong.

Padding

Space inside the section, around its content. Set Top, Bottom, Left, and Right in pixels. Turn on Use different paddings on mobile to set separate phone values, which splits the controls into Desktop padding and Mobile padding.

Margin

Space outside the section, between it and the sections above and below. Set Top and Bottom in pixels. Turn on Use different margins on mobile for separate phone values.

Visibility

Visibility: where the section shows. All shows it everywhere, Desktop hides it on phones, Mobile hides it on desktop.

Tips

To recolor a section, assign it a Color scheme rather than picking colors one by one. Edit the scheme in Theme settings and every section using it updates.
Padding controls space inside a section's background. Margin controls the gap between two sections. Use margin to separate sections, padding to breathe inside one.
Set a value on mobile only when the desktop value looks wrong on a phone. Leaving the mobile toggle off keeps one value for every screen, which is easier to maintain.