ProductX

  1. Home
  2. Docs
  3. ProductX
  4. Addons
  5. Divi Addon

Divi Addon

Let us show you step-by-step documentation on using product blocks in Divi with ProductX:

Step 1: Enable Divi Integration and Saved Template Addon

From the WordPress dashboard, go to the ProductX Addons page.

Enable Saved Template and Divi Addon for ProductX
Enable Saved Template and Divi Addon for ProductX

Use the toggle to enable the Saved template and Divi integration addon.

Step 2: Create a Saved Template with ProductX

First, go to the Saved Template section in ProductX. Click the “Add New Template” button to create a new template.

Creating New Saved Template with ProductX
Creating New Saved Template with ProductX

You can use the Gutenberg editor to create amazing templates. ProductX offers a variety of product blocks and a vast block library of premade templates and starter packs, which you can use to create amazing layouts for your store. Click the “Block Library” button at the top of the page.

Selecting ProductX Block Library
Selecting ProductX Block Library

You can choose a premade template here if you do not want to create it from scratch. Choose your desired one and click “Import.”

Importing Template from ProductX Block Library
Importing Template from ProductX Block Library

Name your template because this template will be used in Divi Builder.

Naming Saved Template for ProductX Integration
Naming Saved Template for ProductX Integration

Click “Publish” to save your template.

Publishing Saved Template
Publishing Saved Template

Step 3: Use Product Blocks in Divi Builder

Now you must create a page. Go to the WordPress dashboard and then pages. Click on “Add New Page” to create a new page.

Creating New Page
Creating New Page

In the page editor, you will see a pop-up from Divi asking you to “Use Divi Builder.” Click on it to launch the Divi Builder.

Use Divi Builder for ProductX
Use Divi Builder for ProductX

Then you will have multiple options to select in the Divi builder, but you must click “Start Building.”

Select Start Building in Divi for ProductX
Select Start Building in Divi for ProductX

Then you have to select a single row to use the template.

Selecting Single Row in Divi
Selecting Single Row in Divi

In the search bar, type “ProductX Template” and click on it. This will let you select the saved template.

Select ProductX Template in Divi
Select ProductX Template in Divi

Select the saved template you created with ProductX and click the “Save Changes” button.

Select Template Made with ProductX
Select Template Made with ProductX

Publish the page using the Gutenberg blocks in Divi.

Publish the Divi ProductX Page
Publish the Divi ProductX Page

Step 4: Customization (Optional)

If you need to customize the template, you can do that easily. Go to the ProductX Saved Templates and “Edit” the template you want to customize. Make the necessary changes to the template and click “Update.” The changes will be automatically synced with Divi if you have used the template inside Divi.

Editing ProductX Saved Template
Editing ProductX Saved Template

Following these steps, you can easily use productX blocks in Divi Builder with ProductX.

Was this article helpful to you? Yes No