Calculation table Divi with jQuery: Some people are reluctant to post the prices for their services on their websites. But as much as it might frighten some visitors, it also shows confidence and expertise. Transparency in your pricing allows you to attract the right customers with a budget you can work on. In today’s tutorial, we’re going to show you how to create a stunning price calculation table divi with jQuery that you can use for your next Divi project.
Calculation table Divi with jQuery: Add section n ° 1
Background color
Start by adding a new section to the page you are working on. Open section settings and change the background color.
- Background Color: # f8c5ac
Lower divider
Add a bottom divider to the next section.
- Separation Style: Search List
- Flip Divider: Vertical
Spacing
Also, add some padding at the bottom.
- Bottom Padding: 130px
Add a new row
Column structure
Continue by adding a new row using the column structure:
Add text module # 1 to column
Add H2 content
Add the first text module to your column and insert some H2 content of your choice.
H2 text parameters
Switch to the Design tab and change the H2 text settings accordingly:
- Section 2 Police: Montserrat
- Title 2 Font: Semi Bold
- Heading 2 Text alignment: center
- Heading 2 Text color: # 0f1c4d
- Title 2 Text size: 57 pixels (desktop), 35 pixels (tablet), 30 pixels (phone)
- Heading 2 Letter spacing: -2px
Add text module # 2 to column
Add content
Add another text module just below the previous one and insert the content of your choice.
Text settings
Switch to the Design tab and change the text settings accordingly:
- Text font: Montserrat
- Text alignment: center
- Text color: # 0f1c4d
- Text size: 22px (desktop), 18px (tablet), 16px (phone)
Add a division module to the column
Visibility
The next and last module needed in this column is a division module. Make sure the “Show Separator” option is enabled.
- Show divider: Yes
Line
Go to the Design tab and change the line color to white.
- Stroke Color: #ffffff
Sizing
Also, change the width of the divider.
- Width: 12%
Add section n ° 2
Background color
Let’s move on to the drawing! Add a new section and change the background color.
- Background Color: # 0f1c4d
Spacing
Then add some custom padding at the top and bottom.
- Top padding: 70px
- Bottom Padding: 130px
Add row 1
Column structure
Continue by adding a new row to the section using the column structure:
Sizing
Without adding any mods yet, open the row settings and change the width to smaller screen sizes.
- Width: 80% (desktop), 90% (tablet and phone)
Spacing
Add some filler at the following custom bottom.
- Bottom padding: 70px (desktop), 20px (tablet), 0px (phone)
Frontier
Also add a bottom border to the line.
- Bottom border width: 1px
- Bottom border color: #ffffff
Display
Finally, to make sure all the columns are displayed next to each other, we’ll add a line of CSS code to the main element of the row.
Add the Blurb module to column 1
Select the icon
It’s time to start adding modules! Add a Blurb module to column 1 and select the icon of your choice.
Default icon settings
Switch to the Design tab and change the icon settings accordingly:
- Icon Color: # f7f7f7
- Circle icon: yes
- Circle icon: # f8c5ac
- Positioning of icons: Top
- Use Icon Font Size: Yes
- Icon Font Size: 96px (Desktop), 20px (Tablet & Phone)
Hover over icon settings
Change the color of the hover icon.
- Icon Color: # 000000
CSS ID
Also, insert a CSS identifier.
- CSS ID: price-item-click-1
Add text module # 1 to column 2
Add H3 content
On the second column! Add the first text module and insert H3 content.
H3 text parameters
Switch to the Design tab and change the H3 text settings accordingly:
- Section 3 Police: Montserrat
- Title 3 Fonts: Semi Bold
- Heading 3 Text color: # f8c5ac
- Title 3 Text size: 40 pixels (desktop), 25 pixels (tablet), 18 pixels (phone)
- Title Letter spacing 3: -1px
- Title 3 Line height: 1.1em
Add text module # 2 to column 2
Add content Add another text module to column 2 with the content of your choice.
Text settings
Go to the Design tab and change the text settings.
- Text font: Montserrat
- Text Font Weight: Ultra Light
- Text Color: # f8c5ac
- Text size: 23px (desktop), 18px (tablet), 14px (phone)
- Letter spacing: -1px
- Text Line Height: 1.1em
Add text module to column 3
Add price to content
Let’s move on to the third column! Add a text module and place the price in the content area.
Text settings
Switch to the Design tab and change the text settings accordingly:
- Text font: Montserrat
- Text Font Weight: Heavy
- Text alignment: center
- Text color: #ffffff
- Text size: 40px (desktop), 25px (tablet), 18px (Phone)
CSS identifier and class
Switch to the advanced tab and add a CSS ID and CSS class.
- CSS ID: price-1
- CSS class: price-hide-first
Duplicate the line as many times as necessary
Once you have completed the row and all the modules in it, you can duplicate it as many times as you want.
Edit duplicate Blurb module CSS IDs
Change the CSS ID of each new Blurb module accordingly:
- Blurb 1 module: price-item-click-1
- Blurb Module 2: price-item-click-2
- Blurb Module 3: price-item-click-3
- …
Modify duplicate text module price and CSS ids
Do the same for the price text module in the third column of each row.
- Price 1: price-1
- Price 2: price-2
- Price 3: price-3
- …
Add a new row
Column structure
Add another row to your section using the column structure:
Sizing
Without adding any mods yet, open the row settings and change the width to smaller screen sizes.
- Width: 80% (desktop), 90% (tablet and phone)
Display
To make sure all the columns appear side by side on smaller screen sizes, we’ll also add a single line of CSS code to the main row element.
Add a code module to column 1
Insert CSS code
Continue by adding a code module to the first column of the row and inserting the lines of CSS code:
Add text module to column 2
Add content
Go to the second column and add a new text module with the content of your choice.
Text settings
Change the text settings accordingly:
- Text font: Montserrat
- Text Font Weight: Ultra Light
- Text Color: # f8c5ac
- Text size: 23px (desktop), 18px (tablet), 14px (phone)
- Letter spacing: -1px
- Text Line Height: 1.1em
Add empty text module to column 3
Leave content empty
Let’s move on to the last column. Add a text module and make sure the content area is left blank.
Text settings
Go to the Design tab and change the text settings as follows:
- Text font: Montserrat
- Text Font Weight: Heavy
- Text alignment: center
- Text color: #ffffff
- Text size: 40px (desktop), 25px (tablet), 18px (phone)
CSS ID
Complete the module parameters by adding a CSS identifier.
- CSS ID: total-price-cal
Read more: Structuring your page with full-width toggle modules on Divi
Add JQuery theme options to Divi
Go to the integration tab
Now that the design is done, it’s time to make it work with JQuery code. If you want to add the price calculations on a single page, you can place the code in a code module. However, if you use it on several pages, go to the Divi Theme option and select the Integration tab.
Add JQuery Code to Head Tags
Insert the following lines of JQuery code between the script tags and you are done:
Calculation table Divi with jQuery Final thoughts
In this article, we have shown you how to create an exceptional price calculation model with Divi. It’s a great way to show your visitors how much your services are starting up for and attract the right audience. You can use this approach for any price calculation you create for your next Divi project!
For website maintenance service contact us.