This tutorial enables you to add a hero image with overlaying content behind your site header and nav menu like this :
Tested using the latest version of the Genesis Sample child theme by StudioPress, this solution works with or without Gutenberg blocks on the home page.
Demo Video
Shows a full screen width image behind the site header and menu in the Genesis Sample theme. Shows the image can be changed using the Hero Image setting in the customizer. Displays HTML content from the Hero Text widget area.
Installation Steps
There’s 4 steps :
- # Upload the files named front-page.php and hero.js to the your theme folder like this :
- # Copy & paste the PHP code from functions.php file to the end of your Genesis Sample themes functions file
- # Copy & paste the CSS from the style.css file to the end of your themes style sheet and clear caching.
- # From your WordPress Dashboard, go to Appearance > Widgets and copy the demo HTML for the hero text into a HTML widget in the Hero Text widget area.
Once you’ve completed the steps, you can then add a image using the customizer or upload an image file named hero.jpg directly to your child themes images folder.
Was This Tutorial Helpful?