In this tutorial I show how we can slide out the contents of a widget area when visitors scroll to the bottom of pages in Genesis.
In this example we are going to show Genesis eNews Extended plugin's widget in the slide out box. The box will slide back off the screen when the visitor scrolls up. Clicking the Close button will close the slide out box as expected.
The solution is based on the Ultimate NYTimes jQuery Slidebox.
(scroll down to the bottom of page to see opt-in slide out)
Summary of steps:
- register a custom "Slide Out Box" widget area
- load the required jQuery code in footer
- output the html of "Slide Out Box" widget area usingÂ
wp_footerhook - populate the "Slide Out Box" widget area
Step 1
a) Create a file named say, end-of-page-slide-out-box.js in child theme's js directory (create, if not existing) having the following code:
I would like to know how can I make this a little taller.
https://www.scotbirchfield.com/about/
Seem a tad bit smaller don’t you think?
I do not see the sliding out happening. The “Special Deal” content is just sitting static at the bottom left of page.
I had to clean out the cache. But it should
be working now
I was able to get it taller by adding a
The code got stripped out. But whatever you did, it’s looking good now.
Just wrapped the text in a
Special Deal <— decided to use h5 instead of the title block/
Don’t forget to ask about my special price for shooting Boudoir session!Special Price