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.

screen-shot-2016-11-03-at-11-42-12-am

Firstly we’re going to add our blank background color in, so click on the Section Settings Icon in the top left corner.

screen-shot-2016-11-03-at-10-20-40-am

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.

quarter/quarter/half

Click on Row Settings.

row settings

And fill in as follows.

Under General Settings

General

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

screen-shot-2016-11-03-at-10-23-43-am

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

screen-shot-2016-11-03-at-10-20-40-am

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.

screen-shot-2016-11-03-at-10-44-58-am

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.

screen-shot-2016-11-03-at-12-04-39-pm

Now over in Design settings.

screen-shot-2016-11-03-at-10-23-43-am

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

screen-shot-2016-11-03-at-10-44-58-am

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.

screen-shot-2016-11-03-at-10-23-43-am

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

screen-shot-2016-11-03-at-10-23-43-am

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)

screen-shot-2016-11-03-at-11-06-02-am

And pop over to Custom CSS.

screen-shot-2016-11-03-at-12-52-08-pm

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.

screen-shot-2016-11-03-at-11-14-08-am

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.

screen-shot-2016-11-03-at-12-52-08-pm

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

screen-shot-2016-11-03-at-12-52-08-pm

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.

Pin It on Pinterest

Want Free Divi Resources?

Subscribe to receive a free Child Theme, Layout Pack or Plugin in your inbox. Once a month. Every month.

Welcome. :). Check your inbox for your first Divi Freebie.

Interested in levelling up your Divi skills?

We're creating something special. A space where we can share and teach what we know and what we do with Divi. If you're interested in hearing when it launches, add your email here.

Brilliant! We'll be in touch as we approach launch. :)