Implement Using
Divi Number Counter ModuleLets Get Started
Step 2 :- Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don’t forget to add a row to your page first. Locate the Number Counter Module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word “Number” and then click enter to automatically find and add the Number Counter Module! Once the module has been added, you will be greeted with the module’s list of options.
Step 3 :- First thing you need to start with Number Countermodule and insert as details as per below image.
1. Add Title On textfield Example Like :- Web Design (This is the title of the Number Module you are featuring. The title is displayed at the top of the module in larger text.)
2. Add Number On textfield Example Like :- 2050 (Number is displayed below the Title in smaller text. This is often used to your customer count or Facebook followers is a great way to showcase social proof. )
Step 5 :- Click on Save & Exit.
Step 8:- Now lets start to Set Number Counter Module Style :
If you are working with a child theme you can go to Appearance -> Editor and open your stylesheet. If not, go to Appearance -> Divi Theme Options -> ePanel -> Custom CSS (which is located at the bottom of the ePanel)
Copy Below css code and paste in Custom Css Or stylesheet.
:root {--color-1: #00b596;} /*Here You Can Change Default Color */ /* ======================= Number Counter Style =========================*/ .et_pb_ctr_flip_1{background:var(--color-1);} .et_pb_ctr_flip_1.back{background:#000;} .et_pb_ctr_flip_1 .percent-value { color:#fff; font-size: 50px; font-weight: bold; line-height: normal; padding-bottom: 15px; position: relative;} .et_pb_ctr_flip_1 .percent-value::after{background-color: #fff;content: ""; display: block; height: 3px; margin: auto; position: absolute; bottom: 0; left: 0; right: 0; width: 50px;transition: all 0.3s linear 0s;} .et_pb_ctr_flip_1.back .percent-value::after{width: 75px;} .et_pb_ctr_flip_1 .title{color:#fff;text-transform: uppercase;font-size: 15px;padding-top: 20px;padding-bottom: 20px;}
Step 9:- Now lets start to Panel Hover Css Style :
If you are working with a child theme you can go to Appearance -> Editor and open your stylesheet. If not, go to Appearance -> Divi Theme Options -> ePanel -> Custom CSS (which is located at the bottom of the ePanel)
Copy Below css code and paste in Custom Css Or stylesheet.
/* -- make sure to declare a default for every property that you want animated -- */ /* -- general styles, including Y axis rotation -- */ .panel { position: relative; } .panel .front { /*position: absolute;*/ top: 0; z-index: 900; text-align: center; -webkit-transform: rotateX(0deg) rotateY(0deg); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-transform: rotateX(0deg) rotateY(0deg); -moz-transform-style: preserve-3d; -moz-backface-visibility: hidden; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .panel.flip .front { z-index: 900; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } .panel .back { position: absolute; top: 0; z-index: 800; -webkit-transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-transform: rotateY(-180deg); -moz-transform-style: preserve-3d; -moz-backface-visibility: hidden; /* -- transition is the magic sauce for animation -- */ -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; left: 0; right:0; margin: 0 !important; } .panel.flip .back { z-index: 1000; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); }
Step 10:- Now lets start to dazzle things up a bit with some JS.
If you are working with a child theme you can go to Appearance -> Editor and open your stylesheet. If not, go to Appearance -> Divi Theme Options -> Integration ->Add code to <head> Section (which is located at the bottom of the ePanel)
Copy Below css code and paste in Custom Css Or stylesheet.
jQuery(document).ready(function(){ // set up hover panels // although this can be done without JavaScript, we've attached these events // because it causes the hover to be triggered when the element is tapped on a touch device jQuery('.hover').hover(function(){ jQuery(this).addClass('flip'); },function(){ jQuery(this).removeClass('flip'); }); });