The code in this download folder adds a hero image behind all site header elements in the Breakthrough Pro for Genesis.
The image can be added :
- On the front page via the customize > Hero Image upload field when the hero text widget is active.
- On any single page or post using ACF when the Unique Hero Image and Unique Hero Text contains overlaying content.
Demo Video
Shows the hero image and overlaying content behind the site header elements display the entry title over the image on single posts and pages and the hero text widget content over the front page hero image.
Tested using the Breakthrough Pro child theme by StudioPress.
Installation Steps
There’s 3 steps :
- # Copy & paste the PHP code from the functions.php file to the end of your Breakthrough Pro child themes functions file.
- # Copy & paste the CSS from the style.css file to the end of your Breakthrough Pro child themes style sheet and clear caching.
- # Using ACF, import the acf.json file.
You can then add your hero image for the front page using the customizer with overlaying text added via a Custom HTML widget in the Hero Text widget area.
Hero images and text for single posts and pages are added via the Edit Post/Page screens using the ACF input fields as seen here.
Thank you Brad! This is so helpful. Does this use two different headers? With and without a hero image?
Emily
I think you’ll need to use 2 logos as your white one will work when a hero image is added but it won’t display on a white background when there’s no hero image as the background is white by default. Or you could use 1 logo when the hero image is added and a dark text title when no image added.