The way you design your product page has an immediate impact on the behavior of your visitors. A well-crafted and personalized product page design can make it easier for visitors to decide if they want to purchase your product. If you are looking for a way to make your product page more engaging, you will probably like this tutorial. 

We'll show you how to include a dynamic product benefit grid in your design using Divi and the Advanced Custom Fields plugin. We'll start by creating a group of fields for benefits. We will then fill out the custom fields on our product page and include the dynamic content in our product page template. 

Possible Outcome

Before we dive into the tutorial, let's take a quick look at the result on different screen sizes.

Possible result divi

1. Install the ACF Plugin And Product Benefit Field Group plugin

Install the Advanced Custom Fields plugin

To display the various product benefits in the backend of our products, we will be using the free Advanced Custom Fields plugin. Access your WordPress backend> Plugins> Add new> Find ACF plugin> Install> Activate .

Install adavanced custom field plugin

Go to custom fields and add a new group of fields

Once you have installed and activated the ACF plugin, you will be able to access your custom fields and add a new group of fields.

Create acf fields

Field group settings

Give your new group of fields a title and allow it to appear only on product pages.

  • "Message type" equals "Product"
Add rules

Add a first field

Continue by adding a new field for the title of your first product benefit.

  • Field Label: Title of Benefit 1
  • Field type: text
Add ac field
Divi field customization

Repeat the step for the remaining fields

Do the same for the other benefits of the product and their descriptions. All these fields require the "Text" field type assigned to them.

  • Title of the service 1
  • Description of benefits 1
  • Title of the service 2
  • Description of benefits 2
  • Title of the service 3
  • Description of benefits 3
  • Title of the service 4
  • Description of benefits 4
Configure acf fields

2. Add benefits to products

Open or add a new product

Once your field group and fields are created, you can add the product benefits to your products on an individual level. Open a product of your choice or create a new one.

Divi product creation

Complete the Product Benefits fields

And fulfill the benefits of the product.

Fill in the divi advantages fields

3. Create a product page template in Divi Theme Builder

Go to Divi Theme Builder and add a new template

It's time to start with Divi! To create a new template, go to the Divi Theme Builder and click on "Add a new template".

Divi theme builder

Use a template on all products

We use this template on all products, but feel free to select products with a specific category or label instead.

Add all woocommerce products

Enter the model body template editor

Then enter the body of the model by clicking on "Add a custom body" and selecting "Create a custom body".

Building divi body

Edit section # 1

Background color

Once inside the template editor, you'll notice a section. Open that section and change the background color to black.

  • Background Color: # 000000
Divi section background configuration

Spacing

Move on to the section's design tab and add some custom top and bottom padding.

  • Top Padding: 10px
  • Bottom Padding: 10px
Divi section spacing configuration

Add a new line

Column structure

Let's continue by adding a new line to the section which has the following structure:

Line module layout configuration

Spacing

Without adding any mods, let's open the row settings and do some spacing adjustments.

  • Use Personalized Gutter: Yes
  • Gutter width: 1
  • Width: 90%
  • Maximum width: 100%
Line module spacing settings

Spacing

Remove all top and bottom internal spacing.

  • High Internal Margin: 0px
  • Low Internal Margin: 0px
Divi line module spacing settings

Add the Woo Cart Notice module to the column

Dynamic Content

The only module we need on this line and section is the Woo Cart Notice module. Make sure “This Product” is selected in the dynamic section.

  • Product: This Product
Settings woo cart notice module divi

Color Background

Then open the module settings and use a transparent background.

  • Background Color: rgba (0,0,0,0)
Woo cart module divi settings

Text settings

Switch to the "Design" tab and change the text font.

  • Text Font: Karla
Divi module font settings

Button setting

Finish the plugin settings by defining the style settings:

  • Use Custom Styles For Button: Yes
  • Button Text Size: 20px
  • Button Text Color: # 000000
  • Button Background: # ffd623
  • Button border width: 0px
  • Rounded border Button: 0px
Woo cart notice module color settings
  • Button font: Oswald
  • Button Font Style: Shift
Woo cart notice module color design adjustment
  • High Internal Margin: 20px
  • Low Internal Margin: 20px
  • Left Internal Margin: 50px
  • Internal Right Margin: 50px
Configuration design module woo cart notice

Add section # 2

Gradient background

Add another regular section below the previous one. Then open the settings and use a gradient background as follows:

  • Color 1: # 000000
  • Color 2: #ffffff
  • Start Position:
    • Desktop: 30%
    • Tablets: 57%
    • Telephone: 54%
  • End Position:
    • Desktop: 30%
    • Tablets: 57%
    • Telephone: 54%
Divi line module rear adjustment

Spacing

Let's go to the Design tab and add a high internal margin.

  • Top Padding: 150px
Divi line module spacing configuration

Add a new line

Column structure

Continue by adding a new line with the same structure as shown below:

Divi line style configuration

sizing

Without adding any mods yet, we'll open up the settings and change the spacing as follows:

  • Use custom gutters: Yes
  • Gutter space: 1
  • Width: 95%
  • Maximum width: 2560px
  • Line Alignment: Center
Gutter configuration divi module

Spacing

We will be removing the top internal margin as well.

  • Top Padding: 0px
Divi module spacing configuration

Main Element

And to center the content of the column on Desktop, we are going to use two lines of CSS code in the main element of the row module.

desktop:

display: flex; align-items: center;

Tablet & Phone:

display: block;
Divi line module style settings

Add the Woo Image module to column 1

Dynamic Content

It's time to add modules, we will start with the Woo Images module in column 1. Make sure “This product” is selected.

  • Product: This Product
Woocommerce product image module settings

Vertical scrolling animation effect

We add subtle movement to the image using the horizontal motion scrolling effect in the advanced tab.

  • Activate vertical movement: Yes
  • Start offset:
    • Office: -4
    • Tablet and phone: 0
  • Average offset: 0
  • End offset: 0
  • Trigger motion effect: middle of element
Divi image module adjustment

Add the Woo title module to column 2

Dynamic content

In column 2, the first mod we need is a Woo title mod. Make sure "This product" is selected in the dynamic content area.

  • Product: This product
product benefits grid

Title text settings

Then go to the design tab and style the title text as follows:

  • Title font: Oswald
  • Title font style: uppercase
  • Title text color: # ffd623
  • Title text size: 80px
Divi title module design adjustment

Spacing

Complete the Woo title module by adding left and right margins.

  • Left margin: 5%
  • Right margin: 5%
Divi title module setting

Add the Woo description module to column 2

Dynamic content

Let's move on to the next module, which is a Woo description module. We use the following dynamic content for this:

  • Product: This product
  • Description type: Short description
Product description module settings

Text settings

Switch to the module design tab and change the text settings accordingly:

  • Text Font: Karla
  • Text color: #dbdbdb
  • Text size: 17 px (desktop and tablet), 15 px (phone)
  • Text line height: 1,9 em
Color adjustment module description divi

sizing

Then change the width on different screen sizes.

  • Width: 59% (desktop), 82% (tablet and phone)
Divi summary module width adjustment

Spacing

Complete the Woo description module by adding custom margin values ​​in the spacing settings.

  • Upper margin: 50px
  • Bottom margin: 100px
  • Left margin: 5%
  • Right margin: 5%
Divi product description module

Add the Blurb module to the 2 column

Dynamic content

To display the product benefits that we added in the first part of this tutorial, we will use the Blurb modules. Add a first Blurb module and use the dynamic content of the first benefit produced for the title and the body.

  • Title: Benefit Title 1
  • Body: Benefit Description 1
Divi summary module text setting

upload Image

Upload an image or use an icon of your choice next. You can find the ones we've used throughout this tutorial in the download folder you were able to download at the beginning of this tutorial.

Image module summary divi configuration

Image / Icon Settings

Move on to the module's design tab and change the image / icon settings as follows:

  • Image / Icon Placement: Top
  • Image / Icon Alignment: Left
Divi adjustment module

Title Text Settings

We're modifying the title text settings next.

  • Title Font: Oswald
  • Title Font Style: Upper case
  • Title Text Size: 25px
Configure divi summary module font

Body Text Settings

Along with the body text settings.

  • Body Font: Karla
  • Text size: 17 px (desktop and tablet), 15 px (phone)
  • Body line height: 1,9 em
Configure text module summary div i

sizing

Then go to the sizing settings and change the widths. It is important to use a main width less than 50%, this will allow us to show two Blurb modules side by side in the next steps.

  • Image Width: 25%
  • Width: 49%
Configure divi summary module sizing

Spacing

We will also add spaces around the Blurb module using custom padding values ​​on different screen sizes.

  • Upper padding: 8%
  • Lower padding: 8%
  • Left padding: 8% (desktop and tablet), 2% (phone)
  • Right padding: 8% (desktop and tablet) 2% (phone)
Configure divi summary module spacing

Main element

Now we are going to make sure that the Summary module displays the text next to each other, in two steps. First, we'll make sure the module width is less than 50% (like we did in the previous step). Next, we'll use the property on the row. We will add this CSS property on the main element in the advanced section.

Display: inline-block;
Add css code divi module

Clone the summary module 3 times

Once you've completed the first Blurb mod, you can clone it three times. You will automatically notice that the Blurb modules appear in a grid.

Product name divi section

Edit the Blurb module images

Edit the image in each duplicate Blurb pod. You can find them in the download folder that you may have downloaded at the beginning of this article.

Divi summary module image

Modify the dynamic content of the Blurb module

Also modify the dynamic content of each duplicate Blurb module.

  • Title: Title of the service (2,3 or 4)
  • Body: description of the advantages (2,3 or 4)
Divi summary module rules

Add borders to Blurb modules individually

Blurb module 1 border settings

Now, to finish designing our grid, we're going to add borders to the Blurb modules on an individual level. Open the first Blurb mod and use a straight border.

  • Right border width: 1px
  • Right border color: # ffd623
Rounded border configuration divi summary module

Also add a bottom border to the first Blurb module.

  • Bottom border width: 1px
  • Bottom border color: # 000000
Configure the divi bottom margin
Blurb module 2 border settings

Then open the second Blurb module and use a bottom border.

  • Bottom border width: 1px
  • Bottom border color: # 000000
Configuration border module summary divi
Blurb module 3 border settings

Complete the grid design by adding a straight border to the third Blurb module.

  • Right border width: 1px
  • Right border color: # ffd623
product benefits grid

Add Woo Add to basket Module in column 2

Dynamic content

The last module we need in our design is a Woo Add to Cart module. Make sure "This product" is selected in the dynamic content area.

  • Product: This product
Add to card divi module settings

Field settings

Go to the next design tab and change the field settings.

  • Fields background color: #ffffff
  • Field text color: # 000000
Configure color style add to cart divi module
  • Rounded fields: 0px (all corners)
  • Width of lower border of fields: 1px
  • Color of bottom border of fields: # 000000
Configure divi section spacing

Button settings

Then, style the button accordingly:

  • Use custom styles for the button: Yes
  • Button text size: 20 pixels
  • Button text color: # 000000
  • Button background color: # ffd623
  • Button border width: 0px
  • Button border radius: 0px
Configure divi button design
  • Button font: Oswald
  • Button font style: uppercase
Configure divi button
  • Upper padding: 20px
  • Bottom padding: 20px
  • Left padding: 50px
  • Right padding: 50px
Configure divi module sizing

Spacing

And complete the module parameters by adding custom margin values.

  • Upper margin: 100px
  • Left margin: 5%
Configure divi spacing

3. Save the modifications of the theme generator and preview the result

Once you've finished designing the product page template, you can save all of your Theme Builder changes and display the results on your products!

Save divi design
Save divi modifications

Preview

Now that we've gone through all of the steps, let's take a final look at how it looks on different screen sizes.

Demo result

Latest Thoughts

In this article, we've shown you how to get creative with your next Divi product page template. Specifically, we've shown you how to include a dynamic product benefit grid to add additional benefits to your product page. We created this tutorial using Divi in ​​combination with the Advanced Custom Fields plugin. You could also download the JSON file for free! If you have any questions or suggestions, feel free to leave a comment in the comments section below.

0 shares
Share
tweet
Save