A easy way to display states counter in a easy and interesting way.

Maulik Vora

Divyesh kakrecha

<p>The Animated Counter Block is a dynamic and visually engaging block designed for showcasing numerical data with animation. Ideal for highlighting statistics, metrics, or any numerical value, this block allows for smooth transitions and eye-catching animations that draw attention to key figures on your website.</p>
<h3>Video Guide</h3>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/U_Js3xqO-7Y?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>How to Use Gutenberg Counter Block</h3>
<h3>Download & Upload:</h3>
<ol>
<li>Download the <strong>Block Metrics – Animated State Counter</strong> plugin (<em>.zip file</em>)</li>
<li>In your admin area, go to the Plugins menu and click on <strong>Add New</strong></li>
<li>Click on <strong>Upload Plugin</strong> and choose the <strong><code>block-metrics-animated-state-counter.zip</code></strong> file and click on <strong>Install Now</strong></li>
<li>Activate the plugin and Enjoy!</li>
</ol>
<h3>Installation via FTP:</h3>
<ol>
<li>Download and upload the <strong>Gutenberg Counter Block</strong> plugin to the <strong><code>/wp-content/plugins/</code></strong> directory</li>
<li>Activate the plugin through the Plugins menu in WordPress</li>
</ol>
<h3>Features</h3>
<ul>
<li><strong>Icon & Image</strong>: Choose and upload an icon or image from your WordPress media library.</li>
<li><strong>Prefix & Suffix</strong>: Add customizable prefixes and suffixes around the count number for added context or style.</li>
<li><strong>Varied Layouts</strong>: The counter block offers multiple layout options, allowing you to easily switch between different designs and customize them to suit your needs.</li>
<li><strong>Counters Duration</strong>: Specify the duration of the counter to control how quickly or slowly the numbers transition.</li>
<li><strong>Styling Options</strong>: Tailor the appearance of the counter with flexible styling options, including font size, color, and alignment and more.</li>
<li><strong>Animation style</strong>: Choose from a variety of animation styles to make your counter stand out and engage visitors.</li>
<li><strong>Responsive Design</strong>: The counter displays perfectly across all devices and screen sizes.</li>
<li><strong>Easy Integration</strong>: Seamlessly integrates into your Gutenberg editor, allowing for quick and efficient content updates.</li>
</ul>
<h3>Use of 3rd party services</h3>
<p>This plugin uses the following third-party services and libraries:</p>
<ol>
<li>
<p><strong>Google Fonts API</strong></p>
<ul>
<li><strong>Description</strong>: Google Fonts provides web-safe fonts for web projects.</li>
<li><strong>Purpose</strong>: Used to enhance typography styles in the counter block.</li>
<li><strong>Link</strong>: <a href="https://fonts.google.com/" rel="nofollow ugc">Google Fonts Documentation</a></li>
<li><strong>Licensing</strong>: Google Fonts are open-source and licensed under the SIL Open Font License, 1.1.</li>
</ul>
</li>
<li>
<p><strong>Google Sheets API</strong></p>
<ul>
<li><strong>Description</strong>: This plugin integrates with the Google Sheets API to store form submissions directly into a Google Sheet.</li>
<li><strong>Purpose</strong>: Used to store the plugin deactivation reasons</li>
<li><strong>Link</strong>: <a href="https://developers.google.com/sheets/api" rel="nofollow ugc">Google Sheets API Documentation</a></li>
<li><strong>Privacy Notice</strong>: By using this feature, you may be subject to Google’s <a href="https://policies.google.com/terms" rel="nofollow ugc">Terms of Service</a> and <a href="https://policies.google.com/privacy" rel="nofollow ugc">Privacy Policy</a>.</li>
</ul>
</li>
</ol>
<h3>Requirements</h3>
<ul>
<li>Gutenberg block Editor</li>
<li>WordPress (Ofcourse!)</li>
</ul>
<h4>Feedback</h4>
<ul>
<li>Did you like this plugin? Dislike it? Do you have a feature request? <a href="mailto:admin@zluck.com" title="Send feedback" rel="nofollow ugc">Please share your feedback with us</a></li>
</ul>


Alternatives to Block Metrics – Animated State Counter

Top alternatives