[Resolved] Changing text position in hero image

[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

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

[David]

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

[David]

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.

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

[Leo]

Does this help?
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-3-set-the-width

Let me know 🙂

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

[Leo]

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

[Barbara]

Perfect, thanks Leo!

[Leo]

Glad we could help 🙂

[Author]

Posts