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.