This tutorial provides details on displaying Post Title and Post Info on Featured Image below header with parallax effect on single Posts in Parallax Pro.
For Posts that have a Featured image, the featured image will appear as the background for the section below header.
For Posts that do not have a Featured image, a default image will appear.
Summary of steps:
- Register Single Parallax Section widget area
- Create a shortcode that outputs the URL of author page for the entry author. This is needed because
Sridhar Katakamused by
genesis_post_info()does not work outside the loop.
- Set the URL of Post's featured image (if present) as background image for
.single-parallax-sectionin a .js file.
- Simulate Parallax effect on
.single-parallax-sectionby changing the background position on scroll in the .js file.
- Hook a function to
single-parallax-sectiondiv having Post title and Post info.
- Customize entry meta in the entry header using genesis_post_info filter, essentially to replace
- Load the .js file on single Posts. If the Post has a featured image, pass its URL to the js file using
- Add styling.
Add the following in Parallax Pro's functions.php:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.