[Support request] Change text position on homepage hero image

[Max]

Hi, total noob here.

Could you help me work out how to change the text position and buy now button position which sits on top of the homepage hero image (I haven’t been able to find any support topic on it)?

I installed the Target theme from the site library. I want to move the text over the top of the hero image (dirt bike rider image) so it appears at the centre top of the image, and more text at the centre bottom of the image with the buy now button.

I’ve tried using padding but that just zooms in on the image and only works to an extent. I’ve been able to move the top words up with padding but not the bottom buy now/words down low enough.

Could you please provide noobie specific instructions on how I could do this simple task? Thanking you in advance.

[David]

Hi there,

any chance i can see the site ? Looks like its behind a coming soon – you can provide temporary login details in the Private Information field

[Max]

Hi, Details provided in private section below. Cheers

[Elvin]

Hi there,

I’ve tried checking the home page but here’s what I see on my end.
https://share.getcloudapp.com/wbuKgDL0

I’ve also tried looking for the page mentioned but the credential seemed limited for me to find the said page.

Can you set it on your end so we could see the hero image in question?

Let us know.

[Max]

I have fixed the access. It is the draft homepage. Thanks so much.

[David]

If you select the Container Block and edit the Spacing > Padding, you can reduce the Bottom Padding Value.

To put space between the top heading and text below, simply select the Headline H1 Block and increase its Spacing > Bottom Margin

[Max]

Hi, each time I try this I find it zooms in on the background image for some reason and so as the picture gets bigger the placement doesn’t end up moving lower and I get less of the picture in the frame.

I’ve also tried adding a spacer between the H1 heading and the text below and find the same issue.

Am I doing something wrong?

[David]

Any changes you make to the height of the container will affect the size of the background image.
Its a case of offsetting padding and spacing.

Currently you have 250px bottom padding on that container.
If you changed that 50px then add 200px to the bottom margin of the top Headline Block, then the height of the container would remain the same.

[Max]

Thanks – that has helped me in the right direction. For some reason I can’t get it exactly right but I think I’m close enough now. Thank you.

Would you also know how I could make the top of page menu thinner when viewed on a standard webpage?

[David]

You can change the Menu Item Height in Customizer > Layout > Primary Navigation, you can set this for desktop and then switch to Mobile view to set it differently for mobile.

You also have Cuostomizer > Typography > Primary Navigation where you can adjust font sizes and weights etc.

[Max]

Worked perfectly. Thank you David for all your help. Very much appreciated.

[David]

You’re welcome

[Author]

Posts