[Resolved] Changing text position in hero image

Home Forums Support [Resolved] Changing text position in hero image

Home Forums Support Changing text position in hero image

  • This topic has 9 replies, 3 voices, and was last updated 2 years ago by Leo.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #923252
    Barbara

    Hi,

    I’d like to change the position of the text in the hero image – in this case the text “Come join us on Sunrise…” in the middle of the image: https://sunriseadventureboat.com.

    In documentation I only found instructions to change position by changing padding in Elements but this also changes the size of the image while I would like the size to stay the same and change the text position only.

    I would also like to move the logo and menu a little bit lower inside of the hero image (not with header padding because then it creates a grey area above since it’s outside of the image).

    Can you please tell me if I can do that and how?

    I find confusing all the different places where we set different paddings – some in customisation area, some in Elements area… I’m getting lost which does what and it’s a bit unpractical to keep switching between them.

    Thanks in advance for your help!

    Kind regards,
    Barbara

    #923297
    Barbara

    Another question… I can’t seem to change the size of the first line in hero image. It’s normally Heading 1 but when I change the size in Typography > Headings, it doesn’t do anything. I can change height, margin, text transform, weight… everything but size. When I change the size nothing happens.
    The second line is Heading 2 and changing size works.

    Also, how do I change the color and hover color of the “Explore” button? Changing color under Colors > Buttons doesn’t work.

    Thanks!

    #923300
    David
    Staff
    Customer Support

    Hi there,

    1. In your header element you have 15% top padding and 15% bottom padding. So a total of 30%.
    As long as the two remain a total of 30% then the background will remain the same size. So you could do 20% top and 10% bottom and this would move the text lower down. Or the other way around to move it up.

    2. We would need a little CSS to shift the nav down, so add this to your Customizer > Additional CSS:

    .header-wrap #site-navigation {
        margin-top: 15px;
    }
    #923303
    David
    Staff
    Customer Support

    3. The H1 text has some CSS applied to it for the Header Element. In Additional CSS look for this:

    .hero-headline {
        font-size: 34px;
        letter-spacing: 6px;
    }

    You can either delete it entirely, or just change the font-size property.

    4. The button is a custom styled button, so more CSS. Again in Additional CSS look for this:

    /* Hover colors */
    .button.ghost:hover,
    .button.ghost:active {
        color: #ffffff; /* Change text color */
        background: transparent;
        border: 2px solid #08cec7; /* Change border color */
    }
    
    /* Static colors */
    .button.ghost,
    .button.ghost:visited,
    .button.ghost:focus {
        color: #ffffff; /* text color */
        letter-spacing: 1px;
        background: transparent; /* Makes background transparent */
        border: 2px solid #ffffff; /* Sets border color and thickness */
        padding: 8px 20px;
        margin: 10px;
        border-radius: 6px;
        transition: all 0.6s ease 0s;
    }

    I have added comments in the code above to show the lines to change.

    #923543
    Barbara

    Thanks David, worked perfectly.

    Another (unrelated) question: How can I limit/determine the width of the content without affecting header and menu width? Now when I go to Layout options > Container Width, it changes the width of both, header and content but I would only like to change content width.

    #923563
    Leo
    Staff
    Customer Support
    #923565
    Barbara

    Hi Leo,

    Thank you but these instructions seem to only explain about “rough” width options that spread over the whole page or not, I can’t find instructions on how to change/control width more precisely.

    Anyway, I think I found what I was looking for in Content Padding inside Container options. I increased Right and Left Padding and it works.

    However, now there’s another option I can’t find… how do I remove the Menu Title in the middle of the photo/header? Here’s a screenshot:
    https://screencast.com/t/LiqYUAkq

    Thanks!

    #923569
    Leo
    Staff
    Customer Support

    I believe that’s added with the template tag {{post_title}} in the page hero content:
    https://docs.generatepress.com/article/header-element-template-tags/

    If you don’t want any content, make sure to add some HTML as suggested here:
    https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-1-add-the-content

    #923587
    Barbara

    Perfect, thanks Leo!

    #923598
    Leo
    Staff
    Customer Support

    Glad we could help 🙂

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