The demo includes:
• Pre-designed account page layout
• Custom dashboard example
• Divi Library layouts
• Endpoint layout example
• Navigation styling example
Before You Start #
The demo content currently requires a manual import.
A one-click demo importer is planned for a future update.
Step 1: Download the Demo Files #
Download both demo JSON files:
Required Files
• My Account.json
• Divi Library Layouts.json
What These Files Do #
My Account.json
This file imports the main WooCommerce My Account page layout.
It includes:
• The My Account Classic module
• Account page styling
• Demo account page structure
Divi Library Layouts.json
This file imports the reusable Divi Library layouts used inside the account endpoints.
These layouts are used in:
• Before Content
• After Content
• Custom dashboard sections
Step 2: Import the Main Account Page Layout #
Import My Account.json
1. Open your WooCommerce My Account page
2. Click: Enable Visual Builder
3. Open the: Portability / Import & Export option inside the Divi Builder
4. Go to: Import
5. Upload: My Account.json
6. Save the page
Step 3: Import the Divi Library Layouts #
Now import the reusable Divi Library layouts.
1. Go to: WordPress Dashboard → Divi → Divi Library
2. Click: Import & Export
3. Open the: Import tab
4. Upload: Divi Library Layouts.json
After importing, the demo layouts will become available inside your Divi Library.
Step 4: Set Up the Demo Dashboards #
The demo includes three different dashboard examples.
These dashboards work by loading Divi Library layouts into the:
• Before Content
• After Content
areas of specific endpoints.
Dashboard 1 Setup #
Steps
1. Go to: WordPress Dashboard → Divi My Account Page
2. Open the: Dashboard endpoint settings
3. Under: Before Content click: Select and choose: Global Before Dashboard Layout
4. Under: After Content select: Global After Dashboard Layout
Dashboard 1 is now configured.
Dashboard 2 Setup #
Steps
1. Click: Add Endpoint
2. Name it: Dashboard 2
3. Under: Before Content select: Mixed Dash
This creates a second custom dashboard example.
Dashboard 3 Setup #
Steps
1. Click: Add Endpoint
2. Name it: Dashboard 3
3. Under: Before Content select: Dashboard 3
4. Click: Save Changes
Your third dashboard example is now ready.
Step 5: Set Up the Navigation Icons #
You can assign icons to each endpoint individually.
1. Open an endpoint settings panel
2. Click: Select Icon
3. Choose an icon from the icon library
4. Save Changes
Demo Icon Suggestions #
The demo uses:
• “Angle Right” for most endpoints
• “Sign Out” for the Logout endpoint
How to Customize the Demo Layouts #
All demo dashboard layouts are stored inside the Divi Library.
To edit them:
1. Go to: WordPress Dashboard → Divi → Divi Library
2. Open the layout you want to edit
3. Save your changes
Any changes made to these layouts automatically update everywhere they are used.
Important About Before & After Layouts #
The Before and After layouts cannot be edited directly from the WooCommerce My Account page.
Inside the Visual Builder, they appear only as placeholder areas.
This is intentional and helps improve builder performance.
The actual layouts display correctly on the front-end.
What to do if you cannot edit elements in your Divi Library #
If you experience issues such as:
• Missing modules inside layouts
• Empty global sections
• Unable to edit Divi Library items
• Unable to create new Divi Library items
try the following:
Refresh Permalinks
1. Go to: WordPress Dashboard → Settings → Permalinks
2. Click: Save Changes
without modifying anything.
This usually resolves the issue.