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.