Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

Fullscreen HomePage

Home Forums Support Fullscreen HomePage

Viewing 15 posts - 1 through 15 (of 41 total)
  • Author
    Posts
  • #46278
    Stephane

    Hello Tom,

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

    Thanks.

    #46360
    Tom
    Lead Developer
    Lead Developer

    Do you have any examples of full screen homepages?

    I’m sure there’s a way 🙂

    #46367
    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.

    #46856
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #46857
    Stephane

    What to say! You roooooooock!

    Thanks you very much Tom!

    #46858
    Tom
    Lead Developer
    Lead Developer

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

    #47285
    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.

    #47289
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #47332
    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.

    #47403
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #47747
    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.

    #47758
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #48637
    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.

    #48769
    Tom
    Lead Developer
    Lead Developer

    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!

    #48807
    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.

Viewing 15 posts - 1 through 15 (of 41 total)
  • You must be logged in to reply to this topic.