Divi UI Challenge #5 – Netflix Tiles

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

Firstly from your Dashboard homepage in the top function bar select +New and 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).

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.

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

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

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

Now we’re going to add some Custom Padding to our third column. So jump back into 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

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

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.

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

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

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

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.

Get 1 Free Divi Layout Pack, Child Theme or Plugin

2 Comments

Splendid tutorial. Loved playing around with it. But.. the responsiveness is giving me total headaches. I found a work around, by disabling the design on tablet and mobile, and creating a new one where the stacks are on top of eachother. But there must be another way. Would love some pointers…