Skip Navigation
Buy Now
Home » Course lessons » Advanced Styling with Container Blocks in WordPress

Advanced Styling with Container Blocks in WordPress

Container Blocks allow to style individual blocks, as well as groups of blocks. With Containers, you create reusable design elements that have their content and styles.

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.

Adding a block inside a Container block
Adding a block inside a Container block

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.

Adding a block to a Container that already has some content
Adding a block to a Container that already has some content

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.

Dragging an existing block into a Container
Dragging an existing block into a Container

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.

Recipe page using nested Container blocks to achieve custom styling and layout
Recipe page using nested Container blocks to achieve custom styling and layout

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.

An example of a Container block you could reuse in other designs
An example of a Container block you could reuse in other designs

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.

Making the Container block reusable
Making the Container block reusable

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.

Inserting a reusable Container block into another View
Inserting a reusable Container block into another View

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.

Turning a whole Container block into a link

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.

Main Toolset Block Used in this Lesson

Container

Group blocks and style them

Dario
Updated
November 30, 2020
Send feedback to our documentation team