Divi UI Challenge #8 – The Ungrid

Welcome to this week’s Divi UI Challenge! Today we’re building a stacked images section, but one that breaks out of the classic ‘grid’ approach… hence ‘The Ungrid’. Which is particular fun to us Divi lovers who’s ‘lives’ are confined to modules/rows/sections 😉

Like always, we’re building with the standard Divi builder settings and have a few additional minor CSS tweaks.

Here’s a peek 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 (The Ungrid) 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.

We’re starting with adding a new specialty section. So slick on the Blue Cross Icon at the bottom.

An Insert Section Box will pop up, select Specialty Section.

A Insert Columns Box will pop up, select the following column option.

Now, there will still be the default section above your speciality section. This isn’t needed so remove by clicking on the ‘trash’ symbol in the top left blue menu bar of the section.

Ok, first thing we’re going to add is a Text Module in the left hand main column. Click on the dark grey + Icon to Insert a New Module.

And select a Text Module.

In the Content box, insert your text. Our text has been grabbed from lorem2.com . The first line was set as Heading 1 and the remainder kept at Paragraph.

Save & Exit

Now we’re going to add an Image Module underneath the Text Module. Click on the dark grey + Icon

And select Image. This will take you directly to the Image Settings pop up. Click on the Upload Button to upload your image.

We’re going to apply a bit of Custom CSS to the image to create a box-shadow. So pop on over to CSS Matic and input the following.

This will generate a code in the box to the right, copy this code and paste it back in the Main Element box under the CSS Tab

Now on the right hand side of the section we first need to Add a Row, so click on the Green Plus Icon.

Choose the Single Column Row option. A pop up settings box will appear, exit out of that so we can paste our copied module. Do this by right clicking within the new row and selecting paste module.

Underneath this row we’re going to add one more, so again click on the Green + Icon and select a two-column row this time.

Again, exit out of the Settings Box that pops up, and right click within the row and select Paste Module.

You should now have your three image modules all set up, now just pop back into the Image Settings for the additional modules and change the uploaded image for each. Do this by clicking on the grey Settings Icon within the module.

Once your additional two images are uploaded, it’s time to start ‘un-aligning’ our grid… as well as adding in our image animations so that the images all ‘fly in’ from different sides!

So, jump into the Image Settings for your first (left-hand) image

The Animation is defaulted to Left-to-Right which we’ll leave for this image.

So pop on over to Design Settings

Scroll on down to Custom Margin and input the following

Right: -60px; Left: 60px

playing with the margins within our image settings is what is visually setting our images out of alignment. In particular, putting the right hand margin at a negative pixels (-60px) is what creates the overlapping effect.

Save & Exit

Jump into the Image Settings of our top-right image

Under General Settings

Scroll down to Animation and change the option to ‘Right-to-Left’

And pop on over to Design Settings

Scroll down to Custom Margins and input the following

Right: 60px; Left: -20px

Save & Exit

And lastly, in the Image Settings for the bottom-right image.

Under General Settings

Scroll down to Animation and change the option to ‘Bottom-to-Top‘

In Design Settings

Under Custom Margins, input the following

Left: -80px

Save & Exit

Looking good!

Do remember to alter your margin settings across desktop/tablet/smartphone in the Margin options to ensure it translates across the devices.

Things should be looking something like this.

Coming together nicely!

Now let’s adjust our text. Jump into the Text Module Settings

And over in Design Settings

Input the following

Header Font: Lato (and italicised)

Header Font Size: 30px

Header Font Color: #eaae2c

-scroll down

Text Font Size: 16px

Save & Exit

Ok, our last element we are going to add is our ‘corners’ around the top left text, and top-right image. This is all going to be built with Custom CSS. We will try and provide a simplified guide to the reasoning behind the steps being taken here so you can hopefully pick up a couple of tricks along the way.

So firstly, let’s add the ‘corners’ to the top-left text module. Jump into the Text Module Settings

Firstly in Design Settings

Scroll down to Custom Padding and input the following

Top: 40px; Right: 40px; Bottom: 40px; Left: 40px;

And over to Custom CSS

Scroll down to Before and input the following

content: “”;

display: block;

position: absolute;

width: 60px;

height: 80px;

border-left: 2px solid #2CC7E9;

border-top: 2px solid #2CC7E9;

top: 0;

left: 0;

In Main Element input the following

position: relative;

Then in After input the following

content: “”;

display: block;

position: absolute;

width: 40px;

height: 100px;

border-right: 2px solid #2CC7E9;

border-bottom: 2px solid #2CC7E9;

bottom: 0;

right: 0;

Save & Exit

Now let’s jump into the top-right image to add some colours there. So click on the Grey Settings Icon on your image

And over to Custom CSS

Scroll down to Before and input the following

content: “”;

display: block;

position: absolute;

width: 60px;

height: 80px;

border-left: 2px solid #fff;

border-top: 2px solid #fff;

top: 40px;

left: 40px;

In Main Element input the following

position: relative;

Then in After input the following

content: “”;

display: block;

position: absolute;

width: 40px;

height: 120px;

border-right: 2px solid #fff;

border-bottom: 2px solid #fff;

bottom: 40px;

right: 40px;

Save & Exit

Now, it’s all nice and easy to copy and paste the above text and move on with absolutely no idea what anyone of it means. So, for the benefit of learning something, Here’s a little ‘translation’ (with minimal tips) below to help understand the gobbely-gook. We can also strongly recommend following along the video tutorial where Rob provides some great understanding around the CSS elements.

content: “”; (between the two quotation marks is where you would put your written content….. but in this case we actually want an ’empty’ html element that we can customise, hence there being nothing between the two quotation marks)

display: block; (as default the display for the Before & After Pseudo Elements is set to Inline Block, we want to change to Block)

position: absolute; (removing it from the standard flow of the page)

width: 60px; (determining the width of the html element, which we’ll call a box)

height: 80px; (determining the height of the html element)

border-left: 2px solid #2CC7E9; (these two borders are the only visible elements of the ‘box’, everything else is an ‘invisible structure’ that enables us to draw a border)

border-top: 2px solid #2CC7E9;

top: 0; (this determines how close we want the ‘box’ to sit to the outside parameters of the actual Module- in this case the text module – because our text module has 40px padding, the visible border won’t sit flush to the actual text)

left: 0;

Hope that helps bring some understanding.

Things should be looking pretty amazing now!! 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.