The Container block is the core block behind our plugin. It allows you to create advanced (or simple) containers for your content.
It can be used by itself, but it’s also used inside our Grid Block for each grid item you add.
In most cases, you should start all of your content sections with a Container block. It allows you to set the container width, padding, and margin, which are all super helpful when building a section of content.
When you add the block by itself, you’ll see the Layout panel.
The “Set Full Width Content” option will only appear if you’re using the GeneratePress theme. It’s a shortcut to an option in the theme that sets the surrounding content container to full width.
The “Container” option refers to the outer wrapper of the Container element.
The “Inner Container” option refers to the element inside the outer wrapper which contains the content of the block.
A “Full width” container has no set width, while the “Contained” container using the Container Width option.
If you’re using GeneratePress, the Container Width option will default to your container width option in the Customizer.
The Container Block is used for each individual grid item when you add a Grid block. When being used as a grid item, your general options will look like this.
You’ll see the standard Layout options are no longer available, as they don’t apply to grid items.
Here you can set the width of your container (grid item) using a percentage.
If you’re not using vertical alignment in your grid, you can tell this specific container where to align vertically.
Remove Vertical Gap
Vertical gap is set in the Grid block. However, this option allows us to override that option for this specific container.
The Typography panel uses our Typography Component.
These options apply to all of the text inside the container, which can be useful if your text will all be uses the same font family etc..
The Spacing panel uses our Dimensions Component.
The minimum height of the container. This can be especially useful if you need to create full height containers. That can be done by choosing the
vh unit, and setting it to
If this is a standard container (not a grid item), a vertical alignment option will appear. Grid items have a vertical alignment option by default.
This controls the space inside the borders of the container.
This controls the space outside the borders of the container.
The border size controls the width of the border around the element. The color of the border is set in the Colors panel.
These options allow you to create rounded corners for your container.
Containers have the following color options at this time. You can learn more about our Color Picker Component here.
You can set a background gradient for your Container. Learn more about our Gradient Component here.
Setting a background image for your Container is super easy. First, click the “Set background image” button.
Choosing an image will make all of the background image options appear.
All of these are standard background image options in CSS. You can learn more about your available options for these controls below.
Background Color Overlay
Checking the background color overlay option will allow you to overlay the background image with your background color found in the Colors panel.
In order for the background image to show through, you must reduce the transparency of your background color option.
If you’ve set a background gradient, this will show through instead of the background color.
This option allows you to choose the HTML element for the container. By default, it’s a
div. However, you can also choose
An element ID can be useful for targeting specific containers with CSS, or linking to specific containers with an anchor.
Add your own custom CSS classes to the container element.
z-index allows you to control the stacking order of your containers. This can be useful if you’re using negative margin to stack containers on top of each other.