{"id":26572,"date":"2022-05-10T07:46:13","date_gmt":"2022-05-10T05:46:13","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=26572"},"modified":"2023-01-07T05:13:04","modified_gmt":"2023-01-07T04:13:04","slug":"free-divi-pricing-table-pack","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/free-divi-pricing-table-pack\/","title":{"rendered":"Free Divi Pricing Table Pack"},"content":{"rendered":"\n

Pricing tables are a nice way to show your pricing for your services or products. I have created a free pricing table pack for Divi for you to download. With this pack you will have access to 3 pricing tables, one of them also has a toggle. This will let your visitor switch between pricing options.<\/p>\n\n\n\n

You can find the live demo of the Divi pricing tables here:<\/p>\n\n\n\n

\n
See Demo<\/a><\/div>\n<\/div>\n\n\n\n

How to install the Divi pricing table pack?<\/h2>\n\n\n\n

Step 1<\/h3>\n\n\n\n

Signup below and follow the confirmation steps. After the confirmation, you can download the free pricing table layout pack right here. <\/p>\n\n\n\n

[convertkit form=3257313]<\/p>\n\n\n\n

Step 2<\/h3>\n\n\n\n

Unpack the download folder Divi pricing tables.zip. Inside you will find the file Divi Pricing Tables.json.<\/p>\n\n\n\n

Now go to your WordPress dashboard and navigate to Divi > Divi Library. Click on the Import & Export button (left-top). And start uploading the file Divi Pricing Tables.json<\/p>\n\n\n\n

Step 3<\/h3>\n\n\n\n

Open a page where you want to import one of the pricing tables. Enable the visual builder.<\/p>\n\n\n\n

  1. Click on the blue + icon to add a new section<\/li>
  2. Then click on the Add From Library Tab<\/li><\/ol>\n\n\n\n
    \"Add<\/figure><\/div>\n\n\n\n

    Now you can choose the pricing table version you want to import.<\/p>\n\n\n\n

    \"Choose<\/figure><\/div>\n\n\n\n

    How to change the color and content of the pricing table toggle?<\/h2>\n\n\n\n

    When you switch the toggle from monthly to yearly the price will change. To edit these prices switch to wireframe view.<\/p>\n\n\n\n

    \"Change<\/figure><\/div>\n\n\n\n

    Open the modules with monthly and yearly prices and change the contents.<\/p>\n\n\n\n

    To change the color of the toggle open the code module.<\/p>\n\n\n\n

    \"Divi<\/figure><\/div>\n\n\n\n

    At the top you will see the following CSS code:<\/p>\n\n\n\n

    \/* ###### PRICING TABLE - ACTIVE BG & TEXT COLOR ###### *\/\nbody #page-container .et_pb_section .active-price-toggle.et_pb_button {\n\tbackground-color: #ff2a66 !important;\n\tcolor: #fff !important;\n}<\/code><\/pre>\n\n\n\n
    Here you can change the toggle background and text color codes.<\/p>\n\n\n\n
    If you have any questions or need additional help then let me know in the comment section below.<\/p>\n\n\n\n
    You might also like\u2026<\/h3>\n\n\n\n