multiscroll is a jQuery plugin by Alvaro Trigo to create divided multi-scrolling pages with two split vertical layouts or panels. In this tutorial we shall
- register a multiscroll Custom Post Type having two custom fields, Left Image and Right Image
- create a custom Page template having the code to dynamically pull in the Left Image and Right Image image fields from multiscroll CPT. We shall set up two while loops to arrange the markup needed for multiScroll jQuery script (enqueued)
- add CSS to fix header at top and footer at bottom of the page.
- apply the template to a static Page
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Step 1Install and activate Pods. Create a new CPT with
Multiscrollas the Singular Label and
Multiscrollsas Label. In Advanced Options untick the support for Editor. Add two mandatory "File / Image / Video" type fields called
Step 2Add new entries at Multiscrolls > Add New and upload your desired left and right image for each.
Step 3Upload jquery.multiscroll.min.css to child theme's css directory (create, if not existing) Upload jquery.multiscroll.min.js to child theme's js directory. Create a file named say, multiscroll-init.js in the same location having the following:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.