Some people are reluctant to display the prices of their services on their Website. But as much as it may scare some visiteurs, it also shows confidence and expertise. Transparency in your pricing allows you to attract the right customers with a budget you can work with. In today's tutorial, we'll show you how to create a stunning price calculation design that you can use for your next Divi project. You can also download the JSON file for free!
Let's go.
Preview
Before we dive into the tutorial, let's take a quick look at how we look at different screen sizes.
Let's start recreating!
Add Section 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 lower separator to the next section.
- Style of separation: Search in the list
- Flip Divider: Vertical
Spacing
Also add some padding down.
- Bottom Padding: 130px
Add a new line
Column structure
Continue adding a new row using the following column structure:
Add text module # 1 to the column
Add H2 content
Add the first text module to your column and insert H2 content of your choice.
H2 text settings
Switch to the Design tab and change the H2 text settings accordingly:
- Heading 2 Font: Montserrat
- Title 2 Font: Semi Bold
- Title 2 Text alignment: center
- Title 2 Text color: # 0f1c4d
- Title 2 Text Size: 57 pixels (desktop), 35 pixels (tablet), 30 pixels (phone)
- Title 2 Letter spacing: -2px
Add text module # 2 to the 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:
- Font text: Montserrat
- Alignment of the text: 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.
- Line color: #ffffff
sizing
Also change the divider width.
- Width: 12%
Add Section 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 up and down.
- Top padding: 70px
- Bottom Padding: 130px
Add row 1
Column structure
Continue adding a new line to the section using the following column structure:
sizing
Without adding any mods yet, open row settings and change the width to smaller screen sizes.
- Width: 80% (desktop), 90% (tablet and phone)
Spacing
Add a bit of custom down filling next.
- Upholstery at the bottom: 70px (desktop), 20px (tablet), 0px (phone)
Border
Also add a bottom border to the line.
- Width of the bottom border: 1px
- Bottom border color: #ffffff
Show
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.
display: flex;
Add the Blurb module to the 1 column
Select the icon
It's time to start adding modules! Add a Blurb module to the 1 column 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 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 identifier
Also insert a CSS identifier.
- CSS identifier: 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 settings
Switch to the Design tab and change the H3 text settings accordingly:
- Heading 3 Font: Montserrat
- Title 3 Fonts: Semi Bold
- Title 3 Text color: # f8c5ac
- Title 3 Text Size: 40 pixels (desktop), 25 pixels (tablet), 18 pixels (phone)
- Title 3 letters spacing: -1px
- Title 3 Line Height: 1.1em
Add text module # 2 to column 2
Add content
Add another text module to the 2 column with the content of your choice.
Text settings
Go to the Design tab and change the text settings.
- Font text: Montserrat
- Font weight of the text: Ultra light
- Text color: #f8c5ac
- Text size: 23px (desktop), 18px (tablet), 14px (phone)
- Letter spacing: -1px
- Height of the line of text: 1.1em
Add a text module to the 3 column
Add a price to the content
Let's go 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:
- Font text: Montserrat
- Font weight of the text: Heavy
- Alignment of the text: center
- Text color: #ffffff
- Text size: 40px (desktop), 25px (tablet), 18px (phone)
Identifier and CSS class
Switch to the advanced tab and add a CSS ID and CSS class.
- CSS identifier: price-1
- CSS class: price-hide-first
Duplicate the line as many times as needed
Once you have completed the line and all the modules it contains, you can duplicate it as many times as you want.
Modify 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
- ...
Change the price of the duplicate text module and CSS ids
Do the same for the price text module in the third column of each row.
- 1 price: 1 price
- 2 price: 2 price
- 3 price: 3 price
- ...
Add a new line
Column structure
Add another line to your section using the following column structure:
sizing
Without adding any mods yet, open row settings and change the width to smaller screen sizes.
- Width: 80% (desktop), 90% (tablet and phone)
Show
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.
display: flex;
Add a code module to the 1 column
Insert CSS code
Continue by adding a code module to the first column of the line and inserting the following lines of CSS code:
.price-hide-first {
display: none;
}
.price-item-active .et-pb-icon {
color: black !important;
}
Add a text module to the 2 column
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:
- Font text: Montserrat
- Font weight of the text: Ultra light
- Text color: # f8c5ac
- Text size: 23px (desktop), 18px (tablet), 14px (phone)
- Letter spacing: -1px
- Height of the line of text: 1.1em
Add an empty text module to the 3 column
Leave the content empty
Let's go to the last column. Add a text module and make sure the content area remains empty.
Text settings
Go to the Design tab and change the text settings as follows:
- Font text: Montserrat
- Font weight of the text: Heavy
- Alignment of the text: center
- Text color: #ffffff
- Text size: 40px (desktop), 25px (tablet), 18px (phone)
CSS identifier
Complete the module parameters by adding a CSS identifier.
- CSS identifier: total-price-cal
Add JQuery theme options to Divi
Go to integration tab
Now that the design is done, it's time to get it working with some JQuery code. If you want to add the price calculations to one page, you can place the code in a code module. However, if you are using it on multiple pages, go to the option Divi Theme and select the Integration tab.
Add JQuery code to Head Tags
Insert the following lines of the JQuery code between script tags and you're done:
jQuery (function ($) {$ ('[id * = "price-item-click"]'). click (function () {var selector = $ (this) .attr ('id'). replace ('- item-click ',' '); var $ price = $ (' # '+ selector); var sum = 0; $ price.toggle (); $ price.toggleClass (' price-active '); $ (this) .toggleClass ('price-item-active'); $ ('. price-active'). each (function () {sum + = parseFloat ($ (this) .text (). replace (/ D / g, ' '));}); if (sum> 0) {$ ("# total-price-cal"). show (); $ ("# total-price-cal"). text ("$" + sum + "k");} else {$ ("# total-price-cal"). hide ();}});});
Preview
Now that all the steps have been taken, let's take a final look at what happened with different screen sizes.
Latest Thoughts
In this article, we showed you how to create an exceptional price calculation template with Divi. It's a great way to show your visiteurs at what price your services start and to attract the right audience. You can use this approach for any price calculation you create for your next Divi project! If you have any questions or suggestions, be sure to leave a comment in the comment section below.
