Custom section

Custom section is a flexible layout that holds the blocks you add, including app blocks. You set its direction, height, alignment and background.

How to add it

In the Theme Editor, open the template where you want the section.
Select Add section, then choose Custom section.

The package uses this section on the Home page and the About page.

Settings

View the section guide .

General

Setting	Options	Description
Direction	• Vertical • Horizontal	Vertical stacks the blocks in one column. Horizontal places them side by side in a row.
Stack vertically on mobile		Stacks the blocks into one column on mobile and tablet screens. Shown when Direction is Horizontal.
Enable content wrap		Lets blocks drop onto a new line when they do not fit in the row. When off, they stay on one row. Shown when Direction is Horizontal.
Section height	• Auto • Full screen • Small • Medium • Large • Custom	Auto fits the content. Full screen fills the visible window height below the header, Small, Medium and Large give preset minimum heights, and Custom uses the height set below.
Custom height		Minimum section height in pixels on large screens. It scales down to 70 percent on small screens. Shown when Section height is Custom.
Horizontal position	• Top • Center • Bottom	Places the blocks at the top, center or bottom of the section height. Shown when Direction is Horizontal.
Vertical position	• Top • Center • Bottom • Space between	Places the stack of blocks at the top, center or bottom of the section, or spreads them apart with Space between. Shown when Direction is Vertical.
Content vertical alignment	• Left • Center • Right	Aligns each block to the left, center or right of the section. Shown when Direction is Vertical.
Horizontal alignment	• Left • Center • Right • Space between	Aligns the blocks along the row to the left, center or right, or spreads them out with Space between. Shown when Direction is Horizontal.
Gap		Space between blocks, in pixels. On small screens the gap is reduced to 20 pixels at most.
Background media	• None • Image • Video	Chooses what fills the back of the section: nothing, an image, or a video.
Background image		Image shown behind the blocks. Shown when Background media is Image.
Video		Video shown behind the blocks. Shown when Background media is Video.
Vertical padding		Space above and below the blocks inside the section, in pixels, so content does not touch the edge of the background media. Shown when a background image or video is used.
Show background overlay		Adds a colored layer on top of the background. Overlay color, style and text color become available.
Overlay text color		Color of the text and headings in the section while the overlay is on.

Direction sets whether blocks stack vertically or sit in a row. Enable content wrap applies when Direction is Horizontal, and lets blocks wrap onto new lines. Custom height applies when Section height is Custom.

Appearance

Setting	Options	Description
Color scheme		Edit color schemes in Theme settings.
Corner radius	• None • Custom	None keeps square corners. Custom rounds the corners of the section using the radius below.
Custom radius		Corner rounding of the section, in pixels. Shown when Corner radius is Custom.
Overlay color		Color of the overlay layer. A semi-transparent color lets the background show through.
Overlay style	• Solid • Gradient	Solid covers the section with the overlay color. Gradient fades the color out in the direction chosen below.
Gradient direction	• Up • Down	Up fades the overlay out toward the top of the section, and Down fades it out toward the bottom. Shown when Overlay style is Gradient.

Show background overlay adds an overlay on top of the background media. When Overlay style is Gradient, Gradient direction sets which way the gradient runs.

Section layout

Setting	Options	Description
Section width	• Page width • Wide • Full width	Page width keeps the section inside the standard page width, Wide stretches it closer to the screen edges with side margins, and Full width runs edge to edge.
Top padding		Space above the section, in pixels. It shrinks on smaller screens.
Bottom padding		Space below the section, in pixels. It shrinks on smaller screens.
Show top border		Draws a thin line along the top edge of the section.