Rows, columns, and components

Page Builder accepts content only where its parent-child rules allow it. Understanding those rules prevents failed drops, broken containers, and unnecessary nesting.

Sections define Gutenberg regions

In the block editor, a POM Section is the theme-aware counterpart of a native Group. It may remain empty, contain ordinary blocks directly, or contain Rows when a grid is needed. Its administrative title helps identify the region in List View and is not public content.

Rows divide content into columns

A row is the outer container for one horizontal section. Use a new row when the content has a different purpose, background, spacing treatment, or responsive behavior.

A Gutenberg Row contains Columns and may remain empty. It does not create a Column automatically. The legacy Page Builder still requires its established Row and Inner Row structures for stored shortcode content.

Choose horizontal row scrolling

Use a horizontal row for a sequence of cards, images or panels that should stay on one line. Set column widths so their combined width exceeds the row at the breakpoints where scrolling is needed; enabling the option does not resize them.

1. Open Pages → All Pages, edit the page and select the row.

2. In Page Builder, edit Row or Inner Row and enable Horizontal scroll. In Gutenberg, select Row → Layout → Row layout → Horizontal scroll.

3. Choose Horizontal scroll behavior:

   Choice	Visitor experience
   Native horizontal scroll	Scroll sideways with a trackpad, touch gesture or the browser scrollbar. This is the default, including for previously saved rows.
   Horizontal scroll with page scroll	On desktop with a mouse or trackpad, the row stays in place while vertical page scrolling advances through its horizontal content. The page continues after the last column; scrolling back reverses the sequence. Native horizontal input remains available.
   Horizontal scroll on hover	With a mouse, hover toward the left or right edge to move in that direction. Movement accelerates toward the edges and stops near the center, on pointer exit or at either end.

4. Save and preview the frontend. Gutenberg keeps a native, editable strip in the editor instead of running the pin or hover animation.

5. Check the first and last columns, links, keyboard focus and narrow screens. Enhanced rows can receive keyboard focus. In page-scroll mode, Left/Right move across the focused row, and Home/End reach the first/last position.

Both enhanced modes retain native scrolling for reduced-motion preferences and coarse pointers such as touchscreens. Page-scroll pinning starts at 992 px and requires the row to fit below the fixed header within the viewport. Rows taller than that space, rows in managed sticky containers, and page-scroll rows nested inside another page-scroll row use native scrolling. Keep independently pinned sequences in separate rows. A row without overflow needs no animation.

For an outer Page Builder Row, scrolling applies to its columns inside the section's container. Row stretch → Only content removes that structure, so horizontal row settings do not apply. Gutenberg places this choice on Row, including nested Rows, rather than on Section.

If no movement occurs, first check column widths, the selected behavior, viewport size, pointer capability and the device's reduced-motion preference. Page-scroll and hover modes load one shared conditional script; native mode needs no extra script. Image loads and responsive changes update the available distance.

Columns hold page content

A column is a region inside a row. Its width is defined by the row layout, while its own settings can control alignment, background, borders, spacing, visibility, and advanced options.

Add headings, text, images, buttons, forms, and other ordinary components inside a column.

Container palette colors

Gutenberg Section, Row, and Column provide Text color and Text hover color together with Background hover color in Background and Border hover color in Border. Choose a numbered theme palette swatch; clear it to keep the inherited or normal color. Border hover requires a visible border style and width. Hover over the block in the editor and in frontend preview to check the result.

The legacy Row, Inner Row, Column, and Inner Column settings offer the same choices. Their shortcode attributes are text_color, text_hover_color, bg_hover_color, and border_hover_color, each accepting palette slots 1–15 or an empty value. For example: [vc_column text_color="2" text_hover_color="3"]Content[/vc_column].

Both editors use text-main-N, text-main-N-hover, bg-main-N-hover, and border-main-N-hover. Text colors inherit through nested content unless a child has a more specific color; links retain their own theme or block color where that rule takes precedence. Column background hover also reaches its own background layer while the pointer is over content, including sticky content. Background images and overlays retain their normal layering and may cover a background color. Hover colors are optional enhancements; content must remain understandable on touch devices without hover. These options do not load extra frontend assets and are not offered on Paragraph, Heading, legacy Text Block, or legacy Title.

Components provide content or behavior

Components range from simple content, such as Title and Text Block, to interactive or data-driven features such as forms, carousels, listings, and Advanced map.

Some components are containers. Their child items are restricted:

• a map accepts map markers or routes;
• a tab or accordion accepts its matching sections;
• a carousel accepts its supported slides or items.

If an item is absent from the library inside a container, it may not be a valid child there.

Nested rows

Gutenberg uses one Row block at every supported nesting level; there is no separate Inner Row block or reduced option set. In the legacy Page Builder, an Inner Row remains the corresponding shortcode container. Use nesting only when a section genuinely needs another grid. Deeply nested rows are harder to reorder, adapt to mobile, and understand with assistive technology.

Conditional frontend assets

Structural Gutenberg blocks reuse the same conditional theme assets as their legacy counterparts. Jarallax is requested only by Sections, Rows, or Columns with a parallax or video background. Animated-background support is limited to Sections, and Rows request it when a background image is present. The background carousel and next-section control are limited to Sections. A Row using hide/reveal content reuses the theme's existing More content script when that feature is enabled in Theme Settings.

Source order matters

The canvas order becomes the base reading and stacking order. Before styling a multi-column layout:

1. place the most important content first;
2. keep a heading with the content it introduces;
3. make the narrow-screen order understandable;
4. avoid relying on visual position alone to explain a relationship.

Verify a structure

Collapse unrelated rows and read the affected branch from the outside inward: row, column, component, optional child item. Preview afterward and check the same sequence at a narrow viewport.