Divi UI Challenge #4 – User Dashboard

by | Oct 28, 2016 | Divi UI Challenge, Tutorial | 2 comments

Welcome to another Octygon UI Challenge! In this week’s tutorial, we’re going to build what you could call a User Dashboard, handy with a membership site or similar where you can display user profiles and/or project information. But as always, great for everyone to learn some new tricks.

As normal, you can also follow along the via the video tutorial below. Subscribe to our YouTube channel as well for all future tutorials.

Here’ a preview of what we’re working on today.

Video Tutorial

Our finished product has three ‘cards’ but today’s tutorial will only cover the first ‘Member Profile’ card. The information we’ll be covering should enable you to further develop the additional cards.

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 (such as User Dashboard) 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

Now today we’re actually going to be working with the Visual Builder! Opinions are divided on this, but we’re really enjoying it here.

Essentially what the visual builder will show you as a ‘blank page’ is something like this.

Now we strongly recommend taking a moment to fiddle around with each of the icons and become familiar with what is what. The purple ‘menu’ along the bottom of the screen won’t be visible initially but is expanded when clicking on this icon below (which will be at the bottom of your ‘blank page’).

VisBuil - Menu icon

Now let’s start building. Starting with the Section, firstly we’ll add a background colour. Click on the settings icon in the top left corner

section-settings

This will bring up the Section Settings. Scroll down to Background Color and select or insert your chosen color (ours is #f4f1ea).

background color

Now, within our Section we are going to add a Row. Hover over the Green + Icon and select a 3-column row.

insert-row

Immediately a Module Settings box will pop up but just Exit (x) out of there for now.

And click on Row Settings (the green menu bar to the left of the page (just underneath the blue Section Menu Bar)

row-settings

On the General page, toggle Make this Row Fullwidth to YES. 

Now under the Design and CSS settings we will design essentially each ‘card’ (column).

Under Design

Column 1 Background: White

Column 1 Paddings: 40px; 40px, 40px, 40px

Over in Custom CSS

Scroll down to Column 1 Main Element and insert the following

border: 2px solid #67aaf9;

border-radius: 6px;

And we also want to add some CSS for a Box Shadow element but, as we’ve mentioned in the past, box shadow CSS can be pretty fiddly so is a great time to use a CSS generator. So, head over to cssmatic.com/box-shadow and input the following…

CSS generator

Then copy the text that’s generated in the box to the right and paste it back in you Column 1 Main Element box directly underneath the CSS you’ve already inputted.

Click Save

screen-shot-2016-10-27-at-10-32-45-am

and your page should be looking like this.

screen-shot-2016-10-27-at-10-32-07-am

Now we are going to start building out our column, starting with the Profile (image + name/title)

member-section

So, back in the Visual Builder, click on the grey + icon to Insert Module. You can see below that a search field comes up to find the Module type (as well as a peek at some of the keyboard shortcuts now in place with Divi). Search and select Person module type.

screen-shot-2016-10-27-at-10-36-28-am

Under Person Settings insert the following

Name: Rob Stinson

Position: CEO, Octygon

Image URL: Upload a profile pic from your Media library

Animation: Bottom to Top

Text Color: Dark

Ignore the Social Media details for this tutorial – of course add them in if required for your task

Under Design Settings 

design-settings-person

Header Font: Ubuntu and all caps

Header Font Size: 16px

Header Text Color: #444444

Body Font: Ubuntu

Body Text Color: #999999

Over in Custom CSS

css-person-settings

Under Main Element insert

text-align: center;

Under Member Image insert

max-width: 100px;

border-radius: 50%;

overflow: hidden;

border: 4px solid #ffba41;

margin: auto auto 20px;

Save and your Visual Builder page should be looking like this.

Ok, now we’re going to build the Bar Counter module element of the Column.

column-data

In the Visual Builder, click on the grey + Icon just under the previously completed module to Add a New Module. 

screen-shot-2016-10-27-at-11-05-54-am

Search and Select Bar Counters, which will bring up the Bar Counter Settings. 

Click + Add New Item

For each New Item enter the Title (i.e. NASA) and the percentage (i.e. 68%). You should end up with three items looking like this.

screen-shot-2016-10-27-at-1-01-49-pm

Then scroll down through the General settings and change the following.

Background Color: Light blue (#d6eaf9)

Bar Background Color: Blue (#67aaf9)

Over in Design settings

bar-counter-settings

Scroll to change the following.

Border radius: 12px

Title Font: Ubuntu

Title Font Size: 12

Title Text Color: #999999

Percent Font: Ubuntu

Then Save

Now it’s worth noting that while the visual builder gets you very close to what you’d actually see on the site, we have noticed some things aren’t perfectly replicated. i.e. margins or spacing. It’s always good to check in preview before publishing

The Card should be looking something like this in the Front End Builder now.

Now our last ‘element’ within the column is the Menu icon in the top right hand corner

menu-bar

From the front end editor we’re going to add another Module, so lick on the grey circle Icon again, underneath the Bar Counters.

This time, we’re adding a Blurb (primarily because we know that Blurbs give us the ability the use Icons)

Scroll down and complete the following

URL: #

Use Icon: toggle to YES

and then select your icon.

Icon color: #999

Image/Icon Animation: No Animation

Under Design Settings, complete the following

Use Icon Font Size: toggle to YES and then set to 30px

Under CSS Settings

Insert under Main Element

position: absolute;

top: 20px;

right: 20px;

Save

Perfect! Now with those skills you should be able to build out some additional columns for your User Dashboard. 

Well done and looking forward to seeing you here again next week!

Don’t forget to let us know if there’s any particular challenges you’d like us to undertake? Comment Below.

The Download

Want to download this secion and add it to your Divi Library? Here you go. 🙂

Bonus: It includes all 3 tiles. 🎉

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