a

NEW & POPULAR DIVI CHILD THEMES

Molti

Multipurpose Business Child Theme for Divi.

Molti Ecommerce

Multipurpose Business/Ecommerce Child Theme for Divi.

Molti LMS

Multipurpose LMS/Business Child Theme for Divi & LearnDash.

Florence

A Delicate & Innocent Business Child Theme for Divi.

WANT MORE?

Join Our Membership

Get access to all our Divi Products by Joining Membership!

Membership Benefits

See the Benefits of Joining Membership before you Join!

Send us a Message

Need Help? Send us a Message and we'll be glad to help.

Visit Documentation

Instead of waiting for us, try to find your answer in our Documentation.

Our Blog

See the Latest News, Divi Tips & Tricks and a lot more.

Useful Tools

Some Useful Divi & Web Design Tools that we use and you'll love.

Customer Showcase

See cool websites made by our Customers using our Child Themes.

Affiliates

Earn Money while Promoting our Products today.

What's New?

See what we've been working on and what's new from us.

How to Create a Beautiful Comparison Pricing Table in Divi + Free Layout

Samar Jamil

Hey Everyone, what’s going on?

I’m back with another great tutorial for you, this time I’ve prepared a very great-looking Comparison Pricing Table using Divi and Sticky Menu pluginand the results are very creative Looking and will really take your Pricing page to the next level.

Sneak Peak

Here’s a quick look at what we’re about to create today, you can see it’s just mind-blowing. It has sticky Pricing information and a Read More Functionality that really makes it a modern and clean-looking Pricing Table for doing a comparison between them.
And because of Responsive Issues, it’s only built for Desktop

And Now let’s see how to achieve this same thing on your Divi website. First download the layout by clicking the Download link above. After Downloading you’ll need to extract the .Zip file in your PC after extracting you’ll get a .JSON file all you’ve to do is just Drag that .JSON file drop it to Divi Builder. Now you’ll see a Popup in the Divi Builder. You may click on the Portability Icon as well to Import this Layout. After that, you can click on the “Replace Existing Content” checkbox (If you don’t have any other content on the page), and lastly, click on Import Button.

Now you’ll see that you’ve got the Pricing Table on your page but there will be one thing missing which is Sticky Pricing Information. OK, now we need to set up the Sticky Info as well. For this, I’ve used the Sticky Menu plugin as mentioned before. So you’ll need to install this plugin on your site.

After Activating this plugin you’ll need to open up the Settings page of the Sticky Menu plugin and set up classes for the sticky element. You can put .sticky in the “Sticky Element” field and also add a value of 980 in the “Do not stick element when the screen is smaller than” field for not making your element sticky after this Screen size. And Lastly, you can click on Save Changes.

Now go to Advanced Settings and add the Z-Index value of something higher maybe 999 and add .stop in the Push-up element Field so your element will be pushed up when there’s another element after the sticky element has .stop class. And then click on the Save Changes button.

Ok That’s it the Layout already includes those classes added to it’s the place to make Pricing Info Sticky and push it up. You can always open up the FAQ/Troubleshooting tab to learn more about the working of this plugin.

All done, now you’ll have a great-looking Pricing Comparison Page with sticky Pricing Info and Read More functionality, which really makes it a good-looking Pricing table for your Pricing page. Please note again that it’s only made for desktops, it will not work perfectly on Tablet and Mobile because of Responsive Issues.

I hope you found it helpful and useful for your upcoming Project. Let me know what you think about this beautiful Pricing Table in the Comments Section below.

Share The Love ❤️

Written by: Samar Jamil

I Love to make beautiful and creative Divi Child Themes, Layouts and Module Designs for everyone to help them create beautiful websites with ease using Divi. I also Enjoy making helpful Divi Tutorials, Freebies, and More!

NEW & POPULAR DIVI CHILD THEMES

Molti

Molti Ecommerce

Molti LMS

Florence

WANT MORE?

MEMBERSHIP

Join Membership

Membership Benefits

CONTACT US

Send us a Message

Visit Documentation

RESOURCES

Theme Customization

Customer Showcase

What's New?

Our Blog

Useful Tools

Affiliates