This documentation provides comprehensive insights into the Counter 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 Counter block name.
3. Then select the appear blocks ( 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. After on the right side, Click on the Block. Then the advanced icon box details appear.
3. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

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

Preset

Preset are default design embeded. You can choose the default design for forever.

1. Preset: Select the Preset 1 on the left side the preset preview are available.

2. Preset: Select the Preset 2 on the left side the preset preview are available.

3. Preset: Select the Preset 3 ( Pro ) on the left side the preset preview are available. This preset available for the Pro user only.

4. Preset: Select the Preset 4 ( Pro ) on the left side the preset preview are available. This preset available for the Pro user only.

Customize General section

This section provides the controls for the Layout of the Counter block,

1. Presets: It’s a predefined design, Select any of them.
2. Show counter icon: Enable the switcher which will show the Icon.
3. Show counter number: Enable the switcher to show the counter number.

4. Show number suffix: Enable the switcher to show the Suffix after the counter number.
5. Show counter title: Enable this switcher to show the title.
6. Alignment: Set the alignment for the content ( Left, Center, Right ).

Direction

1. Block: The block direction for the icon to adjust in vertically.

2. Inline: Set the direction inline for the counter section.

Content Section

Go to Style > Content

In this section, you can set the content of the counter block.

1. Counter Number: Enter the counter number.
2. Number Suffix: Set the Number Suffix.
3. Counter Title: Set the Title for the Counter.

Icon Section

Go to Basic > Icon

This section provides controls to select the Icon,

1. Type: Two types are available here ( Image or Icon ). Selected the Icon.
2. Select Icon: Select the Icon from the Icon library.

SVG Feature

SVG is most beautiful feature for using as Icon.

1. Hover over the ” Selected Icon ” section and ” Upload SVG ” feature is available on there. Just click on it.

2. A Media library will appear, Upload the SVG or select from Media Library.
3. After selecting check the extension of the media. Make sure it’s “.svg” file.
4. Hit the ” Insert ” button to insert it on the Icon.

3. After selecting the “ SVG ” , It’s appear on the Icon block.

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 Section

Go to Style > Container

In this section, you can customize the container,

1. Border: Set the border for the container.
2. Border Radius: Make the border corner edges rounded.

3. Padding: Set the padding of the container.
4. Box Shadow: Make the shadow of the container.
5. Background: Set the background of the container.

Media Section

Go to Style > Media

In this section, You can set the controls for this media,

1. Color: Set the media color.
2. Background: Set the background of the button.
3. Box Shadow: Set the box shadow of the media.

4. Border: Set the border for the media.
5. Border Radius: Set the border-radius.

6. Icon Size: Set the size for the icon.
7. Padding: Set the padding for media.
8. Margin: Set the margin for media.

Counter Section

Go to Style > Counter

This section provides controls, You can set the counter stylish,

1. Number Color: Set the color of the number.
2. Suffix Color: Set the color of the suffix.
3. Typography: Set the typography for the counter.
4. Gap: Add space by following the Gap.

5. Text Shadow: Set the text shadow for the Counter.
6. Text Stroke: Set the text stroke for the counter.
7. Margin: Set margin for the text.

Title Section

Go to Style > Title

This section provides the controls to customize the Title,

1. Color: Set the color for the Title.
2. 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).
3. Typography: Set the typography for the Title.

4. Text Shadow: Set the text shadow for the title.
5. Text Stroke: Set the text stroke for the title.
6. Margin: Set the margin for the title.

Extra Tab Control

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

The Video help you to learn more about the block. Please visit the demo page for examples.

Thanks for being with us.