Add a “inner” Container Block inside the selected Container Block.
Add Inner Container is not showing
The Add Inner Container option is not available for nested blocks (blocks inside other blocks). The selected block must be at the root level of the page to use this option.
Purpose
A common design pattern is to have a background that extends the full width of the viewport with overlaying content that has a contained width. The simplest and most common method of achieving this is to use a Container Block with an Inner Container.
The resulting block structure as represented in the List View.
Container Block ( Full Width )
inner Container Block
Content Area has Max Width
Preset Styles
The inner Container Block comes with some preloaded styles:
- Sizing > Max Width:
var(--gb-container-width)--gb-container-widthis a CSS Variable that contains a max width value. - Spacing > Margin Left & Right:
auto
used to centre the inner container
Setting the --gb-container-width
The max width value is set in one two places:
- GeneratePress theme > Customiser > Layout > Container -> Container Width
- GenerateBlocks > Settings. This option is used for all other themes.