Section
The top-level band of content — a Section wraps rows, holds your columns, and carries the background, height and spacing for a strip of the page. Its options live across the Layout, Styling, Animations, and Advanced tabs.
Each setting is routed to the leanest layer that fits it — never a raw inline style unless the value is genuinely per-instance. The four output mechanisms used below:
- Predefined utility class — a fixed-enum option (a small, unchanging set of values) toggles a class defined once in a static stylesheet. Reusable, cacheable, zero per-instance CSS.
- Per-page dynamic file — an arbitrary or user-library value (a Custom height, a named Container Width) is written as a
.u{hash}-scoped rule into that page's generated stylesheet (…/uploads/unysonplus/css/page-{id}.css, aggregated bydynamic-css.php). Still fully editable from the option; just not inline. - Inline
style=— reserved for the Background layers, because every section has a unique image/gradient/overlay. - Injected markup — patterns and shape dividers render their own elements.
The Animations and Advanced tabs are the shared, cross-shortcode controls and are omitted below. Hover any cell for more detail.
Layout
| Option | atts key | Control | Default | Responsive | Renders as | Stylesheet |
|---|---|---|---|---|---|---|
| Section Variant | variant | Section-style select | Default | No | <section class="section--alt"> | presets-{hash}.css |
| Full Width | is_fullwidth | Switch | No | No | <div class="fw-container-fluid"> | Grid CSS |
| Container Width preset | container_width | Multi-picker | Inherit | No | <section class="section--cw-narrow"> | presets-{hash}.css |
| Container Width Custom | container_width | Multi-picker → unit-input | Inherit | No | .u8f2a1c .fw-container{max-width:calc(1180px + 2×gutter)} | page-{id}.css |
| Min Height preset | min_height | Multi-picker | Auto | No | <section class="section--minh-80"> | Section styles.css |
| Min Height Custom | min_height | Multi-picker → unit-input | Auto (600px) | No | .u8f2a1c{min-height:600px} | page-{id}.css |
| Columns Horizontal Alignment | column_halign | Responsive image-picker | Default (left) | Yes | <section class="section--cols-center section--cols-lg-between"> | Section styles.css |
| Columns Vertical Alignment | column_valign | Image-picker | Stretch | No | <section class="section--valign-stretch"> | Section styles.css |
| Column Order reverse | reverse_columns | Responsive switch | No | Yes | <section class="section--rev section--rev-lg-off"> | Section styles.css |
- Section Variant — named visual preset for the band: Default, Alt (subtle off-white, for an alternating banded rhythm down the page), Light (force a light background + dark text), or Dark (force a dark background + light text). Pairs with Background on the Styling tab.
- Full Width — switch. On, the background spans edge-to-edge while the content stays in the container; off, the whole section is constrained to the container width.
- Container Width — constrain this section's content band to a narrower width than the site-wide Container Width: a named preset from the Container Widths library (Theme Settings → Components → Section Styles → Container Widths) or Custom (a unit-input). Inherit uses the global width.
- Min Height — minimum section height: Auto (fit content), 40% / 60% / 80% of viewport, Full viewport (100vh), or Custom…. Choosing Custom reveals a Custom Height unit-input (px, %, vh, vw, rem, em — default
600px). The viewport presets are predefined utility classes (.section--minh-80, etc.); only Custom emits a per-instance rule. Use a viewport preset with centered columns for a hero. - Columns Horizontal Alignment — align the section's columns within the row: Left / Default, Center, Right, Between, Around, or Evenly. Most visible when the columns don't already fill the row width. Per-breakpoint (base / tablet / desktop).
- Columns Vertical Alignment — where the content sits vertically when the section is taller than its content (most visible with a Min Height): Top / Default, Center, Bottom, or Stretch (columns grow to fill the height).
- Column Order — reverse the column order (e.g. swap an image/text pair), with independent per-breakpoint on/off overrides for tablet and desktop.
Styling
| Option | atts key | Control | Default | Responsive | Renders as | Stylesheet |
|---|---|---|---|---|---|---|
| Text Alignment | text_align | Alignment buttons | Inherit | No | <section class="text-center"> | frontend-grid.css |
| Background color / gradient / image / overlay | background | background-pro | None | No | <section style="background-color:#1a1a1a;background-image:linear-gradient(rgba(0,0,0,.45),…), url(…), linear-gradient(135deg,…);background-size:cover"> | Inline style |
| Background video | background | background-pro (video) | None | No | <section class="background-video"> | background.css + styles.css |
| Background Pattern | background_pattern | Multi-picker | None | No | <div class="pattern-layer"> | Pattern-library CSS |
| Top / Bottom Shape Divider | divider_top / divider_bottom | Multi-picker | None | No | <div class="sc-shape-divider sc-shape-divider--top"> | Section styles.css + inline |
| Top / Bottom Spacing | padding_top / padding_bottom | Spacing field | None | Yes | <section class="pt-4 pb-lg-6"> | presets-{hash}.css / page-{id}.css |
| Gap / Gap X / Gap Y | gap / gap_x / gap_y | Responsive short-select | Use Default Gap | Yes | <section class="section--gap-lg section--gap-x-md"> | presets-{hash}.css |
- Text Alignment — sets the CSS
text-alignfor all content in this section — headings, paragraphs and buttons inherit it together. Inherit forces nothing. - Background — a
background-procontrol with stacking color, gradient, image and video layers (overlay over image over gradient over color). Image attachment Fixed gives a parallax effect; video renders muted and looping with an optional poster/fallback. - Background Pattern — an optional decorative pattern layer painted behind the content (from the Background Patterns library).
- Top / Bottom Shape Divider — an SVG-shaped edge (tilt / curve / wave / triangle) at the section's top and/or bottom, each with its own color, height and horizontal flip.
- Top Spacing / Bottom Spacing — vertical breathing room above / below the section content.
- Gap — overrides the site-wide Default Gap for every Bootstrap row inside this section, setting both horizontal and vertical column gap. Default is Use Default Gap.
- Gap X (override) / Gap Y (override) — override Gap on just the horizontal / vertical axis. Each inherits from Gap unless set.
Min Height and Vertical Alignment are fixed enums — a small, unchanging set of values — so each is a reusable predefined class in the section stylesheet. Container Width draws from a user-extensible named-width library: each named width is generated once as a reusable .section--cw-{slug} class in presets-{hash}.css (exactly like Gap and Section Variant), so a width reused across many sections is defined a single time and cached site-wide. Only a one-off Custom width — which has no shared class — is written per-section into that page's page-{id}.css. Either way the value stays fully editable from the option; the difference is only where the CSS is written, never inline on the element.
Animations
Standard entrance-animation controls (Effect, Duration, Delay, Offset), shared across all elements — see Common controls → Animations.
Advanced
Shared per-element controls — Custom CSS Class / ID, Custom CSS, responsive visibility, custom attributes, Position / Z-Index, and Margin & Padding. See Common controls → Advanced.