While you’re construction a web site with WordPress, you’ll at all times make a choice which web page comes first when other people discuss with your web site at once. Maximum web site creators ship guests instantly to their homepage. However you’ll additionally make a choice any other way that permits guests to select which web page in your web site they pass to first by way of including an icon navigation web page as your homepage. As soon as other people click on thru to their web page of selection, they’ll have the standard web site revel in once more with a menu bar on the most sensible of the web page that permits them to navigate to different pages. Which means they gained’t have to return to this icon navigation web page after they’ve handed it after first interplay.

On this instructional, we’ll display you the best way to create a contemporary and 100% responsive icon navigation homepage that can glance excellent throughout all display sizes. We’ll additionally will let you make this the homepage of your web site and take away the main menu bar and footer to start with interplay.

Let’s get to it!

Preview

Prior to we dive into the academic, let’s take a handy guide a rough take a look at the end result on other display sizes.

icon navigation page

Create New Web page

Upload New Web page

Get started by way of including a brand new web page for your WordPress web site.

icon navigation page

Give Your Web page a Identify & Post

Give your web page a identify and post the web page instantly.

icon navigation page

Set Web page as Homepage

Cross to Web page Studying Settings

Then, pass to the studying settings of your web site.

icon navigation page

Set New Web page as Homepage

Right here, we’re going to choose the brand new icon navigation web page because the homepage of our web site.

icon navigation page

Conceal Number one Menu Bar & Footer on Icon Navigation Web page

Cross Again to Icon Navigation Web page & Allow Divi’s Visible Builder

Now that we’ve decided on the homepage, we will be able to get started construction our icon navigation web page. Return to the web page you’ve created and turn over to Divi’s Visible Builder.

icon navigation page

While you accomplish that, you’ll get 3 chances. You’ll be able to get started construction from scratch, make a choice a premade format or clone an current web page. Make a choice the primary possibility.

icon navigation page

Upload Customized CSS to Conceal Number one Menu Bar & Footer on This Web page Simplest

As a result of it is a navigation web page, we wish the point of interest to be at the menu pieces that we create manually. That’s why we’ll disguise the main menu bar and footer in this web page. As soon as other people proceed to the web site, they’ll get the main menu bar and footer again.

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

icon navigation page

icon navigation page

Let’s Get started Designing!

Upload Phase #1

Let’s get started developing our responsive design with Divi! Upload the primary common segment.

icon navigation page

Upload Row

Column Construction

Proceed by way of including a brand new row the use of the next column construction:

icon navigation page

Sizing

With out including any modules but, open the row settings and allow the ‘Make This Row Fullwidth’ possibility within the sizing settings.

  • Make This Row Fullwidth: Sure

icon navigation page

Upload Symbol Module

Add Corporate Brand

The primary module we want on this row is an Symbol Module. Add your corporate brand so other people know they’ve landed on the proper web site.

icon navigation page

Alignment

Then, alternate the picture alignment within the design tab. Be sure you disable the ‘All the time Middle Symbol On Cell’ possibility.

  • Symbol Alignment: Left

icon navigation page

Spacing

Upload some customized backside margin subsequent.

  • Backside: 10vw (Desktop), 20vw (Pill & Telephone)

icon navigation page

Upload Textual content Module

Upload H1 Content material

The following module we want is a Textual content Module. Upload some H1 content material of your selection.

icon navigation page

H1 Textual content Settings

Proceed by way of editing the H1 textual content settings within the design tab.

  • Heading Font: Didact Gothic
  • Heading Font Weight: Daring
  • Heading Textual content Alignment: Left
  • Heading Textual content Colour: #333333
  • Heading Textual content Dimension: 5vw (Desktop), 6vw (Pill), 7vw (Telephone)
  • Heading Line Top: 0.8em

icon navigation page

Sizing

Adjust the sizing settings subsequent.

  • Width: 68% (Desktop), 80% (Pill), 88% (Telephone)
  • Module Alignment: Left

icon navigation page

Upload Divider Module

Visibility

The following and ultimate module we want on this row is a Divider Module. Make sure that the ‘Display Divider’ possibility is enabled.

  • Display Divider: Sure

icon navigation page

Colour

Then, pass to the design tab and alter the icon coloration.

  • Colour: #333333

icon navigation page

Sizing

Adjust the module’s sizing settings too.

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

icon navigation page

Upload Phase #1

Directly to the following segment! Upload a typical segment beneath the former one.

icon navigation page

Upload Row

Column Construction

Proceed by way of including a brand new row to the segment.

icon navigation page

Sizing

With out including any modules but, open the row settings and adjust the sizing settings.

  • Make This Row Fullwidth: Sure
  • Use Customized Gutter Width: Sure
  • Gutter Width: 1

icon navigation page

Spacing

Then, pass to the spacing settings and make some adjustments throughout other display sizes.

  • Backside Padding: 0.2vw
  • Left Padding: 4vw (Desktop), 2vw (Pill), 1vw (Telephone)
  • Proper Padding: 25vw (Desktop), 2vw (Pill), 1vw (Telephone)
  • Column 1 Proper Padding: 0.2vw
  • Column 2 Left Padding: 0.1vw
  • Column 2 Proper Padding: 0.1vw
  • Column 3 Left Padding: 0.2vw

icon navigation page

Customized CSS

We’re ensuring the entire columns seem subsequent to one another, even on pill and call, by way of including a unmarried line of CSS code to the principle component within the complex tab.

show: flex;

icon navigation page

Upload Blurb Module to Column 1

Upload Identify

Now we will be able to get started including our modules! Upload a brand new Blurb Module to the primary column and input a identify.

icon navigation page

Make a selection Icon

Then, choose an icon of your selection.

icon navigation page

Hyperlink

Upload a hyperlink to the module as neatly. Be sure you use the proper URL that’ll refer the guests to the web page they wish to discuss with.

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

icon navigation page

Gradient Background

Upload a gradient background subsequent.

  • Colour 1: #4b42ff
  • Colour 2: rgba(255,255,255,0)
  • Gradient Kind: Radial
  • Radial Route: Middle
  • Get started Place: 60%
  • Finish Place: 60%

icon navigation page

Background Symbol

In conjunction with a background symbol. Save the next symbol for your desktop:

icon navigation page

And use it together with the next background settings:

  • Background Symbol Place: Middle
  • Background Symbol Repeat: No Repeat

icon navigation page

Icon Settings

Proceed by way of editing the icon settings within the design tab.

  • Icon Colour: #ffffff
  • Icon Placement: Best
  • Use Icon Font Dimension: Sure
  • Icon Font Dimension: 4vw (Desktop), 6vw (Pill), 8vw (Telephone)

icon navigation page

Identify Textual content Settings

Alternate the identify textual content settings too.

  • Identify Font: Didact Gothic
  • Identify Textual content Alignment: Middle
  • Identify Textual content Colour: #ffffff
  • Identify Textual content Dimension: 2vw (Desktop), 3vw (Pill), 4vw (Telephone)
  • Identify Letter Spacing: -2px
  • Identify Line Top: 0em

icon navigation page

Spacing

And upload some customized most sensible and backside padding values for the other display sizes.

  • Best Padding: 9vw (Desktop & Pill), 12vw (Telephone)
  • Backside Padding: 9vw (Desktop & Pill), 12vw (Telephone)

icon navigation page

Clone Blurb Module Two times & Position Duplicates in Last Columns

While you’re achieved editing the Blurb Module in column 1, you’ll pass forward and clone the module two times. Position the duplicates in the remainder columns of the row.

Alternate Blurb Content material

In fact, you’ll wish to alternate the titles of each and every reproduction.

Alternate Blurb Icons

In conjunction with the icons.

icon navigation page

Alternate Blurb Hyperlinks

Fit the brand new Blurb Modules with a singular URL that ends up in the proper web page.

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

icon navigation page

Alternate Blurb Gradient Backgrounds

Then, alternate the primary colours of the gradient backgrounds of each duplicates.

  • Colour 1: #f9f9f9

icon navigation page

  • Colour 1: #ff445d

icon navigation page

Alternate Icon & Textual content Colours of Blurb Module in Column 2

And fit the Blurb Module’s icon and textual content colours with the brand new gradient background coloration.

  • Icon Colour: #000000
  • Identify Textual content coloration: #000000

icon navigation page

Clone Whole Row

While you’ve finished the row, you’ll clone it solely.

icon navigation page

Clone Blurb Module in Column 2

Clone the Blurb Module in column 2.

icon navigation page

Position Gentle-Background Blurb Modules in Column 1 & Column 3

And position the light-background Blurb Modules in column 1 and three.

icon navigation page

Position Colour-Background Blurb Module in Column 2

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

icon navigation page

Take away Last Blurb Module

And delete the remainder Blurb Module.

icon navigation page

Alternate Blurb Content material

Once more, you’ll wish to alternate the titles of each and every Blurb Module.

icon navigation page

Alternate Blurb Icons

In conjunction with the icons.

icon navigation page

Alternate Blurb Hyperlinks

And the hyperlinks too.

  • Module Hyperlink URL: https://www.yourwebsite.com/store

icon navigation page

Alternate Gradient Background of Blurb Module in Column 2

Ultimate however now not least, alternate the primary coloration of the gradient background of the Blurb Module in column 2.

  • Colour 1: #000000

icon navigation page

Preview

Now that we’ve long gone thru the entire steps, let’s take a last take a look at the end result throughout other display sizes.

icon navigation page

Ultimate Ideas

On this submit, we’ve proven you the best way to create an icon navigation web page and use it as your homepage. This way permits your guests to select which web page they navigate to ahead of they get to peer the web site’s content material. As soon as anyone’s clicked thru a menu merchandise, they’ll revel in the standard navigation thru the main menu bar once more. When you have any questions or ideas, you should definitely depart a remark within the remark segment beneath!

The submit How to Create a Responsive Icon Navigation Homepage with Divi gave the impression first on Elegant Themes Blog.

WordPress Web Design

[ continue ]