How to use Container Block by Zoloblocks

This documentation provides comprehensive insights into the Container Blocks developed by Zoloblocks.

Container Block

A container block for other containers. Containers play a crucial role in creating responsive web designs that adapt to different screen sizes and device content to adjust appropriately across various viewports.

Overall, containers are essential building blocks in web design and development, providing structure, organization, and styling control for web page layouts.

Adding Container block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Container block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

Choose Container Layout

After selecting the container block, It will be visible as a block you can choose a container column layout. There are various styles of layout (e.g.: One Column, Two Columns, Three Columns, Four Columns, Grid columns, etc. )

Single Column Layout

Select a single column layout from the container layout.

Single selecting the layout will appear only a single block. It’s only called the parent block.

Multiple Column Layout

Select multiple columns from the layout container,

It shows the multiple blocks for the container one Parent block and another child block.

Customize the Single Layout

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Container block.
3. After on the right side, Click on the Block. Then the fancy list details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab Single Container

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

This section provides control for the container, Let the explore the options,

Container Width Full

Set the container width full,

1. Container Width: Set the width for the container Full.
2. Content Width: Set the width for the content Boxed.
3. Content Width: Set width for the content.
4. Minimum Height: Set the minimum height for the content.

1. Container Width: Set the width for the container Full.
2. Content Width: Set the width for the content Full Width.
3. Minimum Height: Set the minimum height for the content.

Container Width Boxed

1. Container Width: Set the container width Boxed.
2. Minimum Height: Set the minimum height for the container.

Container Width Custom

1. Container Width: Set the container width Custom.
2. Content Width: Set width for the content.
3. Minimum Height: Set minimum height for the content.

Flex Property

The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.

1. Selected the multiple containers, We set the images a number so that the changes appear easily.

Direction

Set direction for the flex property, Four kins of direction for the flex property. ( e.g.: Row, Column, Row Reverse, Column Reveres ).

Row Direction

1. Row: Set the direction row for the container. The container appears in the row direction.

Column Direction

2. Column: Select the direction column. The containers appear vertically.

Row Reverse

3. Row Reverese: Set the direction reveres in a row. You can see the changes by following it.

Column Reverse

4. Column Reverse: Set the direction reverse in the column. You will see the changes appear vertically in reverse.

Align Items

Align-items is a CSS property used in flexbox layouts to control how items are aligned along the cross-axis of a flex container. It offers several options.

Flex Start

1. Flex Start: The flex-start value aligns the flex items at the top of the container.

Center

2. Center: The center value aligns the flex items at the center of the container:

Flex End

3. Flex End: The flex-end value aligns the flex items at the end of the container.

Stretch

4. Stretch: Adapting container sizes to fit different content, ensuring layout flexibility and responsiveness without compromising design or usability.

Justify Content

Justify content is a property used in flexbox layouts to control how the content is aligned along the main axis. It can distribute space between and around content items in a flex container.

Flex Start

1. Flex Start: Items are aligned towards the start of the flex container.

Center

2. Center: Items are centered along the main axis.

Flex End

3. Flex End: Items are aligned towards the end of the flex container.

Space Between

4. Space Between: Items are evenly distributed along the main axis, with the first item aligned to the start and the last item aligned to the end.

Space Around

5. Space Around: Items are evenly distributed along the main axis with equal space around them.

Space Evenly

6. Space Evenly: Items are evenly distributed along the main axis with equal space between them.

Wrap

The flex-wrap property in CSS, used within flexbox layouts, determines whether items within a flex container should wrap onto multiple lines or stay on a single line.

Nowrap

1. Nowrap: Items are forced to stay in a single line, potentially causing overflow.

Wrap

2. Wrap: Items are allowed to wrap onto multiple lines if necessary.

Wrap-reverse

3. Wrap-reverse: Items wrap onto multiple lines but in the reverse order.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Container Gap

Go to Style > Container

1. Gap: Set the gap between the containers.

Extra Tab Controls

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial Coming Soon!

Thanks for being with us!