Circle progress bar WordPress block overview

ABOUT THE AUTHOR

I’m the SEO specialist at Webcodebuilder and ZEMEZ, companies that create templates powered by Gutenberg WordPress editor and Elementor page builder . We also have ZeGuten multipurpose plugin, which expands Gutenberg's possibilities.

ZeGuten Animated box block for Gutenberg editor
Prev post
  • Apr 21, 2020
  • 3 min read
  • 2,277

Circle progress bar WordPress block overview

Let’s overview a multifunctional Circle progress bar WordPress block. This block can save you from spending a lot of time on building pages. The Circle progress block by ZeGuten will perfectly do for showcasing infographics.

Firstly, use the block to display infographics to promote your business website and make boring numbers more dynamic. It will also work for a donation platform to showcase the amount of money raised and goods saved. You can actually use such a block is an engaging and dynamic element on the pages of any website.

Are you searching for the way of simple website building? I have an offer for you! Meet the Gutenix subscription. This is a wide pack of plugins and starter sites that are oriented on the website creating. Besides, even if you are still a beginner in coding, Gutenix will fit you. Find more information and let’s look at the ZeGuten block, which is also included in the subscription.

Adding a Circle progress block

To add a Circle progress bar WordPress block you need to click on the “+” icon, type the block name, and pick it. The circle element has quite a lot of tabs, but all of them will help you to make a stunning design.

In the General Settings tab, you can set the number value. You can also write down the maximum value, value number prefix, and suffix. One of the key features of the Circle progress bar WordPress block it that you can make it animated.

general settings

Customize a Circle progress bar block

Let’s move to the Circle Settings tab. Here you can set the size of the circle, line, and background line width, as well as their colors. You can also pick the color to fill the circle inside.

Additionally, you can set the outer indent, apply the border settings, such as style, width, and radius, and set the circle shadow.

circle progress bar wordpress settings

Now let’s customize text and number elements. In the Value Settings, you can choose the value position – inside or outside the box. Set the value, prefix and suffix typography, and pick their colors.

As for the typography properties, there are quite a lot of them:

  • choose a proper tag;
  • set the font size for desktop, tablet and mobile phone;
  • choose the font family among 100+ fonts;
  • set font-weight, subset, style and transform;
  • add text-decoration, line height, and letter spacing.
value settings

In the Label Settings tab, you can change the label position. Choose the most suitable title and subtitle typography properties. Don’t forget to set their color.

label settings of the circle progress bar

In the Background tab, you are able to set the color of the Circle progress bar WordPress block. Moreover, you are able to apply a border, its width, radius, and shadow.

In the following tab, you are able to set margins and paddings for your Circle progress bar Gutenberg block. They can be also set for desktop, tablet, and mobile phones, which makes the block amazingly responsive and flexible.

1
Appreciate
Creating Headings and Paragraphs in Gutenberg
Next post
ZeGuten Animated box block for Gutenberg editor
Prev post
Creating Headings and Paragraphs in Gutenberg
Next post

Get Gutenix Subscription

Create unlimited Gutenberg, Brizy and Elementor websites with dozens of templates, premium blocks and a lightweight theme — all in one toolkit!

Meet Gutenix, the devoted team of developers that stands behind many projects created with Elementor & Gutenberg. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Copyright © 2024 Gutenix. All Rights Reserved.