Toolset Blocks 1.1.1 – Beautiful Responsive Design Made Easy
We’re happy to announce Toolset Blocks 1.1.1. This release gives you everything you need to build beautiful and fully responsive designs with Toolset and the WordPress Block Editor.
It’s easiest to explain “responsive design” using an example. Look at our own homepage and how it’s improved with Toolset Blocks 1.1.1.
Control the appearance of any element for different screen sizes
See how the “phone screen” design for our homepage improved with Toolset Blocks 1.1.1:
Old design – phone
New design – phone
The old design used the same font size for the header on both desktop and phone screens. You can see that while the header looks fine on desktop, it looked too large on a phone screen. The new design uses a smaller font size for tablets and even smaller for phones.
How did we achieve it?
Toolset Blocks 1.1.1 allows you to design every element for different screen sizes.
The heading block with settings for desktop screens
The heading block with settings for phone screens
You will see the screen size selector when you edit any block coming from Toolset. Now, you can fully control the appearance of any block for different screen sizes.
Create responsive columns and grids
Columns are a big challenge on narrow screens. While several columns fit nicely on a desktop screen, on phone screens, typically only one column will fit. And since almost every design needs columns, it’s a big deal for responsive design.
Toolset Blocks 1.1.1 offers its own Grid block. You can use it for simple columns and for complex grids.
What makes Toolset’s Grid block so great?
1) Convenient controls over columns width
Click between any two columns to resize them. Set different column sizes for different screen widths.
2) Accurate setting for column and row gaps
You have full control over the gap (space) between columns and rows.
3) Different column per screen size
On wide screens, place several columns. On tablets fewer and usually, one column is great for phone screens.
4) “Reverse column order” for sensible image positions
This feature allows you to control when “floating” images appear on phones. Reverse the column order for right-floating images to come before the text on phones.
5) Use the Grid block in pages and in Views
The goodies of the Toolset Grid block are also available when you create Views. The new grid layout makes your Views look great on narrow screens.
6) Protects you from losing content when reducing the column count
When you reduce the number of columns, your content automatically shifts.
7) Clean and conflict-free CSS
The Grid block generates dynamic CSS based on your settings. This results in tiny CSS that works perfectly with any theme and other plugins.
8) Auto-adjusts to screen width
Use the screen-width control at the top of the editor to view your design on different screen sizes. The grid shifts automatically as the screen size changes.
You guessed right. The grid above is created with Toolset’s Grid block. View this post on your phone and see how it looks 🙂
Hide elements when they don’t make sense
Many designs use fancy (and pretty large) images. These images often look great on a desktop but don’t contribute much on phones. Toolset Blocks 1.1.1 allows you to hide any element on different screen sizes.
All elements showing
No image on phone screen
You can see that the big image that we’re hiding on the phone is really not needed. The design works better without it (less scroll to get to the point).
To achieve this, you’ll find a “Display” control when editing any element.
Switch to the target screen size on which you don’t want to show an element and hide it.
But wait. There’s more!
Once you’ve hidden an element, Toolset helps you remember that it’s there, just hidden.
Click on the reminder icon to edit the element’s settings. There, you can quickly unhide it.
Download and Update
We push out Toolset releases gradually. If your sites haven’t received this update yet, give it some time and you’ll see the update in a few days.
To skip the queue and get the update right away, to the Plugins –> Add New page, click the Commercial tab and then click the Check for updates button.
You can also download the plugins manually by going to your Toolset account and clicking Downloads.
Don’t forget to backup your site before updating.
Feedback? Questions? Suggestions?
Are you already using Toolset Blocks to build websites? What do you think about the new responsive features in this release?
Please leave comments with your questions, ideas, and suggestions and we’ll get back to you.