Blow their own horns stats, skills, and additional with Divi’s Circle Counter Module. The usage of this module helps break up the monotony that can be supply on pages that come with a lot of numerical knowledge. The Circle Counter Module will give you a good looking and visually-compelling strategy to display a single knowledge stage. Upon internet web page load, the module has an attention-grabbing animation that showcases knowledge in an exhilarating means. Say goodbye to boring tables on your web pages! In in this day and age’s blog submit, we’ll learn how to style Divi’s Circle Counter Module, with the help of one of the unfastened construction packs that come with Divi.
Examples of How-to Style Divi’s Circle Counter Module
We’ll use a variety of construction packs all through this educational. Each construction pack is from a different sector. This will likely show off that there are many circumstances where the Circle Counter Module can be put to use.
Risk One: Divi Streamer
With this construction pack, we used the Circle Counter Module to show off the demographic stats of the Divi Streamer.
Style Two: Divi Chocolatier
For a chocolatier, we used the modules to show off the number of orders that had come into the business.
Design 3: Divi Jewellery Fashion designer
In this case, we used the Circle Counter module to supply wisdom to the viewer.
Look 4: Divi Hostel
Measuring the “happiness quotient” among guests with an animated module merely is sensible.
Demo 5: Divi Toy Retailer
We use Circle Modules appropriate right here to promote it a sale on an internet store.
Making able to Style Divi’s Circle Counter Module
Quicker than we begin to style Divi’s Circle Counter Module, we need to first create a separate segment that can house the ones modules. Whether or not or now not you’re together with this segment to a brand spanking new internet web page or an provide internet web page, you will need to do the equivalent preparation. Prior to styling, decide which knowledge problems you need to show off inside the Circle Counter Module. Next, you will need to create just a little to your modules. Thirdly, you will need to decide what collection of columns will probably be within the row. As a result of this you’ll need to know which knowledge problems will probably be populating the tips to your Circle Counter Module. Your knowledge problems will impact the number of columns that you will be the usage of. Once this is prepare, you’re going to then add your Circle Counter Module to each and every column.
Growing Your Segment
First, click on on on the blue plus icon. This will likely add a brand spanking new segment on your internet web page.
Selecting Your Columns
Next, you’re going to use the fairway plus icon so to upload a row with the number of columns that you just’ll be the usage of. Each column will dangle one Circle Counter Module.
Add Circle Counter Modules
Upon getting your columns created, click on on on the gray plus icon. This will likely open the Modules Modal. From appropriate right here, select the Circle Counter Module.
For consistency, I may counsel styling one Circle Counter Module at a time. Then, use Divi’s right-click menu to duplicate each and every Circle Counter Module and change the tips stage within.
Now that we have the fundamentals down pat, let’s get began styling the module.
Style One feet. the Divi Streamer Construction Pack
You’ll be capable of practice this weblog publish to look which construction from the Divi Streamer Structure Pack suits your needs absolute best. For this educational, we’re going to modify the About Segment within the touchdown web page structure.
Get able the Segment
First, let’s delete the Quantity Counter Modules that are in recent times in this segment. Hover over the module, and from the gray popout menu that appears, click on at the trash can icon.
Repeat this for the other Amount Counter Module within the segment.
Add Circle Counter Module
Next, click on on on the gray plus icon so to upload a Circle Counter Module to the principle column of your row. Next, click on on on the Circle Counter icon so to upload probably the most the most important modules to the column.
Together with Your Content material subject matter
Once your first Circle Counter Module has been added, you’ll now need to enter your knowledge stage. Throughout the Content material subject matter tab of the module, enter an overview to your knowledge stage. In our case, we’ll be showcasing a share of consumers who’re from Toronto. So, we enter our text and the amount 78 (without the % sign!)
Style the Circle Counter Module
We now will switch to the Design tab. As our segment is part of the Divi Streamer Construction Pack, we’ll use the font, text, and colors that are a part of the pack to influence the styling of our module.
Styling the Circle Graph
Let’s get began first via clicking on the Circle tab to decide on the colors used for the circle part of the module.
Circle Design Settings:
- Circle Color: #5200ff
- Circle Background Color: #ffffff
- Circle Background Opacity: 0.4
Styling the Identify Text
Following styling the circle graph, we’ll switch immediately to the Identify Text of the module. Click on on on the Identify Text tab, then use the following settings so to upload some life to the establish text of our Circle Counter Module.
Identify Text Settings:
- Identify Font: Poppins
- Identify Font Weight: Bold
- Identify Font Color: #ffffff
Together with Style to the Amount Text
Final then again now not least, we’ll be fixing the numbers within the Circle Counter Module. For this, we click on on on the Amount Text tab. Then, we’ll use the following settings to style. Perceive, we pulled inspiration from the construction pack, however as well as the Amount Counter Modules that have been there previous to.
Amount Text Settings:
- Amount Font: Poppins
- Amount Font Weight: Bold
- Amount Text Color: #ffffff
- Amount Text Size: 72pt
Upon getting ended the ones final edits, click on on on the green take a look at mark at the bottom of the modal box. This will likely save your changes.
Copy and Exchange Module
With styling complete, we will now copy this module. We will adjust it with our other knowledge problems and their corresponding titles. To do this, hover over the module. This will likely lift up the modules settings menu popup. Click on at the copy icon. Then, switch the module to the other columns on your row.
In our case, together with updating the establish and the tips for the module, we moreover changed the colors to test the construction pack.
Design Two with the Divi Chocolatier Construction Pack
Follow the Divi Chocolatier Structure Pack weblog publish to discover ways to put within the construction onto your website. We’ll be improving the events sections on the house web page structure. Let’s add some Circle Counter Modules to show knowledge on what collection of orders had been accumulated.
Remove Provide Content material subject matter
To start with, we need to remove the prevailing modules. While the Textual content and Symbol Modules appropriate right here look great, they’re somewhat static. By way of the usage of the Circle Counter Modules, we’ll add some excitement and animation to this segment. Hover over each and every module and click on at the trash can icon. The icon will appear inside the module settings popout menu.
We’ll after all finally end up with an empty 3-column row.
Exchange Titles
You may also need to imagine updating the text modules for the titles to at least one factor that is additional aligned with the upcoming content material subject matter for the segment. To do so, hover over the text modules, and click on on on the apparatus icon to edit the module text.
Add Circle Modules
Quicker than we add our Circle Counter Modules, we’re going to switch the column amount for our row. Hover over the row, and click on the grid icon. This will likely lift a popup where we will select the number of columns we’d like. For this design, we’ll be visualizing 4 pieces of data. So, we’ll choose so to upload 4 columns to this row. Click on on on the four-column icon.
Now, we’ll add the Circle Counter Modules to the principle column via clicking on the gray plus sign icon. Then, when the module popup turns out, we click on on on the Circle Counter icon so to upload our first Circle Counter Module.
Add Wisdom to Circle Modules
With our first module in place, we will begin to style and add content material subject matter to it. To start with, let’s add our establish for this module. Next, we’ll add our knowledge stage.
For this design, we’ll remove the % sign that incorporates the module via default. To do this, we click on on on the Portions tab. Next, we uncheck the toggle next to the % Sign selection.
Now, we will style this module.
Styling the Circle Counter Module
To start out out, we switch to the Design tab of the module.
Together with Branding to the Circle Graph
Next, we click on on on the Circle toggle to get admission to the design settings for the circle graph side of the module. We’ll use the following settings to style it:
Circle Design Settings:
- Circle Color: #ff6a28
- Circle Background Color: #000000
- Circle Background Opacity: 0.3
Stylizing the Identify Text
For the establish text, we’ll use the following settings after clicking on the Identify Text tab:
Identify Text Settings:
- Identify Font: Jost
- Identify Font Weight: Commonplace
- Identify Text Color: #000000
Designing the Amount Text.
We’re going to use the equivalent font and color for the amount text. On the other hand, we’re going to switch the scale. We’ve got extra space within the Circle Counter Module since we don’t appear to be the usage of the % sign. We’ll use this to our receive advantages in our design. Click on on on the Amount Text tab, and enter the following settings:
Amount Text Settings:
- Amount Font: Jost
- Amount Font Weight: Commonplace
- Amount Text Color: #000000
- Amount Text Size: 72px
Replica and Finish
Now that we have our first Circle Counter Module designed, we will move ahead and duplicate it.
We’ll switch the duplicates into their own row, and substitute the content material subject matter within to turn our finished product.
Style 3 with the Divi Jewelry Model clothier Construction Pack
For this design, we used the Divi Jewellery Fashion designer Structure Pack as our place to begin. We’d have preferred so to upload an educational segment to the product web page of this structure, and will probably be the usage of the Circle Counter Module to show off this information. We’ll convert the testimonial segment at the bottom of the internet web page into this.
Remove Modules
As with our previous artwork, we need to move in and delete the prevailing modules within this segment.
Exchange Segment and Row Design and Building
For this construction pack, we moreover need to change the segment’s background so to upload some passion. Click on on on the apparatus icon within the blue settings menu of the segment.
First, let’s remove the background image. Click on on on the Background tab. Then, click on on on the image icon. In any case, click on on on the trash can icon to remove the background image.
We need to cross away the background gradient and color. Now, let’s add a background pattern to the segment. Click on on on the Background Building icon. Then, click on at the plus icon so to upload a Background Building.
We’ll use the following background pattern.
Click on at the golfing inexperienced take a look at icon to avoid wasting plenty of your settings for the segment. We’re now going to switch the column depend of our row. For this design, we’re going to have 5 columns for our Circle Counter Modules.
Add Circle Module
With the columns and sections created, click on on on the gray plus icon so to upload our Circle Counter Module.
With the module added to the column, as previous to, we add in our content material subject matter. We’ll use the % sign in this design.
Style Your Circle Counters
Now, we’re going to begin to style our counters.
Stylizing the Circle Graph
We first get began with the circle portion of our counter. The following settings will probably be used:
Circle Design Settings:
- Circle Color: #000000
- Circle Background Color: #ac8961
- Circle Background Opacity: 0.5
Know how we changed the background opacity for this design. We went with a equivalent beige color, then again better the opacity so to upload an air of sumptuous to our design.
Together with Style to the Identify Text
For the establish text, we’ll use the equivalent font family that is used all through the construction pack. You’ll be capable of to search out the settings via clicking on the Identify Text tab. Underneath, to search out the settings that have been used to style the establish text:
Identify Text Settings:
- Identify Text Font: GFS Didot
- Identify Font Weight: Bold
- Identify Text Color: #000000
Styling the Amount Text
For the amount text, we’ll use a gold color to call once more to the colors used within the branding of this construction pack. We click on on on the Amount Text tab to enter the settings which we’ll use beneath:
Amount Text Styling:
- Amount Font: GFS Didot
- Amount Text Color: #ac8961
- Amount Text Size: 48px
Saving and Duplicating Our Artwork
Once we’ve entered in all these settings, we now click on on on the green take a look at mark at the bottom of the settings box. This will likely save all our laborious artwork. Now, we will copy the module, as we did in previous varieties, and edit the content material subject matter with the remaining knowledge.
We moreover added some Text Modules in another row above our Circle Modules so to upload context to our knowledge problems.
Onto the next design!
Design 4 feet. Divi Hostel
We’ll use the Divi Hostel Structure Pack for our fourth design of this submit. Particularly, we’ll adjust the amenities segment within the touchdown web page template.
Remove Modules from the Segment
To organize for our circle module, we need to remove the modules that are within the segment.
We need to have 4 columns for our circle modules, so we’ll cross away the row development because it’s.
Add Circle Module
Click on on on the gray plus icon so to upload the Circle Counter Module to the principle column of the row.
Add Content material subject matter
Once inside the Content material subject matter tab of the module settings, add on your establish and data stage.
Get began Designing the Circle Counter Module
Switch to the Design tab to start out out styling your Circle Counter Module. We’ll get began with the circle graph.
Styling the Circle of the Circle Counter Module
We’ll use the following settings to style the circle graph of the module:
Circle Design Settings:
- Circle Color: #008186
- Circle Background Color: #d37643
- Circle Background Opacity: 0.2
Identify Text Styling
Next, we’ll switch immediately to styling the Identify Text of the module. We’ll use the following settings:
Identify Text Settings:
- Identify Text Font: Manrope
- Identify Font Weight: Extraordinarily Bold
- Identify Text Color: #000000
Amount Text Sorts
In any case, we’ll style the amount within our Circle Counter Module. The settings that we’ll use are appropriate right here:
Amount Text Styling:
- Amount Font: Manrope
- Amount Font: Commonplace
- Amount Text Color: #d37643
- Amount Text Size: 54px
Add Border and Padding
Let’s add a border and a couple of spacing to the module so to upload some passion to the Circle Counter Module. Within the Circle Counter Settings Design tab, click on on on the Border tab. There, listed here are the settings to use:
Border Settings:
- Borders: All borders
- Border Width: 4px
- Border Color: #008186
- Border Style: Cast
As you’ll see, we need to add some padding to the module so that the borders don’t persist with the modules. First, we click on on on the Spacing tab. Next, we’ll use a 25px padding for all the sides.
Replica and Exchange Your Module
To save some time, we’ll use the right-click menu to duplicate our finished artwork for the other columns. Correct-click on the finished Circle Counter Module, and click on at the copy icon. Exchange the content material subject matter as sought after to your needs.
Final Example: Divi Toy Store
For our final example of styling Divi’s Circle Counter Module, we’ll use the Toy Retailer Structure Pack. We’ll be improving the house structure within the pack, in particular, the verdict to movement segment at the bottom of the internet web page.
Add Rows to Segment
Now not like our previous examples, we’ll add two rows to this segment. This row will probably be where we’ll add our Circle Counter Modules. So that you can upload a brand spanking new row, hover over the row, and click on on on the green plus icon. Do this two instances.
Then, switch the Button Module from the principle to the third row. So, we’ll have 3 rows within this segment now: the principle row will dangle the call-to-action, the segment will keep empty (for now), and the third row may have the button.
Change Column Building and Add Module
Now, let’s change the development of the row that can house our Circle Counter Module. To do this, hover over the grid icon on the green row menu. Select the 3-column development,we’ll add 3 modules to this row.
Throughout the first columns, we’re going so to upload the Circle Counter Module via clicking on the gray plus icon, then clicking the Circle Counter Module icon.
Add Content material subject matter to Circle Counter Module
Now, we’re going so to upload our content material subject matter and data to our Circle Counter Module.
Style the Circle Counter Module
As with our previous examples, we switch to the Design tab to style the establish text, amount text, and additional. On the other hand, we’ll be doing something just a little otherwise to round out this educational.
Styling the Circle Counter
We’ll get began via styling our circle counter with the following settings:
Circle Design Settings:
- Circle Color: #557068
- Circle Background Color: #ffffff
- Circle Background Opacity: 1
Know how we’re the usage of no transparency for the circle’s background opacity. For this design, we’ll click on on on the Text tab, and select Delicate since the text color. This will likely make the establish and the amount will probably be white, or the color you’ve set as the light font color for the internet web page.
Text Design Settings:
- Text Alignment: Middle
- Text Color: Delicate
Together with Style to the Identify Text
For the Identify Text styling, we’ll use the equivalent font used during the Divi Toy Store Construction Pack. Listed below are the settings to use:
Identify Text Settings:
- Identify Font: Libre Baskerville
- Identify Font Weight: Bold
Styling the Amount Text
For the amount text, we’ll use the following settings:
Amount Text Settings:
- Amount Font: Libre Baskerville
- Amount Font Weight: Bold
- Amount Text Color: #ffffff
- Amount Text Size: 72px
Together with Accents to Circle Counter Module
To finish this educational, we’re going to go back to the Content material subject matter tab. We’re then going to click on on on the Background tab for us so to upload some accents to our Circle Counter Module. We’re then going to switch to the Background Mask icon.
Styling the Background Mask for the Circle Counter Module
For the Background Mask, we’ll use the following settings so to upload an adjunct on your Circle Counter Module
Background Mask Settings:
- Background Mask Design: Rock Stack
- Mask Color: #eac989
- Mask Change into: Rotate, Invert
- Mask Side Ratio: Sq.
For the second module, we use the following settings:
Background Mask Settings (Module 2):
- Background Mask Design: Rock Stack
- Mask Color: #354e7c
- Mask Change into: Invert
- Mask Side Ratio: Sq.
For without equal module, the ones are the settings to use:
Background Mask Settings (Module 3):
- Background Mask Design: Rock Stack
- Mask Color: #f6c6c5
- Mask Change into: Flip Horizontal, Rotate, Invert
- Mask Side Ratio: Sq.
With all the accents in place, that’s what the overall product turns out like:
Final Concepts
With some steering and great knowledge, you’ll change one of the best ways through which your consumers can have interplay with the content material subject matter on your internet web page. Using the Circle Counter Module helps so to upload some passion into your internet web page while showcasing information about your product or service in an attention-grabbing means. We look forward to seeing you enforce a couple of of those tutorials on your internet web page. When you’re inspired, let us know inside the comments segment down beneath!
The submit 5 Techniques to Taste Divi’s Circle Counter Module appeared first on Sublime Issues Weblog.
0 Comments