Different Home Page

[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!

[Tom]

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 🙂

[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?

[Tom]

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 🙂

[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

[Tom]

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 🙂

[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

[Tom]

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%;
    }
}

[Author]

Posts