Hello Divi lovers, today I am going to tell how to add a 5 column pricing tables in Divi. First of all lets have a look at the demo. See the below pricing table and its working nice on all devices. Only few lines of codes to achieve this. 🙂
Lets start by adding the tables. Here you need a Section and a one column Row. Then add a single table in the Pricing Table Module. Keep in mind that. We are not adding all table in a one module.
Style the table the way you want. In my version I have added a white border around it to make it looks separated. Now go to the Row setting > Advanced. We have to put some CSS here. Not to the Main Element. Put the below code in Column Main Element.
Next go to the Pricing Tables Setting > Advanced. We need to have a class for the table module. I have given it five-col-table as the class name
Also add the below CSS code to the same module. Pricing Tables Settings > Advanced > Custom CSS > Main Element
This value is depend on the column count you want. (100/5 = 20 )
Almost ready. Go ahead and duplicated the Pricing Tables Module until you have your five tables. Then you can make changes to each one as you wish. I have make the middle one featured in my version.
Its Working but have some minor issues in mobile. You can check your version on all devices and write media queries for each. Below you can find the Divi mobile breakpoints which we have to target.
In my version I am making some changes at the below breakpoints.
You can paste the code in Divi theme Options > Custom CSS section. Thats is the trick. All must work fine at this point. If anything goes wrong, do not hesitate to comment here. I am ready to help you 🙂