How to Create a Navigation Homepage with Divi

Posted on November 11, 2017 by in Divi Resources | 19 comments

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

19 Comments

  1. Not familiar with a navigation home page. Would this be a one page website?
    Do you have a live link?

  2. These really are top quality tutorials, Donjete, and long may they continue. 🙂
    But looking at the bigger picture, I am confused by the lack of both a demo page and a layout download link. Going forward, could these both be offered as standard ?

    • I too would like to see a demo page, and have the layout link, for those that dont want them, just dont download them. For the rest of us that keep asking, could you please provide them after all you created them already in order to give us this tutorial. Would really appreciate it.

      Love the idea of the menu page, but not yet seeing where I might use it! Great tutorial thanks heaps

    • Layouts I’d like to see these perhapse incorporated in a future pack, but I’m okay with them not being tied to the tutorials, but a demo page would be a great help in some of them.

  3. Great tut as always.
    1) Disregard the lazy mouth breathers that want demo pages and json files. Make them work for it 😉
    2) do you find you’re doing less mockup work in photoshop and more in Divi? I’d really like to hear your thoughts on how you’re approaching mockups these days. I’ve worked with graphic designers that simply do not understand how to design for themes like Divi and it leaves me frustrated. However, it is a real challenge to identify which aspects of the design should be handled in photoshop and which in Divi.

    • I would love a tutorial on how to use Photoshop for a mock-up like you suggest, I love Photoshop but have never tried to alter a web page inside it, but eager to learn how to do that with divi.

    • Emilio, I agree, the point of the Tuts is to learn how to use Divi and for all of those clamoring for .json files are missing a wonderful opportunity to learn something.
      Donjete, I love the tuts keep them coming they are appreciated!
      I get loads of graphic designers sending me their “Photoshop designed” websites and few understand how a web site, especially a WordPress site, is build, so more often than not, the design is slightly different from what the designer intended.
      I hardly use PS for mockups anymore but I think that’s just due to experience and understanding what I can do with Divi.

    • Donjete Vuniqi

      Thank you, Emilio! For the designs that I make, I don’t use Photoshop in advance. Divi has sort of become ‘my Photoshop’ in that aspect. The more you get familiar with its options, the easier it is to experiment with it as you would do with Photoshop.

  4. Love all the time and programming required to get up and running with Divi; this tutorial which takes about 45 minutes was very instructive—leave ease to Wix, we love the complexity of divi!

  5. Looks good!

  6. Wow !!!! is Amazing !!! excellent work and thanks for sharing.

  7. some of other themes does not have this option. this is the main problem for themes. i want to buy this themes now thank you so much for clarifying

  8. Would you advise on building a separate page for mobile and desktop?

  9. Another Divi/Donjete tut filled with awesomeness. I ‘m with Emilio. BTW Ive been a Graphic Designer and Photoshop user for almost 30 years. I never use PS to mock up or design web pages.I use it for content creation only.

  10. Thanks Donjete for this tut.
    My webdesign workflow was : paper, Photoshop, Divi.
    Now it’s : paper and Divi.
    I use Photoshop only when the client absolutely requires to see a static template before deciding.
    The force be with you 🙂

  11. Hi there,
    Thanks for another awesome tut!
    I’m not sure if it’s just me but I struggled to get the layout the same as the screenshots. I altered several settings and now it works perfect. If anyone else is struggling this is what I did to get it to work:
    – In the row settings I made the custom width 80% instead of the given 100%.
    – In the text modules I gave the left margin -20% (the screenshots show -20% but the written description gives -20px)
    I hope this helps someone.
    Thanks again!

    • yes thank you Lynne ^^

  12. hi,
    thank you very munch. Your tuto its constructed good and it is very easy to reproduce the design. Not need of .json. nevertheless he would be interesting to see example of this technique around different theme.

    have a nice day

Leave a Reply

Comments are reviewed and must adhere to our comments policy.

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest