Wpdaily

Daily WordPress News

5 Ways to Style Divi’s Circle Counter Module

Showcase stats, skills, and more with Divi’s Circle Counter Module. Utilizing this module helps break up the monotony that can be present on pages that contain a lot of numerical data. The Circle Counter Module gives you a beautiful and visually-compelling way to display a single data point. Upon page load, the module has an eye-catching animation that showcases data in an exciting way. Say goodbye to boring tables on your web pages! In today’s blog post, we’ll learn how to style Divi’s Circle Counter Module, with the help of some of the free layout packs that come with Divi.

Examples of How-to Style Divi’s Circle Counter Module

We’ll use a variety of layout packs throughout this tutorial. Each layout pack is from a different sector. This will showcase that there are many instances where the Circle Counter Module can be put to use.

Option One: Divi Streamer

With this layout pack, we used the Circle Counter Module to showcase the demographic stats of the Divi Streamer.

Style Divi's Circle Counter Module - Divi Streamer

Style Two: Divi Chocolatier

For a chocolatier, we used the modules to showcase the number of orders that had come into the business.

Style Divi's Circle Counter Module - Divi Chocolatier

Design Three: Divi Jewelry Designer

In this case, we used the Circle Counter module to present information to the viewer.

Style Divi's Circle Counter Module - Divi Jewelry Designer

Look Four: Divi Hostel

Measuring the “happiness quotient” among guests with an animated module just makes sense.

Style Divi's Circle Counter Module - Divi Hostel

Demo Five: Divi Toy Store

We use Circle Modules here to promote a sale on an online store.

Style Divi's Circle Counter Module - Divi Toy Store

Preparing to Style Divi’s Circle Counter Module

Before we begin to style Divi’s Circle Counter Module, we need to first create a separate section that will house these modules. Whether you are adding this section to a new page or an existing page, you will need to do the same preparation. Prior to styling, decide which data points you would like to showcase in the Circle Counter Module. Next, you will need to create a section for your modules. Thirdly, you will need to decide how many columns will be within the row. This is why you’ll need to know which data points will be populating the data for your Circle Counter Module. Your data points will influence the number of columns that you will be using. Once this is set up, you will then add your Circle Counter Module to each column.

Creating Your Section

First, click on the blue plus icon. This will add a new section to your page.

Add a new section to your page.

Selecting Your Columns

Next, you will use the green plus icon to add a row with the number of columns that you’ll be using. Each column will hold one Circle Counter Module.

Add a new row with columns to your page.

Add Circle Counter Modules

Once you have your columns created, click on the gray plus icon. This will open the Modules Modal. From here, select the Circle Counter Module.

Add the Circle Counter Module

For consistency, I would recommend styling one Circle Counter Module at a time. Then, use Divi’s right-click menu to duplicate each Circle Counter Module and modify the data point within.

Now that we have the fundamentals down pat, let’s start styling the module.

Style One ft. the Divi Streamer Layout Pack

You can follow this blog post to see which layout from the Divi Streamer Layout Pack suits your needs best. For this tutorial, we’re going to modify the About Section within the landing page layout.

About section of the Divi Streamer Landing Page Layout

Prepare the Section

First, let’s delete the Number Counter Modules that are currently in this section. Hover over the module, and from the gray popout menu that appears, click the trash can icon.

Remove Number Counter Modules

Repeat this for the other Number Counter Module within the section.

Add Circle Counter Module

Next, click on the gray plus icon to add a Circle Counter Module to the first column of your row. Next, click on the Circle Counter icon to add one of the modules to the column.

Adding the Circle Counter Module to the row

Adding Your Content

Once your first Circle Counter Module has been added, you’ll now need to enter your data point. In the Content tab of the module, enter a description for your data point. In our case, we’ll be showcasing a percentage of users who are from Toronto. So, we enter our text and the number 78 (without the percent sign!)

Enter your content and data

Style the Circle Counter Module

We now will move to the Design tab. As our section is part of the Divi Streamer Layout 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 start first by 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

The Design Tab Settings for the Circle Tab

Styling the Title Text

Following styling the circle graph, we’ll move on to the Title Text of the module. Click on the Title Text tab, then use the following settings to add some life to the title text of our Circle Counter Module.

Title Text Settings:

  • Title Font: Poppins
  • Title Font Weight: Bold
  • Title Font Color: #ffffff

Styling the Title Text for the Circle Counter Module

Adding Style to the Number Text

Last but not least, we’ll be fixing the numbers within the Circle Counter Module. For this, we click on the Number Text tab. Then, we’ll use the following settings to style. Notice, we pulled inspiration from the layout pack, but also the Number Counter Modules that were there before.

Number Text Settings:

  • Number Font: Poppins
  • Number Font Weight: Bold
  • Number Text Color: #ffffff
  • Number Text Size: 72pt

Circle Counter Number Text Settings

Once you have ended these final edits, click on the green check mark at the bottom of the modal box. This will save your changes.

Copy and Update Module

With styling complete, we can now duplicate this module. We will modify it with our other data points and their corresponding titles. To do this, hover over the module. This will bring up the modules settings menu popup. Click the copy icon. Then, move the module to the other columns in your row.

Duplicate Circle Counter on the Divi Streamer Page

In our case, in addition to updating the title and the data for the module, we also changed the colors to match the layout pack.

The finished Divi Streamer Circle Counter example

Design Two with the Divi Chocolatier Layout Pack

Follow the Divi Chocolatier Layout Pack blog post to find out how to install the layout onto your website. We’ll be modifying the events sections on the home page layout. Let’s add some Circle Counter Modules to show data on how many orders have been collected.

The section we'll be replacing on the Divi Chocolatier home page layout

Remove Current Content

Firstly, we want to remove the current modules. While the Text and Image Modules here look great, they’re quite static. By using the Circle Counter Modules, we’ll add some excitement and animation to this section. Hover over each module and click the trash can icon. The icon will appear in the module settings popout menu.

Remove old modules to prepare the row for the Circle Counter Modules

We’ll end up with an empty 3-column row.

The empty row in preparation for our new modules

Update Titles

You may also want to consider updating the text modules for the titles to something that is more aligned with the upcoming content for the section. To do so, hover over the text modules, and click on the gear icon to edit the module text.

Edit title Text Modules

Add Circle Modules

Before we add our Circle Counter Modules, we’re going to change the column number for our row. Hover over the row, and click on the grid icon. This will bring a popup where we can select the number of columns we need. For this design, we’ll be visualizing four pieces of data. So, we’ll choose to add four columns to this row. Click on the four-column icon.

Change column number for Circle Counter Modules

Now, we’ll add the Circle Counter Modules to the first column by clicking on the gray plus sign icon. Then, when the module popup appears, we click on the Circle Counter icon to add our first Circle Counter Module.

Add Circle Counter Module to the first column of the row

Add Data to Circle Modules

With our first module in place, we can begin to style and add content to it. Firstly, let’s add our title for this module. Next, we’ll add our data point.

Add your data and content

For this design, we’ll remove the percent sign that comes with the module by default. To do this, we click on the Elements tab. Next, we uncheck the toggle next to the Percent Sign option.

Remove percent sign from Circle Counter Module

Now, we can style this module.

Styling the Circle Counter Module

To begin, we switch to the Design tab of the module.

Switch to the Design tab

Adding Branding to the Circle Graph

Next, we click on the Circle toggle to access the design settings for the circle graph aspect 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

Circle Background Color Settings

Stylizing the Title Text

For the title text, we’ll use the following settings after clicking on the Title Text tab:

Title Text Settings:

  • Title Font: Jost
  • Title Font Weight: Regular
  • Title Text Color: #000000

Title Text Settings

Designing the Number Text.

We’re going to use the same font and color for the number text. However, we’re going to change the size. We have more room within the Circle Counter Module since we are not using the percent sign. We’ll use this to our advantage in our design. Click on the Number Text tab, and enter the following settings:

Number Text Settings:

  • Number Font: Jost
  • Number Font Weight: Regular
  • Number Text Color: #000000
  • Number Text Size: 72px

Number Text Settings

Duplicate and Finish

Now that we have our first Circle Counter Module designed, we can go ahead and duplicate it.

Duplicate our Circle Counter Module

We’ll move the duplicates into their own row, and update the content within to reveal our finished product.

The Completed Divi Chocolatier Layout with Circle Counters

Style Three with the Divi Jewelry Designer Layout Pack

For this design, we used the Divi Jewelry Designer Layout Pack as our starting point. We wanted to add an educational section to the product page of this layout, and will be using the Circle Counter Module to showcase this information. We’ll convert the testimonial section at the bottom of the page into this.

The testimonial section of the Divi Jewelry Designer Product Page Layout

Remove Modules

As with our previous work, we need to go in and delete the current modules within this section.

Remove old modules from section

Update Section and Row Design and Structure

For this layout pack, we also want to change the section’s background to add some interest. Click on the gear icon within the blue settings menu of the section.

Edit section settings

First, let’s remove the background image. Click on the Background tab. Then, click on the image icon. Finally, click on the trash can icon to remove the background image.

Removing the background image from the section

We want to leave the background gradient and color. Now, let’s add a background pattern to the section. Click on the Background Pattern icon. Then, click the plus icon to add a Background Pattern.

Add background pattern

We’ll use the following background pattern.

Selecting background pattern

Click the green check icon to save your settings for the section. We’re now going to change the column count of our row. For this design, we’re going to have five columns for our Circle Counter Modules.

Change column number to five columns

Add Circle Module

With the columns and sections created, click on the gray plus icon to add our Circle Counter Module.

Add Circle Counter Module to the Jewelry Designer

With the module added to the column, as before, we add in our content. We’ll use the percent sign in this design.

Add content to the Circle Counter Module

Style Your Circle Counters

Now, we’re going to begin to style our counters.

Stylizing the Circle Graph

We first start with the circle portion of our counter. The following settings will be used:

Circle Design Settings:

  • Circle Color: #000000
  • Circle Background Color: #ac8961
  • Circle Background Opacity: 0.5

The Circle design of the Circle Counter Module

 

Notice how we changed the background opacity for this design. We went with a similar beige color, but increased the opacity to add an air of luxury to our design.

Adding Style to the Title Text

For the title text, we’ll use the same font family that is used throughout the layout pack. You can find the settings by clicking on the Title Text tab. Below, find the settings that were used to style the title text:

Title Text Settings:

  • Title Text Font: GFS Didot
  • Title Font Weight: Bold
  • Title Text Color: #000000

Styling for the Divi Jewelry Designer Layout Pack

Styling the Number Text

For the number text, we’ll use a gold color to call back to the colors used within the branding of this layout pack. We click on the Number Text tab to enter the settings which we’ll use below:

Number Text Styling:

  • Number Font: GFS Didot
  • Number Text Color: #ac8961 
  • Number Text Size: 48px

Styling for the number in the Divi Jewelry Designer Layout Pack with Circle Counter Modules

Saving and Duplicating Our Work

Once we’ve entered in all these settings, we now click on the green check mark at the bottom of the settings box. This will save all our hard work. Now, we can duplicate the module, as we did in previous styles, and edit the content with the remaining data.

The finished Circle Modules for the layout pack

We also added some Text Modules in another row above our Circle Modules to add context to our data points.

Onto the next design!

Design Four ft. Divi Hostel

We’ll use the Divi Hostel Layout Pack for our fourth design of this post. Specifically, we’ll modify the amenities section within the landing page template.

Divi Hostel amenities section within the landing page template

Remove Modules from the Section

To prepare for our circle module, we need to remove the modules that are within the section.

Remove old modules from the Divi Hostel page template

We want to have four columns for our circle modules, so we’ll leave the row structure as it is.

 Add Circle Module

Click on the gray plus icon to add the Circle Counter Module to the first column of the row.

Add Circle Counter to your first column

Add Content

Once in the Content tab of the module settings, add in your title and data point.

Add content to Circle Counter Module

Start Designing the Circle Counter Module

Switch to the Design tab to start styling your Circle Counter Module. We’ll start 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

Title Text Styling

Next, we’ll move on to styling the Title Text of the module. We’ll use the following settings:

Title Text Settings:

  • Title Text Font: Manrope
  • Title Font Weight: Ultra Bold
  • Title Text Color: #000000

The Title Text settings for the Circle Counter Module ft. the Divi Hostel Layout Pack

Number Text Styles

Finally, we’ll style the number within our Circle Counter Module. The settings that we’ll use are here:

Number Text Styling:

  • Number Font: Manrope
  • Number Font: Regular
  • Number Text Color: #d37643
  • Number Text Size: 54px

Number font styling for the Circle Counter Module Divi Hostel

Add Border and Padding

Let’s add a border and some spacing to the module to add some interest to the Circle Counter Module. Within the Circle Counter Settings Design tab, click on the Border tab. There, here are the settings to use:

Border Settings:

  • Borders: All borders
  • Border Width: 4px
  • Border Color: #008186
  • Border Style: Solid

Adding a border to the Circle Counter Module

As you can see, we need to add some padding to the module so that the borders don’t stick to the modules. First, we click on the Spacing tab. Next, we’ll use a 25px padding for all the sides.

Adding spacing to the Circle Counter Module

Duplicate and Update Your Module

To save time, we’ll use the right-click menu to duplicate our finished work for the other columns. Right-click on the finished Circle Counter Module, and click the copy icon. Update the content as needed for your needs.

Final look of the Circle Counter Modules

Final Example: Divi Toy Store

For our last example of styling Divi’s Circle Counter Module, we’ll use the Toy Store Layout Pack. We’ll be modifying the home layout within the pack, specifically, the call to action section at the bottom of the page.

The default Divi Toy Store Footer

Add Rows to Section

Unlike our previous examples, we’ll add two rows to this section. This row will be where we’ll add our Circle Counter Modules. To add a new row, hover over the row, and click on the green plus icon. Do this twice.

Adding two rows to the section

Then, move the Button Module from the first to the third row. So, we’ll have three rows within this section now: the first row will hold the call-to-action, the section will remain empty (for now), and the third row will have the button.

Setting up the section with three rows

Change Column Structure and Add Module

Now, let’s change the structure of the row that will house our Circle Counter Module. To do this, hover over the grid icon on the green row menu. Select the 3-column structure,we’ll add three modules to this row.

Change column structure for the row

In the first columns, we’re going to add the Circle Counter Module by clicking on the gray plus icon, then clicking the Circle Counter Module icon.

Adding Circle Counter Module

Add Content to Circle Counter Module

Now, we’re going to add our content and data to our Circle Counter Module.

Adding text to the Circle Counter Module

Style the Circle Counter Module

As with our previous examples, we move to the Design tab to style the title text, number text, and more. However, we’ll be doing something a little differently to round out this tutorial.

Styling the Circle Counter

We’ll start by styling our circle counter with the following settings:

Circle Design Settings:

  • Circle Color: #557068
  • Circle Background Color: #ffffff
  • Circle Background Opacity: 1

Styling Circle Graph Circle Counter Module

Notice how we’re using no transparency for the circle’s background opacity. For this design, we’ll click on the Text tab, and select Light as the text color. This will make the title and the number will be white, or the color you’ve set as the light font color for the page.

Text Design Settings:

  • Text Alignment: Center
  • Text Color: Light

Setting text color

Adding Style to the Title Text

For the Title Text styling, we’ll use the same font used through the Divi Toy Store Layout Pack. Here are the settings to use:

Title Text Settings:

  • Title Font: Libre Baskerville
  • Title Font Weight: Bold

Title Text Settings for the Circle Counter Module

Styling the Number Text

For the number text, we’ll use the following settings:

Number Text Settings:

  • Number Font: Libre Baskerville
  • Number Font Weight: Bold
  • Number Text Color: #ffffff
  • Number Text Size: 72px

Number Text Settings for the Toy Store Layout Pack

Adding Accents to Circle Counter Module

To finish this tutorial, we’re going to go back to the Content tab. We’re then going to click on the Background tab for us to add some accents to our Circle Counter Module. We’re then going to move to the Background Mask icon.

Background mask as an accent to the Circle Counter Module

Styling the Background Mask for the Circle Counter Module

For the Background Mask, we’ll use the following settings to add an accent to your Circle Counter Module

Background Mask Settings:

  • Background Mask Design: Rock Stack
  • Mask Color: #eac989
  • Mask Transform: Rotate, Invert
  • Mask Aspect Ratio: Square

Styling Background Masks as accents

For the second module, we use the following settings:

Background Mask Settings (Module 2):

  • Background Mask Design: Rock Stack
  • Mask Color: #354e7c
  • Mask Transform: Invert
  • Mask Aspect Ratio: Square

Styling Background Masks as accents for the second module

For the last module, these are the settings to use:

Background Mask Settings (Module 3):

  • Background Mask Design: Rock Stack
  • Mask Color: #f6c6c5
  • Mask Transform: Flip Horizontal, Rotate, Invert
  • Mask Aspect Ratio: Square

Styling Background Masks as accents for the last module

With all the accents in place, this is what the final product looks like:

Final look of the Circle Counter Modules with the Divi Toy Store

Final Thoughts

With some guidance and great data, you can change the way in which your users will interact with the content on your site. Using the Circle Counter Module helps to add some interest into your page while showcasing information about your product or service in an eye-catching way. We look forward to seeing you implement some of these tutorials on your site. If you are inspired, let us know in the comments section down below!

The post 5 Ways to Style Divi’s Circle Counter Module appeared first on Elegant Themes Blog.

Source