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

First of all, this is not another post about how ghosts are taking over the internet so if that’s what you are looking for you can leave this post now.

And if you are wondering why you never heard about ghosts taking over the internet, then perhaps you just found your niche blog because I haven’t either.

laughing animated photo: Laughing Chimp Laughing-chimp-gif-animation.gif

 

Okay now that you know why I am a designer and not a comedian let me explain what a ghost landing page is.

It is a term that was given to pages that typically have a huge image taking up the whole screen with text, menus, logos and even call to action buttons that have a transparent feel. No solid background colors covering up the image.

Take this page I did for Nick Lemau for example…

home-landing

 

So in this tutorial I want to show you how you can recreate this effect in Divi. And I want to show you how you can have a header menu background start off transparent and fade to a darker transparent color once you begin to scroll down.

Here is the demo page that we will be re-creating in this tutorial. http://www.quiroz.co/2014-Demo/

012

 

So Let’s begin!

Add The Landing Image To Your Divi Page

 

1. Open up your home page and create a new Section and insert a Single Column

001

 

2. Open up the section module settings and  choose the background image you want to use. This image should be at least 1920 x 1080 if you want it to take up the whole screen of a large monitor and still have good resolution.

002

 

3. While you are still in the settings panel go ahead and give the section a unique CSS ID. I used home-landing-section in my example.

003

 

 

4. Once you have saved your settings you can insert a module. It can be a call to action module, image module or simply a text module. For this example I will use a text module and add an image.

004

 

5. Change Text Orientation to Center and go ahead and give it a unique CSS ID. In this example I will use home-landing-text-module.

005

 

6. At this point you page might look something like this depending on your existing content and menu settings and before we start adjusting height, placement and the header menu.

006

 

 

Change Menu Transparency and Move Landing Section Up Behind Header

 

1. Go to your Divi theme ePanel . Go to Appearance>Divi Theme Options

slider 95

 

2. Scroll down to the bottom of the page down to the Custom CSS panel where you will copy this CSS and paste it into that ePanel in order to move the image up behind the menu.

.home-landing-section {height:1000px; top:-80px; }

 

3. Just below that you will add this to change the header background to a transparent color and the second line makes the background a little darker when you scroll down.

/*original state*/
.page #main-header, .post #main-header, .single #main-header {background-color:rgba(31,31,31,1)!important;}
.home #main-header{ 
background-color: rgba(31,31,31,0.00) !important;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0); 
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0); 
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0);}

/*scrolling state*/
#main-header.et-fixed-header {background-color: rgba(31,31,31,0.6) !important;}

The above code is set to make this transition on only the homepage. I assume the other pages wont have this ghost style. If they do just remove line 02 above and remove .home in line 03.

 

4. Now lets give that menu some colors that stand out and match our theme style.

/*Menu*/
#top-menu a {color: #fff!important;}
#top-menu a:hover {color: #ef4a4a!important;}
#top-menu li.current-menu-ancestor > a {color: #ef4a4a!important;}
#top-menu li.current-menu-item > a {color: #ef4a4a!important;}
#et_search_icon {color:#fff!important;}
#et_search_icon:hover {color: #ef4a4a!important;}

 

5. This following snippet will make sure your sub-menu matches the color scheme above. Remember you can just replace the color codes with your own colors.

/* Sub-Menu */ 
#top-menu li li a {color:#ededed!important;}
#top-menu li li a:hover {color:#ef4a4a!important; background:#1e2024!important;}
.nav li ul {background: rgba(30, 31, 34, 0.73)!important;}
.sub-menu {border-color:#ef4a4a!important;}
#et_search_icon {color: #cfcfcf!important;}

 

6. Now let’s go ahead and move that image I added in the text module down a little bit.

/* Landing Page Text Module Image */ 
.home-landing-text-module img {padding-top:300px;}

 

7.  Now you will notice there is a large gap between this first landing section and the next section. What you will need to do to remove that gap is give the second section a unique CSS Class and then give it a negative margin of -80px. Your code will look something like this…

.your-new-section-name {margin-top: -80px;}

 

8. Good Job – Now you page should look something like this. Pat yourself on the back

007

 

Side Note: You may have to experiment with the mobile/responsive layouts. You can change the height of the landing page section and the padding above the logo by using the above elements within the responsive elements as listed below. You can simply add the modified code in the section listed as .your-custom-class-id {your modified code:xxxxx;} in the examples below.

/*------------------------------------------------*/
/*---------------------[RWD]----------------------*/
/*------------------------------------------------*/

/* LAPTOP (981-1100) */
	@media only screen
	and ( min-width: 981px )
	and ( max-width: 1100px ) {
	.your-custom-class-id {your modified code:xxxxx;}
	}

/* TABLETS (768-980) */
	@media only screen and (max-width : 980px) {
	.your-custom-class-id {your modified code:xxxxx;}
	}

/* MINI TABLETS (480-767) */
	@media only screen and ( max-width: 767px ) {
	.your-custom-class-id {your modified code:xxxxx;}
	}

/* CELL PHONES */
	@media only screen and ( max-width: 479px ) {
	.your-custom-class-id {your modified code:xxxxx;}
	}


 

Optional 1 – Alternative modification to make sure the header modifications are restricted to the homepage.

Go to where you placed this code from the above tutorial…

#top-menu a {color: #fff!important;}
#top-menu a:hover {color: #dbdbdb!important;}
#top-menu li.current-menu-ancestor > a {color: #dbdbdb!important;}
#top-menu li.current-menu-item > a {color: #dbdbdb!important;}
#et_search_icon {color:#fff!important;}
#et_search_icon:hover {color: #dbdbdb!important;}

And replace it with this…

.home #top-menu a {color: #fff!important;}
.home #top-menu a:hover {color: #dbdbdb!important;}
.home #top-menu li.current-menu-ancestor > a {color: #dbdbdb!important;}
.home #top-menu li.current-menu-item > a {color: #dbdbdb!important;}
.home #et_search_icon {color:#fff!important;}
.home #et_search_icon:hover {color: #dbdbdb!important;}

And now you can remove this one all together

.page #main-header, .post #main-header, .single #main-header {background-color: rgba(31,31,31,1)!important;}

 


Optional 2 – Remove the Home Page Menu Button on the Home Page Only

Since we are aiming for a minimalist ghost style, then why not remove the home menu button on this homepage only. Heres how you can do that.

 

1. Using Chrome Dev Tools, right click on the Home page menu item and select Inspect Element.

008

 

2. You will see in the Elements screen what the menu item id number is. On our page it is menu-item-1370. It is different for each site so look closely at the image attached to see where you will look to find yours.

009

 

 3. Now go back to your ePanel and add this code. Remember to replace the menu id with your own specific menu item id.

/*Remove Home Menu Item On Homepage Only */
.home .menu-item-1370 {display:none!important;}

 


Optional 3 – Expand Logo and Main Menu All The Way to the Right and Left of the Screen

I recently posted a tutorial on moving the header logo all the way to the left of the screen and moving the header menu all the way to the right of the screen.

It is what I did on the Nick Lemau website and I think it’s perfect for a ghost styled landing page. You can view those instructions here.

 


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


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest