Adding an offscreen content area with a toggle to a Genesis Theme
The latest Genesis Infinity Pro theme has a top right toggle icon which allows for some off screen content to come into prominence in the viewport, this can be great for lead capture, ecommerce, contact details etc
Here is how you can add this to the Sample Theme, also should work ok in other Genesis themes too.
Basically you’ll need to add some snippets to functions.php, some CSS styles to style.css and add and enqueue a javascript file.
Add in OffScreen Content Functions
Here the scripts are being registered for the Ionicons and for the Javascript – offscreen.js
A widget area is being registered ‘offscreen-content’ which will appear in the Widgets area ready to add in whatever content you want – this will be the offscreen content that can be toggled.
The third function adds the markup only if the widget area is populated, you can also change the icons in here by adjusting the code, you don’t have to use Ioncions you can equally use fontawesome or dashicons.
Add in OffScreen CSS
Add in the offscreen content CSS in your themes style.css
Add in OffScreen Javascript
This is the javascript for which you will have to make a file in your theme’s /js folder called offscreen.js and add in the JS code.
That’s it, the code used is from Infinity Pro with a couple of tweaks, the usage works well in mobile as well as desktop.
