We’re thrilled to announce a new set of features that would help you get the most out of Stackable, quickly create pages, also help out potential clients and help you discover and learn Stackable easier.
In this article you’ll discover:
- Full Page Templates — complete page layouts in one click
- Design System Style Guide — a live visual preview of your design system
- Interactive Onboarding Tours — interactive step-by-step learning right inside the editor
Full Page Templates
Finally, Full Page Templates are now available in Stackable!
Full Page Templates allow you to quickly transform blank pages into professional layouts instantly with a single click. Unlike our individual patterns that focus on specific sections, these page templates provide entire page structures, ready-to-use and adjust to your Block Theme and Design System as well.
When you open your Design Library, you’ll notice a new set of tabs – you’ll now see a “Patterns” tab, and a new “Pages” tab. The Pages tab gives you access to 40 Full Page Templates ranging from templates for landing pages, about us pages and more.
If you have utilized the Global Color Schemes in the Stackable Design System (you should!), then you can use them to further adjust your Full Page Templates!
When you insert a Full Page Template, you will be prompted to either replace the whole content of your post, or just append the design.
It’s important to note that you’re not locked in to the template you want to use. Every template is fully customizable after insertion, so you can change/delete/add portions freely.
Design System Style Guide
When you open the Design System, you’ll now see a new button labelled “Preview Design System”. When you click on it, the Style Guide will open, it’s a new interactive popup preview that shows exactly how your global colors, typography, buttons, and spacing will look across all your site.
The Style Guide is a useful tool for adjusting your Design System. Whenever you change something in your Design System, the Style Guide updates live and shows you a real-time visual feedback on how your changes actually impact your blocks and site.
Lastly, the Style Guide is very helpful if you have clients and you want to share with them your Design System. On the very top of the Style Guide, just click the Export as Image button, and the whole Style Guide will be downloaded as a PNG image into your desktop.
New Interactive Onboarding Tour
You will see new Onboarding Tours added in the Getting Started screen of Stackable that you can choose from. If you choose one, the block editor will open and a walkthrough will open which will help you get to know the different features and best practices with Stackable.
We gamified these tours a little to make it a bit fun, If you’ve finished doing a tour, a checkmark will appear on the tour button.
Learn by doing with tours that highlight specific interface elements, panels, and controls as you follow along. You can start with the basic concepts, and progress through more advanced features.
We’ve added 3 tours so far:
- Build a page in seconds using the Design Library
- Exploring the Stackable block settings
- Apply Global Styles instantly
We plan to provide more tours in the future, as well as premium-specific tours so you can get the most out of your subscription.
Other Improvements
We’ve also fixed a few notable things in Stackable, mainly:
- Fixed a number of JavaScript editor warnings
- Fixed issue where columns can overlap when a carousel block uses infinite scrolling
- Fixed some minor accessibility issues in some blocks
- Dragging of the color picker in the Global Color Palette is better
- Better permissions for editor Rest API endpoints
Conclusion
We have quite a lot of improvements in this release of Stackable, and I hope that you continue to enjoy them. I particularly like the onboarding tours since there are a lot of things inside Stackable that people might not have been aware of.
If you have suggestions, or find some things particularly difficult to do in Stackable, maybe we can make a tour for it!
