Making a Putting Navigation Dashboard with Divi’s New Column Buildings

Searching for a brand new and distinctive solution to construction your homepage? Making a navigation dashboard may well be pass. On this instructional, we’re going to turn you the way precisely you’ll be able to reach a surprising dashboard web page which you’ll be able to use for plenty of functions.

Whether or not you wish to have to modify the way in which folks navigate to your web page, or you wish to have to spotlight services and products your corporate provides, making a dashboard will permit you to reach precisely what you had in thoughts. We’re the usage of Divi’s integrated choices best and on best of that, we’ve additionally equipped you with each a gentle and darkish colour palette that you’ll be able to use. This instructional is encouraged via one in every of Edoardo Mercati‘s designs.

Let’s get to it!

Preview

Earlier than we dive into the academic, let’s check out the outcome on other display screen sizes:

Colour Palettes

Earlier than you get started, you’ll be able to make a selection whether or not you wish to have to create a gentle or darkish dashboard. The colours you can want for every colour palette are indexed underneath. Make sure to stay those colour codes shut so you’ll be able to use them if you pass throughout the instructional. When the usage of a colour explicit to the colour palette, we’ll discuss with the colour quantity.

Gentle

Colour #1: #f6f6f6 (segment background)
Colour #2: #ffffff (column background)
Colour #3: #333333 (identify textual content colour)
Colour #4: #000000 (divider colour)
Colour #5: #6F6B68 (frame textual content colour blurb)
Colour #6: #e5e5e5 (column background 2)
Colour #7: #ffffff (blurb background colour)

Darkish

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

Mutual Colours

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

Let’s Get started Developing

Upload New Same old Phase

Background Colour

Get started via including a brand new segment for your web page. Then, open the segment settings and upload a background colour:

Background Colour: Colour #1 (To find in Colour Palette)

Spacing

To create some more space on the best and backside, we’ll follow some customized padding as smartly:

Most sensible Padding: 100px
Backside Padding: 100px

Upload Row #1

Column Construction

Now that we’re completed editing the segment settings, we will get started including rows. Select the next column construction on your first row:

Column 1 Background Colour

With out including any modules but, open the row settings and upload a column 1 background colour:

Column 1 Background Colour: Colour #2 (To find in Colour Palette)

Sizing

Pass to the Design tab subsequent and alter the Sizing settings of your row:

Make This Row Fullwidth: Sure
Use Customized Gutter Width: Sure
Gutter Width: 2
Equalize Column Heights: Sure

Spacing

Finally, upload some padding to the row and primary column:

Backside Padding: 100px
Column 1 Most sensible Padding: 100px
Column 1 Backside Padding: 100px
Column 1 Left Padding: 50px
Column 1 Proper Padding: 50px

Upload Identify Textual content Module to Column 1

H1 Textual content Settings

Time to begin including modules! We’ll get started via including a identify Textual content Module. If you’ve added your H1 replica, trade the Heading Textual content Settings of your module:

Heading Font Weight: Daring
Heading Textual content Alignment: Left
Heading Textual content Colour: Colour #3 (To find in Colour Palette)
Heading Textual content Dimension: 75px (Desktop), 55px (Pill), 36px (Telephone)

Upload Divider Module to Column 1

Divider Colour

Proper underneath the identify Textual content Module, pass forward and upload a Divider Module with the next colour:

Divider Colour: Colour #4 (To find in Colour Palette)

Sizing

Open the Sizing settings subsequent and regulate the width of your divider:

Width: 27%

Spacing

Upload some area on the best of your divider as smartly:

Most sensible Margin: 50px

Upload Description Textual content Module to Column 1

Textual content Settings

The following and remaining module on this row is an outline Textual content Module. After you’ve added your content material, trade the textual content orientation within the textual content settings:

Textual content Orientation: Justify

Sizing

Trade the Sizing settings of this module as smartly:

Width: 80% (Desktop), 100% (Pill & Telephone)

Spacing

And upload some area on the best of your module the usage of customized margin:

Most sensible Margin: 50px

Upload Blurb Module to Column 2

Icon

We will be able to now transfer directly to the second one column. We’ll get started off via developing some of the Blurb Modules. Afterwards, we will clone this module and alter it accordingly. After including the Blurb Module and converting the content material, make a selection an icon of your selection.