[Resolved] How much customization does GP Mellow allow for on home page?

[Matt]

Hi there, I’m wondering how much power I have over customizing my (static) home page, with my vision in mind:
– First off, please take a look at this site. I love the way they have a heavily designed header, particularly the cloud illustration they use.
– Not only that, but they have it near the footer, too.
– Now if you look at my site (attached as private) , you’ll see I just have a horizontal line segmenting my header and the main part of my page (the container, I think? I don’t know what the background is officially called, behind the container…)
– How can I customize the aforementioned horizontal line with a bit more flexibility than my current?
– How can I increase the width of the container here, so it takes up more space? It just looks scrunched – I want to take up more real estate and have less white space.
– Theoretically, could I incorporate elements similar to the cloud illustrations all around, as a background to the container/background? I’ve only seen how to make it a solid color in the Customizer. But I think if I could design something in Illustrator and upload that image as the background, things may get better.

Overall, I just feel confused/restricted by the header versus container versus background, and would like to incorporate some design creativity into making my home page look a lot more polished.

Sorry it’s a long one — any and all advice is so welcome. 🙂
Matt

[Elvin]

– First off, please take a look at this site. I love the way they have a heavily designed header, particularly the cloud illustration they use.

This is easily doable w/ Header Element. Brief explanation is added later on this same reply.

– Not only that, but they have it near the footer, too.

This can definitely be done too by hooking custom HTML using Hook Element found on Appearance > Elements.

– Now if you look at my site (attached as private) , you’ll see I just have a horizontal line segmenting my header and the main part of my page (the container, I think? I don’t know what the background is officially called, behind the container…)

The white horizontal line is added on your menu items as a border.

The background section you see is called Page Hero. It is added to the site by creating a Header Element on Appearance > Elements.

– How can I customize the aforementioned horizontal line with a bit more flexibility than my current?

Can you explain a bit more about “flexibility”?

– How can I increase the width of the container here, so it takes up more space? It just looks scrunched – I want to take up more real estate and have less white space.

I’m not sure I get which container you’re pertaining to. Can you specify?

If it’s the content container, Go to Appearance > Customize > Layout > Container and increase the Container Width.

If that doesn’t work, perhaps the site is using a Layout Element. You can check this through Appearance > Elements.

– Theoretically, could I incorporate elements similar to the cloud illustrations all around, as a background to the container/background? I’ve only seen how to make it a solid color in the Customizer. But I think if I could design something in Illustrator and upload that image as the background, things may get better.

You can add vector images on a

as a background-image that is absolute positioned elements on your Header Element.

If you inspect your reference site, they are literally don’t the same thing.

Overall, I just feel confused/restricted by the header versus container versus background, and would like to incorporate some design creativity into making my home page look a lot more polished.

Perhaps you’ll be enlightened a bit more if you inspect your reference site too.
https://developers.google.com/web/tools/chrome-devtools

[Matt]

Elvin, thank you so much. There’s a lot of information to unpack here (thanks to my long question, sorry) so please give me some time to study everything you’ve suggested. But thank you so much, I really appreciate the help.

As for the two bits of clarification that I should provide:

Can you explain a bit more about “flexibility”?

Yep, sure. I just meant the cloud illustration (or some illustrated divider other than the harsh border. But you answered this elsewhere.

and

I’m not sure I get which container you’re pertaining to. Can you specify?

If it’s the content container, Go to Appearance > Customize > Layout > Container and increase the Container Width.

If that doesn’t work, perhaps the site is using a Layout Element. You can check this through Appearance > Elements.

Yes you’re correct, I think I was referring to the Container. I suppose I’ve just been struggling internally with what Container width to go with, to suit all screen widths and device types. Is there a “best practice” ? 1500px just seems to slim, but perhaps it’s because I’m on my monitor.

Anyway — I will unpack all the helpful tips you’ve given me and get back to you with any questions I might still have.

THANK You!!

[Elvin]

Is there a “best practice” ? 1500px just seems to slim,

This is pretty subjective. It’s all about how much space you want for it.

To be honest, I think 1500px is already pretty wide. Unless of course you’re viewing things on 4k resolution screens. But I don’t think that 4k screens users are the majority of internet users so I think anything between 1080px – 1600px should be fine.

Elvin, thank you so much. There’s a lot of information to unpack here (thanks to my long question, sorry) so please give me some time to study everything you’ve suggested. But thank you so much, I really appreciate the help.

No problem. Have fun figuring things out. 🙂

Feel free to open new topics if you have any other questions. 😀

[Matt]

Okay great — I will resolve this topic, since you’ve already given me so much, and open up a new one for any follow-up questions, then?

[Elvin]

Okay great — I will resolve this topic, since you’ve already given me so much, and open up a new one for any follow-up questions, then?

If its a follow-up question related to this topic, you can ask it here. 🙂

But for completely unrelated issues, it’ll be best to open a new topic to avoid mixing things up. 😀

[Matt]

Hey Elvin,

Let’s just continue here. Sooo I have redesigned a completely new background image (page hero?), but I’m having trouble making it overlay against the container. Please see my website.

No matter how much I adjust the padding of the page hero, or the background position, or anything, I can’t get it to work just right.

ANy ideas?

[Matt]

Is the solution to focus on design an image (that I add in-line, to the Container) rather than designing the background image too much (in the Page Hero) ?

[Elvin]

but I’m having trouble making it overlay against the container.

I’m not sure I understand what you meant by this.

Did you mean: You want to move the container further down so it doesn’t overlap against the page hero section?

If so, you’ll have to remove this CSS code from Appearance > Customize > Additional CSS:

@media (min-width: 769px)
.page-hero + #page {
    margin-top: -100px;
}

[Author]

Posts