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 LayoutLayout utilities in the left panel. Widgets do not have it; this is a container-level panel, because what it sets is the section, not the content inside it.

Select a Group block, then open SettingsLayout utilities in the sidebar. Other blocks do not have it. 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.

#What these controls actually do

They point a section at part of the theme palette. They do not set colors.

That is the whole idea, and it is worth a sentence because it changes how you work. Pick Secondary surface and the section follows whatever secondary is in AppearanceCustomizeTheme Styles, in light and in dark, forever. Type a hex value into the builder's own background field instead and you have 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, so you never have to fix the copy by hand. 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.

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 the panel does not 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. Only shown for the fade style.

On dark and Inverted colours answer the same question in opposite ways: hold the palette, or follow it. That is why the panel only ever offers one of them at a time. If you want a section that is 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 rather than inventing a second corner size. Called Rounded corners in the block editor.

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 instead of drifting.

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: all sides, then left, right, top, and bottom on their own. Every one takes three values rather than two.

Inherit: Leave it to the theme. This is the default, and it is not 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. A checkbox cannot say that.

#Setting a screen size

Elementor puts the device switcher on each responsive control, where it always is.

The block editor puts one switcher above the whole cluster, because these six settings are usually rebuilt together. Pick Desktop, Laptop, Tablet, Mobile landscape, or Mobile, then set the controls. The choice is where you are editing, not something saved on the block.

#These are not 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 are 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, since below that there is no margin left to frame. They also stand down entirely in the boxed site layout and in the single post's frame mode, both of which draw a real frame around the content and would otherwise put a second line beside the first.

You get them by using the theme's own sections and page headers. The border controls above are for the box you are 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 column divider that disappears on a phone: Left border: On at desktop, Off at mobile.

Last updated 9 Sep 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.