Nest – Flyout Sliding Panels for WordPress
Nest is a light-weight WordPress plugin that allows you to add animated off canvas sliding panels to any web site. Whether you’d prefer to arrange a sliding sidebar, a sliding header or footer, and even a full-display screen flyout panel for your WordPress web site, Nest’s function set makes it an absolute and utter breeze.
Not solely is Nest straightforward to arrange and use but it surely’s additionally very customizable. For instance, you’ll be able to customise a panel’s measurement and animation pace with pixel and millisecond accuracy. And there are a lot of extra options and customization choices:
Features
- Sliding panel plugin for WordPress
- Create WordPress sliding panels to show any content material
- Site-wide panel with per-publish and per-web 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
- Smooth and stutter-free animations
- Activation choices
- Activate by way of customizable buttons
- Activate by way of customized ingredient (easy textual content hyperlink, a picture, your personal button and many others.)
- Insert activation buttons by way of shortcode (or use included positioning choices)
- Activate robotically by way of customizable time delay
- Show as soon as per browser session choice 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:
- Each sliding panel could be personalized independently for vastly totally different outcomes
- Customize web site-vast panel in actual-time utilizing the WordPress Live Customizer (per-publish/web page slides are personalized on the publish/web page’s edit web page)
- Show to all guests, or solely to logged in or logged out customers
- Clean and effectively-marked code
- Thoroughly tried and examined:
- desktop, tablets, smartphones
- iOS, Android, Windows units
- Chrome, Safari, Firefox, Edge, Internet Explorer, Opera
- Proven writer with quick and pleasant assist
- Lifetime free updates
- Jargon-free documentation
Customization
Nest’s sliding panels are effortlessly but massively customizable. Essentially each side of the looks of a panel could be personalized to your liking:
- Sliding panel:
- Customize width and peak
- Chose flyout course (prime, backside, left, proper)
- Customize slide animation pace
- Set most width for the content material contained in the panel
- Customize background colour and opacity
- Add background picture or sample and customise its opacity
- Optionally fade in content material upon panel activation
- Customize 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 totally colour customizable)
- Set customized textual content for activation button
- Change activation button textual content measurement
- Fine-tune activation button prime/left/proper/backside distance
- Position activation button prime-left, prime-proper, backside-left or backside-proper of display screen
- Give activation button absolute or mounted positioning
- Optionally enter activation buttons by way of shortcode; helpful should you’d like to position an activation button inside a publish, right into a sidebar and many others.
- Optionally conceal activation button (helpful for instances the place you wish to open a panel robotically, enter the activation button by way of shortcode or use a customized activator)
- Close button:
- 3 shut button designs (totally colour customizable)
- Position shut button prime-left, heart or prime-proper of panel
- Fine-tune shut button prime/left/proper distance
- Overlay:
- Customize overlay colour
- Customize 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 unbelievable method to show content material to your guests in a memorable means. To give some examples, you should use Nest to show a mailing listing signal-up type, 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 chance to point out a Nest panel on a particular publish or web page solely and activate it from any ingredient, robotically by way of time delay or when scrolled to an anchor, Nest may even be used to carry out a name-to-motion operate; completely unbelievable for advertising and marketing functions.
Changelog
Quick 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 potential to point out 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). Strength of blur impact could be adjusted freely - Added choice to lock web site scroll when panel opened
UPDATE 1.9 - Added choice 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 chance to animate web site content material when panel is opened/closed by making use of customized scaling and opacity to specified parts (see Example One and Example Two on demo web site) - Added anchor hyperlinks to per-publish/web page panel instruments for simpler navigation
UPDATE 1.6 - Added choice to point out web site-vast panel on entrance web page solely - Added choice 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 choice (accomplished by way of Session Storage, test browser compatibility right here: https://caniuse.com/#search=sessionstorage
UPDATE 1.5 - It is now potential 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 is 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 colour + 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-within the content material upon opening/closing of a fly-out panel (see Example Two on demo web site)
UPDATE 1.1 - Activation button: Added choices to fantastic-tune prime/left/proper/backside distance - Close button: Added choices to fantastic-tune prime/left/proper distance - Tidied up the Live Customer settings pages for simpler navigation (separated descriptions from titles + as a substitute of two sections on the Live Customizer's major web page, Nest's settings are actually positioned collectively beneath "Nest Plugin")
Please additionally contemplate our MEGA Bundle:
