Container Block | Atomic Blocks Plugin Tutorial with Video and Text

What is the Container block? (PS. I have more Monochrome Pro tutorials.)

The container is part of the Atomic Blocks plugin and it lets you divide up your page into sections. So for instance you could have a hero section with a h1 heading, paragraph of text and then a button. This is a very popular look for modern websites. Atomic Blocks have their own website.

You can find more Atomic Blocks tutorials here.

News Flash!

I’ve now built a whole new site to help you build service business websites using WordPress 5 and blocks. It’s called FlagshipContent.com

This is what a container block built with Atomic blocks plugin looks like

A typical container block built with Atomic Blocks plugin — A typical container this block is included with with Atomic Blocks plugin

Easy to use but fiddly

Once you understand the basics of containers, they’re very easy to use. But the WordPress block editor (Gutenberg) does not give you any visual clues as to where the container is and how to place other blocks inside it.

So be very careful about how you place the first text block inside a container block.

Don’t worry, it’s easy to use if you follow this simple guide.

First make a new page

When you make a new page the first block is ready to use

When you make a new web page, WordPress automatically places the first block in the page for you. This is a text block. You need to convert this text block into a container block.

To add a Container to your page

Type a forward slash then start typing the word container

Where you see the words “Start typing or type / to choose a block” you must…

Type a / forward slash
Then begin typing the word container
A popup appears
Select the AB Container option from the popup

You will think nothing has happened

At this point you’ll think that nothing has happened. Your page looks just like it did before you started. Don’t worry, a container block has been wrapped around the paragraph block. So just start typing where your cursor is flashing. I usually type my first paragraph at this point.

Where your cursor is flashing just start typing.

You now have a paragraph block inside a container block BUT!

You can not see the container. The lack of visual clues as to what is happening makes using the container tricky. But practice makes perfect and after you’ve used the container a few times you’ll start to understand how container blocks work. Then you’ll wonder why you ever thought this process was tricky.

Because it really is easy once you know how to do it.

The container block settings are hidden

The container block settings are hidden but they will appear if you click in the right place.

Finding the container block settings is tricky

Move your cursor to the right edge of the screen
Carefully move the cursor back towards the text you typed
As soon as you see a blue line, click your mouse to activate the container block settings and options dialogue box
If you don’t see the dialogue box shown above, you’ve probably clicked in the paragraph block so try selecting the container block again.

The container block settings

Although we still can’t see it, we do have a container block that is wrapped around our paragraph block.

when we’ve finished our container will look like this…

The margin, padding and inner width settings for our container block

The margin and padding settings are % the inside container max width is px (pixels)

Most of the settings are fairly obvious…

Padding Top: makes more background image show above the content
Padding Bottom: makes more background image show below the content
Padding Left: makes more background image show to the left of the content (on small devices)
Padding Right: makes more background image show to the right of the content (on small devices)
Margin Top: makes whitespace above the container
Margin Bottom: makes whitespace below the container
Inside Container Max Width (px): sets the maximum width of the content, even on very wide screens (1200px is recommended)

This is what the container block settings dialogue should look like so far…

The Atomic Blocks Container margin padding and inner width settings

The background image, color and opacity settings

Adding a background image to a container block

Under the other container block settings you will see the Background Options and Background Color options.

8.) Click “Select Image” to upload an image to use as the background image for the container AND set the Image Opacity to 20
9.) Use the color picker to set black as the background color
10.) The Advanced > Additional CSS Class enables you to add CSS classes to specific blocks and containers

First add a background image to the container block

Monochrome Pro theme has advanced CSS classes that change the color and width of the text

These are the settings for the container block's background image and color — These are the settings for the container block’s background image and color

Here are two more tips for people who are new to the WordPress Block Editor

Adding more blocks

In this tutorial we only placed one paragraph block inside the container block. You can easily add more blocks above or below this initial block.

Place your cursor inside the text
Clock the three button icon
Select insert after or insert before

Insert a new block above or below the selected block.

Convert a paragraph block into a heading block.

Hover over the first icon to change the block type.

This button enables you to convert a paragraph block into a heading block.

Making the text white

The paragraph block has a text color setting but the heading block does not. So to change the color of headings you need some basic CSS. Monochrome Pro, the theme I used in this tutorial has a ready made CSS class (light-text) for you to use.

Container Block | Atomic Blocks Tutorial