How to use Progress Bar block by Zoloblocks

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

Adding a 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 Progress Bar block name.
3. Then select the appear block ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

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

Basic Tab (Parents Blocks)

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences. Customize for the Parent’s blocks. Any changes will applied all items

General Section

Go to Basic > General

This section provides controls for the progress bar,

1. Presets: Click on the presets selector and the pre-made styles will appear. you can select any.
2. Show Title: Enable the switcher to show the Title.
3. Show Percentage Value: Enable it to show the percentage value of the progress bar.

Content Section

Go to Basic > Content

Control for the content section,

1. Select Title Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).

Animation Settings

Go to Basic > Animation Settings

Set settings for the animation of the progress bar,

1. Offset: Set offset for the progress bar. The animation will start from the offset point.

Style Tab (Parents Blocks)

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.

Item Section

Go to Style > Item

Make changes to the appearance of this item by following the controls,

1. Item Gap: Set the gap between the items.
2. Height: Set the height for the items.
3. Border Radius: Make the border corner edges rounded by setting the border-radius.
4. Background: Set the background for the progress bar item.

Title Section

Go to Style > Title

Customize the title appearance by the controls,

1. Color: Set the color for the Title.
2. Typography: Set the typography for the Title.
3. Margin: Set margin for the title.

Value Section

Go to Style > Value

Make the customization for the value section,

1. Border Radius: Set the border radius for the value bar.
2. Background: Set the background for the value bar.

Percentage Section

Go to Style > Percentage

Customize the appearance by following the controls,

1. Color: Set the color for the percentage,
2. Typography: Set typography for it.
3. Margin: Make outer space by setting the margin.

Progress Bar (Child Blocks)

Here we will work with the Child blocks of the Progress Bar. The changes will applied to the relevant item only. Let’s follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Select the Progress Bar Child block under the Progress Bar parent blocks.
3. On the right side, the selected Progress Bar Child details will appear.
4. The Progress Bar Child controls will appear here. ( Basic, Style, Extra ).

Basic Tab ( Child Block )

This tab provides control to customize the child item of the Progress Bar child.

Content Section

Go to Basic > Content

This section provides an input box for setting content for the single items of the progress bar,

1. Title: Set the title for the progress bar single item.
2. Progress Percentage: Set the progress percentage for a single item.

ADD NEW ITEM

Click on the ” + ADD NEW ITEM ” button and it will appear new item. Add as many as the item you need.

Style Tab ( Child Block )

This tab provides the controls of the Progress Bar Child Items. The changes will apply only to relevant items. Let’s Explore all the controls.

Item Section

Go to Style > Item

1. Height: Set the height for the single item.
2. Border Radius: Make the border corner edges rounded by setting the border-radius.
3. Background: Set the background for the progress bar item.

Title Section

Go to Style > Title

Customize the title appearance by the controls for a single item,

1. Color: Set the color for the Title.
2. Typography: Set the typography for the Title.
3. Margin: Set margin for the title.

Value Section

Go to Style > Value

Make the customization for the value of the single item,

1. Border Radius: Set the border radius for the value bar.
2. Background: Set the background for the value bar.

Percentage Section

Go to Style > Percentage

Customize the appearance of a single percentage item by following the controls,

1. Color: Set the color for the percentage,
2. Typography: Set typography for it.
3. Margin: Make outer space by setting the margin.

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 for more info.

Check the Demo Page.

Thanks for being with us!