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.

icon navigation page

Create New Page

Add New Page

Start by adding a new page to your WordPress website.

icon navigation page

Give Your Page a Title & Publish

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

icon navigation page

Set Page as Homepage

Go to Website Reading Settings

Then, go to the reading settings of your website.

icon navigation page

Set New Page as Homepage

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

icon navigation page

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’s Visual Builder.

icon navigation page

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.

icon navigation page

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;}

icon navigation page

icon navigation page

Let’s Start Designing!

Add Section #1

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

icon navigation page

Add Row

Column Structure

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

icon navigation page

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

icon navigation page

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.

icon navigation page

Alignment

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

  • Image Alignment: Left

icon navigation page

Spacing

Add some custom bottom margin next.

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

icon navigation page

Add Text Module

Add H1 Content

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

icon navigation page

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

icon navigation page

Sizing

Modify the sizing settings next.

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

icon navigation page

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

icon navigation page

Color

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

  • Color: #333333

icon navigation page

Sizing

Modify the module’s sizing settings too.

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

icon navigation page

Add Section #1

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

icon navigation page

Add Row

Column Structure

Continue by adding a new row to the section.

icon navigation page

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

icon navigation page

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

icon navigation page

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;

icon navigation page

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.

icon navigation page

Select Icon

Then, select an icon of your choice.

icon navigation page

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

icon navigation page

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%

icon navigation page

Background Image

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

icon navigation page

And use it in combination with the following background settings:

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

icon navigation page

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)

icon navigation page

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

icon navigation page

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)

icon navigation page

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.

icon navigation page

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

icon navigation page

Change Blurb Gradient Backgrounds

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

  • Color 1: #f9f9f9

icon navigation page

  • Color 1: #ff445d

icon navigation page

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

icon navigation page

Clone Entire Row

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

icon navigation page

Clone Blurb Module in Column 2

Clone the Blurb Module in column 2.

icon navigation page

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

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

icon navigation page

Place Color-Background Blurb Module in Column 2

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

icon navigation page

Remove Remaining Blurb Module

And delete the remaining Blurb Module.

icon navigation page

Change Blurb Content

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

icon navigation page

Change Blurb Icons

Along with the icons.

icon navigation page

Change Blurb Links

And the links too.

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

icon navigation page

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

icon navigation page

Preview

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

icon navigation page

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!

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