--- title: "How to Add a Container in WordPress?" url: https://nexterwp.com/docs/add-a-container-in-wordpress/ date: 2024-11-28 modified: 2026-09-28 lang: en author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-a-Container-in-WordPress_-1024x519.jpg word_count: 704 --- # How to Add a Container in WordPress? ## Key Takeaways - Nexter Blocks Container envuelve el contenido y controla ancho, diseño, espaciado y fondo dentro de una sección. - El bloque Container funciona en Nexter Blocks gratis y en Nexter Blocks Pro, y se activa en Nexter > Blocks del escritorio de WordPress. - El diseño del Container admite Flexbox o Grid, con ajustes como Content Width, width, height, gutter, padding, margin y opciones como Wrapper Link, Overlays y Sticky. - Las opciones Pro incluyen fondos con efectos, Sticky containers y shrinking headers, video backgrounds, parallax, Ken Burns, animated colour, animated gradient, colour change on scroll, particle effects y shape dividers; sin Pro, esos efectos no se muestran en la página publicada. 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. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-container/) ## 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 https://www.youtube.com/watch?v=aSnDTWP3iUw How to Add Flexbox Container in WordPress - Full Width & Boxed Layout. ## Steps - Add the **Container** block to your page. ![Adding the Container block](https://nexterwp.com/wp-content/uploads/2024/11/Nexter-Blocks-Container-Activation.webp) ![Nexter Blocks Container editor: Choose a Container Layout, Flexbox presets](https://nexterwp.com/wp-content/uploads/2026/09/container-add-choose-layout-full.webp)Adding the Container block: pick Flexbox or Grid, then a column preset. - Choose how the content inside should be laid out — a **flex** row or column, or a **grid**. ![Nexter Blocks Container editor: Layout panel with Content Width, Width, Container Width and Height](https://nexterwp.com/wp-content/uploads/2026/09/container-layout-content-width-full.webp)The Layout panel: Content Width (Boxed or Full), width, height and gutter. - Set the **width**: boxed, wide or full. ![Nexter Blocks Container editor: Flex Property panel with Reverse switched on, columns shown in reverse order](https://nexterwp.com/wp-content/uploads/2026/09/container-flex-property-reverse-full.webp)Flex Property with Reverse on: the two columns swap places. - Set the **padding and margin** that give the section its breathing room. ![Nexter Blocks Container editor: Extra Options panel with Wrapper Link, Overlays and Sticky](https://nexterwp.com/wp-content/uploads/2026/09/container-extra-options-full.webp)Extra Options: Wrapper Link, Overlays and Sticky. - Add a **background** — a colour, an image, or one of the Pro effects. ![Nexter Blocks Container editor: Inner Container selected, Layout panel with Column Width and Min Height](https://nexterwp.com/wp-content/uploads/2026/09/container-inner-layout-full.webp)Inner Container Layout: Column Width and Min Height. - Drop your content blocks inside it. ![Nexter Blocks Container editor: Inner Container Flex Property panel](https://nexterwp.com/wp-content/uploads/2026/09/container-inner-flex-property-full.webp)Inner Container Flex Property: direction, alignment, gap and wrap. - Publish and check the section at desktop, tablet and phone widths. ![The published container](https://nexterwp.com/wp-content/uploads/2024/11/container-style.webp) ![Nexter Blocks Container editor: Inner Container Extra Options with Wrapper Link and Sticky Column](https://nexterwp.com/wp-content/uploads/2026/09/container-inner-extra-options-full.webp)Inner Container Extra Options: Wrapper Link and Sticky Column. ## 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-row` with an inner `tpgb-cont-in`, plus the width class `tpgb-container-wide`.- **Grid layout is a class on the parent.** Measured: choosing grid added `tpgb-grid` to the container, and each child container carried `tpgb-container-inline`. See the [grid container guide](https://nexterwp.com/docs/create-grid-container-in-wordpress/).- **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](https://nexterwp.com/docs/make-a-sticky-container-in-wordpress/) and [shrinking headers](https://nexterwp.com/docs/create-a-shrinking-header-on-scroll-in-wordpress/).- [Video backgrounds](https://nexterwp.com/docs/add-a-video-background-in-a-wordpress-container/), [parallax](https://nexterwp.com/docs/add-parallax-effect-to-a-container-in-wordpress/) and [Ken Burns](https://nexterwp.com/docs/add-ken-burn-effect-to-a-container-in-wordpress/).- [Animated colour](https://nexterwp.com/docs/add-an-animated-color-background-in-a-wordpress-container/), [animated gradient](https://nexterwp.com/docs/add-an-animated-gradient-color-background-in-a-wordpress-container/) and [colour change on scroll](https://nexterwp.com/docs/how-to-change-background-color-on-scroll-in-wordpress/).- [Particle effects](https://nexterwp.com/docs/add-particle-effect-to-a-wordpress-container-background/), [rotating image backgrounds](https://nexterwp.com/docs/add-image-rotating-background-to-a-wordpress-container/), [image scroll animation](https://nexterwp.com/docs/add-image-scroll-animation-effect-to-a-wordpress-container-background/) and [auto image scroll](https://nexterwp.com/docs/add-auto-image-scroll-effect-to-a-wordpress-container-background/).- [Shape dividers](https://nexterwp.com/docs/add-custom-shape-divider-in-wordpress-gutenberg/) — 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](https://nexterwp.com/docs/create-grid-container-in-wordpress/). ### 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. ## Related Docs - [Create a grid container in WordPress](https://nexterwp.com/docs/create-grid-container-in-wordpress/)- [Make a sticky container in WordPress](https://nexterwp.com/docs/make-a-sticky-container-in-wordpress/)- [Make a clickable container in WordPress](https://nexterwp.com/docs/make-a-clickable-container-in-wordpress/)- [Add a video background in a WordPress container](https://nexterwp.com/docs/add-a-video-background-in-a-wordpress-container/)- [Add a custom shape divider in WordPress](https://nexterwp.com/docs/add-custom-shape-divider-in-wordpress-gutenberg/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before adding a container in WordPress with Nexter Blocks?** A: The Container block is free and works in Nexter Blocks free, with the block enabled under Nexter > Blocks in your WordPress dashboard. That matters because the page’s container is the base wrapper for width, layout, spacing, and background, so if it is not switched on you cannot build the section structure at all. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the Container block as part of that setup. **Q: Why is my WordPress container not full width?** A: A full-width setting can still be constrained by the theme. The page notes that some themes wrap content in their own page container, so the section never reaches the edge even when the block is set to full. A full-width page template may also be needed. That is why this problem is often a theme-level wrapper issue, not a container setting issue. The practical fix is to check both the block width and the theme’s page layout. **Q: How do I keep content aligned inside a container in WordPress?** A: Alignment depends on the layout choice. A flex row aligns along one axis, while a grid aligns along two. That difference matters because people often expect grid-style alignment from a flex row and end up with uneven placement. The page also notes that containers can nest, which is how you build rows of columns inside a section without forcing everything into one layout mode. For a deeper layout example, see the [grid container guide](https://nexterwp.com/docs/create-grid-container-in-wordpress/). **Q: Why does my container look right on desktop but wrong on mobile?** A: Responsive settings are per breakpoint, and desktop values inherit downward unless you override them. That means padding or layout that looks balanced on desktop can become cramped or oversized on a phone if you only set it once. The practical fix is to set layout and spacing at the smaller breakpoints too, instead of assuming desktop styles will adapt cleanly. This is one of the most common reasons a section feels broken on mobile even when the desktop version looks fine. **Q: Which background effects need Pro in Nexter Blocks?** A: Background effects are Pro-only in this setup. The page says sticky containers and shrinking headers are not free, and neither are video backgrounds, parallax, Ken Burns, animated colour, animated gradient, colour change on scroll, particle effects, rotating image backgrounds, image scroll animation, auto image scroll, or shape dividers. Plain colour or image backgrounds are free. Nexter Blocks Pro has to be active for those effects to render on the published page. **Q: What is the best way to build sections with containers in WordPress?** A: Use containers as section wrappers first, then nest inner containers only when you need columns or more complex structure. The page warns that containers inside containers inside containers make pages harder to edit and slower to reason about. It also notes that backgrounds sit behind everything inside, so busy backgrounds can hurt readability fast. A cleaner pattern is one container per section with deliberate spacing and breakpoint-specific settings instead of stacking wrappers everywhere.