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.

[code]
.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%;
}
}
[/code]

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:

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.