GenerateBlocks 2.0 is here - Read the release post

Learn GenerateBlocks
Container Block icon

Container

Description

The principle block for building layouts and grouping blocks together.

Toolbar

The Container block has the following toolbar options.

The toolbar for the Container block
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 the selected blocks inside a new Container Block

Block Settings

Tag Name

Choose the blocks HTML Element tag:

  • div
  • section
  • article
  • aside
  • header
  • footer
  • nav
  • main
  • figure
  • a
  • ul
  • ol
  • li
  • dl
  • dt
  • dd

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.