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.
This is what a container block built with Atomic blocks plugin looks like
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 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
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.
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 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 background image, color and opacity settings
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
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
Convert a paragraph block into a heading block.
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.