Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

*This tutorial has not been tested in Divi 2.4 or above

Divi 2.0 is one of the most flexible themes I have ever worked with. There are just so many things you can do with it. It puts the power of customization into your hands.

On one particular project, I wanted to experiment with a ghost style page using Divi 2.0. Where the image is the main background above the fold. Something like this image below. Just click on it to enlarge it.

 

 

You will note that I removed the menu background so that the image starts at the top of the page and is the menu header background. Now I did not think this was the best approach for the whole site.

I figured the other pages should have the normal Divi 2.0 menu header background so as to take up minimal space on smaller devices so I wanted to keep that in mind. Just like the image below. Just click on it to enlarge it.

 

 

So the first step was that I needed to use a different logo on the homepage than I was going to be able to use on the rest of the site. This logo would be named logo2.png. and I would have to modify the header.php in order to bring that up.

So after uploading logo2 through the dashboard’s media section, I needed to find the following original logo code in the header.php file.

 

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" />
</a>

 

and then I added the following code after the original logo code.

 

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="2nd logo url" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo2" />
</a>

 

You will have to change “2nd logo url” to the actual url for logo2. And then I added the following CSS to my stylesheet.

 

.page #logo2 {display:none;}
.single #logo2 {display:none;}
.home #logo {display:none;}
.home #logo2 {display:inline;}

.home #main-header {
  background:transparent; 
  position:absolute;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.0) !important;
  -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.0) !important;
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.0) !important; 
  }

 

Now of course the last thing I needed to do was to move the main image up into the menu header area. So the first thing I did was modify the Section Module Settings CSS Class as “home-slider”

section-module

 

And then I added the following code to my stylesheet.

.home-slider {margin-top:-175px; height:800px;}

 

You will want to adjust the margin and height to place the picture exactly where you want it and to determine your backgrounds height.

Of course you will most likely have to do some tweaking for the responsive css so that you get the perfect layout on all devices. But once you have this main structure in place, the responsive codes are easy to do. Let me know how it works for you.


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2018 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest