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

Different Home Page

Home Forums Support Different Home Page

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #159639
    Sarah

    I’m a bit of a beginner, hoping you can help.

    I want to create a home page for my site that looks different from the other pages. Here’s what I’d like it to contain:
    -menu navigation
    -site title and tagline
    -full size image (much wider than the current cropped header image, which is great for the other pages but I want to see it full size on the home page)
    -footer

    Can I do this easily with GeneratePress? I have purchased the premium add-on package.

    Site currently lives here: http://37.60.244.91/~abbycrad/blog/

    Thank you!

    #159643
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    What would be different about it vs the other pages? Navigation position?

    Any example of a full size image being used on a website you like?

    Let me know – I’m sure I can help 🙂

    #159644
    Sarah

    Thanks! I guess I wasn’t clear. I don’t want any content on the home page, just the image. A bit like the wordpress.com Obsidian theme: https://theme.wordpress.com/themes/obsidian/

    Does that make sense?

    #159721
    Tom
    Lead Developer
    Lead Developer

    Ah, in that case I would use our Page Header add-on.

    Set an image, then add some content.

    Set it to full screen and vertically centered content.

    Then if it’s the homepage, add this CSS to hide the rest of the site:

    .home .container {
        display: none;
    }

    That should get you on your way 🙂

    #160454
    Sarah

    Thanks, Tom! The website looks almost exactly as I want it to right now but – of course – there’s an issue with the responsiveness of the home page image.

    Can you recommend a fix that will make the main image on the homepage resize proportionately on mobile devices? Right now, we only see a piece of face and none of the text on phones, and on tablets the text is cut off in a strange place.

    Thank you so much for your help,
    Sarah

    #160470
    Tom
    Lead Developer
    Lead Developer

    Unfortunately there’s no real way to make a background image behave nicely on mobile.

    That’s why background images are usually patterns, or images which can be cut off without losing the purpose.

    In your case, I would make the text a separate layer, and set it on top of the background image as a regular image element.

    This would make it view-able on all devices, even as the right side of the background image disappeared.

    Let me know if that makes sense or not 🙂

    #161579
    Sarah

    I *think* I get what you’re saying. I’m almost there, but I’d love to be able to center the text over the right third of the image. I’ve tried so many different positioning options, and it either looks dumb on my desktop or the mobile, never decent on both! Any advice??

    Thank you!!
    Sarah

    #161589
    Tom
    Lead Developer
    Lead Developer

    Currently it looks great to me on both, but you don’t want the text to be centered on desktop?

    You could try something like this:

    @media (min-width: 1025px) {
        .home .inside-content-header {
            text-align: right;
            padding-right: 10%;
        }
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.