[Resolved] hero image with text

[Rich]

Hey there,

I created an element:
Background image that is full width, goes right below nav menu.

I want to add text in that same element, that goes above background image-so image is behind text.

I want to be able to have top text be centered, then add some other text below that, which is left justified.

And also be able to add a form to that element that is right justified.

I also want this text to be responsive on mobile so that it is readable when viewed on smartphone.

Please advise

[Rich]

So like this basically:
https://snag.gy/Mizbfc.jpg

[Leo]

Hi there,

Not sure what your comfort level of coding is but it will take a bit of custom HTML and CSS to create something like that and make it look good on responsive screens as well.

I’ve marked up the basics here: https://www.screencast.com/t/MWJ9FBs5

So basically you will want one <div> for the top text marked in red, then one <div> with columns marked in green.

Columns can be created using one of these methods: https://docs.generatepress.com/article/creating-columns/

Here are some page hero examples that might help a bit: https://docs.generatepress.com/article/page-hero-examples/

If you aren’t comfortable with coding, I would highly recommend you to look into a page builder like Beaver Builder and Elementor to help to create this. It should save you lots of headaches.

Let me know if this helps 🙂

[Rich]

Awesome! Thanks

[Leo]

No problem!

Thanks for the example! I’ll see if I can add it to the example page when I find some time 🙂

[Rich]

So for the background image – do you recommend selecting it :
under page hero tab:
Background image

??

Also, where is best place to put the custom CSS?

Thanks

[Rich]

So I am also assuming for the columns:

top headline is 1 column 100%
then the second part is 2 columns?

[Leo]

Custom Image option should work for you.

Methods for CSS: https://docs.generatepress.com/article/adding-css/

Top headline shouldn’t need to be a column. 100% column = no columns.

You will also need to use media query for responsive texts: https://docs.generatepress.com/article/responsive-display/

[Rich]

This theme is awesome!

[Rich]

Hey,

So I have the columns inserted into hero section.

The 2 in the middle are at 70/30.

I want the column on left to be left justified.

Tried to add in CSS and also inline style – but won’t work.

How do I get the copy in first column to be left justified?

[Leo]

The content in page hero should align to left by default unless you set the horizontal alignment to center:
https://docs.generatepress.com/article/header-element-overview/#page-hero

[Rich]

Right, but I want the headline to be centered, then the other text left

[Rich]

I just centered top div and it worked.

Thanks

[Leo]

No problem 🙂

[Author]

Posts