How to use Container Block by Zoloblocks

  • BdThemes
  • How to use Container Block by Zoloblocks

Table Of Contents

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

search and insert 8 - BdThemes
  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

select container - BdThemes

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 single column - BdThemes

Select a single column layout from the container layout.

single block parent - BdThemes

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

Multiple Column Layout

select multiple column layout - BdThemes

Select multiple columns from the layout container,

multiple container appears - BdThemes

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

Customize the Single Layout

container and list view single - BdThemes

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( BasicStyleExtra ) of a block.

Replace Container

Replace any container with one click only. The Replace feature available on the Toolbar section. Follow the instruction.

Replace featurespng - BdThemes
  1. Click on the Container section it will appear the Block Toolbar.
  2. Find the ” Replace ” on the toolbar and click on it will appear a modal.
Replace container Choose - BdThemes
  1. Choose Container Layout from here. All the layout are available you can choose any of them.
Replace container appears - BdThemes
  1. After selecting the container , check all the ” Container ” appear on the List View section.
  2. The container appear on there. It will replace with the current one.

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

container width full boxed - BdThemes

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.
container width full width 2 - BdThemes
  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

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

Container Width Custom

container width custom - BdThemes
  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.

Select container 1 - BdThemes
  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
directon 1 - BdThemes
  1. Row: Set the direction row for the container. The container appears in the row direction.
Column Direction
direction 2 column 2 - BdThemes
  1. Column: Select the direction column. The containers appear vertically.
Row Reverse
direction 3 row reverse - BdThemes
  1. Row Reverese: Set the direction reveres in a row. You can see the changes by following it.
Column Reverse
direction 4 column reverse - BdThemes
  1. 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
align items 1 D - BdThemes
  1. Flex Start: The flex-start value aligns the flex items at the top of the container.
Center
align items 2 D R - BdThemes
  1. Center: The center value aligns the flex items at the center of the container:
Flex End
align items 3 DR - BdThemes
  1. Flex End: The flex-end value aligns the flex items at the end of the container.
Stretch
align items 4 DR - BdThemes
  1. 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
Justify content 1 DR - BdThemes
  1. Flex Start: Items are aligned towards the start of the flex container.
Center
justify content 2 DR - BdThemes
  1. Center: Items are centered along the main axis.
Flex End
justify content 3 DR - BdThemes
  1. Flex End: Items are aligned towards the end of the flex container.
Space Between
justify content 4 DR - BdThemes
  1. 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
justify content 5 DR - BdThemes
  1. Space Around: Items are evenly distributed along the main axis with equal space around them.
Space Evenly
justify content 6 DR - BdThemes
  1. 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
wrap 1 - BdThemes
  1. Nowrap: Items are forced to stay in a single line, potentially causing overflow.
Wrap
wrap 2 DR - BdThemes
  1. Wrap: Items are allowed to wrap onto multiple lines if necessary.
Wrap-reverse
wrap 3 DR - BdThemes
  1. Wrap-reverse: Items wrap onto multiple lines but in the reverse order.

Additional Options Section

Go to Basic > Additional Options

select container 2 - BdThemes
  1. Select the Container and navigate to the ” Additional Options ” section.
additional options - BdThemes
  1. HTML Tag: Set any HTML Tag for Container ( div, header, footer, main, article, section, aside, nav, a ( link) ). The Container tag is essential for both user experience and search engine optimization (SEO).
  2. Select the HTML tag for the container from the selection panel.
aside html tag select - BdThemes
  1. Select the tag ” aside ” of the container and it will appear on the Dom section.
inspect and check the aside - BdThemes
  1. Inspect the page and the container tag is showing the ” <aside>….</aside> ” tag.

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

STYLE Container Gap - BdThemes
  1. Gap: Set the gap between the containers.

Shape Divider Section

Go to Style > Shape Divider

Shape Divider is an interactive feature for adding shape on the container. Top and Bottom shape are available.

shape divider - BdThemes
  1. Shape: The shape are available on this section.
open shape divider popup - BdThemes
  1. Click on the Icon and a pop will appear containing two tabs. Top and Bottom tabs and all the ready preset shape are available on there. By default it’s none.

Top Shape

top shape - BdThemes
  1. Navigate to the ” Top ” tabs and all the shape are available on there.
  2. Select any shape you prefer.
top shape selected - BdThemes
  1. After selecting the Top shape, It appear on the top on the container.
TOP SHAPE Customize
Basic Tab
top shape basic - BdThemes
  1. Color: Set the color for the top shape divider.
  2. Width: Set the width of the shape, The available mertics are ( %, px, em, vh, vw ).
  3. Height: Set the height for the shape, The available mertics are ( %, px, em, vh, vw ).
Advanced Tab
top shape advanced - BdThemes
  1. Flip: Enable the switcher to flip the current shape.
  2. Invert: Enable the switcher to invert it.
  3. Bring to Front: Enable this to bring in the front of the shape.

BOTTOM SHAPE

shape bottom - BdThemes
  1. Click on the Icon of the shape section and a popup will appear.
  2. Navigate to the “Bottom” tab, All the bottom shape presets are available on there.
  3. Select one of them and click on it.
bottom space selected - BdThemes
  1. After selecting this will appear on the bottom of the container.
BOTTOM SHAPE
Basic Tab
bottom shape - BdThemes
  1. Color: Set the color for the top shape divider.
  2. Width: Set the width of the shape, The available mertics are ( %, px, em, vh, vw ).
  3. Height: Set the height for the shape, The available mertics are ( %, px, em, vh, vw ).
Advanced Tab
bottom space advanced - BdThemes
  1. Flip: Enable the switcher to flip the current shape.
  2. Invert: Enable the switcher to invert it.
  3. Bring to Front: Enable this to bring in the front of the shape.

Use Custom Shape

Select the custom shape that prefer for you. Make sure its SVG file.

Select the TOP SHAPE
shape divider top selecting - BdThemes
  1. Select the shape Icon and here it will appear a Toggler.
  2. Select the Tiop tab and all the bottom shape are available on there
  3. Now click on the ” Custom ( Pro ) ” button and it will appear on there.
select svg shape - BdThemes
  1. Select the SVG file from the Media Library.
  2. Make sure that the file is on SVG format.
  3. After selecting hit enter the ” Use this shape ” button it will insert.
custom shape appear - BdThemes
  1. After selecting the Shape Divider it appear on the container section.
TOP SHAPE
Basic Tab
top shape basic 1 - BdThemes
  1. Color: Select the color for the shape divider.
  2. Width: Set the width for adjusting the shape divider.
  3. Height: Set the height for the divider.
Advanced Tab
top shape advanced 1 - BdThemes
  1. Flip: Enable the switcher to Flip the shape.
  2. Invert: Enable the switcher to invert the shape.
  3. Bring to Front: Make the shape in front of by enabling the switcher.
Select BOTTOM SHAPE
shape divider bottom custom - BdThemes
  1. Select the shape Icon and here it will appear a Toggler.
  2. Select the Bottom tab and all the bottom shape are available on there
  3. Now click on the ” Custom ( Pro ) ” button and it will appear on there.
slect bottom shape - BdThemes
  1. Select the SVG file from the Media Library.
  2. Make sure that the file is on SVG format.
  3. After selecting hit enter the ” Use this shape ” button it will insert.
bottom shape custom appear - BdThemes
  1. After selecting the shape The Bottom shape is appear on the bottom of the container.
BOTTOM SHAPE
Basic Tab
bottom shape basic - BdThemes
  1. Color: Select the color for the shape divider.
  2. Width: Set the width for adjusting the shape divider.
  3. Height: Set the height for the divider.
bottom shape advanced - BdThemes
  1. Flip: Enable the switcher to Flip the shape.
  2. Invert: Enable the switcher to invert the shape.
  3. Bring to Front: Make the shape in front of by enabling the switcher.

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!

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge