ProductX

  1. Home
  2. Docs
  3. ProductX
  4. Addons
  5. Beaver Builder Addon

Beaver Builder Addon

Let us look at the step-by-step documentation of using product block in Beaver Builder with ProductX:

Step 1: Enable Beaver Builder and Saved Template Addon

First, you need to enable the Saved Template addon to create saved templates, and the Beaver Builder addon to use that template in Beaver.

  • Locate the Beaver Builder and Saved Templates addons on the page. To enable both addons, use the toggle bar. You can now proceed to the next step, creating a saved template with ProductX.
Enable Beaver Builder Addon for ProductX
Enable Beaver Builder Addon for ProductX

Step 2: Create a Saved Template with ProductX

In the ProductX plugin, go to the Saved Templates section. You can create new saved templates or edit existing ones here.

  • Select the “Add New Template” option. It will also take you to the Gutenberg editor. You can build your template with product blocks or ProductX premade templates/starter packs.
Creating New Saved Template with ProductX
Creating New Saved Template with ProductX
  • If you do not want to start from scratch, click the “Block Library” button at the top of the page and select a premade template/starter pack.
Selecting ProductX Block Library
Selecting ProductX Block Library
  • A substantial library of premade designs can be found in starter packs/premade patterns. Choose the one you want and then click “Import.”
Importing Template from ProductX Block Library
Importing Template from ProductX Block Library
  • Give your template a name to be found in the “ProductX Template” module of the Beaver 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 ProductX Template in Beaver Builder

  • Navigate to Pages in the WordPress Dashboard. Click the “Add New Page” button to add a new page.
Creating New Page
Creating New Page
  • In the page editor, you will see a Beaver pop-up asking you to “Launch Beaver Builder.” Click it to start the Beaver Builder.
Launch Beaver Builder for ProductX
Launch Beaver Builder for ProductX
  • You will find “ProductX Template” in the Basic section, or you can type “ProductX Template” into the search bar and then drag and drop the module into the editor.
Drag ProductX Template in Beaver Builder
Drag ProductX Template in Beaver Builder
  • Select the template you want to use in Beaver and click the “Save Changes” button.
Select Saved Template in Beaver
Select Saved Template in Beaver
  • Publish the page in Beaver Builder.
Publish ProductX Template in Beaver
Publish ProductX Template in Beaver

Step 4: Customization (Optional)

ProductX allows you to customize the Product blocks used in Beaver Builder.

  • Navigate to the ProductX Saved Templates section and click “Edit” on the template you want to modify. Change the template as needed and then click “Update.”
Editing ProductX Saved Template
Editing ProductX Saved Template

The changes will be automatically synced if you use the ProductX Saved template within Beaver Builder.

Was this article helpful to you? Yes No