Every page is really a stack of sections: a header band, a feature row, a call to action. The container is the thing that makes a section a section.
The Container block wraps whatever you put inside it and gives you control over its width, its layout, its spacing and its background.
Before You Start
- Edition: Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.
- Block to enable: Container, switched on under Nexter > Blocks in your WordPress dashboard.
Video Tutorial
Steps
- Add the Container block to your page.
- Choose how the content inside should be laid out — a flex row or column, or a grid.
- Set the width: boxed, wide or full.
- Set the padding and margin that give the section its breathing room.
- Add a background — a colour, an image, or one of the Pro effects.
- Drop your content blocks inside it.
- Publish and check the section at desktop, tablet and phone widths.
How It Behaves
The container renders a wrapper with an inner element, and your layout choices are written onto it as classes.
- Measured on a published page: a default container rendered
tpgb-container-rowwith an innertpgb-cont-in, plus the width classtpgb-container-wide. - Grid layout is a class on the parent. Measured: choosing grid added
tpgb-gridto the container, and each child container carriedtpgb-container-inline. See the grid container guide. - Containers nest. A container inside a container is the normal way to build a row of columns inside a section.
- Responsive settings are per breakpoint, so a row on desktop can become a column on a phone without duplicating the section.
- Measured with Nexter Blocks Pro deactivated: the container itself still renders. It is a free block.
What Needs Pro
The container, its layouts, its spacing and a plain colour or image background are free. The background effects and sticky behaviour are not. Each of these was measured with Nexter Blocks Pro deactivated and vanished completely from the published page:
- Sticky containers and shrinking headers.
- Video backgrounds, parallax and Ken Burns.
- Animated colour, animated gradient and colour change on scroll.
- Particle effects, rotating image backgrounds, image scroll animation and auto image scroll.
- Shape dividers — note this control appears in the free editor but renders nothing without Pro. Reported to the development team.
Limitations
- Nesting has a cost. Containers inside containers inside containers make a page that is hard to edit and slow to reason about.
- Full width is not always full width. A theme with its own page wrapper can constrain the container regardless of the setting.
- Spacing set only at desktop applies everywhere. Generous desktop padding becomes cramped or wasteful on a phone unless you set it per breakpoint.
- Backgrounds sit behind everything inside. A busy background under text is a readability problem no setting will fix.
Troubleshooting
My container is not full width
Set the width to full and check the theme is not wrapping the page in its own constrained container. Some themes need a full-width page template as well.
The content inside is not lining up
That is the layout setting. A flex row aligns along one axis, a grid along two — see the grid container guide.
It looks right on desktop and wrong on mobile
Set the layout and spacing at the smaller breakpoints too. Desktop values are inherited downwards unless you override them.
My background effect does nothing
Two things to check. Every background effect needs Nexter Blocks Pro — measured, they render nothing without it. And the effect settings only take hold once you have chosen the background type that owns them.
