Rows, columns, spacing, and responsive design

Use this workflow when a page needs more than one column. It combines structure, responsive behavior, backgrounds, and final viewport review.

Begin with the narrow-screen order

Write the intended reading order before choosing a desktop grid. The builder's source order remains the foundation when columns stack and when assistive technology reads the page.

Keep a heading with the content it introduces, and put the most important action before secondary material.

Choose the row layout

In the block editor, a Section may remain empty or hold content blocks directly. This intentional difference from the legacy Page Builder lets a Section act like a theme-aware Group without requiring a Row. Add a Row only when the Section needs a grid, then add or configure its Columns. A Row may also remain empty until its structure is ready. Select any of the three structural blocks and use the inspector tabs to keep related decisions together:

• Layout controls the container, grid, width, offset, alignment, and sticky behavior;
• Style controls backgrounds, overlays, and borders;
• Advanced controls positioning, spacing, visibility, identifiers, and the legacy column animation where supported.

The editor canvas previews the configured body background, main text and link colors, body and heading fonts, typography scale, grid widths, responsive spacing, borders, element backgrounds, overlays, and visibility state. Body gradients and background images are also represented. This preview is intentionally limited to the global and structural styles needed for editing; the complete public stylesheet is not loaded into Gutenberg.

Use WordPress's native Mobile, Tablet, and Desktop preview choices for POM's mobile, tablet-portrait, and desktop ranges. The same menu adds Tablet Landscape for the 768–991 px range and Very Large (1800px) for a scaled overview of a wide desktop canvas. Fit Page scales a 1440 px desktop composition until its complete height fits in the editor, providing a bird's-eye view of long pages. Very Large remains editable, while Fit Page is read-only because its scale may be too small for reliable block interaction. Both are preview aids rather than responsive breakpoints, so they use Desktop values. These modes change only the editor canvas and do not add styles or classes to the public page.

Open the row layout control and choose the simplest proportion that fits the content:

• 12/12 for one full-width column;
• 6/6 for two equal columns;
• 4/4/4 for three equal regions;
• 8/4 or 4/8 for a main region and a narrower companion.

Avoid narrow text columns and empty columns used as spacers.

Use Add column in the Row toolbar or inspector to extend the grid without leaving the selected structure. Removing the last Column leaves the Row empty; use the same action when you are ready to add a new Column.

Configure the columns

Open Edit this column to set supported options such as content alignment, background, border, spacing, visibility, and advanced behavior. A column can align its contents above, in the middle, or below.

Use the Column's Border panel to choose its palette color, style, and responsive widths. Enable Add viewport class when custom styling or behavior must react to whether the column is currently inside the viewport; the theme adds check-viewport and toggles is-in-viewport on the public page.

Open Animations to configure the same scroll animation used by Page Builder columns. You can choose whether the effect starts as the top or bottom of the column enters the viewport, reverse it, disable it on mobile, and adjust opacity, scale, rotation, and translation on each supported axis. These controls use the theme's existing column animation runtime; they do not add a separate Gutenberg entrance animation.

Use an Inner Row only when the content requires another genuine grid inside a column.

Choose sticky behavior by container type

The POM blocks use the same managed sticky behavior as their Page Builder counterparts:

• enabling Sticky on a Section keeps that section visible and replaces the previous managed sticky row;
• enabling Sticky on a Row reveals Sticky row behavior, where Replace previous sticky row swaps the active row and Stack below previous sticky rows keeps both rows visible;
• enabling Sticky on a Column keeps the column contents within the height boundary established by its sibling columns.

Sticky rows and columns account for the visible fixed header. Review them while scrolling down and back up, and test columns with both shorter and taller content. Column sticky behavior is disabled on narrow viewports so content remains in normal reading order.

Treat backgrounds as decoration

Sections, Rows, and Columns support palette colors, desktop and mobile background images, overlays, and video backgrounds. Choose the registered image size and whether it should load lazily or eagerly. Columns can keep background layers inside their responsive padding, and Sections can place image, video, slider, and overlay layers on the left or right half with an above or below mobile layout. Preserve the meaning in text; do not make essential information available only in a background.

On the public page, Gutenberg Sections, Rows, and Columns use the same structural classes, flex alignment, background layers, device visibility, and ScrollMe data as their Page Builder equivalents. Section remains server-rendered; Rows and Columns keep their saved block markup. An optional shared permission rule can conditionally suppress any of the three at render time without making Row or Column dynamic. Selected spacing, border widths, images, gradients, and split-background heights are written to the generated per-post stylesheet instead of inline style attributes.

For image backgrounds:

• choose an intentional crop;
• provide a mobile image when the desktop composition does not survive a narrow viewport;
• keep Background image loading on Lazy (default) unless the image must be requested immediately;
• maintain enough contrast, using an overlay where necessary.

Supported video backgrounds can be configured to Start after first interaction, reducing unsolicited motion and initial work. Background videos play without sound. Direct files, YouTube, and Vimeo start or resume only while their section intersects the viewport, pause after leaving it, and pause while the browser tab is hidden. A background that the visitor or another control paused does not restart merely because it enters the viewport again. YouTube backgrounds also wait until their player is ready before the theme controls playback. This supports inline autoplay on mobile browsers, including Safari on iPhone, when the browser permits autoplay.

Background slideshows and full-viewport height belong to Sections. Animated background movement belongs to Sections and Rows. Columns use the Legacy column background options and ScrollMe transforms instead of those row-only effects.

When the site includes Pomatio Video Hosting, choose Self-hosted and paste the video's Logical video URL into the MP4 field. Rows, inner rows, columns, inner columns, and the Section block keep the same Jarallax background path as direct MP4 URLs. The video must belong to the current site and have its standard progressive output; Scroll does not need to be enabled. The logical URL resolves that private MP4 temporarily. Do not copy a temporary delivery URL from browser developer tools. Video.js is not loaded for backgrounds.

Apply responsive visibility only when necessary

The shared Device visibility control has four ranges:

• Large: 993 px and wider;
• Medium: 769 px through 992 px;
• Small: 545 px through 768 px;
• Extra small: 544 px and narrower.

Visibility changes whether the rendered component is displayed at each range; it does not create an alternative content version. See Use device visibility.

Use Permission rule when a structural block should be conditional. The list comes from Theme Settings > Permission rules, where roles, purchases, subscriptions, and other supported conditions can be combined. Leave the field on Always visible when no condition is required.

Rows also offer Hide/reveal long content when that theme feature is enabled. Set the trigger height, click or hover behavior, gradient shadow, button style, and the open and close labels. The public output uses the same morecontent runtime and data attributes as legacy Inner Rows.

Identify and link Gutenberg Sections

Use the Section's Gutenberg Advanced panel when CSS or a link needs a stable public selector:

• HTML anchor sets the Section's public id and is also used by its generated per-post styles;
• Additional CSS class(es) are added directly to the public Section wrapper;
• when no anchor is supplied, the block maintains its own unique internal identifier.

Set Administrative title in the Section Layout panel to give the Section a recognizable editor and List View label. It is never printed on the public page.

When Scroll to next section arrow is enabled, its color controls use the theme palette and the arrow skips non-Section siblings to reach the next Section block.

Review the result

Check at least one viewport in every range used by the page. Confirm:

• the stacking order still explains the content;
• no text or control is clipped;
• the page has no horizontal scroll;
• background crops and overlays preserve readability;
• buttons, forms, tabs, menus, and carousels remain operable;
• hidden content is not the only route to an important task.

Use Control spacing and alignment for detailed spacing decisions.