Every component sits inside an invisible box called its container. Container Settings let you shape that box: the space inside and around it, a border, and a background color, image or video — the same way on every component.

The box around a component

Nested rectangles: an outer dashed orange rectangle labelled Margins (space outside the border, always transparent), a thick blue rectangle labelled Border, a light blue area labelled Padding (space inside the border, shows the background), and a white inner box labelled Component content: title, intro, items. Callouts mark margin top, bottom (default 32px), left and right.
From the outside in: margins, border, padding, content. The background fills the border and padding area; margins are always transparent.

The four groups of Container Settings map onto this picture:

  • Padding and Margins — how much empty space there is inside the border (padding) and outside it (margins).
  • Border — a line on any of the four sides, its color, and rounded corners.
  • Background — a background color and/or a background image or video, with opacity and blur, plus an optional text color for the section title and intro.
  • Background Media Parallax — makes a background image drift slowly as the visitor scrolls.

The container wraps the whole component: section title, intro text and items all sit inside it. When the component is narrower than 100% (Component Width), the container is the narrowed, centered box.

Where to find it

Container Settings is the last section of a component card, collapsed by default. Click its heading to open it; inside, each group (Padding, Margins, Border, Background) is a further collapsible section, followed by the Background media field.

The Container Settings section fully expanded: Padding (Top, Right, Bottom, Left all 0px), Margins (0px, 0px, 32px, 0px), Border (four sides set to none, Border color black, Border radius none), Background (Background color, Text color, Text color applies to, Background opacity 100, Background blur 0, and the Background Media Parallax group with Enable parallax, orientation Up, scale 1.4, delay 1), and the Background media field with an Add media button.
The complete Container Settings section with every group opened and default values.

Default values

A new component starts with a neutral container: no border, no background, no padding, and a 32-pixel margin below it so that stacked components do not touch.

GroupDefaultEffect
Padding0px on all sidesContent touches the border.
MarginsTop 0px, Right 0px, Bottom 32px, Left 0pxA gap under each component.
BorderAll sides none, color #000000, radius noneNo visible border.
BackgroundNo color, no text color, opacity 100%, blur 0, no media, parallax offTransparent; the page background shows through.

You only need to open Container Settings when you want to change something. Leaving it untouched is the right choice for most components.

Which components have Container Settings

  • Full set (padding, margins, border, background, media, parallax): Accordion, Carousel, Feature Box, Image Gallery, Infinite Logos, Links, Profiles, Read More, Special List, Tabs, Video, Views.
  • Padding and Margins only: Slideshow — each slide already has its own background, so the container has no border or background groups.
  • No Container Settings: Simple Content (it has per-region backgrounds instead) and Overlay Content.

Typical recipes

You wantSet
A colored band behind a componentBackground color + Padding 32px on all sides (so the content does not touch the colored edge) + optional Text color.
A framed boxBorder 1px or 2px on all sides + Border radius 8px + Padding 24px.
A photo behind a title and introBackground media (image) + Text color white + Padding 64px top and bottom; if the text is hard to read, add a few pixels of Background blur or choose a darker, calmer photo.
Two components closer togetherReduce the Margin bottom of the first one from 32px to 8px or 0px.
A cinematic heroBackground media (image) + Enable parallax.

Entering sizes

Padding, margin, border widths and border radius are typed as a number followed by a unit: 16px, 1.5rem, 2em or 5%. Pixels (px) are the easiest to predict. The word none is accepted for border sides and radius. A value without a unit, or with a typo, is rejected when you save the page.