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.

Layout – Standalone Block

When you add the block by itself, you’ll see the Layout panel below:

Container

The outer wrapper of the Container element.

A “Full width” container has no set width, while the “Contained width” container uses the Container Width option.

Inner Container

The element inside the outer wrapper which contains the content of the block.

Container Width

The width of the contained width option.

If you’re using GeneratePress, the Container Width option will default to your container width option in the Customizer.

Element Tag

This option allows you to choose the HTML tag name used for the outer Container.

Make Page Full Width

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

Layout – Grid Item

The Container Block is used for each individual grid item when you add a Grid Block. When you add a Grid block to your page, it will automatically insert Container blocks as each grid item. When being used as a grid item, your general options will look like this:

Container Width

This option allows you to 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.

Common usage for this option would be for the last row of the grid as demontrated below:

Element Tag

This option allows you to choose the HTML tag name used for the outer Container.

Order

This option appears when using the tablet and mobile controls. It allows you to set different orders for the container in the grid as below

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.

Vertical Alignment

If this is a standard container (not a grid item), a vertical alignment option will appear when minimum height option is set. Grid items have a vertical alignment option by default.

Padding

This option controls the space inside the borders of the container.

Margin

This option controls the space outside the borders of the container.

Border Size

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

Border Radius

This option allows you to create rounded corners for your container.

Outer z-index

This option controls the z-index of the outer Container element.

Inner z-index

This option controls the z-index of the inner Container element.

Colors

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

Backgrounds

Image URL

Upload a background image for the container. Click the Browse button to choose an image from the media library. Alternatively, you can add a custom URL to the input.

Image Size

If you’re using an image from your Media Library, you can choose an image size from the available list of sizes.

Selector

This is an advanced option most users don’t need to worry about.

If you choose Element, the background image will apply to the outer Container element itself. This is pretty standard in most cases.

If you choose Pseudo Element, the background image will be added a pseudo element inside your Container. This is done automatically when needed.

Image Opacity

This option requires your Selector to be set to Pseudo Element. It will automatically change that option for you if you set an opacity.

This controls the opacity of the background image which allows whatever is behind the image to show through (a background color or gradient).

Size

Set the size of the element’s background image. See more info here.

Position

Set the initial position for each background image. See more info here.

Repeat

Set how background images are repeated. See more info here.

Attachment

Set whether a background image’s position is fixed within the viewport, or scrolls with its container. See more info here.

Use Gradient

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

Shapes

The Shapes panel allows you to add an unlimited number of SVG shapes to your Container.

To add your first shape, click the Add Shape button.

A default shape is automatically added.

To delete the shape, click the X icon.

To edit the shape, click the wrench icon.

When you edit a shape, you’ll find the following options:

Choosing a Shape

You can choose a shape from one of the 4 categories: Waves, Angles, Curves and Triangles.

Color

Choose the color of the shape using our Color Component.

Location

Choose whether the shape appears at the top or bottom of the Container.

Height

Choose the height of the shape. This will make the effect of the shape more pronounced. You can change the height of the shape for Desktop, Tablet and Mobile devices.

Width

The width of the shape needs to be at least 100%. By making it wider, you will make the effect of the shape less drastic. The wider it goes, the more “flat” the shape will become. This can be changed on Desktop, Tablet, and Mobile devices.

Flip Horizontally

This option will flip the shape horizontally so it’s a perfect mirror of itself.

Z-index

The z-index option controls the stacking order of the shapes. As you can add as many shapes as you want, this allows you to control which shapes display on top of each other. You can also tell certain shapes to stack on top of your inner container content by making it a higher value than the Inner z-index option in the Layout panel.

Advanced

HTML Anchor

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

Additional CSS Classes

Add your own custom CSS classes to the container element.