Divi UI Challenge #9 – Product Tiles
Hello and welcome back to another Divi UI Challenge! This week we’re tackling a Product Tiles section, perfect for highlighting three seperate product options. Like always, we’re building with the standard Divi builder settings and have a few additional minor CSS tweaks.
Here’s a screen grab of what we’ll be building today.

Video Tutorial
Ok, Let’s go!
Firstly from your Dashboard homepage in the top function bar select +New and Page
Give your page a title (Product Tiles) and in the far right function column under Template select Blank Page (this removes the footer and menu from the page which makes it a bit easier to design when previewing back and forth).
Now click on Use the Divi Builder.
Today we’re going to be working with the Visual Builder again, so click on the Visual Builder Icon.
This wil bring up an ’empty’ section that looks something like this.
Firstly we’re going to add our blank background color in, so click on the Section Settings Icon in the top left corner.
Scroll down to Background Color and select/insert your chosen color (Blue, #4479f1). Save & Exit by pressing the Green Tick in the bottom right.
Now we’re going to add another section under our default one. So at the bottom of the Blue Section click on the Blue + Icon to Add New Section
In the pop-up window select Regular Section
And then a Three-Column-Row
A Module window will pop up for the first column – select the Image option.
Using the Upload button, select your chosen image and upload.
Our icon images are from Flat Icon
Scroll down in the Image Settings and change the Image Alignment to Centre.
Over in Design Settings
Set the Max Image Width to 60px.
And under Custom Margin set the Bottom Margin to 40px.
Save & Exit
Under each of the Image Modules we’re going to add a Call to Action Module, so click on the Dark Grey + Icon
and select Call to Action
Under General Settings fill in as follows
Title: Cuppa
Button URL: #
Url Opens: In the Same Window
Button Text: Let’s Go
Use Background Color: Toggle to NO
Text Color: Dark
Text Orientation: Center
Content: we grabbed ours from lorem2.com
Over in Design Settings, fill in as follows
Header Font: Montserrat and All Caps
Header Font Size: 18px
Header Text Color: #5b6777
Header Letter Spacing: 0px
Header Line Height: 1em
Body Font: Open Sans
Body Font Size: 12px
Body Text Color: #5b6777
Body Letter Spacing: 0px
Body Line Height: 2.2
scroll down
Use Custom Styles for Button: Toggle to YES
Button Text Size: 14px
Button Text Color: #4479f1
Button Background Color: white
Button Border Width: 1px
Button Border Color: #4479f1
Button Border Radius: 4px
Button Letter Spacing: 0px
Button Font: leave as default
Add Button Icon: No
Button Hover Text Color: White
Button Hover Background Color: #4479f1
Button Hover Border Color: #4479f1
Button Hover Border Radius: 4px
Then over in CSS Settings.
Under Promo Button input the following
width: 100%;
Save & Exit
Should be looking something like this.

Now moving onto styling our columns a bit more, therefore styling the Three Tiles.
Click on the Green Row Settings at the top of your first Image module.
Over in Design Settings
Scroll down and only complete the following
Column 1 Background Color:White
Column 1 Custom Padding: Top: 80px ; Right: 40px ; Bottom: 80px ; Left: 40px;
Column 2 Background Color: White
Column 2 Custom Padding: Top: 120px ; Right: 40px ; Bottom: 120px ; Left: 40px;
Column 3 Background Color: White
Column 3 Custom Padding: Top: 80px ; Right: 40px ; Bottom: 80px ; Left: 40px;
Jump on over to CSS
Now we’re going to add a good ol’ Box Shadow, so jump on over to cssmatic.com and input the following in their Box Shadow Generator
note that we used our Blue (#4479f1) for the shadow color instead of the default
Copy the code generated in the box to the left
And paste back in the Column 1 Main Element, Column 2 Main Element and Column 3 Main Element under CSS Settings.
now onto a few more CSS Settings to our rows
Under Column 1 Main Element input the following (above the already added Box Shadow code)
border-radius: 8px;
margin-top: 40px;
Scroll down to Column 2 Main Element and input the following (above the already added Box Shadow code)
border-radius: 8px;
Then down to Column 3 Main Element and input the following (above the already added Box Shadow code)
border-radius: 8px;
margin-top: 40px;
Save & Exit
Now we’re going to use the keyboard shortcuts to copy and paste our main Tile elements from the first tile across the other two.
So hover over the Image Modules and the Grey Settings Bar will pop up, while hovering over this bar Press Command-C on your keyboard (Ctrl-C if not on Mac).
Then in the second column, hover over the Grey + Icon
And press Command-V (or Ctrl-V) to paste the image module.
Repeat the paste on the third column.
Repeat the Copy-and-Paste process for the Call to Action module.
You should now have three columns all with an Image module and a Call to Action module in each.
Now to change the images in the second and third columns.
Click on the Grey Settings Icon
And delete the current Image URL, replace by uploading a new on via the Upload button.
Save & Exit
Now within the Visual Builder we can directly change the Header Text in our Call to Action.
Just double-click on the text that needs changing. This should highlight the text
Then re-write your preferred text. Ours were Brew and Fix
We’re going to remove two areas of padding using the main Visual Builder userface.
When you hover over the top padded area of the Three-column row, it will highlight green. Click-and-drag the padding from default (26px) to 0px.
Repeat removing the padding for the top Section.
Almost there!
Now, pop into the Section Settings
And under Background Color, set it to Transparent by selecting white and dragging the far-left opacity setting right down to the bottom
Save & Exit
Now, to ensure our blue top section is visible when the page is live, we do have to input something into the row (it’s currently empty)
So, click on the +Add New Row Icon in the middle of the blue section
And select a One Column Row, then exit out of the Module pop up window.
The jump into the Row Settings for our Main Three-Column Row.
Under Design
Change Custom Margin Top to : -120px (this overlaps our columns into the blue section)
Save & Exit
Yay! Well done, Should be looking like this.

Another week down! Let us know if there’s anything you’d like us to tackle in upcoming UI Challenges in the comments section below.
The Download
Want to add this to your Divi Library? Here’s the download for the section. Remember you’ll need to unzip the file to get the uploadable .json file.
Another thing to note is that this download pack includes 2 x sections. The empy blue section for the top and then the section containin the 3 tiles.
Download NowGet 1 Free Divi Layout Pack, Child Theme or Plugin
In your Inbox. Once a month. Every month.

Incredible!! and very well explained.
Thank you so much.
Very helpful and thorough. This will impact many of my designs going forward. Much appreciated!