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.
Create New Web page
Upload New Web page
Get started by way of including a brand new web page for your WordPress web site.
Give Your Web page a Identify & Post
Give your web page a identify and post the web page instantly.
Set Web page as Homepage
Cross to Web page Studying Settings
Then, pass to the studying settings of your web site.
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.
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.
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.
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;}
Let’s Get started Designing!
Upload Phase #1
Let’s get started developing our responsive design with Divi! Upload the primary common segment.
Upload Row
Column Construction
Proceed by way of including a brand new row the use of the next column construction:
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
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.
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
Spacing
Upload some customized backside margin subsequent.
- Backside: 10vw (Desktop), 20vw (Pill & Telephone)
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.
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
Sizing
Adjust the sizing settings subsequent.
- Width: 68% (Desktop), 80% (Pill), 88% (Telephone)
- Module Alignment: Left
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
Colour
Then, pass to the design tab and alter the icon coloration.
- Colour: #333333
Sizing
Adjust the module’s sizing settings too.
- Divider Weight: 10px
- Width: 8% (Desktop), 20% (Pill), 25% (Telephone)
- Module Alignment: Left
Upload Phase #1
Directly to the following segment! Upload a typical segment beneath the former one.
Upload Row
Column Construction
Proceed by way of including a brand new row to the segment.
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
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
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;
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.
Make a selection Icon
Then, choose an icon of your selection.
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
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%
Background Symbol
In conjunction with a background symbol. Save the next symbol for your desktop:
And use it together with the next background settings:
- Background Symbol Place: Middle
- Background Symbol Repeat: No Repeat
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)
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
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)
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.
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
Alternate Blurb Gradient Backgrounds
Then, alternate the primary colours of the gradient backgrounds of each duplicates.
- Colour 1: #f9f9f9
- Colour 1: #ff445d
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
Clone Whole Row
While you’ve finished the row, you’ll clone it solely.
Clone Blurb Module in Column 2
Clone the Blurb Module in column 2.
Position Gentle-Background Blurb Modules in Column 1 & Column 3
And position the light-background Blurb Modules in column 1 and three.
Position Colour-Background Blurb Module in Column 2
Transfer one of the vital color-background Blurb Modules to the second one column.
Take away Last Blurb Module
And delete the remainder Blurb Module.
Alternate Blurb Content material
Once more, you’ll wish to alternate the titles of each and every Blurb Module.
Alternate Blurb Icons
In conjunction with the icons.
Alternate Blurb Hyperlinks
And the hyperlinks too.
- Module Hyperlink URL: https://www.yourwebsite.com/store
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
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.
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