Verba layout utilities: surface, behavior, borders

This article covers functionality available to customers on the Pro version.

Any section can take a theme surface, sticky behavior, and borders without you writing CSS. The panel is called Layout Utilities and it exists twice, once on an Elementor container and once on a core Group block, with the same settings in both.

#Where it is

Select a container, then open the Layout tab and the Layout Utilities section. Widgets don't have it; it's a container-level panel because it styles the section around the content.

Select a Group block, then open the Layout Utilities panel in the block sidebar. Other blocks don't have it, so wrap what you want to treat in a Group first.

Both write the same theme styles. A page built in Elementor and a page built in the block editor come out identical, and moving a section from one to the other keeps its look.

The Layout Utilities panel of a Group block with background, on dark, inverted colours, overlay, rounded corners, beam, sticky, and five border controls — Layout Utilities on a Group block.

#What these controls do

They point a section at part of the theme palette.

Pick Secondary surface and the section follows whatever secondary is in AppearanceCustomizeVerba ThemeTheme Styles, in light and in dark, for as long as the site runs. Type a hex value into the builder's own background field instead and you've made a section that ignores your palette, ignores dark mode, and has to be found and edited by hand the day you rebrand.

Use the builder's own background field for a photograph. Use Layout Utilities for a color.

#Appearance

Which surface the section is painted with.

Off leaves it transparent, so the page shows through. Primary surface is the page background itself, useful when a section sits on a colored parent and you want it to read as the page again. Secondary surface is the muted band the theme uses to separate one section from the next. Accent surface paints the section in your accent color and switches the text inside it to the accent's paired foreground. Dark surface holds the section on the dark palette whatever the site is doing. Pattern fills it with the Background Pattern chosen in Theme Styles.

Holds the section on the dark palette without painting a background, for content sitting over a dark photograph. Hidden while Dark surface is chosen, because that already carries it, and hidden while Inverted colours is on.

Flips the section to the opposite of the current scheme. On a light site it goes dark; when a reader switches to dark, it goes light. Hidden while On dark or Dark surface is in play.

Block editor only. Washes the section's background image in the page color so text stays readable over it. An Elementor container has this in its own background settings, so its panel doesn't repeat it.

Fade into the page lets the image show through at one end. Even wash covers the whole section evenly.

Which edge the page color starts at: Bottom, Top, Left, or Right. Only shown for the fade style.

On dark and Inverted colours answer the same question in opposite ways (hold the palette, or follow it), so the panel offers only one of them at a time. For a section that's dark on a light site and stays dark when a reader flips to dark mode, see building a section that stays dark.

#Behavior

Pins the section below the header as the page scrolls. Set per screen size, so a sidebar column can be sticky on desktop and scroll normally on a phone.

Rounds the section with the global radius from Theme Styles, so it matches your cards and inputs. Called Rounded corners in the block editor.

Block editor only. Sets the Group's left and right padding to the theme's container spacing, the same side gap the rest of the page uses at every screen size. It replaces any side padding you typed in the block's own Dimensions panel, so turn it off to set your own.

Draws a light traveling around the section's perimeter. Every beam on the page runs off one timer, so several of them stay in step.

Standard uses your accent. Rainbow cycles through colors. Only shown with the beam on.

How heavy the stroke is: Thin, Medium, or Heavy.

Moves the beam inside the section edge. Use Small or Medium when a flush beam sits too close to whatever is next to it.

#Borders

Five controls, each one a border on the section: Solid border on all sides, then left, right, top, and bottom on their own. Every one takes three values.

Inherit: Leave it to the theme. This is the default, and it isn't the same as Off.
On: Draw the border at this screen size.
Off: Remove it at this screen size, including one that a wider screen turned on.

Three values instead of a checkbox, because a border is usually a screen-size decision. A column divider that separates two columns on a desktop separates nothing once the columns stack on a phone, so it wants to be On at desktop and Off at mobile.

#Setting a screen size

Elementor puts its device switcher on each responsive control, where it always is, and offers every breakpoint you have enabled in Elementor.

The block editor follows its own device preview. Switch the preview to Desktop, Tablet, or Mobile in the editor toolbar, and Sticky and the five border controls show and save the value for that size. Laptop and mobile landscape values can only be set from Elementor; a Group block keeps any it already has.

#These aren't the page rails

The thin vertical lines running down both edges of the content on a wide screen are a different thing, and nothing in this panel turns them on or off.

They're part of the theme's editorial frame: guide lines drawn by the sections themselves, marking where the content area ends and the page margin begins. They only appear while the window is wider than your content width. They also stand down in the boxed site layout and in the single post's frame mode, both of which draw a real frame around the content already.

You get them by using the theme's own sections and page headers. The border controls above are for the box you're editing right now.

#What to reach for

A section that separates itself from the one above: Background: Secondary surface. No borders needed.
A call to action in your brand color: Background: Accent surface. The text inside follows automatically.
A dark band on a light site that stays dark: Background: Dark surface. See building a section that stays dark.
Text over a dark photograph: The image in the builder's own background field, then On dark.
A full-width Group whose content lines up with the rest of the page: Container offset on, instead of typing side padding into every Group.
A column divider that disappears on a phone: Left border: On at desktop, Off at mobile.

Last updated 10 Oct 2026

Was this article helpful?

FIND THE ONE THAT FITS YOUR PROJECT

Import a demo, swap the content, adjust the layout. Modern WordPress under the hood, fast even when the site fills up.