Counter Block

We can display fun face using the Counter block

1. How to add Counter Block? #

To add the Counter Block in your Gutenberg editor first click on (+) icon then in the search box type “Counter” and you will see the “Counter” block.

After inserting the “Counter” block you will get the default look like below. Now you need to change the preset and other settings.

2. General Settings  #

The General settings tab has the Preset option and counter settings number settings option. The General settings panel properties are as follows.

• Presets: From our pre-defined presets you can select which style you like.
• Counter Settings: You can set a numaric number and animation duration in milli seconds of the counter.
• Prefix & Suffix: You can enable prefix and suffix for the counter number like ” + “

• Icon/ Image Settings: You can set Media Type icon/ image if you select an icon then select the icon from the icon list, icon size, position and alignment.
• Title/ Content: First you can enable or disable the Title/ Content then enter the Title text set the Alignment.

3. Style Settings  #

From the Styles settings tab, you can set all possible styles spacing, color, margin, background, and other style settings.

• Icon/ Image: You can set media to content spacing, icon color and padding.
• Icon/ Image => Border: You can set normal and hover border style and border-radius.
• Icon/ Image => Background: You can set normal or hover background for the Days, Hours, Minutes and Seconds also can set gradient style background.
• Icon/ Image => BoxShadow: You can set the box-shadow for normal and hover styles.

• Counter Number: You can set the Counter Number Typography like font family, font size, font weight, line height, color also Title Margin.
• Title: You can set the Title Typography like font family, font size, font weight, line height, color also Title Margin.

4. Advanced Settings  #

From the advanced settings tab, you can control the wrapper style.

• Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
• Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
• Border: You can set default border or hover border with different border styles also you can set border-radius.
• Shadow: You can set box shadow for normal and hover style.

5. Final Outcome #

Here is the final outcome of a Countdown Block