How to Install

Download and unzip file

Before installing the Divi Pricing Tables Row layouts on your website, you need download the pricing tables zip file from elegantthemes.com, and then extract it to the .json files on your desktop.

Import unzipped file to Divi Library

Go to the WordPress dashboard. On the WordPress sidebar, hover over “Divi” and click “Divi Library”. Then click “Import/Export”.

This will show the ‘Import/Export’ window, click the “Import” tab and then click “CHOOSE FILE” to choose the unzipped file: Pricing Table for Divi – Free Layout Pack 1-10.json, and finally click “Import Divi Builder Layouts”.

A. json file contains 10 pricing table rows. Please review the Demo Website to see the layout number of the pricing table row you want to use.

 

Add pricing table row on your site

You can create a new page or modify an existing page, and then click the blue plus button to add a new section or open an exsiting section.

Click the green plus button to add a new row. Then a pop-up window will show on the screen, containing two options. Select “Add From Library” to choose the imported row you want to use.

Insert Row window will show all the layouts that you have previously imported to your library. You can choose and click the row you want.

Please review the Demo Website to see the layout number of the pricing table s you want to use.

Click “Use This Row” to import and use this row on your site.

Ok! You can use it on your site!

How to edit content and styles

Enable Visual Builder

Click “Enable Visual Builder” to edit the content and styles of the section in visual view.

Module Settings

Hover over the module you want to edit, then you can see the module menu. Select “Module Settings” to edit the icon, text, pricing tables, blurb, and button module.

Edit Pricing Tables Module

There are two kinds of pricing table in layouts bundle:

  1. Text only: change the text content only.
  2. Divi default Pricing tables module: need to edit the module through “Module Settings”.

Firstly, click “Module Settings” to edit the pricing tables module.

Then, click “Settings” to edit pricing tables content and styles.

Select “Content” tab to edit the content of the price, frequency, and currency.

Select “Design” tab to edit the design style of the price, frequency, currency, spacing and border.

Edit Blurb Module

Firstly, click “Module Settings” to edit the blurb module.

Select “Content” tab to edit the content of the blurb’s text and icon.

Select “Design” tab to edit the design style of the blurb’s text, icon and spacing.

Edit Button Module

Firstly, click “Module Settings” to edit the button module.

Select “Content” tab to edit the content of the button’s text and link.

Select “Design” tab to edit the design style of the button’s text, border, background, box shadow and spacing.

Some buttons’ style is set to 100% width. If you want to change the width, you can go to Advanced tab >> Custom CSS >> Main Element >> Desktop to edit the CSS code of the button’s width.