Demo

Hello Divi lovers. Today I am back to you guys with another useful tutorial. Recently I got a chance to work with a client from Israel and he wanted me to design a hosting company website. I used Divi for the site and I wanted to add some pricing tables which can change based on the operating system. There was no in-built option for that so I decided to do some custom coding here. There were some plugins but I always prefer to not to use lot of plugins on a website as it will badly effect the performance (personal experience 🙂 ).

Let me tell you how I did that.

First step.

Add a new Section. This is where we are going to have our buttons and the custom Code Module. We are not using Button Module here. Instead add a Text Module and paste the below HTML code. Next add the Code Module which we are going to use later.

Step Two

Lets create our pricing tables.

Add a new Section with a two Rows. One column. Here we need to add our pricing tables and headings. I am using the top Row to put my Windows pricing tables and the bottom row to Linux pricing tables. Style the Pricing Tables the way you want.  Then add ID‘s to each Row. I added ‘windows-table‘ to the top Row and IDlinux-table‘ to the bottom Row. Finally add display:none to the Main Element section in Custom CSS setting on the Row which you want to hide when page loads.

Finally add the below code to the Code Module we added previously. As you already know you can past these codes in Theme Options section.

That’s it basically. Go ahead and add your creativity. I have added some entering animations to the Rows. It’s looking really good. Check the demo. Please comment here if you need any help.

Demo