Container

Description

The principle block for building layouts and grouping blocks together.

Toolbar

The Container block has the following toolbar options.

Add Inner Container

Add a “inner” Container Block inside the selected Container Block. This is a shortcut option for building full width layouts that require contained content.

Add to Container

Add the selected blocks inside a new Container Block

Block Settings

Shapes

More information on Shapes can be found on the Shape Block article.

Shapes can be added to a Container Block or any variant of them. You can choose from a list of predefined Shapes or add SVG HTML for custom shapes.

List View

Each shape is added as its own block within the Container. A Container can have multiple Shape blocks inside.

• Container
• Shape
• Shape

Shapes Pro

With GenerateBlocks Pro you can create your own custom shape and icon libraries using the Asset Library feature.

Inline Background Image

This option adds a inline background image to the Blocks background. You can choose to either:

1. Browse for a static image in the media library
2. Insert a dynamic tag to display a dynamic image e.g Featured Image

When you add a Inline Background Image, GenerateBlocks automatically:

1. Adds the Image URL to a CSS variable named --inline-bg-image
2. Inserts the variable into the Blocks HTML style attribute
3. Builds the block Styles > Background properties to display the background image

Here is an example of the HTML of a Container Block with a Inline Background image.

<div class="gb-element-22394958" style="--inline-bg-image: url(https://learn.generatepress.com/wp-content/uploads/2024/11/headline-block-settings-o.png)"></div>

Adjusting the Background Image Styles

With a inline background image set, you can modify the image size , position and other style properties in the blocks Styles > Backgrounds panel.