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.

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 Now