Show off stats, abilities, and extra with Divi’s Circle Counter Module. Using this module is helping get a divorce the monotony that may be provide on pages that include a large number of numerical information. The Circle Counter Module provides you with a good looking and visually-compelling technique to show a unmarried information level. Upon web page load, the module has an crowd pleasing animation that showcases information in a thrilling approach. Say good-bye to ordinary tables in your internet pages! In lately’s weblog publish, we’ll discover ways to taste Divi’s Circle Counter Module, with the assistance of one of the most loose format packs that include Divi.
Examples of How-to Taste Divi’s Circle Counter Module
We’ll use quite a few format packs all through this educational. Each and every format pack is from a distinct sector. This may occasionally exhibit that there are lots of cases the place the Circle Counter Module may also be put to make use of.
Choice One: Divi Streamer
With this format pack, we used the Circle Counter Module to exhibit the demographic stats of the Divi Streamer.
Taste Two: Divi Chocolatier
For a chocolatier, we used the modules to exhibit the selection of orders that had come into the industry.
Design 3: Divi Jewelry Designer
On this case, we used the Circle Counter module to offer data to the viewer.
Glance 4: Divi Hostel
Measuring the “happiness quotient” amongst visitors with an animated module simply is smart.
Demo 5: Divi Toy Store
We use Circle Modules right here to advertise a sale on a web-based retailer.
Making ready to Taste Divi’s Circle Counter Module
Ahead of we start to taste Divi’s Circle Counter Module, we wish to first create a separate phase that can space those modules. Whether or not you’re including this phase to a brand new web page or an current web page, it is very important do the similar preparation. Previous to styling, make a decision which information issues you wish to exhibit within the Circle Counter Module. Subsequent, it is very important create a piece to your modules. Thirdly, it is very important make a decision what number of columns can be throughout the row. For this reason you’ll wish to know which information issues can be populating the information to your Circle Counter Module. Your information issues will affect the selection of columns that you are going to be the usage of. As soon as that is arrange, you’ll then upload your Circle Counter Module to each and every column.
Developing Your Segment
First, click on at the blue plus icon. This may occasionally upload a brand new phase for your web page.
Deciding on Your Columns
Subsequent, you’ll use the fairway plus icon so as to add a row with the selection of columns that you just’ll be the usage of. Each and every column will grasp one Circle Counter Module.
Upload Circle Counter Modules
Upon getting your columns created, click on at the grey plus icon. This may occasionally open the Modules Modal. From right here, make a selection the Circle Counter Module.
For consistency, I’d counsel styling one Circle Counter Module at a time. Then, use Divi’s right-click menu to replicate each and every Circle Counter Module and regulate the information level inside of.
Now that we’ve got the basics down pat, let’s get started styling the module.
Taste One toes. the Divi Streamer Structure Pack
You’ll be able to practice this blog post to peer which format from the Divi Streamer Layout Pack fits your wishes very best. For this educational, we’re going to change the About Segment throughout the landing page layout.
Get ready the Segment
First, let’s delete the Number Counter Modules which might be lately on this phase. Hover over the module, and from the grey popout menu that looks, click on the trash can icon.
Repeat this for the opposite Quantity Counter Module throughout the phase.
Upload Circle Counter Module
Subsequent, click on at the grey plus icon so as to add a Circle Counter Module to the primary column of your row. Subsequent, click on at the Circle Counter icon so as to add one of the crucial modules to the column.
Including Your Content material
As soon as your first Circle Counter Module has been added, you’ll now wish to input your information level. Within the Content material tab of the module, input an outline to your information level. In our case, we’ll be showcasing a share of customers who’re from Toronto. So, we input our textual content and the quantity 78 (with out the p.c signal!)
Taste the Circle Counter Module
We now will transfer to the Design tab. As our phase is a part of the Divi Streamer Structure Pack, we’ll use the font, textual content, and colours which might be part of the pack to steer the styling of our module.
Styling the Circle Graph
Let’s get started first via clicking at the Circle tab to make a decision at the colours used for the circle a part of the module.
Circle Design Settings:
- Circle Colour: #5200ff
- Circle Background Colour: #ffffff
- Circle Background Opacity: 0.4
Styling the Identify Textual content
Following styling the circle graph, we’ll transfer directly to the Identify Textual content of the module. Click on at the Identify Textual content tab, then use the next settings so as to add some existence to the identify textual content of our Circle Counter Module.
Identify Textual content Settings:
- Identify Font: Poppins
- Identify Font Weight: Daring
- Identify Font Colour: #ffffff
Including Taste to the Quantity Textual content
Final however now not least, we’ll be solving the numbers throughout the Circle Counter Module. For this, we click on at the Quantity Textual content tab. Then, we’ll use the next settings to taste. Understand, we pulled inspiration from the format pack, but in addition the Quantity Counter Modules that had been there ahead of.
Quantity Textual content Settings:
- Quantity Font: Poppins
- Quantity Font Weight: Daring
- Quantity Textual content Colour: #ffffff
- Quantity Textual content Dimension: 72pt
Upon getting ended those ultimate edits, click on at the inexperienced test mark on the backside of the modal field. This may occasionally save your adjustments.
Reproduction and Replace Module
With styling entire, we will now replica this module. We will be able to regulate it with our different information issues and their corresponding titles. To do that, hover over the module. This may occasionally carry up the modules settings menu popup. Click on the replica icon. Then, transfer the module to the opposite columns on your row.
In our case, along with updating the identify and the information for the module, we additionally modified the colours to compare the format pack.
Design Two with the Divi Chocolatier Structure Pack
Apply the Divi Chocolatier Layout Pack blog post to learn the way to put in the format onto your web site. We’ll be editing the occasions sections at the home page layout. Let’s upload some Circle Counter Modules to turn information on what number of orders were amassed.
Take away Present Content material
Initially, we need to take away the present modules. Whilst the Text and Image Modules right here glance nice, they’re slightly static. By way of the usage of the Circle Counter Modules, we’ll upload some pleasure and animation to this phase. Hover over each and every module and click on the trash can icon. The icon will seem within the module settings popout menu.
We’ll finally end up with an empty 3-column row.
Replace Titles
You might also need to imagine updating the textual content modules for the titles to one thing this is extra aligned with the approaching content material for the phase. To take action, hover over the textual content modules, and click on at the tools icon to edit the module textual content.
Upload Circle Modules
Ahead of we upload our Circle Counter Modules, we’re going to modify the column quantity for our row. Hover over the row, and click at the grid icon. This may occasionally carry a popup the place we will make a selection the selection of columns we’d like. For this design, we’ll be visualizing 4 items of knowledge. So, we’ll select so as to add 4 columns to this row. Click on at the four-column icon.
Now, we’ll upload the Circle Counter Modules to the primary column via clicking at the grey plus signal icon. Then, when the module popup seems, we click on at the Circle Counter icon so as to add our first Circle Counter Module.
Upload Knowledge to Circle Modules
With our first module in position, we will start to taste and upload content material to it. Initially, let’s upload our identify for this module. Subsequent, we’ll upload our information level.
For this design, we’ll take away the p.c signal that incorporates the module via default. To do that, we click on at the Parts tab. Subsequent, we uncheck the toggle subsequent to the % Signal choice.
Now, we will taste this module.
Styling the Circle Counter Module
To start, we transfer to the Design tab of the module.
Including Branding to the Circle Graph
Subsequent, we click on at the Circle toggle to get admission to the design settings for the circle graph facet of the module. We’ll use the next settings to taste it:
Circle Design Settings:
- Circle Colour: #ff6a28
- Circle Background Colour: #000000
- Circle Background Opacity: 0.3
Stylizing the Identify Textual content
For the identify textual content, we’ll use the next settings after clicking at the Identify Textual content tab:
Identify Textual content Settings:
- Identify Font: Jost
- Identify Font Weight: Common
- Identify Textual content Colour: #000000
Designing the Quantity Textual content.
We’re going to make use of the similar font and colour for the quantity textual content. Then again, we’re going to modify the dimensions. Now we have more space throughout the Circle Counter Module since we aren’t the usage of the p.c signal. We’ll use this to our merit in our design. Click on at the Quantity Textual content tab, and input the next settings:
Quantity Textual content Settings:
- Quantity Font: Jost
- Quantity Font Weight: Common
- Quantity Textual content Colour: #000000
- Quantity Textual content Dimension: 72px
Reproduction and End
Now that we’ve got our first Circle Counter Module designed, we will pass forward and copy it.
We’ll transfer the duplicates into their very own row, and replace the content material inside of to show our completed product.
Taste 3 with the Divi Jewellery Clothier Structure Pack
For this design, we used the Divi Jewelry Designer Layout Pack as our start line. We needed so as to add an academic phase to the product page of this layout, and can be the usage of the Circle Counter Module to exhibit this data. We’ll convert the testimonial phase on the backside of the web page into this.
Take away Modules
As with our earlier paintings, we wish to pass in and delete the present modules inside of this phase.
Replace Segment and Row Design and Construction
For this format pack, we additionally need to trade the phase’s background so as to add some pastime. Click on at the tools icon throughout the blue settings menu of the phase.
First, let’s take away the background symbol. Click on at the Background tab. Then, click on at the symbol icon. In spite of everything, click on at the trash can icon to take away the background symbol.
We need to go away the background gradient and colour. Now, let’s upload a background development to the phase. Click on at the Background Development icon. Then, click on the plus icon so as to add a Background Development.
We’ll use the next background development.
Click on the fairway test icon to save lots of your settings for the phase. We’re now going to modify the column depend of our row. For this design, we’re going to have 5 columns for our Circle Counter Modules.
Upload Circle Module
With the columns and sections created, click on at the grey plus icon so as to add our Circle Counter Module.
With the module added to the column, as ahead of, we upload in our content material. We’ll use the p.c signal on this design.
Taste Your Circle Counters
Now, we’re going to start to taste our counters.
Stylizing the Circle Graph
We first get started with the circle portion of our counter. The next settings can be used:
Circle Design Settings:
- Circle Colour: #000000
- Circle Background Colour: #ac8961
- Circle Background Opacity: 0.5
Understand how we modified the background opacity for this design. We went with a identical beige colour, however higher the opacity so as to add an air of luxurious to our design.
Including Taste to the Identify Textual content
For the identify textual content, we’ll use the similar font circle of relatives this is used all through the format pack. You’ll be able to to find the settings via clicking at the Identify Textual content tab. Under, to find the settings that had been used to taste the identify textual content:
Identify Textual content Settings:
- Identify Textual content Font: GFS Didot
- Identify Font Weight: Daring
- Identify Textual content Colour: #000000
Styling the Quantity Textual content
For the quantity textual content, we’ll use a gold colour to name again to the colours used throughout the branding of this format pack. We click on at the Quantity Textual content tab to go into the settings which we’ll use beneath:
Quantity Textual content Styling:
- Quantity Font: GFS Didot
- Quantity Textual content Colour: #ac8961
- Quantity Textual content Dimension: 48px
Saving and Duplicating Our Paintings
After we’ve entered in these kinds of settings, we now click on at the inexperienced test mark on the backside of the settings field. This may occasionally save all our exhausting paintings. Now, we will replica the module, as we did in earlier kinds, and edit the content material with the remainder information.
We additionally added some Textual content Modules in every other row above our Circle Modules so as to add context to our information issues.
Onto the following design!
Design 4 toes. Divi Hostel
We’ll use the Divi Hostel Layout Pack for our fourth design of this publish. Particularly, we’ll regulate the facilities phase throughout the landing page template.
Take away Modules from the Segment
To arrange for our circle module, we wish to take away the modules which might be throughout the phase.
We need to have 4 columns for our circle modules, so we’ll go away the row construction as it’s.
Upload Circle Module
Click on at the grey plus icon so as to add the Circle Counter Module to the primary column of the row.
Upload Content material
As soon as within the Content material tab of the module settings, upload on your identify and information level.
Get started Designing the Circle Counter Module
Transfer to the Design tab to begin styling your Circle Counter Module. We’ll get started with the circle graph.
Styling the Circle of the Circle Counter Module
We’ll use the next settings to taste the circle graph of the module:
Circle Design Settings:
- Circle Colour: #008186
- Circle Background Colour: #d37643
- Circle Background Opacity: 0.2
Identify Textual content Styling
Subsequent, we’ll transfer directly to styling the Identify Textual content of the module. We’ll use the next settings:
Identify Textual content Settings:
- Identify Textual content Font: Manrope
- Identify Font Weight: Extremely Daring
- Identify Textual content Colour: #000000
Quantity Textual content Types
In spite of everything, we’ll taste the quantity inside of our Circle Counter Module. The settings that we’ll use are right here:
Quantity Textual content Styling:
- Quantity Font: Manrope
- Quantity Font: Common
- Quantity Textual content Colour: #d37643
- Quantity Textual content Dimension: 54px
Upload Border and Padding
Let’s upload a border and a few spacing to the module so as to add some pastime to the Circle Counter Module. Throughout the Circle Counter Settings Design tab, click on at the Border tab. There, listed below are the settings to make use of:
Border Settings:
- Borders: All borders
- Border Width: 4px
- Border Colour: #008186
- Border Taste: Forged
As you’ll see, we wish to upload some padding to the module in order that the borders don’t stick with the modules. First, we click on at the Spacing tab. Subsequent, we’ll use a 25px padding for all of the facets.
Reproduction and Replace Your Module
To avoid wasting time, we’ll use the right-click menu to replicate our completed paintings for the opposite columns. Proper-click at the completed Circle Counter Module, and click on the replica icon. Replace the content material as wanted to your wishes.
Ultimate Instance: Divi Toy Retailer
For our final instance of styling Divi’s Circle Counter Module, we’ll use the Toy Store Layout Pack. We’ll be editing the home layout throughout the pack, particularly, the decision to motion phase on the backside of the web page.
Upload Rows to Segment
In contrast to our earlier examples, we’ll upload two rows to this phase. This row can be the place we’ll upload our Circle Counter Modules. So as to add a brand new row, hover over the row, and click on at the inexperienced plus icon. Do that two times.
Then, transfer the Button Module from the primary to the 3rd row. So, we’ll have 3 rows inside of this phase now: the primary row will grasp the call-to-action, the phase will stay empty (for now), and the 3rd row can have the button.
Exchange Column Construction and Upload Module
Now, let’s trade the construction of the row that can space our Circle Counter Module. To do that, hover over the grid icon at the inexperienced row menu. Make a choice the 3-column construction,we’ll upload 3 modules to this row.
Within the first columns, we’re going so as to add the Circle Counter Module via clicking at the grey plus icon, then clicking the Circle Counter Module icon.
Upload Content material to Circle Counter Module
Now, we’re going so as to add our content material and information to our Circle Counter Module.
Taste the Circle Counter Module
As with our earlier examples, we transfer to the Design tab to taste the identify textual content, quantity textual content, and extra. Then again, we’ll be doing one thing a little bit in a different way to spherical out this educational.
Styling the Circle Counter
We’ll get started via styling our circle counter with the next settings:
Circle Design Settings:
- Circle Colour: #557068
- Circle Background Colour: #ffffff
- Circle Background Opacity: 1
Understand how we’re the usage of no transparency for the circle’s background opacity. For this design, we’ll click on at the Textual content tab, and make a selection Mild because the textual content colour. This may occasionally make the identify and the quantity can be white, or the colour you’ve set as the sunshine font colour for the web page.
Textual content Design Settings:
- Textual content Alignment: Middle
- Textual content Colour: Mild
Including Taste to the Identify Textual content
For the Identify Textual content styling, we’ll use the similar font used in the course of the Divi Toy Retailer Structure Pack. Listed here are the settings to make use of:
Identify Textual content Settings:
- Identify Font: Libre Baskerville
- Identify Font Weight: Daring
Styling the Quantity Textual content
For the quantity textual content, we’ll use the next settings:
Quantity Textual content Settings:
- Quantity Font: Libre Baskerville
- Quantity Font Weight: Daring
- Quantity Textual content Colour: #ffffff
- Quantity Textual content Dimension: 72px
Including Accents to Circle Counter Module
To complete this educational, we’re going to return to the Content material tab. We’re then going to click on at the Background tab for us so as to add some accents to our Circle Counter Module. We’re then going to transfer to the Background Masks icon.
Styling the Background Masks for the Circle Counter Module
For the Background Masks, we’ll use the next settings so as to add an accessory for your Circle Counter Module
Background Masks Settings:
- Background Masks Design: Rock Stack
- Masks Colour: #eac989
- Masks Become: Rotate, Invert
- Masks Side Ratio: Sq.
For the second one module, we use the next settings:
Background Masks Settings (Module 2):
- Background Masks Design: Rock Stack
- Masks Colour: #354e7c
- Masks Become: Invert
- Masks Side Ratio: Sq.
For the final module, those are the settings to make use of:
Background Masks Settings (Module 3):
- Background Masks Design: Rock Stack
- Masks Colour: #f6c6c5
- Masks Become: Turn Horizontal, Rotate, Invert
- Masks Side Ratio: Sq.
With all of the accents in position, that is what the general product seems like:
Ultimate Ideas
With some steerage and nice information, you’ll trade the best way during which your customers will have interaction with the content material in your website online. The usage of the Circle Counter Module is helping so as to add some pastime into your web page whilst showcasing details about your services or products in an crowd pleasing approach. We sit up for seeing you put into effect a few of these tutorials in your website online. In case you are impressed, tell us within the feedback phase down beneath!
The publish 5 Ways to Style Divi’s Circle Counter Module gave the impression first on Elegant Themes Blog.
0 Comments