Installing Divi Pricing Table Pack 1.1

Before installing this child theme

  • Check if you met all of the hosting requirements settings under Divi > Support Center

Importing the pricing table pack

Step 1: download 2 folders

  • Download the folder all-pricing-tables-1-1.zip.
  • Download the folder pricing-tables-supplementary-files-1-1.zip

all-pricing-tables-1-1: This folder contains one JSON file with all pricing tables

pricing-tables-supplementary-files-1-1: This folder contains all pricing tables separated (so you can just import one pricing table instead of all of them).

If you want to upload all headers at once then choose the all-pricing-table-1-1.json file (inside of your unpacked folder all-pricing-table-pack-1-1).

Note: It is possible that you can not upload all pricing tables at once due to the file size (depending on your upload file settings). In that case, just upload the pricing table from the pricing-table-supplementary-files-1-1 folder.

If you want to upload only one header then go to the folder pricing-tables-supplementary-files-1-1. Here you will find all the pricing tables.

Importing a pricing table into your page

Pricing tables V4, V7, and V19 need to be imported in a different way. Click here for those steps.

Enable the visual builder on the page you want to import a pricing table. Then click on the blue + to add a new section.

Switch to the Add From Library tab.

Choose the pricing table you want to use.

Importing pricing table V4, V7, or V19

Enable the visual builder on the page you want to import a pricing table. Then click on the purple + to add a new layout. Then switch to the Your Saved Layouts tab and choose your pricing table.

Make sure to uncheck the option Replace Existing Content otherwise it will overwrite the existing content on your page.

When you have imported the pricing table you have to place it in the right place (importing a layout will always place it at the bottom of the page). You have to use the wireframe view (left-bottom icon) or the navigation layer panel to see all 3 sections for these pricing tables.

You will not see the Year section on the front-end.

How to…

Change the content

Below is an example image for the pricing table V1 but the principle is the same for all pricing tables except pricing tables v4 and v7 (see change the content of pricing table v4 an v7).

One row is for the content of the month view and one is for the year view.

Note: the year view is only visible in the wireframe view (to access the wireframe view click on the wireframe button left-bottom or from the layer navigation).

This way you can change any element of the month or year view.

Change the content of pricing table v4 and v7

Image

Because pricing tables V4 and V7 are using left sidebar navigation I had to make a separate layout for tablet and mobile (1-column structure). And with a toggle option, these 2 pricing tables are very long as you can see in the image.

Remove the toggle

You can just remove the toggle and year row to disable the toggle function.

Colors

Change the toggle color

Switch to wireframe view (left-bottom icon).

Somewhere in the pricing table, you will find a CSS module.

Inside this module, you can change the toggle background and text color.

All other colors can be changed through the modules.

For the toggle, I use 2 button modules.

Need Help?

Email: info@markhendriksen.com

Free Layout Packs

Join my free membership and get access to 17 free Divi layout packs.

Join Free Membership