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.
Add in OffScreen Content Functions
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
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.