So you want a full-screen, modern design for your website?
But you also need a great looking sidebar to help your visitors discover important content.
Surely you can’t have both at the same time?
You can now, with the fantastic new Off-Screen Sidebar update to Thrive Theme Builder!
The new Off-Screen Sidebar lets you show your visitors a professional sidebar when they need it most, and hide it when it’s time to focus on your content or WooCommerce store.
Here’s how...
More...
What is an Off-Screen Sidebar?
Not too long ago, fixed sidebars came as standard on most WordPress blogs and themes.
This meant you had to sacrifice around a fifth of your readable content space to make way for that ever-present sidebar.
Then the fashion swung the other way, with popular publishing services like Medium.com showing the world how readable and stylish it could be without that distracting sidebar taking up space. Full-width content was all the rage.
Both of these approaches offer advantages, but for different reasons... however, it forces you to make a choice:
- Display a sidebar to help readers navigate and take action?
- Or show your content in all its full-screen glory?
But there’s a secret third option, previously available only for those with custom coding skills, or the money to hire a developer:
- Give visitors the power to show or hide the sidebar whenever they want!
Now you too can add an impressive and customizable Off-Screen Sidebar to your WordPress website, blog or WooCommerce shop with just a few clicks using Thrive Theme Builder!
Whether you call this a collapsible sidebar, a toggleable sidebar, a slide-in sidebar, a slide-out sidebar, an off-canvas sidebar... or an Off-Screen Sidebar (like we do here at Thrive Themes), you’ll find it available to use today as part of Thrive Theme Builder.
What are the Pros and Cons?
Off-Screen Sidebars introduce a whole new way of thinking for building your website, so it’s important to understand where they excel, and where you need to be aware of how they change the typical visitor experience...
Pros of Off-Screen Sidebars:
Cons of Off-Screen Sidebars:
* You can set your sidebar to be expanded by default when visitors first load the page. This ensure they are aware of your sidebar before they choose to hide it.
Using an Off-Screen Sidebar for your Blog
Using an Off-Screen Sidebar on your blog allows you to offer your audience a full-screen reading experience to showcase your great content.
On desktop screens, this lets you feature beautiful full-width images, Blocks, and other designs that better utilize the space.
On smaller devices like mobiles, where screen space really is at a premium, an Off-Screen Sidebar can let you feature a toggleable slide-in sidebar that covers the full screen, much like a classic “hamburger” menu.
But here’s where it gets even more impressive… you can choose how the Off-Screen Sidebar should behave for each device type: desktop, tablet or mobile.
Want a standard fixed sidebar on desktops but an Off-Screen Sidebar on mobiles? No problem.
This is the perfect solution for maximizing each screen size for your visitors.
Anything you can add to a standard fixed sidebar, you can also add to your new Off-Screen Sidebar. That means you can add any drag-and-drop element from the Thrive Visual Editor to build your perfect sidebar. This includes your latest articles or even an opt-in form to grow your email list.
But of course, the Off-Screen Sidebar also supports all the professionally built sidebar designs in our template library. These are perfect if you’d like a little help or inspiration to get your started.
These customizable sidebar templates are a great starting point for building a professional Off-Screen Sidebar.
Page Template Independent Sidebars
One of the really powerful things about Thrive Theme Builder is its ability to create entirely different, independent templates for each page type.
You could assign subtly or radically different designs to standard, video and audio blog posts...
Standard
Blog posts
Articles Lists
Epic guides
Video
Video tutorials and workshops
Video interviews
Vlogs
Audio
Podcast episodes
Interviews
Music tracks
But this doesn’t stop at just blog post formats – the page template concept applies to your entire WordPress website, so you can assign different sidebar types to posts, pages, archives, and any other page template.
This means you can choose exactly which page templates should feature an Off-Screen Sidebar, a standard fixed sidebar, or even no sidebar at all.
Using an Off-Screen Sidebar for your WooCommerce Store
Wait a minute, WooCommerce-ready Off-Screen sidebars?
Yes, that’s right. You can now add a professional slide-in sidebar to your WordPress WooCommerce store.
These Off-Screen Sidebars are ideal for showing off your product categories and filters, and anything else you want to add using Thrive Theme Builder’s Visual Editor.
But here’s where it gets super impressive… the new Off-Screen Sidebar can be opened using any element that supports links:
- Text Links
- Images
- Buttons
- Menu Items
- … even Content Boxes and Icons
This will allow your visitors to slide open the product filter options using an element of your choice. You’ll find this powerful option in the Animation & Action settings of any page template that features an Off-Screen Sidebar.
Setting a custom trigger for opening and closing the sidebar.
Here’s another example of how your visitors can open your Off-Screen Sidebar using the included Quick Toggle Icon - of course, you can hide this if you prefer to use another element instead.
Is an Off-Screen Sidebar Right for Your Website?
We’ve talked a lot about the exciting things you can do with the new Off-Screen Sidebar, but you should consider if this solution is right for your website design. Avoid the urge to add it to all your WordPress page templates just because you can.
Remember those two important caveats we mentioned at the start?
- You must constantly make visitors aware that a collapsed sidebar is available.
- Out of sight, out of mind… people will be less likely to see and click anything you feature in a collapsed sidebar.
So if it’s critical that your sidebar is always visible, then perhaps you’re better sticking with a standard fixed sidebar. Remember you can quickly toggle between the fixed and Off-Screen variations, so you can see which configuration works best for your content and design.
Give it a try on your Thrive Theme Builder website, and let us know what you think in the comments below!
Me encanta esta nueva opción. Felicitaciones por estar constantemente actualizando y creando nuevas características.
Happy you like it Arturo!
This is great! Quick question: Do you know how an off-screen sidebar impacts page load speed? I’m not a coder so no idea on how implementing fancier features affects this. There are so many great features with Theme Builder but I’m concerned there might be a point of diminishing returns with adding too many of them? Would be appreciate any thoughts/guidance!
Hi Sam,
This will have no more impact than a toggle element on your page 🙂
I guess an off-screen sidebar is going to be hit to page loading speed? True?
Hi Mark,
Lots of big sites are using them! This will not have more impact than a normal toggle element on your page which is negligible:
Great stuff guys.. I noticed on the blog post there was reading time in the header of the post.. Where in Thrive is this? if not which plugin was used as this is exactly what I am looking for
No plugin needed 🙂 It’s part of Thrive Theme Builder. You can learn all about it here: https://help.thrivethemes.com/en/articles/4663682-how-to-use-the-reading-progress-indicator-feature-in-thrive-theme-builder
Can the off-screen option be selected for tablet screens only?
Sure can Steven!
Good — but how does that work? Do I have to have 2 different sidebars, so I can select off-screen for Tablets for one of them and on-screen for Desktop and Mobile for the other?
Hi Steven,
No it will be the same sidebar but displayed differently.
You can start by creating your sidebar the way you want it to on desktop, then click on the tablet view (on the bottom in the middle of the screen) and select the off-screen sidebar option for that view.
Follow up to my previous comment re not able to save the sidebar customisation. Today its working perfectly so must have been a glitch somewhere at my end. Brilliant work by the development team, Thrive Suite just gets better an better.
Very cool! Is it possible to replace the open icon with vertical text like “Contact us”? If not, please add it as a feature request. I think that will make it easier for visitors to see and use the sidebar.
Hi Wouter,
No at the time that’s not possible but you can add any icon you’d like 🙂