The code in this download folder enables you to select the template named Hero After Header Image from any Edit Page screen and add a unique image behind your page title.
If none added, you can upload an image named hero.jpg to your Winning Agent Pro themes images folder and select that as the default image in customize > Default Hero Image.
Demo Video
Shows the Hero After Header Image template displaying a background image behind the single page entry title when added using ACF or WordPress custom fields or using the Default hero image added via the customizer.
Tested using the Winning Agent Pro child theme for Genesis.
Installation Steps
There’s 4 steps :
- # Upload the file named hero.php and the folder named after-header to your Winning Agent Pro theme folder like this :
- # Copy & paste the PHP code from the functions.php to the end of your Winning Agent Pro themes functions file.
- # Copy & paste the CSS from the style.css file to the end of your Winning Agent Pro themes style.css file and clear caching.
- # Optional : You can install the Advanced Custom Fields ( ACF ) plugin and go to your WordPress Dashboard > Custom Fields > Tools and import the acf-102103.json file or you can use WordPress custom fields as seen in the demo video which doesn’t require the installation of any plugins.
# Image Height
To reduce the height of the background image displaying behind your pages entry title, you can swap out the jQuery in after-header.js file located inside the after-header folder to this :
And change the 0.5 to adjust further. This will change the height by half.
If you want to reduce the image height by 65%, change the 0.5 to 0.35.
Leave a Reply
You must be logged in to post a comment.