Divi UI Challenge #8 – The Ungrid

by | Dec 5, 2016 | Divi UI Challenge, Tutorial

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

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 (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).

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

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

add new section

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

screen-shot-2016-12-01-at-11-45-38-am

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

grid column options

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.

Add 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. 

Heading 1

Save & Exit

Save & Exit

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

Add new module on text

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.

box shadow code

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

main element image css

Save & Exit

Save & Exit

Should be looking something like this.

Looking good!

Now to add our additional images we’re going to ‘copy & paste’ our first image module.

So, hover over your image module and you’ll notice the grey menu bar pop up.¬†Right click on the bar and select¬†Copy Module

copy module

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

Add new module

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.

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.

two column row

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.

screen-shot-2016-12-02-at-12-32-27-pm

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

screen-shot-2016-12-02-at-12-32-27-pm

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

So pop on over to Design Settings

Design

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

Save & Exit

Jump into the Image Settings of our top-right image

screen-shot-2016-12-02-at-12-32-27-pm

Under General Settings

General

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

And pop on over to Design Settings

Design

Scroll down to Custom Margins and input the following

Right: 60px; Left: -20px

Save & Exit

Save & Exit

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

screen-shot-2016-12-02-at-12-32-27-pm

Under General Settings

General

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

In Design Settings

Design

Under Custom Margins,  input the following

Left: -80px

Save & Exit

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

screen-shot-2016-12-02-at-12-32-27-pm

And over in Design Settings

Design

Input the following

Header Font: Lato (and italicised)

Header Font Size: 30px

Header Font Color: #eaae2c

-scroll down

Text Font Size: 16px

Save & Exit

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

screen-shot-2016-12-02-at-12-32-27-pm

Firstly in Design Settings

Design

Scroll down to Custom Padding and input the following

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

And over to Custom CSS

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

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

screen-shot-2016-12-02-at-12-32-27-pm

And over to Custom CSS

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

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.

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. :)