How to Create a Responsive Icon Navigation Homepage with Divi

When you’re building a website with WordPress, you can always choose which page comes first when people visit your website directly. Most website creators send visitors immediately to their homepage. But you can also choose another approach that allows visitors to choose which page on your website they go to first by adding an icon navigation page as your homepage. Once people click through to their page of choice, they’ll have the normal website experience again with a menu bar at the top of the page that allows them to navigate to other pages. This means that they won’t have to go back to this icon navigation page once they’ve passed it after first interaction.

In this tutorial, we’ll show you how to create a modern and 100% responsive icon navigation homepage that will look good across all screen sizes. We’ll also help you make this the homepage of your website and remove the primary menu bar and footer at first interaction.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome on different screen sizes.

Create New Page

Subscribe To Our Youtube Channel

Add New Page

Start by adding a new page to your WordPress website.

Give Your Page a Title & Publish

Give your page a title and publish the page right away.

Set Page as Homepage

Go to Website Reading Settings

Then, go to the reading settings of your website.

Set New Page as Homepage

Here, we’re going to select the new icon navigation page as the homepage of our website.

Hide Primary Menu Bar & Footer on Icon Navigation Page

Go Back to Icon Navigation Page & Enable Divi’s Visual Builder

Now that we’ve selected the homepage, we can start building our icon navigation page. Go back to the page you’ve created and switch over to Divi and its Visual Builder.

Once you do so, you’ll get three possibilities. You can start building from scratch, choose a premade layout or clone an existing page. Choose the first option.

Add Custom CSS to Hide Primary Menu Bar & Footer on This Page Only

Because this is a navigation page, we want the focus to be on the menu items that we create manually. That’s why we’ll hide the primary menu bar and footer on this page. Once people continue to the website, they’ll get the primary menu bar and footer back.

#main-header, #main-footer {
display: none;}

Let’s Start Designing!

Add Section #1

Let’s start creating our responsive design with Divi! Add the first regular section.

Add Row

Column Structure

Continue by adding a new row using the following column structure:

Sizing

Without adding any modules yet, open the row settings and enable the ‘Make This Row Fullwidth’ option in the sizing settings.

• Make This Row Fullwidth: Yes

Add Image Module

Upload Company Logo

The first module we need in this row is an Image Module. Upload your company logo so people know they’ve landed on the correct website.

Alignment

Then, change the image alignment in the design tab. Make sure you disable the ‘Always Center Image On Mobile’ option.

• Image Alignment: Left

Spacing

Add some custom bottom margin next.

• Bottom: 10vw (Desktop), 20vw (Tablet & Phone)

Add Text Module

Add H1 Content

The next module we need is a Text Module. Add some H1 content of your choice.

H1 Text Settings

Continue by modifying the H1 text settings in the design tab.

• Heading Font: Didact Gothic
• Heading Font Weight: Bold
• Heading Text Alignment: Left
• Heading Text Color: #333333
• Heading Text Size: 5vw (Desktop), 6vw (Tablet), 7vw (Phone)
• Heading Line Height: 0.8em

Sizing

Modify the sizing settings next.

• Width: 68% (Desktop), 80% (Tablet), 88% (Phone)
• Module Alignment: Left

Add Divider Module

Visibility

The next and last module we need in this row is a Divider Module. Make sure the ‘Show Divider’ option is enabled.

• Show Divider: Yes

Color

Then, go to the design tab and change the icon color.

• Color: #333333

Sizing

Modify the module’s sizing settings too.

• Divider Weight: 10px
• Width: 8% (Desktop), 20% (Tablet), 25% (Phone)
• Module Alignment: Left

Add Section #1

On to the next section! Add a regular section below the previous one.

Add Row

Column Structure

Continue by adding a new row to the section.

Sizing

Without adding any modules yet, open the row settings and modify the sizing settings.

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

Spacing

Then, go to the spacing settings and make some changes across different screen sizes.

• Bottom Padding: 0.2vw
• Left Padding: 4vw (Desktop), 2vw (Tablet), 1vw (Phone)
• Right Padding: 25vw (Desktop), 2vw (Tablet), 1vw (Phone)
• Column 1 Right Padding: 0.2vw
• Column 2 Left Padding: 0.1vw
• Column 2 Right Padding: 0.1vw
• Column 3 Left Padding: 0.2vw

Custom CSS

We’re making sure all the columns appear next to each other, even on tablet and phone, by adding a single line of CSS code to the main element in the advanced tab.

display: flex;

Add Blurb Module to Column 1

Add Title

Now we can start adding our modules! Add a new Blurb Module to the first column and enter a title.

Select Icon

Then, select an icon of your choice.

Link

Add a link to the module as well. Make sure you use the correct URL that’ll refer the visitors to the page they want to visit.

• Module Link URL: https://www.yourwebsite.com/homepage

Gradient Background

Add a gradient background next.

• Color 1: #4b42ff
• Color 2: rgba(255,255,255,0)
• Gradient Type: Radial
• Radial Direction: Center
• Start Position: 60%
• End Position: 60%

Background Image

Along with a background image. Save the following image to your desktop:

And use it in combination with the following background settings:

• Background Image Position: Center
• Background Image Repeat: No Repeat

Icon Settings

Continue by modifying the icon settings in the design tab.

• Icon Color: #ffffff
• Icon Placement: Top
• Use Icon Font Size: Yes
• Icon Font Size: 4vw (Desktop), 6vw (Tablet), 8vw (Phone)

Title Text Settings

Change the title text settings too.

• Title Font: Didact Gothic
• Title Text Alignment: Center
• Title Text Color: #ffffff
• Title Text Size: 2vw (Desktop), 3vw (Tablet), 4vw (Phone)
• Title Letter Spacing: -2px
• Title Line Height: 0em

Spacing

And add some custom top and bottom padding values for the different screen sizes.

• Top Padding: 9vw (Desktop & Tablet), 12vw (Phone)
• Bottom Padding: 9vw (Desktop & Tablet), 12vw (Phone)

Clone Blurb Module Twice & Place Duplicates in Remaining Columns

Once you’re done modifying the Blurb Module in column 1, you can go ahead and clone the module twice. Place the duplicates in the remaining columns of the row.

Change Blurb Content

Of course, you’ll need to change the titles of each duplicate.

Change Blurb Icons

Along with the icons.

Change Blurb Links

Match the new Blurb Modules with a unique URL that leads to the correct page.

• Module Link URL: https://www.yourwebsite.com/about

Change Blurb Gradient Backgrounds

Then, change the first colors of the gradient backgrounds of both duplicates.

• Color 1: #f9f9f9

• Color 1: #ff445d

Change Icon & Text Colors of Blurb Module in Column 2

And match the Blurb Module’s icon and text colors with the new gradient background color.

• Icon Color: #000000
• Title Text color: #000000

Clone Entire Row

Once you’ve completed the row, you can clone it entirely.

Clone Blurb Module in Column 2

Clone the Blurb Module in column 2.

Place Light-Background Blurb Modules in Column 1 & Column 3

And place the light-background Blurb Modules in column 1 and 3.

Place Color-Background Blurb Module in Column 2

Move one of the color-background Blurb Modules to the second column.

Remove Remaining Blurb Module

And delete the remaining Blurb Module.

Change Blurb Content

Again, you’ll need to change the titles of each Blurb Module.

Change Blurb Icons

Along with the icons.

Change Blurb Links

And the links too.

• Module Link URL: https://www.yourwebsite.com/shop

Change Gradient Background of Blurb Module in Column 2

Last but not least, change the first color of the gradient background of the Blurb Module in column 2.

• Color 1: #000000

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Final Thoughts

In this post, we’ve shown you how to create an icon navigation page and use it as your homepage. This approach allows your visitors to choose which page they navigate to before they get to see the website’s content. Once someone’s clicked through a menu item, they’ll experience the normal navigation through the primary menu bar again. If you have any questions or suggestions, make sure you leave a comment in the comment section below!