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.

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.

Flex

This is an advance option that controls what proportion of space flex items take up compared to the other flex items. Please refer to this article for more info.

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.

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

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.

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.

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

Advanced (Pro Feature)

Advanced Backgrounds are similar to our Effects feature, but they handle background images and gradients for the Container block. Refer to this article for more info.

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.

Use inline style

This option adds the background image into the HTML markup.

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.

Dynamic Data

In our Container block, we can apply dynamic data to your background images so you can use data like featured images and post meta as your backgrounds.

Effects (Pro Feature)

Our Effects feature is one of the more advanced aspects of GenerateBlocks Pro. It allows you to build complex CSS effects for you blocks directly inside the editor. Refer to this article for more info.

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.

Custom Attributes (Pro Feature)

Apply any custom data-* attributes to the headline

Hide on (Pro Feature)

Hide/show the headline on desktop, tablet and mobile devices