How to set up demo content

A one-click demo import option is in the process of making. Until then, for everybody who wants to install the demo content, please follow the steps below.

Step 1: Download the JSON files #

Please download the two JSON files – My account.json and Divi Library Layouts.json

Download My account.json from here

Download Divi Library Layouts.json from here

Step 2: Import the JSON files #

Please import the two JSON files on your site.
Navigate to your WooCommerce My Account page and click on “Enable Visual Builder”. Then from the builder settings click on the Import/Export layout option, click on Import and upload the My account.json file there. Then save the changes.

Navigate to your your website admin / Divi / Divi Library and click on the Import & Export option at the top. Then choose Import and upload the Divi Library Layouts.json there.

Step 3: Set Up the Dashboards #

There are 3 Dashboard options in the demo. To set them up navigate to website admin / Divi Account .

1. To set up Dashboard 1 click on “Dashboard” tab to open the endpoint settings. Then on the Before Content option click on “Select” to choose a section to import. Then from the pop-up that appears with available Divi Library elements choose the one that is called “Global before dashboard”. After that on the After Content option follow the same steps – click “Select” and choose the “Global after dashboard” layout from the Divi Library available elements.

2. To set up Dashboard 2 first you need to create an additional endpoint. Click on the “Add Endpoint” button at the top right of the screen. Then give the endpoint a name (ex. Dashboard 2) and on the Before Content option click on “Select” to choose a section to import. Then from the pop-up that appears with available Divi Library elements choose the one that is called “Mixed Dash”.

3. To set up Dashboard 3 you need to create another additional endpoint. Click on the “Add Endpoint” button at the top right of the screen. Then give the endpoint a name (ex. Dashboard 3) and on the Before Content option click on “Select” to choose a section to import. Then from the pop-up that appears with available Divi Library elements choose the one that is called “Dashboard 3”.

IMPORTANT: Then Save the changes from the button at the top left on the screen.

Step 4: Set Up the Icons #

To set up the icons click on each individual endpoint and select what icon you want to display on it. On the demo the icons that are used are: “Angle Right” for the most endpoints and “Sign Out” for the Logout endpoint. When you are ready setting up the icons don’t forget to hit the Save Changes button.

How to customize the demo content #

If you want to customize the Demo Content Before and After sections you can do it from the Divi Library. Navigate to admin / Divi / Divi Library and click on the desired piece of content that you want to edit. Then save the changes and they will automatically be applied to wherever this Divi Library element is located on the My Account Page.

Please note that you cannot edit the Before and After elements from the account page itself. Those elements are displayed as blocks only when the Divi Visual Builder is enabled. But please don’t worry about this – they look perfectly fine when the Divi Builder is not enabled.

What to do if you cannot edit elements in your Divi Library #

If it’s impossible to edit the layouts on the Divi Library. Or if you can see there’s a ‘section’ and a ‘row’ but there’s no module for the global sections in your library. Or if creating divi library items on your site is not possible, please try the following solution:

Please go to Settings > Permalinks and re-save the settings there.
This should resolve the issue.