Creating a Striking Navigation Dashboard with Divi's New Column Structures

Looking for a new and unique way to structure your homepage? Creating a navigation dashboard might be the way to go. In this tutorial, we’re going to show you how exactly you can achieve a stunning dashboard page which you can use for many purposes.

Whether you want to change the way people navigate on your page, or you want to highlight services your company offers, creating a dashboard will help you achieve exactly what you had in mind. We’re using Divi and its built-in options only and on top of that, we’ve also provided you with both a light and dark color palette that you can use. This tutorial is inspired by one of Edoardo Mercati‘s designs.

Let’s get to it!

Table Of Contents

1 Preview
2 Color Palettes
3 Let’s Start Creating
4 Preview
5 Final Thoughts

Preview

Before we dive into the tutorial, let’s take a look at the end result on different screen sizes:

Color Palettes

Before you start, you can choose whether you want to create a light or dark dashboard. The colors you would need for each color palette are listed below. Make sure you keep these color codes close so you can use them once you go through the tutorial. When using a color specific to the color palette, we’ll refer to the color number.

Light

Color #1: #f6f6f6 (section background)
Color #2: #ffffff (column background)
Color #3: #333333 (title text color)
Color #4: #000000 (divider color)
Color #5: #6F6B68 (body text color blurb)
Color #6: #e5e5e5 (column background 2)
Color #7: #ffffff (blurb background color)

Dark

Color #1: #141414
Color #2: #212121
Color #3: #ffffff
Color #4: #ffffff
Color #5: #dddddd
Color #6: #212121
Color #7: #333333

Mutual Colors

Color #7: #0457ff
Color #8: #cc0432
Color #9: #839e00
Color #10: #c68e00

Let’s Start Creating

Add New Standard Section

Background Color

Start by adding a new section to your page. Then, open the section settings and add a background color:

Background Color: Color #1 (Find in Color Palette)

Spacing

To create some extra space at the top and bottom, we’ll apply some custom padding as well:

Top Padding: 100px
Bottom Padding: 100px

Add Row #1

Column Structure

Now that we’re done modifying the section settings, we can start adding rows. Choose the following column structure for your first row:

Column 1 Background Color

Without adding any modules yet, open the row settings and add a column 1 background color:

Column 1 Background Color: Color #2 (Find in Color Palette)

Sizing

Go to the Design tab next and change the Sizing settings of your row:

Make This Row Fullwidth: Yes
Use Custom Gutter Width: Yes
Gutter Width: 2
Equalize Column Heights: Yes

Spacing

Lastly, add some padding to the row and first column:

Bottom Padding: 100px
Column 1 Top Padding: 100px
Column 1 Bottom Padding: 100px
Column 1 Left Padding: 50px
Column 1 Right Padding: 50px

Add Title Text Module to Column 1

H1 Text Settings

Time to start adding modules! We’ll start by adding a title Text Module. Once you’ve added your H1 copy, change the Heading Text Settings of your module:

Heading Font Weight: Bold
Heading Text Alignment: Left
Heading Text Color: Color #3 (Find in Color Palette)
Heading Text Size: 75px (Desktop), 55px (Tablet), 36px (Phone)

Add Divider Module to Column 1

Divider Color

Right below the title Text Module, go ahead and add a Divider Module with the following color:

Divider Color: Color #4 (Find in Color Palette)

Sizing

Open the Sizing settings next and adjust the width of your divider:

Width: 27%

Spacing

Add some space at the top of your divider as well:

Top Margin: 50px

Add Description Text Module to Column 1

Text Settings

The next and last module in this row is a description Text Module. After you’ve added your content, change the text orientation in the text settings:

Text Orientation: Justify

Sizing

Change the Sizing settings of this module as well:

Width: 80% (Desktop), 100% (Tablet & Phone)

Spacing

And add some space at the top of your module using custom margin:

Top Margin: 50px

Add Blurb Module to Column 2

Icon

We can now move on to the second column. We’ll start off by creating one of the Blurb Modules. Afterwards, we can clone this module and change it accordingly. After adding the Blurb Module and changing the content, select an icon of your choice.