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

Home Forums Support How much customization does GP Mellow allow for on home page?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1497749
    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

    #1497792
    Elvin
    Staff
    Customer Support

    – 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

    A wise man once said:
    "Have you cleared your cache?"

    #1497800
    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!!

    #1497813
    Elvin
    Staff
    Customer Support

    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. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #1497835
    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?

    #1497836
    Elvin
    Staff
    Customer Support

    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. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #1497842
    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?

    #1497848
    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) ?

    #1497883
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

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