Archived topic
hero image with text
13 replies · Started by Rich on September 20, 2018
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
So like this basically:
https://snag.gy/Mizbfc.jpg
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 :)
Awesome! Thanks
No problem!
Thanks for the example! I'll see if I can add it to the example page when I find some time :)
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
So I am also assuming for the columns:
top headline is 1 column 100%
then the second part is 2 columns?
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/
This theme is awesome!
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?
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
Right, but I want the headline to be centered, then the other text left
I just centered top div and it worked.
Thanks
No problem :)
