Creating a Header Layout Using The DIVI/Extra Layout Plugin

by | May 30, 2017 | Divi Theme Tutorials | 0 comments

In my first article I looked at the layout injector and standard menu module plugins. Now for my second article I hope to inspire your creative ideas further by showing off a couple of layouts along with a special section showing on how to get the Woocomerce shopping cart along with search into the standard width menu plugin.

First Layout

 

This is the look at the layout on the front end I want to build for you.  This is a boxed layout with only two sections here.and three modules.   The default menu gets saved here.

Now this is how looks in the back end:

 

 

We have two sections and three modules with a small bit of custom CSS.  Now lets take a closer look at each section.

Save

The First Section:

Special Section Settings:

 

 

This is to get rid of the spacing.

Special Row Settings:

 

 

More spacing removal.

Text Module Advanced Settings:

 

 

More spacing.  Font I did use in the example was permanent marker.

Save

The Second Section:

For this section I did 1/4 3/4 section.

The first part has an image module with a logo I created for some fictional company. The image module here is just a basic image module.  I selected no lightbox and no animation as a selection. The other side is a just a text module here.  Now the text module does include Font Awesome icons here.  I used the free WP Font Awsome plugin with the text module. This plugin is hear to create a unique section you just can’t get in DIVI.  Now here is one look at the module in detail:

 

 

We have a triple column here inside of a necessary div tag so we can get the column widths right .  We have an ordered list.  We have a list item with an id. The id here make sure were are displaying each item inline and that we are not showing a bullet point for each list item, We have font awesome HTML. We have a second div with a tiny bit of style here just so we have some spacing between font awesome icon and the text.   It is basic,  but gets the job done.

Now in General settings I did set disable on Phone in order to make the header area smaller.

Now in advanced settings the padding top area gets 10px just for spacing reasons.

Save

Save

Needed CSS:

This is all the needed CSS for this to work.

.et_fixed_nav #main-header, .et_fixed_nav #top-header {
margin-top:-75px;
position: relative;
}

li#inlineme{
vertical-align: text-top;
display: inline-block;
Max-width:210px;
}

.et_fixed_nav.et_show_nav #page-container {
padding-top: 0px!important;
}

div.spcspacing div.one_third{ width:33.3%!important; margin-right:0%;}

@media only screen and (min-width: 981px)
{
#logo {display:none;
max-height: 100%;
}
}

The CSS…

Forces the header to the top, removes the logo from the menu, moves the menu up to the right place in the header, gives us the right width for the list items in the header.

The Second Section:

What if you needed to display something else than what I did.  Here are some plugin suggestions:

 

Stock Ticker — For a finance based site you could have ticker at the very top of the screen

Awesome Weather Widget–For a resort based site you might want to display local weather.

Superslim Bloom Optin Form—  Get people to signup for a news letter.

Ajax Search Light–Maybe you want to go more powerful with your search.

Second Layout

While coming up with this article I thought you could also do this very simple idea here that is also a boxed layout.  A single row three column layout for desktop.  Social media module on the left.  Logo module in the middle.  The third one is empty. The second row is a fullwidth menu module that is a mega menu that only gets displayed on desktop.  The third row though is a full width menu that only gets displayed on tablet and mobile phones

My inspiration for this layout idea came from this recent blog post.  As you can see from the link his header area is default DIVI, but very naked.   So I say a simple layout like this would look amazing using his menu idea,  I skipped over all the hamburger menu stuff from that tutorial and left it with just some simple text.

Now here is a look at the layout:

This is a basic layout and below I am going to show you what I did to create that layout.

The First Section:

Special Section Settings:

and…

This gets rid most of the spacing and gives us a transparent background.

Special Row Settings:

Just getting rid of more space.

Special Module Settings:

None for Social media follow.

For Image module:

Just no animation and we have a centered aligned image.

The Second Section:

The Desktop Menu Section Settings:

Just removing most of the spacing.

Fullwidth menu general settings:

And.

And this one Advanced setting.

The lone bit of custom CSS for this module:

What happens here is the full width menu gets shoved to the right.
The menu and background are transparent.
The menu is disabled on phone and tablet.
The dropdown menu color is white.
The margin-top is a big negative here using the same logo from the first layout I did.  If you have a logo that was more rectangle in shape that number would need to be a whole lot less.

The Third Section:

The Desktop Menu Section Settings:

Just getting rid of all the spacing.

Fullwidth menu settings:

The only thing here is I selected a different menu to display. One that was simpler and one that was not a mega menu.

Adding Shopping Cart And Search With Menu Module

In this section I am briefly going to talk about some FREE plugins that you can use in order to get search and the woocommerce cart icon in the menu module and fullwidth menu module.  This can give you a fullwidth menu that can look like this:

Shortcodes in Menu

Now this free plugin does one thing and one thing and one thing only.  It gives you a new menu option called Shortcode.  Just insert your shortcode in the big text area and you are good to go.  If it is a short enough of a shortcode put in the title box above so you know what that menu is.

As old as this plugin is it still works just fine.

Woocommerce Menu Cart

Now this free plugin with a premium option that allows you to insert the woocommerce cart icon into the menu along with some other functions.   After install if you are using woocommerce you are going to see a menu option under woocommerce called menu cart setup.

Now you do not need the shortcodes in menu plugin I discussed above to use this plugin.  All you are going to do through the option panel is select the menu you want to show the cart up on and how you want the cart to look.

The premium version of this plugin does allow you to add in the cart to more than one menu if you really need that functionality along with some other functions.

Advanced Woo Search

Although this is only for woocommerce if you needed to insert a search bar just for that you can in the menu with the shortcode they include

Ajax Search Lite

This search plugin is way more powerful than the Advanced Woo Search plugin as it can search anything, but this plugin also includes a shortcode you can use.

Download Both Layouts

Okay so I have shown you a couple layouts and some extra ideas on what you could do to make a header layout using the DIVI / Extra Layout Injector plugin.  I am letting you have both layouts for free.

Coming up next from me:   The right way for now to add in more columns to your website and the tutorial on how you can create even more column combinations.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

RECENT POSTS

Possibilities Divi Child Theme Installation Instructions

Pre-installation preparation: * Install and Activate recommended plugins from the repository. - Caldera Forms by Caldera Labs - WP Video Lightbox by Tips & Tricks HQ * Enter your Google Map API key into the Divi Theme Options Step 1: Unzip The child theme package...

Sarasota Blog Divi Child Theme Installation Instructions

Pre-installation preparation: * Install and Activate recommended plugins from the repository. - Caldera Forms by Caldera Labs - WP Video Lightbox by Tips & Tricks HQ * Enter your Google Map API key into the Divi Theme Options Step 1: Unzip The child theme package...

Lauderdale Divi Child Theme Installation Instructions

Pre-installation preparation: * Install and Activate recommended plugins from the repository. - Caldera Forms by Caldera Labs - WP Video Lightbox by Tips & Tricks HQ * Enter your Google Map API key into the Divi Theme Options Step 1: Unzip The child theme package...

Save

Pin It on Pinterest

Share This