Divi Pricing Table Pack 1.1.zip
Download divi-pricing-tables-pack.zip file from your elegant theme’s account. After extracting divi-pricing-tables-pack.zip file you will have 2 folders and a license.txt file.
Name of these 2 folders are:
- All Pricing Tables: This folder contains 2 files named as all-simple-pricing-tables.json and all-pricing-tables-with-toggle-options.json.
- Pricing Tables Supplementary Files: This folder contains all pricing tables separated files, so you can import anyone you want to use on your website.
Importing The Pricing Table Pack
Depending on your need if you want to upload all pricing tables with toggle options you can open the folder All Pricing Tables and upload all-pricing-tables-with-toggle-options.json file to Divi Theme Library on your website.
If you want to upload all pricing tables without toggle options you can open the folder All Pricing Tables and upload all-simple-pricing-tables.json file to Divi Theme Library on your website.
Note: It is possible that your website may not allow you to upload all-pricing-tables-with-toggle-options.json or all-pricing-tables-with-toggle-options.json files due to the file size limit (depending on your upload file settings). In that case, just upload the pricing tables from the Pricing Tables Supplementary Files folder individually.
If you want to upload only one pricing table then go to the folder Pricing Tables Supplementary Files. Here you will find all the pricing tables.
Importing a pricing table into your web page
Pricing table No 10 needs to be imported in a different way. Click here for those steps.
Step 1: Enable the visual builder on your page where you want to import a pricing table. Then hover over section and click to Blue + Add New Section Button.
Step 2: On the Insert Section popup, switch to Add From Library tab.
Step 3: Choose the pricing table you want to use on your website.
That’s it. Selected pricing table will be on your web page.
Importing pricing table no 10 into your web page
Step 1: Enable the visual builder on your website page where you want to use pricing table no 10. Click on Purple + Insert Layout Button, then click on Saved Layout Option.
Step 2: Now choose pricing table 10 or pricing table 10 with toggle options from saved layouts.
Step 3: Make sure to uncheck Replace Existing Content check box. Otherwise it will replace all your existing content from your web page.
Note: When you import Pricing Table No 10 it will be placed at the end of your web page. You must switch to wireframe view and place Pricing Table No 10 in the right place. You will not see the Years section on the front-end.
How to change the content
If you are using simple pricing table without toggle options, then you can change content from front end.
But if you are using Pricing Table With Toggle Options then you must switch to wireframe view, because you might not see the Yearly section on the front-end.
Below is wireframe view of Pricing Table No 01 as an example but procedure of changing content is same for all pricing tables except Pricing Table No 10. See changing content of Pricing Table No 10.
Extend the Monthly Pricing Table Row or Yearly Pricing Table Row. Here you can change the content of any element.
How to change the content of pricing table no 10
In case of Pricing Table No 10, there are separate sections for Desktop and Mobile / Tablets.
To change content expand the sections Pricing Table 10 – Mobile / Tablet and Pricing Table 10 – Desktop, then expand the rows. Here you can change content of elements.
Changing the content of pricing table 10 with toggle options
To change content for Yearly / monthly Toggle options procedure is same as explained.
Expand the Monthly Pricing Table 10 – Desktop or Yearly Pricing Table 10 – Desktop, then expand rows. Here you can change the content of elements.
In case of mobile Expand Monthly / Yearly Pricing Table 10 – Mobile / Tablet section. There are 2 separate rows named as Monthly Pricing Table 10 – Mobile / Tablet and Yearly Pricing Table 10 – Mobile / Tablet. Expand these rows to change content of elements.
How to change colors of toggle buttons
Step 1: Switch to wireframe view and expand Pricing Table Toggle Section section. Then Expand Code row.
Step 2: Now Edit Css Style element. Here you can change colors of toggle buttons.
Thanks for reading! If you still have any questions or need further clarification, feel free to reach out.
