Nest is a light-weight WordPress plugin that permits 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 on your WordPress web site, Nest’s characteristic set makes it an absolute and utter breeze.
Not solely is Nest simple to arrange and use but it surely’s additionally very customizable. For instance, you possibly can customise a panel’s measurement and animation velocity with pixel and millisecond accuracy. And there are lots 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 disguise 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 through customizable buttons
- Activate through customized factor (easy textual content hyperlink, a picture, your individual button and many others.)
- Insert activation buttons through shortcode (or use included positioning choices)
- Activate robotically through customizable time delay
- Present as soon as per browser session possibility included
- Activate when scrolled to anchor (instance use: open panel robotically when scrolled to backside of web page)
- Deactivate by clicking/tapping the shut button, web site overlay, or the ESC button
- Optionally lock physique scroll when panel open
- Massively and simply customizable:
- Every sliding panel could be personalized independently for vastly totally different outcomes
- Customise site-wide panel in real-time utilizing the WordPress Reside Customizer (per-post/web page slides are personalized on the put up/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 units
- Chrome, Safari, Firefox, Edge, Web Explorer, Opera
- Confirmed writer with quick and pleasant help
- 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 could be personalized to your liking:
- Sliding panel:
- Customise width and peak
- Selected flyout course (high, 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 measurement
- Superb-tune activation button high/left/proper/backside distance
- Place activation button top-left, top-right, bottom-left or bottom-right of display screen
- Give activation button absolute or fastened positioning
- Optionally enter activation buttons through shortcode; helpful if you happen to’d like to put an activation button inside a put up, right into a sidebar and many others.
- Optionally disguise activation button (helpful for circumstances the place you need to open a panel robotically, enter the activation button through shortcode or use a customized activator)
- Shut button:
- 3 shut button designs (absolutely shade customizable)
- Place shut button top-left, middle or top-right of panel
- Superb-tune shut button high/left/proper distance
- Overlay:
- Customise overlay shade
- Customise overlay opacity
- Give overlay blur impact (energy freely adjustable)
- Optionally show a detailed 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 implausible approach to show content material to your guests in a memorable method. To present some examples, you need to use Nest to show a mailing record sign-up kind, alert your viewers to an upcoming occasion, introduce a product, invite suggestions out of your readers, showcase your trip images, arrange a menu and so forth. You actually are solely restricted by your wants and creativeness.
With the likelihood to indicate a Nest panel on a particular put up or web page solely and activate it from any factor, robotically through time delay or when scrolled to an anchor, Nest may even be used to carry out a call-to-action operate; completely implausible for advertising functions.
Changelog
Fast replace (no model change) - Some JS script and translation string updates
UPDATE 2.2 - Added choice to show a detailed icon as a substitute of mouse cursor when hovering the background overlay
UPDATE 2.1 - Optionally, it's now potential to indicate a flyout panel to logged in or logged out guests solely
UPDATE 2.0 - Blur impact can now be utilized to web site overlay when a panel is opened (impact proven on instance #2 of demo web site). Energy of blur impact could be adjusted freely - Added choice to lock web site 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 cellular screens, for instance)
UPDATE 1.8 - Added choices to totally customise the styled scrollbar (edit colours, thickness, roundness, and distance from sides)
UPDATE 1.7 - Added chance to animate web site content material when panel is opened/closed by making use of customized scaling and opacity to specified components (see Instance One and Instance Two on demo web site) - 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 (performed through Session Storage, verify browser compatibility right here: https://caniuse.com/#search=sessionstorage
UPDATE 1.5 - It's now potential to have the Nest panel activate by itself when a put up or web page is scrolled to an anchor (ID/class each work)
UPDATE 1.4 - It's now potential to have the Nest panel open robotically. For instance, the panel could 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 measurement - Added choices to customise background overlay shade + overlay opacity
UPDATE 1.2 - Activation buttons can now even be entered through 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 web site)
UPDATE 1.1 - Activation button: Added choices to fine-tune high/left/proper/backside distance - Shut button: Added choices to fine-tune high/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 predominant web page, Nest's settings are actually positioned collectively beneath "Nest Plugin")
