The Container block allows you to wrap several individual blocks inside a parent container which can help you create differently styled sections of content on your posts and pages.
For example, you can add a full-width container with a background image or background color that stretches to the left and right edges of the screen and then add columns, text, and images inside of it.
Table of Contents:
Container alignment
After you’ve added the container block to the post or page, you can choose its alignment (Align Center, Wide Width, or Full Width) as shown in the example below.
This setting determines whether the container is displayed narrowly in the center of the page or stretches all the way to the left and right sides of the page.
Click image to enlarge
Next, you can click each of the options in the editor sidebar to configure all the settings for the container as shown and described below.
Click image to enlarge
Container Options
Click image to enlarge
- Padding: The padding refers to the amount of space displayed around the inside edges of the container.
- Margin: The margin refers to the amount of space displayed around the outside edges of the container.
- Inside Container Max Width (px): Choose the width of the content inside the container. This will allow the container (and background, if applicable) to stretch to the full width of the page while restricting the content inside the container to the selected width.
Background Options
Click image to enlarge
- Background Image: Add a background image that will be displayed behind the content that’s added to the parent container, if desired.
- Image Opacity: Adjust the opacity (or transparency) of the background image. The lower the number, the more transparent the image will be. This setting makes it easier to read text if the background image has a lot of busy detail on it. This option only shows if a background image is added above.
- Background Color: Click the colored circles to select a pre-defined background color. Or click Custom Color to select your own. If you do not add a background image above, this color will be displayed as a solid background color. If you do add a background image, this color will be overlaid on top of the image and its opacity (or transparency) will be determined by the Image Opacity setting above. For example, when the image opacity is set to a low number, more of the background color will be seen (because the image is more transparent).
Advanced settings
Click image to enlarge
- Additional CSS Class(es): You can add one or more CSS class to customize the appearance of the container. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.