Container Overview

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.

General Options

Standalone Block

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.

Grid Item

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.

Container Width

Here you can set the width of your container (grid item) using a percentage.

Vertical Alignment

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.

Typography

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..

Spacing

The Spacing panel uses our Dimensions Component.

Minimum Height

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 100.

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.

Padding

This controls the space inside the borders of the container.

Margin

This controls the space outside the borders of the container.

Border Size

The border size controls the width of the border around the element. The color of the border is set in the Colors panel.

Border Radius

These options allow you to create rounded corners for your container.

Colors

Containers have the following color options at this time. You can learn more about our Color Picker Component here.

Background Gradient

You can set a background gradient for your Container. Learn more about our Gradient Component here.

Background Image

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.

Advanced

Element Tag

This option allows you to choose the HTML element for the container. By default, it’s a div. However, you can also choose section, header and footer.

Element ID

An element ID can be useful for targeting specific containers with CSS, or linking to specific containers with an anchor.

CSS Classes

Add your own custom CSS classes to the container element.

z-index

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.