What It Does
Containers in WordPress provide a way to organize and structure content on a webpage. With containers, you can easily group elements and control their layout, making your website more visually appealing and organized.
With the Container block from the Nexter Blocks, you can easily create sections in your WordPress layout.
Why It Matters
Every section of a page, from a hero row to a multi-column feature grid, needs a wrapping element that controls width, spacing, and alignment for its child blocks. The Container block is that wrapping element for Nexter Blocks: instead of relying on theme-level section styles or hand-written CSS, you get per-device layout controls, in the block editor, for width, height, gap, and alignment.
What You Get
Required Setup:
- Make sure the default WordPress Block editor is active.
- You need to have the Nexter Blocks plugin installed and activated.
- Make sure the Container block is activated. To verify this, visit Nexter → Blocks → and search for Container and activate.
- This is a Freemium block to unlock the extra features; you need the PRO version of the Nexter Blocks.
Benefits
- Two layout engines, Flexbox and Grid, in a single block, so you don’t need a separate plugin for grid-based sections.
- Per-device controls for width, height, gutter space, direction, and alignment, which cuts down on hand-written responsive CSS.
- Inner Containers reuse the same Layout, Flex Property, and Extra Options tabs as the main container, so nested layouts don’t add a new learning curve.
Capabilities
- Two Layout Types – You can select from two layout types, Flexbox and Grid.
- Full Width – You can easily make the container full width.
- Sticky (Pro) – You can easily make a container sticky.
- Wrapper Link – You can make a container clickable.
- Parallax Effect (Pro) – You can add a parallax effect to a container background.
- Video Background (Pro) – You can easily add a video background.
- Animated Color Background (Pro) – You can create an animated color background.
- Multiple Background Images (Pro) – You can easily add multiple background images.
- Animated Gradient Color Background (Pro) – You can create an animated gradient color background.
- Change Background Color on Scroll (Pro) – You can change the background color on scroll.
- Particle Effect (Pro) – You can easily add particle effect to the background.
- Image Scroll Animation (Pro) – You can add image scroll animation to the background.
- Auto Image Scroll Effect (Pro) – You can add an auto image scroll effect to the background.
- Shape Divider (Pro) – You can easily add different shape dividers to sections.
Watch: Container Block Overview
How It Works
The Container block is a dynamic Nexter Blocks block: when you add it to a page, you choose a Layout Type (Flexbox or Grid) up front, and the block then renders that layout on the front end with the Layout, Flex Property, Extra Options, and Style settings you configure in the editor. Nested “Inner Container” blocks share this same rendering pipeline, which is why the multi-column layout re-uses the single-column container’s option tabs.
On the Style tab, background layers stack in a fixed order: the Background Top Layer renders first in the HTML, then the Background Middle Layer, then the Background Deep Layer last. These layered backgrounds override the container’s default background style, so if a background isn’t showing as expected, check whether a layer above it in this stack is covering it.
How to Use It
Activate the Container Block
Go to
- Nexter → Blocks
- Search the block name and turn on the toggle.
Create a Container
To create a container in WordPress add the Container block from the Nexter Blocks on the page.
Then, you’ll see two container layout types –
- Flexbox – To create a container using Flexbox layout.
- Grid – To create a container using Grid layout.
You have to choose the appropriate container layout as per your requirements. Let’s select Flexbox here.
You can add a single-column horizontal or vertical direction container, multi-column, multi-row, or multi row and column container.
Add Single Column Container
To add a single-column container you can choose either a horizontal or vertical direction container, let’s select horizontal here.
Layout
From the Content Width section, you can set the container width. Here you’ll find two options –
- Boxed – For creating a boxed container.
- Full – For creating a full-width container.
Let’s select Boxed here.
Similarly, you can select Full to create a full-width container.
Note: To create a full-width container make sure the active template supports a full-width container.
From the Width section, you can set the width of the container for responsive devices. You can set the value PX (pixels), % (percentage), and VW (viewport width).
Then from the Height dropdown, you can set the height of the container. Here you’ll find three options –
- Default – To keep the container height as per the content in the container.
- Fit To Screen – To make the container equal to the screen height.
- Min Height – To set a minimum height for the container. For this, you’ll get an option to set the height.
From the Gutter Space section, you can add space between columns of the container for responsive devices.
From the Overflow section, you can set the container overflow to visible or hidden.
Then from the HTML Tag dropdown, you can change the HTML tag of the container.
Flex Property
From the Direction section, you can set the container direction for responsive devices. Here you’ll find two options –
- Vertical – For creating a vertical direction container, where all its child elements will be vertically aligned.
- Horizontal – For creating a horizontal direction container, where all its child elements will be horizontally aligned.
By enabling the Reverse toggle, you can order the container child elements in the reverse order.
Then by enabling the Responsive Reverse toggle, you’ll get an option to order the container child elements in the reverse order for tablet and mobile separately.
From the Row Alignment (Align Items) section, you can align the container child elements based on CSS flex align-item properties for responsive devices.
From the Column Alignment (Justify Content) section, you can align the container child elements based on CSS flex justify-content properties for responsive devices.
Then from the Elements Gap section, you can manage the gap between the child elements of the container for responsive devices.
You can set the flex-wrap property for the container from the Wrap section for responsive devices. You can set the container to wrap or don’t wrap.
By enabling the Flex Child toggle, you can set different flex properties to the individual child items of the container.
Once enabled you’ll see an item, that will target the first element of the container. Open the item here you’ll find some options –
- Shrink – To set CSS flex-shrink property.
- Grow – To set CSS flex-grow property.
- Basis – To set CSS flex-basis property.
- Self Align – To set CSS align-self property.
- Order – To set CSS flex order property.
You can click on the + Add Item button to add more items to target subsequent elements.
Extra Options
From the Wrapper Link toggle, you can add a link to the container.
Then, from the Overlays toggle, you can make the container overlap the next section. This can be useful to create an overlay header effect.
From the Sticky toggle, you can make the container sticky.
Add Multi Column Container (Inner Container)
To add a multi column container, add the Container block and select a multi column layout.
You’ll see multiple inner containers inside the main container.
For the main container, you’ll see the same options available for the single-column container.
You’ll see additional settings for the inner containers.
Layout
From the Column Width section, you can set the width of the inner container for different devices.
Then from the Min Height section, you can set a minimum height of the inner container for responsive devices.
Flex Property
In this tab, you’ll find the same options available for the main container.
Extra Options
From the Wrapper Link toggle, you can add a link to the inner container just like the main container.
From the Sticky (Pro) toggle, you can make the inner container sticky within the main container. Once enabled you’ll see some options –
Top Spacing – From here, you can set the top offset i.e. the space from the top where the container will stick.
Bottom Spacing – From here, you can set the bottom space for the sticky container.
Sticky Desktop – From this toggle, you can make the container sticky on a desktop screen.
Sticky Tablet – From this toggle, you can make the container sticky on a tablet screen.
Sticky Mobile – From this toggle, you can make the container sticky on a mobile screen.
Style the Container Block
To style the Container you’ll get all the options under the Style tab.
Background – From here, you can style the container background.
Border/Box Shadow – From here, you can add border, border-radius, and box shadow to the container.
Shape Divider – From here, you can add a custom shape to the container.
Background Deep Layer (Pro) – From here, you can add different creative backgrounds to the container.
- Animated Color – With this, you can add an animated color background to the container.
- Creative Image – With this, you can add a moving image and parallax effect to the container.
- Creative Video – With this, you can add a video background to the container.
- Creative Gallery – With this, you can add multiple background images to the container.
- Gradient Animate Color – With this, you can create an animated gradient color background to the container.
- On Scroll Animation – With this, you can change the background on scroll.
Background Middle Layer (Pro) – From here, you can add different creative backgrounds to the container.
- Canvas Effect – With this, you can add particle effect to the container background.
- Modern Image Effect – With this, you can add an image scroll animation effect to the container.
- Auto Moving Layer – With this, you can add an auto moving image background.
Background Top Layer (Pro) – From here, you can add an overlay background color or image to the container.
Texture Image – From here, you add an overlay image to the container.
Color – From here, you can add overlay background color to the container.
You’ll see some additional styling options for inner containers in the Style tab.
Advanced options remain common for all our blocks, you can explore all it options from here.
Also, see the Spacer block for adding precise vertical or horizontal space between blocks outside of a container’s gutter or gap settings.
Use Cases
- Full-width hero row – A single-column Flexbox container set to Full content width for a homepage hero section.
- Multi-column feature grid – A Grid layout container with Inner Containers for pricing tables, feature cards, or team member grids.
- Clickable card layout – A container with Wrapper Link enabled so the whole card, not just a button, is clickable.
- Sticky sidebar or CTA banner – A container (or Inner Container) with the Sticky toggle enabled and per-device Sticky Desktop/Tablet/Mobile controls.
- Overlapping header effect – A container with Overlays enabled so it overlaps the section below it.
Limitations
- Full-width containers only render full width if the active theme/template supports a full-width container; otherwise the container stays boxed.
- Sticky, Parallax Effect, Video Background, Animated Color/Gradient Background, Multiple Background Images, Change Background Color on Scroll, Particle Effect, Image Scroll Animation, Auto Image Scroll Effect, and Shape Divider all require the Pro version of Nexter Blocks.
- Once a Container block is added with a specific Layout Type (Flexbox or Grid), that layout type cannot be switched afterward from the block’s own settings; both layout types also share the single “Container” label in the block list, so an editor cannot tell which one is in use just by looking at the inserter.
- The container’s default content width (1140px when Content Width is left unset) is not shown as a value anywhere in the Layout panel; confirming it currently requires inspecting the front end with browser DevTools.
Troubleshooting
Sourced from real POSIMYTH support tickets on the Container block (FluentSupport, product: Nexter WP).
“Container width won’t stick, it goes full width live even though the editor preview shows the set width.” Confirm Content Width under Layout is set to Boxed, not Full, then re-check the Width field for the affected device (Desktop/Tablet/Mobile each have their own value). A theme or page-builder global container-width setting can also override the block’s own width; clear any page cache after changing it.
“I can’t get the outer container at theme width with the inner containers filling all the horizontal space (or the reverse).” Set the outer container’s Content Width to match what you want the row to look like (Boxed for theme width, Full for edge-to-edge), then set each Inner Container’s own Column Width independently under its Layout tab; the inner container’s width is not automatically inherited from the outer container.
“Percentage width set on mobile isn’t applying on the live site, margins go missing.” Re-open the Width field specifically on the Mobile device tab (the responsive device switcher is per-field, not global) and confirm the unit shown is %. If the value looks correct in the editor but not on the front end, clear any page/CSS cache, since responsive container CSS is generated per breakpoint.
“Image blocks inside my container are aligned left on tablet/mobile no matter what I change.” The container’s own Row/Column Alignment controls the position of its direct child blocks; an image block nested further inside another wrapper (or with its own alignment set) needs its alignment checked directly, since the container’s alignment setting only applies to its immediate children.
