Implement Using
Divi Pricing Tables ModuleLets Get Started
Step 1 :- Click On Insert standard section and select the regular section then click on insert row and select 3 column layout.
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 person 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 “Pricing Tables” and then click enter to automatically find and add the person 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 Pricing Tables Module and insert as details as per below image..
1. Add Title On textfield Example Like :- Table Title (This is the name of the Table you are featuring. The name is displayed at the top of the module in larger text.)
2. Add Currency symbol On textfield Example Like :- $
3. Add Month/Year Subscription text On textfield Example Like :- Month
4. Add Number of Price Subscription text On textfield Example Like :- 50
5. Add Contect line text On textfield Example Like :- 50 Gb Disk Space
Step 4 :- Now Click on advanced tab and add css class
Css Class : et_pb_pricing_flip_1 front
Step 5 :- Now Click on advanced tab and add css class
Css Class : et_pb_pricing_flip_1 back
Step 5 :- Click on Save & Exit.
Step 6 :- Repeat Setp 2,3,4,5 again for other three number counter module or Duplicate the Module that holds the Number Counters Modules so that more than one number counters are displayed below. .Only you have to enter diffrent color css class in css class text field.
Step 7:- Add class :” hover panel” to Column
Step 8:- Now lets start to Set Pricing Table 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 */
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table{
border: 1px solid #ddd;
background: var(--color-1);
transition: all 0.3s ease 0s;}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content_top .et_pb_et_price .et_pb_dollar_sign{font-size: 50px;
font-weight: 700;
color: var(--color-1);
z-index: 1;
top: 10px;
margin-left: 2em !important;
margin-bottom: 20px;
transition: all 0.3s ease 0s;}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content_top{position:absolute;}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content_top .et_pb_et_price .et_pb_sum{font-size: 70px;
font-weight: 700;
color: var(--color-1);
text-align: center;
transition: all 0.3s ease 0s;
position: relative;
top: 0px;
z-index: 1;
left: 20px;}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content_top{padding-bottom:0px; border-bottom:none;}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_heading{background: var(--color-1);margin-bottom: 0;}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_heading .et_pb_pricing_title{
font-size: 24px;
font-weight: 700;
color: #fff;
text-align: left;
text-transform: uppercase;
transition: all 0.3s ease 0s;
padding: 15px;}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content{
margin: 0 30px 30px 0;
background: #fff;
padding-bottom:130px;
text-align: center;
transition: all 0.3s ease 0s;}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content .et_pb_pricing li:before{content: "\";
font-family: ETmodules !important;
color: #000;
text-align: center;
margin-right: 10px;}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content .et_pb_pricing li span::before{content:none;}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content ul{
position: relative;
top: 56px;
list-style: none;
text-align: left;}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content ul li{color: #333;
line-height: 40px;
padding:0px;
transition: all 0.3s ease 0s;}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_button_wrapper {margin-top: -53px;padding:0px;}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_button_wrapper .et_pb_button{
display: inline-block;
padding: 15px 25px;
border-radius: 25px;
font-size: 15px;
font-weight: 600;
color: #333;
overflow: hidden;
text-transform: uppercase;
border: 1px solid #ddd;
position: relative;
z-index: 1;
top:-50px;
transition: all 0.3s ease 0s;}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_button_wrapper .et_pb_button:before,
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_button_wrapper .et_pb_button:after{
content: "";
width: 55%;
height: 100%;
background: #fff;
position: absolute;
top: 0;
z-index: -1;
transition: all 0.35s ease 0s;
}
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_button_wrapper .et_pb_button:before{ left: -55%; }
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_button_wrapper .et_pb_button.back:before{ left: 0; }
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_button_wrapper .et_pb_button:after{ right: -55%; }
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_button_wrapper .et_pb_button.back:after{ right: 0; }
.et_pb_pricing_flip_1.back .et_pb_pricing_table_wrap .et_pb_pricing_table
{ background: #fff;border-color: var(--color-1); }
.et_pb_pricing_flip_1.back .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_heading{ background: #fff; }
.et_pb_pricing_flip_1.back .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_button_wrapper .et_pb_button{
color: #fff !important;
border-color: #fff;}
.et_pb_pricing_flip_1.back .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_button_wrapper .et_pb_button{ color: #5f5b5b !important; }
.et_pb_pricing_flip_1.back .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content{
background: var(--color-1);
color: #fff;
box-shadow: 2px 2px 4px 2px #ddd;}
.et_pb_pricing_flip_1.back .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content .et_pb_pricing li:before{color:#fff;}
.et_pb_pricing_flip_1.back .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content ul li{ color: #fff; }
.et_pb_pricing_flip_1.back .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content_top .et_pb_et_price .et_pb_dollar_sign,
.et_pb_pricing_flip_1.back .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content_top .et_pb_et_price .et_pb_sum,
.et_pb_pricing_flip_1.back .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_content_top .et_pb_et_price .et_pb_frequency{ color: #fff; }
.et_pb_pricing_flip_1.back .et_pb_pricing_table_wrap .et_pb_pricing_table
.et_pb_pricing_heading .et_pb_pricing_title{ color: var(--color-1);}
@media only screen and (max-width: 990px){
.et_pb_pricing_flip_1 .et_pb_pricing_table_wrap .et_pb_pricing_table
{ margin-bottom: 30px; }
}
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');
});
});