Divi UI Challenge #4 – User Dashboard
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.
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
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).
Now click on 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’).
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
This will bring up the Section Settings. Scroll down to Background Color and select or insert your chosen color (ours is #f4f1ea).
Now, within our Section we are going to add a Row. Hover over the Green + Icon and select a 3-column 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)
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).
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;
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…
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.
and your page should be looking like this.
Now we are going to start building out our column, starting with the Profile (image + name/title)
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.
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
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
Under Main Element insert
Under Member Image insert
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.
In the Visual Builder, click on the grey + Icon just under the previously completed module to Add a New Module.
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.
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
Scroll to change the following.
Border radius: 12px
Title Font: Ubuntu
Title Font Size: 12
Title Text Color: #999999
Percent Font: Ubuntu
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
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
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
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.
Want to download this secion and add it to your Divi Library? Here you go. 🙂
Bonus: It includes all 3 tiles.
Get 1 Free Divi Layout Pack, Child Theme or Plugin
In your Inbox. Once a month. Every month.