The Container Block in the Gutenberg page builder offers a powerful and flexible way to design custom layouts with ease. It lets users group multiple blocks within a single row, providing full control over layout structure and size configurations.
With this versatile block, you can create custom column layouts, adjust padding and margins, and fine-tune responsiveness across different devices.
Explore the sections below to learn how to use the Container Block with aThemes Blocks.
How to Use the Container Block
To get started with the Container Block, first enable it from the Blocks Dashboard.
Once enabled, add the Container Block to your page.
After adding it, you can create custom column layouts and control the container’s width, height, and content dimensions. You can also insert other blocks within each column, making it easy to combine different design elements seamlessly.
General Settings of the Container Block
When the Container Block is selected, navigate to the General tab in the settings sidebar. Here you can configure the following options:
- Type: Set the container width to Full Width, Boxed, or Custom. You can also define the content width and minimum height.
- Layout: Choose between Flex or Grid layouts. Configure properties like direction, column gap, row gap, child width, align items, justify content, and wrap.
Styling Options for the Container Block
Under the Style tab, you can customize the visual appearance of the container:
- Background: Choose between a solid color, gradient, or image background.
- Color: Set text and link colors.
- Border: Define the border style using options such as solid, dashed, dotted, double, groove, and more.
Advanced Settings of the Container Block
In the Advanced tab, you’ll find additional customization options:
- Layout: Adjust padding, margin, and Z-index.
- Animation: Apply entrance animations like slide in, fade in, zoom in, rotate in, flip in, and more.
- Responsive: Control visibility by hiding the block on desktop, tablet, or mobile.
- Advanced: Add CSS classes or CSS IDs for custom styling.
Working with Container Blocks
You can nest other blocks, either new or existing, inside a Container Block, including other containers for more advanced layouts. Each Container Block can have its own style settings, allowing for fully customized sections.
Adding New Blocks Inside a Container
To insert a new block inside a Container Block, simply click the + icon within the container area.
Dragging Existing Blocks into a Container
You can drag and drop any existing block into a Container Block. Once inside, blocks can be reordered by dragging them as needed.
Reusing a Container Block Across Designs
WordPress allows you to save and reuse blocks across multiple pages. You can mark a Container Block as reusable, which is particularly helpful if it contains several blocks and specific styles. This saves time and ensures design consistency throughout your site.
