How to Create a Navigation Homepage with Divi

There are a ton of approaches that you can apply on your homepage, but if you want to add that little extra touch to your website, opting for a navigation page as your homepage might be the way to go. You won’t see it around that often and it gives your visitors a clear view of what they can expect from your website. Besides, it’ll also help your visitors navigate visually through the different pages full of the awesome content that you provide.

To show you how you can get it done with Divi, in a stylish and elegant manner, we’ve created a design that we’ll show you how to recreate in this post. There will be two versions; the desktop version and the one that’s suitable for tablet and phone. Before we dive into the tutorial, let’s take a look at the final result.

Result on Desktop

The result we’re going to recreate looks like this on desktop:
navigation page

Result on Mobile

The result on mobile is slightly different and looks like this:

navigation page

How to Create a Navigation Homepage with Divi

Subscribe To Our Youtube Channel

Recreate Desktop Version

We’re going to create two versions of the navigation page; a desktop version and a version for tablet and phone. That way, we’ll be sure that the navigation page looks good on all devices. As usual, we’re going to start off by creating the desktop version.

navigation page

Add New Section

Start by creating a new page and adding a regular section to it. For this tutorial, we’re only going to use one section that’ll include all of the rows with content we’ll be needing (both for the desktop and mobile version). However, you can also choose to separate the desktop and mobile version into two sections.

Recreate First Navigation Row

As you can notice in the result preview above, each one of the navigation items has more or less the same design with some different details. Most of the settings for each one of the navigation items you want to create are the same. That’s why we’ll show you how you can create the first row in detail, and then show you how you can make the modifications for the other navigation items you want to add to the page as well.

Column Structure

First of all, choose a fullwidth column for the row you’ve just added. Before we add any modules to it, we’re going to make sure the row settings are in place so go ahead and open the row settings.

navigation page

Background Image

While being on the Content tab, the first thing we’re going to do is add a background image to your row. We recommend using an image that has a width of ‘1400px’ and a height of ‘934px’ as it will lead to the best result. Also, make sure you put the image on ‘no repeat’.

navigation page

Alignment

Then, move on to the Design tab and add a right alignment to your row. By doing this, you will create enough space on the left side of your screen to add the description and the link.

navigation page

Sizing

Next, open the Sizing subcategory, enable the ‘Use Custom Width’ option and use a percentage width of ‘100%’.

navigation page

Spacing

Moving on, we want to add a bit of white space between each navigation item, that’s why we’re going to add a top and bottom margin of ‘5px’ to the row.

navigation page

Visibility

Last but not least, we want to disable this row on phone and tablet since we’re going to create another row that will match tablet and phone later on this post.

navigation page

Text Module for Page Description

Text Settings

Once the row settings are done, you can add a first Text Module to the column of the row and use the following settings for the Text subcategory in the Design tab:

  • Text Font: Andika
  • Text Font Weight: Regular
  • Text Size: 13px
  • Text Color: #000000
  • Text Line Height: 1.1em
  • Text Orientation: Left

navigation page

navigation page

Sizing

Scroll down, open the Sizing subcategory and add a width of ‘18%’. This width will make sure that our Text Module will not cross the background image of our row once we add the negative left margin to it.

navigation page

Spacing

As mentioned in the previous step, we want the Text Module to come on the left side of our row without overlapping the row background. We also want to have some space between the top of the row image and the start of the Text Module, that’s why we’re using some top margin as well.

  • Top Margin: 150px
  • Left Margin: -20px
  • Top Padding: 10px
  • Bottom Padding: 10px

navigation page

Divider Module

Visibility

Next, go ahead and add a Divider module right below the Text Module. Within the Visibility subcategory, enable the ‘Show Divider’ option.

navigation page

Color

Then, move on to the Design tab and add ‘#FFFFFF’ as the divider color.

Styles

Moving on, choose ‘Solid’ as the Divider Style and ‘Top’ as the Divider Position.

navigation page

Sizing

Lastly, make the following settings apply to the Sizing subcategory:

  • Divider Weight: 5px
  • Height: 23px
  • Width: 47%
  • Module Alignment: Left

navigation page

Text Module for Menu Item

Link Text in Content Box

Once you’re done with the Divider Module, go ahead and add another Text Module right below it. This Text Module will be our navigation item. Open the settings, enter the text and add a link to it.

navigation page

Gradient Background Color

While still being on the Content tab, use the following gradient background settings:

  • First Color: #FFFFFF
  • Second Color: rgba(12,113,195,0.62)
  • Gradient Type: Linear
  • Gradient Direction: 108deg
  • Start Position: 31%
  • End Position: 21%

navigation page

Link Text Settings

Then, go to the Design tab and make the following settings apply to the link tab of the Text Subcategory:

  • Link Font: Andika
  • Link Font Weight: Bold
  • Link Font Style: Uppercase & Underline
  • Link Underline Style: Solid
  • Link Text Size: 100px
  • Link Text Color: #000000
  • Link Line Height: 1em

navigation page

navigation page

Spacing

This Text Module will need to appear on the left side of the screen as well, that’s why we’re adding the left margin. We also want the space between the Divider Module and this Text Module to be smaller, that’s where the negative top margin enters. To create that central horizontal alignment, we’re also going to add a bottom margin. And lastly, we want the gradient background to be larger, that’s why we’re using the top and bottom padding.

  • Top Margin: -33px
  • Bottom Margin: 250px
  • Left Margin: -20px
  • Top Padding: 80px
  • Bottom Padding: 80px

navigation page

Clone First Navigation Row as Many Times as Needed

The different navigation items on your navigation page are going to have, more or less, the same settings. That’s why we recommend cloning the row as many time as you need and making the detail modifications afterwards. There are three things you’ll need to change, let’s take a look.

Change Row Background

The first thing you’ll need to do is change the background images of the duplicates of your row. Again, make sure you use an image with a width of ‘1400px’ and a height of ‘943px’ to obtain the best result.

navigation page

Change Text Module for Menu Item

Change Link

Then, open the navigation item Text Module and change the text along with the link.

navigation page

Change Gradient Background According to Text Length

Lastly, you’ll also need to change the gradient background of this Text Module. Change the second gradient color into ‘rgba(224,43,32,0.62)’  and change the Start Position value according to the length of your new navigation item. If you have a navigation item that is quite long, you’ll want to change the Start Position percentage to a higher value until you see it fall into place.

navigation page

Recreate Mobile Version

Now that we have created the Desktop version, we’re going to create the tablet and mobile version as well. The style of the different Modules is pretty much the same as the desktop version but behind the scenes, the structure of our rows is completely different. Because of the many modifications you’d have to make to each module if you were to clone them, I’m simply going to show you how to create it from scratch without cloning any module from the Desktop version.

navigation page

Recreate First Navigation Row

Start by adding another row to the section that we’ve created in the beginning of this post.

Column Structure

This column will, like the desktop version, also need only one column.

navigation page

Sizing

The sizing of this row is the following:

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

These settings will make sure our row takes up the whole width of the screen.

navigation page

Visibility

And lastly, disable this row on desktop because we have other rows that will be displayed on desktop instead.

navigation page

Text Module for Page Description

Text Settings

Go ahead and add the first Text Module to the row. Make the following settings apply to the Text subcategory:

  • Text Font: Andika
  • Text Font Weight: Regular
  • Text Size: 13px
  • Text Color: #000000
  • Text Line Height: 1.1em
  • Text Orientation: Center

navigation page

navigation page

Sizing

Then, open the Sizing subcategory and, use a width of ‘71%’ and a center Module Alignment.

navigation page

Spacing

Lastly, this Text Module will need a top and bottom padding of ’10px’. As you can notice, there is no need for margin values in the tablet and mobile version because we’re opting for a center alignment instead.

v

Text Module for Menu Item

Link Text in Content Box

For the Mobile version, we don’t need a Divider Module so we’re going to skip that step. Instead, we’re immediately going to add the navigation item Text Module right below the previous Text Module we’ve created. Once you do that, add the text with the link to the Content Box in the Content tab.

navigation page

Gradient Background Color

The gradient background we’re going to use for this Text Module is the same as the Desktop version one:

  • First Color: #FFFFFF
  • Second Color: rgba(12,113,195,0.62)
  • Gradient Type: Linear
  • Gradient Direction: 108deg
  • Start Position: 31%
  • End Position: 21%

navigation page

Link Text Settings

Make use of the following settings for the Text Subcategory:

  • Link Font: Andika
  • Link Font Weight: Bold
  • Text Size: 65px
  • Text Color: #000000
  • Text Line Height: 1em
  • Text Orientation: Left

navigation page

navigation page

navigation page

Spacing

Like the desktop version, this navigation item Text Module will need a top and bottom padding of ’80px’ to make the gradient background larger.

navigation page

Image Module

Upload Image

Lastly, add an Image Module as the last module in your row and upload an image of choice.

navigation page

Clone First Navigation Row as Many Times as Needed

Same thing counts for the mobile version; you can clone the row you’ve just created as many times as needed to add the other navigation items as well. There are three things you’ll need to modify each time you add a new navigation item, let’s take a look.

Change Text Module for Menu Item

Change Link

The first thing you’ll need to change is the text and link within the Content Box of the Content tab of your navigation item Text Module.

navigation page

Change Gradient Background According to Text Length

Then, you can also change the second gradient color into ‘rgba(224,43,32,0.62)’ and change the start position value according to the length of your text.

navigation page

Change Image Module

Lastly, you can also change the image of the Image Module within that row.

navigation page

Result

Once you’ve created both the desktop and mobile version, you’ll have a stunning navigation page that looks good on desktop, tablet and phone. Let’s take a final look at the result.

Result on Desktop

navigation page

Result on Mobile

navigation page

Final Thoughts

Creating a navigation page as your homepage will definitely leave a mark on your visitors. Not only does it help your visitors navigate more visually, but it also allows them to see a more elaborated sneak peek on what your website has to offer. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Featured Image by LanKogal / shutterstock.com

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

The post How to Create a Navigation Homepage with Divi appeared first on Elegant Themes Blog.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: