[Resolved] How to add an header image on the homepage

Home Forums Support [Resolved] How to add an header image on the homepage

Home Forums Support How to add an header image on the homepage

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #254020
    Pietro

    Hi,
    sorry but I spent lot of time just trying to add an image header on my site.

    My website has an image header in the top, without Site title, site tagline and logo. I already disabled all them, but I can’t find how to add an image, nor the suggested size of the image header to upload.

    This is the website: http://www.sr22bond.info/

    Thanks for any help!

    #254021
    Leo
    Staff
    Customer Support

    Hi Pietro,

    You can add header image in Customizer > Background Images > Header.
    Looking at your current header space, a 940×80 image would fit perfectly.
    You cal also adjust that space in Customizer > Layout > Header > Header Padding to fit the desired image.
    Let me know if you need more help.

    #254078
    Tom
    Lead Developer
    Lead Developer

    Uploading it as a background image can cause issues on mobile as the aspect ratio changes.

    Instead, I would upload it as a logo in “Customize > Site Identity”.

    #254087
    Pietro

    Uhm… I already did what suggested in the first answer, and I’m not getting trouble from mobile. But, just in case, I will try todo what you just suggested.

    Thanks

    #254088
    Tom
    Lead Developer
    Lead Developer

    Doing it as a logo will mean you can set your header padding to all 0’s as well, instead of using a large value like 200.

    #254105
    Pietro

    No!
    With the second option (Customize > Site Identity) I have big problems on mobile! I see a page that can be wide no more than 10 or 20 Px!!

    (see image)
    https://dl.dropboxusercontent.com/u/32794771/screenshot.jpg

    But doing in the other way (Customizer > Background Images > Header), I don’t see any problem from pc or mobile.
    Maybe I should leave these settings.

    Pietro

    #254130
    Tom
    Lead Developer
    Lead Developer

    That looks like an issue with your content padding, not the header?

    Setting your content padding (Customize > Layout > Container) to something high like that will definitely cause mobile issues.

    Mobile specific spacing options are on the way, but for now to get the kind of effect you’re looking for without making your content padding so high, you should do this:

    .no-sidebar .content-area {
        max-width: 600px;
        margin: 0 auto;
    }

    Adding CSS: https://generatepress.com/knowledgebase/adding-css/

    #254427
    Pietro

    Terrible results for mobile view!

    Sorry but I’m 2 days “fighting” with your time just for set “basic” options, options that usually are easy to set even in the free themes.

    My site it’s a really simple site: one image header on the top, only one column, no sidebars, no featured images/post, nothing of graphic effects, I only need the site is well visible from PC and mobile (more than 60% of my traffic is from mobile).

    With the Leo solutions (Customizer > Background Images > Header —- You cal also adjust that space in Customizer > Layout > Header > ) this is the result:
    http://mobiletest.me/iphone_5_emulator/?u=http://www.sr22bond.info/ (Mobile view of one website)

    and with the solution from Tom I get this result:
    http://mobiletest.me/iphone_5_emulator/?u=http://www.sr22insurancealaska.org/ (Mobile view of another website).

    In both version the header image disappear.
    First version, the site is unreadable at all!
    Second version, the text is too sticky to the borders.

    Both version, terrible quality of results.

    So disappointed…

    #254429
    Tom
    Lead Developer
    Lead Developer

    Sorry you’re disappointed – I’m trying to help πŸ™‚

    First site

    The issue with the content is your content padding set in “Customize > Layout > Container”.

    You have 150px of padding to the right and 150px of padding to the left.

    Imagine a mobile phone with a width of 400px, and you’re using 300px of padding.

    Solution: Set the content padding to something much smaller, like 40px: http://www.screencast.com/t/WUgqmeUl

    There are better ways to add that much spacing to the sides of your content that I’m happy to help with.

    Header disappearing

    This is happening because you’ve enabled the mobile header in “Customize > Layout > Header”: http://www.screencast.com/t/LmoVpkjud

    The mobile header disables the regular header and makes it more narrow. You can see it in action here on this site.

    Solution: Disabling the mobile header completely if you want your regular header to appear.

    I’m more than happy to work with you to achieve what you’re looking for if you are πŸ™‚

    #254442
    Tom
    Lead Developer
    Lead Developer

    BTW, you’ve inspired me to finally add a mobile content padding option for the next version: http://www.screencast.com/t/1LDWlonU

    Hopefully my previous post is helpful πŸ™‚

    #254505
    Pietro

    Almost nothing change also after your last suggestions…

    SECOND SITE
    Before I posted 2 live mobile screenshot of 2 different websites. THe second website had already the 40 px content padding you are talking. I don’t see the problem of the first website (content padding too big), but I keep seeing the text sticked to the borders (same problem of before of the second website).
    http://mobiletest.me/iphone_5_emulator/?u=http://www.sr22insurancealaska.org/

    Header disappearing
    I disabled the mobile header completely, now I see the title of the site but I still don’t see the image header
    http://mobiletest.me/iphone_5_emulator/?u=http://www.sr22insurancealaska.org/

    #254510
    Lyle

    Pietro,

    One other thing I noticed is that the image you have in the header is 1200 x 275 which is way larger than the header size of 940 x ~215.

    Also, this may be a time when you want to look into using a page builder (the free version of Elementor was used in this example) πŸ™‚ I was able to recreate the site’s basic design in about 5 minutes, including resizing the header image which I set as the logo (as suggested) using the Customizer for GP. Below are the results πŸ™‚

    Desktop:

    Mobile:

    Cheers!
    Lyle

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #254515
    Tom
    Lead Developer
    Lead Developer

    That looks much better to me now: http://www.screencast.com/t/GvtFp8N4

    The header is displaying the image, and the content is no longer so squished that it’s hard to read. Are you wanting less space between the edge of the phone and your content?

    #254610
    Pietro

    @Lyle Even a page builder? For a, really, very basic and minimal site design? Incredible…

    The only reason I have chosen to buy a premium plugin/theme and not using one of the thousands free themes is because Generatepress is really fast to load, responsive and (I was thinking before…) with the possibility of modify everything in a easy way. As I wrote before, my site is very minimal and I think most of the free themes can fit for it.
    But I never thought I had to use lot of CSS codes, other plugins, even a page builder….
    Probably it was a wrong purchase, just for my situation.

    Anyway thank you very much for your efforts and help

    P.

    #254700
    Tom
    Lead Developer
    Lead Developer

    Hi Pietro,

    Is something not right about how your site is now? Looks good to me on desktop and mobile? Also doesn’t look like it required any custom CSS to get there?

    Of course, if you’re not happy just let me know and I’ll issue a refund πŸ™‚

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