Advanced Styling with Container Blocks in WordPress

You can use Container Blocks to:

• Add custom IDs and classes to allow styling with CSS
• Apply styling, such as margins and paddings
• Set a background (solid, image, gradient)
• Control font options
• Define the HTML tag for the container

How to work with Container blocks

Add a Container block and then add other blocks inside it. These can be new blocks, existing blocks or even other container blocks for nested styling. You can change different style settings for any Container block. All blocks within that Container will then use those styles for their content. Keep in mind that if your theme has an explicit style for an element, it will overwrite the style set in the Container settings. To overwrite such theme styles you have to apply the change directly to the block that you’re styling (like a Heading block).

Adding new blocks to a container

To add a new block inside an existing Container block, click the Add block button. When adding the first block into the Container the Add block button is on the right side of the Container.

When there are already other blocks in a Container, the Add block button is at the top of a Container. Click on it to add more blocks.

Dragging existing blocks into a container

You can drag-and-drop any existing block into a Container block. You can rearrange the order of blocks inside a Container in the same way. When you drag blocks, a blue line indicates the place where you are about to drop it.

Placing one Container block within another

You can place Container blocks within other Container blocks. This allows you to:

• Have complete control over the styling of nested elements
• Adjust styling for multiple blocks inside one Container
• Move whole groups of blocks at once

Let’s take another look at our recipe example. This time, with each Container feature marked.

Reusing a Container block in multiple designs

WordPress allows you to reuse blocks on as many pages as needed. This allows you to avoid setting up the same blocks over and over again.

You can also make Toolset Container blocks to be reusable. This can save you a lot of time because Container blocks can feature a number of other blocks and specific styling.

To make a Container block reusable, first select it, then click the three dots icon for more block options. In the dropdown that appears, click the Add to Reusable Blocks option and give a name to your reusable block.

You can now insert this reusable Container block in any design you create. Click to insert a new block and in the Reusable section click the one you want to insert.

Turn a whole Container into a link

When needed, you can turn the whole Container block’s area into a link. This is often handy when you use containers to build a grid of posts, sliders or hero sections.

In the right sidebar, expand the Container as Link section and activate the option.

You can type in the URL manually or use a dynamic URL coming from a standard or custom post field.

Important: don’t have any links inside the container that is a link itself. This will break the container output because links within links are not allowed in HTML.