Fullscreen HomePage

[Stephane]

Hello Tom,

Do you think that GeneratePress can be a starting point to create a fullscreen homepage ?

Thanks.

[Tom]

Do you have any examples of full screen homepages?

I’m sure there’s a way 🙂

[Stephane]

Yep! This kind of thing could be great!

Like this by example :
http://dragonfly.influencethemes.com/index.php

With a parallax image effect perhaps.

Like this :
http://www.pixelglow.ro/themes/crafto-html/

https://www.brainstormforce.com/demos/ultimate/

More example on WrapBootstrap but not working today.

[Tom]

You can build something quite similar using the new version of our Page Header addon.

I released a new version today that I need to do a video for, but play around it and I think you’ll figure it out.

The “Container Layout” can be set to Fluid, and then you can add an image and your own content. Set the top/bottom padding to create the height, and you’re pretty much there.

The only thing that would need some custom CSS is having the header/navigation be transparent and fixed at the top of the screen, which isn’t very hard at all 🙂

[Stephane]

What to say! You roooooooock!

Thanks you very much Tom!

[Tom]

You’re welcome! Let me know how it goes 🙂

[Stephane]

Hi Tom,

I try to make it but I think I miss something.

When you talk about using the container layout, is it by the personalize wordpress menu or by the GP premium add-ons ?

Thanks,
Stephane.

[Tom]

It’s an option inside the Page Header metabox.

You can see it in the screenshot of the metabox on this page: http://generatepress.com/downloads/generate-page-header/

The “Container type” option.

Let me know if this helps or not 🙂

[Stephane]

Ok. I have perform something. You could have a look at : http://dev.proteo-interactive.com/

Some comments :
– I try to put the navigation width to “dynamic/fullwidth” and I don’t see a difference with “contained”: is it normal ? ;
– The background image is not displayed in totality. I can’t see how to fix it. Have you got an idea ? ;
– Could you think that I can make a transparent header ?

Thanks,
Stephane.

[Tom]

Almost there 🙂

1. It doesn’t look like the header has a background color, which is why you can’t see the difference between contained and fluid.

2. background-size:cover tries its best to cover the entire container with the image without stretching or causing any distortion which can make it so the image doesn’t always display fully. We could change that to background-size: 100% auto – which would show 100% of the image’s width, but wouldn’t cover the container fully vertically. Or we could try background-size: 100% 100% – which would show the image 100% width and 100% height, but that could cause stretching and distortion. Kind of a tough thing to do – I usually prefer background-size: cover;

3. This CSS should work – but you’ll have to set the header layout to “Fluid” in the Customizer as well:

.home .site-header {
    background-attachment: fixed;
    background-image: url("http://dev.proteo-interactive.com/wp-content/uploads/2014/11/cropped-20141003_141112_RichtoneHDR.jpg");
    background-size: cover;
}

Let me know if this works or not 🙂

[Stephane]

Thanks Tom.

1. So the option only have an effect on the background width (fullwidth or contained). I thought that the option can affect the position of the logo and the menu to push them to the side of the page.

2. and 3. in progress!

Thanks.

[Tom]

1. That’s correct, that option determines whether the area is within the container, or full width of your browser. Not sure what you mean by pushing them to the side of the page?

Let me know 🙂

[Stephane]

Here the result on the playground! I love it!

Some works to come :
– fixing the header when scrolling ;
– changing background from transparent to flat when scrolling ;
– Perhaps resizing the header when scrolling.

I have checked the parallax effect on this page. I’m not sure it is working fine?

Thanks Tom.

[Tom]

Awesome!

Adding a fixed header may be a future add-on, will definitely look into it.

Not sure what you mean by changing the background from transparent to flat while scrolling?

For a true parallax effect, a slight resize on scroll is definitely needed – will be adding this to the next version of Page Header.

Thanks!

[Stephane]

Yeah! Sound Good!

For the header it is like this : https://www.brainstormforce.com/demos/ultimate/

When you scroll, the header background is passing from transparent background to color background.

[Author]

Posts