The Container block provides a flexible and powerful way to build beautiful layouts using a flexbox-powered system. It offers endless creation possibilities, allowing you to select from a variety of predefined layouts to start with and advanced options like custom CSS for seamless design control.
Using the Container Block
The Container Block is a flexible layout block that helps you create customizable layouts. Here’s how to use it:
- Insert the Container Block
- Open the block inserter and select Container.
- You’ll see a popup with several predefined layouts (e.g., single column, two columns, three columns, etc.).
- Choose a Layout
- Pick the layout that best fits your design.
- The selected layout will instantly create a structured section where you can place other blocks or content.
- Add Content Inside
- Inside the Container, add any blocks such as text, images, buttons, or post grids.
- Each column or section in the layout acts as a placeholder for your content.
- Customize the Layout
- Adjust alignment, orientation, and spacing directly from the sidebar controls.
- Style the container with background colors, padding, borders, or shadows to match your site design.
Let us explore the Container Block.
The Container Block makes it simple to build beautiful, responsive layouts without coding—just pick a layout, add your blocks, and customize.
Container Type – General Settings
Columns: Set the number of columns within the container.
Layouts: Choose a predefined layout for arranging content within the container.
Container Width: Choose between a “Full Width” or “Boxed” layout for the container.
Content Width: Set the maximum width of the content inside the container.
Container Height: Control the height of the container, with “Default” as an option.
Column Gap: Adjust the empty space between the columns.
Equal Height: Use the option to make all columns within the container have the same height.
HTML Tag: Set the HTML tag for the container, such as “Div”.
Overflow: Control how content is handled if it extends beyond the container’s boundaries, with options like “Visible,” “Hidden,” and “Auto”.
Container Type – Style Settings
Normal: The default appearance of the container.
Hover: The appearance of the container when a user’s mouse cursor is over it.
Background Style: Choose to use a solid color, gradient, or an image/video for the background of the container.
Background Color: The specific color of the container’s background.
Border: Add and style an outline around the container.
Border Radius: Control the roundness of the container’s corners.
Box Shadow: Add a shadow effect to the container.
Padding: Adjust the inner spacing within the container.
Margin: Adjust the outer spacing around the container.
Flex Properties
Flex Direction: Set the direction of the flex items, either horizontally or vertically.
Justify Content: Align the flex items along the main axis.
Flex Wrap: Specify whether flex items should wrap onto multiple lines or stay on a single line.
Align Items: Aligns the flex items along the cross-axis.
Shape Divider
Shape Divider: Select the Shape Divider you want to use.
Top/Bottom: Choose to add the shape divider to the top or bottom of the container.
Divider Type: Select the divider type or style you want to use from the dropdown.
Advanced – General Tab
Z-Index: Control the stacking order of the element, determining if it appears in front of or behind other elements.
Wrapper Link: Use the option to enable a link for the entire container.
Wrapper Link URL: Enter the URL that the entire container will be linked to.
Link Open in New Tab: Use this option to make the wrapper link open in a new browser tab.
Advanced: Visibility Tab
This section allows you to control the visibility of the entire carousel block on different devices.
Hide on Desktop: When this option is enabled, it will hide the carousel block from being shown on desktop computers.
Hide on Tablet: When this option is enabled, it will hide the carousel block from being shown on tablets.
Hide on Mobile: When this option is enabled, it will hide the carousel block from being shown on mobile phones.
Advanced: Advanced Tab
This section allows developers and advanced users to add custom CSS code to style or control the block.
Additional CSS Class(es): This allows you to add one or more custom CSS class names to the carousel block. You can then use these class names in your theme’s stylesheet or a custom CSS panel to apply specific styles to this block.
Custom CSS: This provides a dedicated area to write custom CSS code that will directly apply styling to this specific Post Carousel block.