[{"data":1,"prerenderedAt":13},["ShallowReactive",2],{"$f267y75btjnstn":3},{"slug":4,"title":5,"description":6,"published":7,"updated":8,"thumb":9,"html":10,"tag":11,"legacy":12},"divi-pricing-table-with-toggle","How to display Divi pricing table with toggle on your website","This article uses a solution that can be achieved using any of the two plugins from Divi Extended. 1. Divi Plus 2. Divi Content TogglePricing tables...","2020-08-24","2021-09-15",null,"\u003Cp>\n\u003Cp>This article uses a solution that can be achieved using any of the two plugins from Divi Extended. 1. \u003Ca href=\"https:\u002F\u002Fwww.elegantthemes.com\u002Fmarketplace\u002Fdivi-plus\u002F\" target=\"_blank\" rel=\"noopener nofollow\">Divi Plus\u003C\u002Fa> 2. \u003Ca href=\"https:\u002F\u002Fwww.elegantthemes.com\u002Fmarketplace\u002Fdivi-content-toggle\u002F\" target=\"_blank\" rel=\"noopener nofollow\">Divi Content Toggle\u003C\u002Fa>\u003Cbr \u002F>Pricing tables complete a business website. It tells your site visitors how much you’re charging, why you’re charging, and what they would get. If you’re using Divi as your WordPress theme, then Divi pricing table toggle is enough to fulfill this purpose.\u003C\u002Fp>\u003C\u002Fp>\n\u003Cp>Yet, long pricing tables filled with extra information can overwhelm a user.\u003C\u002Fp>\n\u003Cp>Thus, in this article, we’re going to see how we can create Divi pricing table toggle. So, we can display useful information on our pricing table in a compact manner.\u003C\u002Fp>\n\u003Cp>That’s it; let’s start creating ourDivi pricing table with toggle.\u003C\u002Fp>\n\u003Ch2>\u003Cspan style=\"color: #333333; font-size: 26px;\">Step1: Create Divi pricing table layouts\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>The first thing you need to do is create some Divi pricing table layouts. Like one for monthly and another for yearly purpose, which you want to display on your website.\u003C\u002Fp>\n\u003Cp>\u003Cspan class=\"et_pb_image_wrap \">\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>For this, use the default Divi pricing table \u003Ca target=\"_blank\" rel=\"noopener nofollow\" href=\"https:\u002F\u002Fwww.elegantthemes.com\u002Fdocumentation\u002Fdivi\u002Fpricing-tables\u002F\">\u003Cem>\u003Cstrong>module\u003C\u002Fstrong>\u003C\u002Fem>\u003C\u002Fa>, and once you’re done creating your pricing tables, save them in your Divi library.\u003C\u002Fp>\n\u003Ch2>\u003Cspan style=\"color: #333333; font-size: 26px;\">Step 2: Download Divi Content Toggle module\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>To create pricing tables toggle, you have to download the Divi content toggle module.\u003C\u002Fp>\n\u003Cp>For that, you’ve to purchase the \u003Ca href=\"\u002Fdivi-plugins\u002Fdivi-plus\u002F\">\u003Cem>\u003Cstrong>Divi Plus\u003C\u002Fstrong>\u003C\u002Fem>\u003C\u002Fa> plugin. It provides the user with multiple modules to do complex Divi designing easy & without any coding. The Divi Content Toggle module is also part of this versatile plugin.\u003C\u002Fp>\n\u003Cp>\u003Cspan class=\"et_pb_image_wrap \">\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" width=\"1156\" height=\"280\" src=\"\u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FUpload-divi-plus-plugin.png\" alt=\"Upload divi plus plugin\" title=\"Upload divi plus plugin\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FUpload-divi-plus-plugin.png 1156w, \u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FUpload-divi-plus-plugin-980x237.png 980w, \u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FUpload-divi-plus-plugin-480x116.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1156px, 100vw\" class=\"wp-image-197045\" \u002F>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>Once purchased the plugin, download it and then upload it to your WordPress dashboard to install.\u003C\u002Fp>\n\u003Cp>\u003Cspan class=\"et_pb_image_wrap \">\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" width=\"1139\" height=\"85\" src=\"\u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FActivate-divi-plus-multipurpose-plugin.png\" alt=\"Activate divi plus multipurpose plugin\" title=\"Activate divi plus multipurpose plugin\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FActivate-divi-plus-multipurpose-plugin.png 1139w, \u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FActivate-divi-plus-multipurpose-plugin-980x73.png 980w, \u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FActivate-divi-plus-multipurpose-plugin-480x36.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1139px, 100vw\" class=\"wp-image-197048\" \u002F>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>After installing the plugin, make sure you activate it, and then in your WordPress sidebar, go to \u003Cstrong>Settings\u003C\u002Fstrong> \u003Cstrong>>>\u003C\u002Fstrong> \u003Cstrong>Divi Plus\u003C\u002Fstrong>. And make sure the content toggle module is enabled.\u003C\u002Fp>\n\u003Cp>\u003Cspan class=\"et_pb_image_wrap \">\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" width=\"1097\" height=\"426\" src=\"\u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FDivi-plus-panel.png\" alt=\"Divi plus panel\" title=\"Divi plus panel\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FDivi-plus-panel.png 1097w, \u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FDivi-plus-panel-980x381.png 980w, \u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FDivi-plus-panel-480x186.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1097px, 100vw\" class=\"wp-image-197053\" \u002F>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan style=\"color: #333333; font-size: 26px;\">Step 3: Create pricing tables with toggle\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>After activating the Divi content toggle module, it’s time to create toggle pricing table.\u003C\u002Fp>\n\u003Cp>To achieve this, create a new page or edit an existing one, where you want to display pricing tables with toggle.\u003C\u002Fp>\n\u003Cp>\u003Cspan class=\"et_pb_image_wrap \">\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" width=\"388\" height=\"305\" src=\"\u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FInsert-divi-plus-content-toggle-module.png\" alt=\"Insert divi plus content toggle module\" title=\"Insert divi plus content toggle module\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FInsert-divi-plus-content-toggle-module.png 388w, \u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FInsert-divi-plus-content-toggle-module-300x236.png 300w\" sizes=\"(max-width: 388px) 100vw, 388px\" class=\"wp-image-197055\" \u002F>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>Once the page builder gets loaded, insert the DP Content Module. And then, inside Content One and Content Two, select the pricing layouts that you saved earlier.\u003C\u002Fp>\n\u003Cp>\u003Cspan class=\"et_pb_image_wrap \">\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" width=\"392\" height=\"492\" src=\"\u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FDivi-plus-content-toggle-settings.png\" alt=\"Divi plus content toggle settings\" title=\"Divi plus content toggle settings\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FDivi-plus-content-toggle-settings.png 392w, \u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FDivi-plus-content-toggle-settings-239x300.png 239w\" sizes=\"(max-width: 392px) 100vw, 392px\" class=\"wp-image-197056\" \u002F>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan class=\"et_pb_image_wrap \">\u003Cimg loading=\"lazy\" decoding=\"async\" loading=\"lazy\" decoding=\"async\" width=\"392\" height=\"491\" src=\"\u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FDivi-plus-content-toggle-module-setting.png\" alt=\"Divi plus content toggle module setting\" title=\"Divi plus content toggle module setting\" srcset=\"\u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FDivi-plus-content-toggle-module-setting.png 392w, \u002Fwp-content\u002Fuploads\u002F2021\u002F07\u002FDivi-plus-content-toggle-module-setting-240x300.png 240w\" sizes=\"(max-width: 392px) 100vw, 392px\" class=\"wp-image-197058\" \u002F>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>That’s it; you’ve successfully added pricing tables with toggle. Below are some examples of Divi pricing tables with toggle created using the Divi Content Toggle module of the \u003Ca target=\"_blank\" rel=\"noopener nofollow\" href=\"https:\u002F\u002Fdiviextended.com\u002Fproduct\u002Fdivi-plus\u002F\">\u003Cem>\u003Cstrong>Divi Plus\u003C\u002Fstrong>\u003C\u002Fem>\u003C\u002Fa> plugin.\u003C\u002Fp>\n\u003Ch2>Divi pricing table examples with toggle\u003C\u002Fh2>\n\u003Cp style=\"text-align: center;\">\u003Ca href=\"http:\u002F\u002Fdemo.diviextended.com\u002Fdivi-content-toggle\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">\u003Cstrong>View Demo\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp style=\"text-align: center;\">\u003Cstrong>\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp style=\"text-align: center;\">\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdiviextended.com\u002Fproduct\u002Fdivi-content-toggle\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Buy Now\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fp>","Archive",true,1793901057269]