Divi UI Challenge #5 – Netflix Tiles

by | Nov 3, 2016 | Divi UI Challenge, Tutorial

This week’s Divi UI Challenge is a Stacked Tile Section inspired by Netflix. We’re big fans of the branding work Gretel did for Netflix and particularly love their adaptable ‘stacking’ components. 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

Add new page

Give your page a title (Netflix 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).

Blank Page under Template

Now click on Use the Divi Builder. 

use the divi builder

Today we’re going to be working with the Visual Builder again, so click on the Visual Builder Icon.

Use Visual Builder

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 (Black/Very Dark Grey, #211f1c). Save & Exit by pressing the Green Tick in the bottom right.

Save & Exit

Now click on the Green + Icon in the centre to Add a Row, and we’re going to choose a quarter/quarter/half row.


Click on Row Settings.

row settings

And fill in as follows.

Under General Settings


Make this Row Fullwidth: Toggle to YES

Use Custom Gutter Width: Toggle to YES

Gutter Width: 1

Custom Padding: Top: 0px; Bottom: 0px

Keep Custom Padding on Mobile: toggle to YES

Under Design Settings


Custom Margin: Top: 0; Bottom: 0

Equalize Column Heights: toggle to YES

Column 1 Background Image: select image, ours was the Skyfall/Bond image

Column 2 Background Color: Red #d82f20

Save & Exit

Save & Exit

Now let’s adjust the padding for the Section, so click on the Section Settings Icon


And scroll down to Custom Padding

Set Top: 0px; and Bottom: 0px

Save & Exit

Save & Exit

Should be looking something like this.

So that’s our basic three column layout. Now let’s add some text to our third column. Click on the Add New Module icon in the third column.


And select a Text module.

Change the Text Color to Light, and insert your text in the Content box… 

License to kill 

Now highlight your text and select Heading 1 from the Paragraph drop down menu above.


Now over in Design settings.


Fill in the following.

Header Font: Montserrat and Bold 

Header Font Size: 100px

Custom Margin: Bottom: 160px

Save & Exit

Save & Exit

Now for the second text module. Underneath the first text module, click on the Add New Module icon


And again select a Text module. Change the Text Color to Light, and insert your text in the Content box… 

Bond is Back

19th July

Now over in Design settings.


Fill in the following.

Text Font: Arimo and All Caps

Text Font Size: 20px

Text Line Height: 1em

Save & Exit

Save & Exit

Now we’re going to add some Custom Padding to our third column. So jump back into Row Settings

row settings

and in Design settings


Scroll right down to Third Column Custom Padding and insert

Top: 80px; Right: 80px; Bottom: 80px; Left: 80px

Save & Exit

Save & Exit

Now let’s add the Red Line that sits vertically to the left of the ‘Bond is Back’ text. Click on the Module Settings Icon (second to the left)


And pop over to Custom CSS.


And scroll down to Main Element and input the following;

border-left: 2px solid #d82f20;

padding-left: 20px;

Save & Exit

Save & Exit

Now we’re going to add some shadow to the columns to create that ‘stacking’ effect. As we’ve mentioned before, ‘box shadows’ can be a bit tricky in Custom CSS so we recommend using a CSS generator. Head over to cssmatic.com and input the data as follow.


Copy the generated Custom CSS from the box.

Back in the Visual Builder, we’re going to apply this shadow effect to the Rows, so click on the Row Settings Icon.

row settings

And over to Custom CSS settings.


Scroll down and paste the above code in both the Column 2 Main Element and Column 3 Main Element boxes.

Save & Exit

Save & Exit

Things should be looking something like this.

Looking good!

Now let’s fiddle with the varying widths of the columns a bit.

Now this may cause some issues on varying screen sizes so as always, play around with the sizes and see what works for you.

Let’s jump back into Row Settings

row settings

And over to


Scroll down to Column 1 Main Element and add the following

width: 30% !important;

And then scroll down to Column 2 Main Element and add (above the previously added code)

max-width: 10%;

Save & Exit

Save & Exit

Things should be looking pretty amazing!! Well done everyone! Here’s what our finished product should be looking like.

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.

Download Now

Get 1 Free Divi Layout Pack, Child Theme or Plugin

In your Inbox. Once a month. Every month.

Are you ready for Gutenberg?

We've built a plugin that makes it super easy to create Custom Gutenberg Blocks.

Check it out

You have Successfully Subscribed!

Pin It on Pinterest