The container block is more complicated than most other blocks. There are two reasons for this.
- The container block has several settings.
- You can nest blocks inside the container block.
- Every block you place inside the container block has it’s own settings.
Suppose you want to change a setting such as margin, padding or a color inside a container. You have to discover which block that margin, padding or color setting comes from.
You have to drill down from the main container block, to the blocks nested inside the container, and the blocks nested inside those blocks. This can make it difficult to work out where to apply or remove the setting you need.
It soon gets confusing.
The two most important points
- The settings change depending on which block or element is selected.
- There is a toolbar above the selected block, AND block settings in the post editor sidebar.
When you change block settings, don’t forget to click all of the down arrows to see the full list of options available.
Before I clicked the down arrows I just saw these two options.
Clicking the down arrows expanded the dialogue boxes to show all of these extra options.
AB Container block: toolbar and sidebar settings
The toolbar above the AB Container block only contains width settings.
LOOK in the sidebar for the main block settings!
The AB Container block is a very tall dialogue box. I tore it into sections so I could put instructions at the side of the relevant images.
AB Container block padding settings
I chose 5 % padding for top, bottom, left & right.
Experiment with this setting and see what works best for your designs and layouts.
The container blocks in the StudioPress blocks based homepages often use 8% padding.
Inside container max width
I didn’t apply any extra margin to the container block I used. But the…
Inside Container Max Width (px) is important!
This is the maximum width the container can span, even on very wide screens.
I chose 900px, the StudioPress hero header container widths are usually 1200px.
Experiment and see what works in your situation.
Background image or color
The AB Container block can have a background image or background color.
Advanced: Additional CSS Class
If you understand CSS, you can add CSS classes to any block. This makes it easier to target your code to a specific block. I made my own CSS class “container-link” in this instance.
Looking for a StudioPress theme or hosting?
Check out the two links below…
Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.
When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.