Nest is a light-weight WordPress plugin that allows you to add animated off canvas sliding panels to any web site. Whether or not you’d wish to arrange a sliding sidebar, a sliding header or footer, and even a full-screen flyout panel to your WordPress website, Nest’s function set makes it an absolute and utter breeze.
Not solely is Nest simple to arrange and use nevertheless it’s additionally very customizable. For instance, you’ll be able to customise a panel’s dimension and animation velocity with pixel and millisecond accuracy. And there are a lot of extra options and customization choices:
Options
- Sliding panel plugin for WordPress
- Create WordPress sliding panels to show any content material
- Website-wide panel with per-post and per-page overrides
- Optionally present panel on entrance web page solely
- Optionally conceal panel on particular posts/pages
- Apply scaling/opacity animations to specified theme content material when a panel is opened/closed
- Clean and stutter-free animations
- Activation choices
- Activate by way of customizable buttons
- Activate by way of customized aspect (easy textual content hyperlink, a picture, your individual button and so on.)
- Insert activation buttons by way of shortcode (or use included positioning choices)
- Activate routinely by way of customizable time delay
- Present as soon as per browser session possibility included
- Activate when scrolled to anchor (instance use: open panel routinely when scrolled to backside of web page)
- Deactivate by clicking/tapping the shut button, website overlay, or the ESC button
- Optionally lock physique scroll when panel open
- Massively and simply customizable:
- Every sliding panel may be custom-made independently for vastly totally different outcomes
- Customise site-wide panel in real-time utilizing the WordPress Reside Customizer (per-post/web page slides are custom-made on the publish/web page’s edit web page)
- Present to all guests, or solely to logged in or logged out customers
- Clear and well-marked code
- Completely tried and examined:
- desktop, tablets, smartphones
- iOS, Android, Home windows gadgets
- Chrome, Safari, Firefox, Edge, Web Explorer, Opera
- Confirmed writer with quick and pleasant assist
- Lifetime free updates
- Jargon-free documentation
Customization
Nest’s sliding panels are effortlessly but massively customizable. Primarily each facet of the looks of a panel may be custom-made to your liking:
- Sliding panel:
- Customise width and top
- Selected flyout course (prime, backside, left, proper)
- Customise slide animation velocity
- Set most width for the content material contained in the panel
- Customise background shade and opacity
- Add background picture or sample and customise its opacity
- Optionally fade in content material upon panel activation
- Customise styled scrollbar (change colours, thickness, roundness, distance from sides)
- Optionally show panel at specified resolutions solely
- Activation:
- Set customized time delay for computerized panel show
- Open panel when scrolled to anchor (ID/class each accepted)
- 4 activation button designs (every absolutely shade customizable)
- Set customized textual content for activation button
- Change activation button textual content dimension
- Wonderful-tune activation button prime/left/proper/backside distance
- Place activation button top-left, top-right, bottom-left or bottom-right of display
- Give activation button absolute or mounted positioning
- Optionally enter activation buttons by way of shortcode; helpful in case you’d like to put an activation button inside a publish, right into a sidebar and so on.
- Optionally conceal activation button (helpful for circumstances the place you need to open a panel routinely, enter the activation button by way of shortcode or use a customized activator)
- Shut button:
- 3 shut button designs (absolutely shade customizable)
- Place shut button top-left, heart or top-right of panel
- Wonderful-tune shut button prime/left/proper distance
- Overlay:
- Customise overlay shade
- Customise overlay opacity
- Give overlay blur impact (power freely adjustable)
- Optionally show an in depth icon when hovering the overlay (as a substitute of the default mouse cursor)
Why would a sliding panel be helpful to me?
Sliding panels, sliding bars and sliding sidebars are a improbable method to show content material to your guests in a memorable means. To present some examples, you need to use Nest to show a mailing checklist sign-up kind, alert your viewers to an upcoming occasion, introduce a product, invite suggestions out of your readers, exhibit your trip pictures, arrange a menu and so forth. You actually are solely restricted by your wants and creativeness.
With the chance to indicate a Nest panel on a particular publish or web page solely and activate it from any aspect, routinely by way of time delay or when scrolled to an anchor, Nest may even be used to carry out a call-to-action operate; completely improbable for advertising functions.
Changelog
Fast replace (no model change) - Some JS script and translation string updates
UPDATE 2.2 - Added choice to show an in depth icon as a substitute of mouse cursor when hovering the background overlay
UPDATE 2.1 - Optionally, it's now attainable to indicate a flyout panel to logged in or logged out guests solely
UPDATE 2.0 - Blur impact can now be utilized to website overlay when a panel is opened (impact proven on instance #2 of demo website). Energy of blur impact may be adjusted freely - Added choice to lock website scroll when panel opened
UPDATE 1.9 - Added possibility to cover panel at specified resolutions (helpful if you would like to cover a panel on cell screens, for instance)
UPDATE 1.8 - Added choices to completely customise the styled scrollbar (edit colours, thickness, roundness, and distance from sides)
UPDATE 1.7 - Added risk to animate website content material when panel is opened/closed by making use of customized scaling and opacity to specified parts (see Instance One and Instance Two on demo website) - Added anchor hyperlinks to per-post/web page panel instruments for simpler navigation
UPDATE 1.6 - Added possibility to indicate site-wide panel on entrance web page solely - Added possibility to cover panel on particular posts and pages
UPDATE 1.5.1 - Added 'as soon as per session' setting to the automated, time-delayed panel activation possibility (finished by way of Session Storage, examine browser compatibility right here: https://caniuse.com/#search=sessionstorage
UPDATE 1.5 - It's now attainable to have the Nest panel activate by itself when a publish or web page is scrolled to an anchor (ID/class each work)
UPDATE 1.4 - It's now attainable to have the Nest panel open routinely. For instance, the panel may be set to open by itself after 10 seconds (time delay is customizable). - Activation button can now be given absolute positioning (button both scrolls with the web page or stays on the specified place always)
UPDATE 1.3 - Added choice to customise activation button font dimension - Added choices to customise background overlay shade + overlay opacity
UPDATE 1.2 - Activation buttons can now even be entered by way of shortcodes (up to date documentation accordingly) - Added choice to subtly fade-in the content material upon opening/closing of a fly-out panel (see Instance Two on demo website)
UPDATE 1.1 - Activation button: Added choices to fine-tune prime/left/proper/backside distance - Shut button: Added choices to fine-tune prime/left/proper distance - Tidied up the Reside Buyer settings pages for simpler navigation (separated descriptions from titles + as a substitute of two sections on the Reside Customizer's principal web page, Nest's settings are actually positioned collectively beneath "Nest Plugin")
