Toolset Blocks 1.1.1 – Beautiful Responsive Design Made Easy

toolset-blocks-frontpage-old-desktop.png

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:

Desktop design

Toolset Blocks 1.1.1 – Beautiful Responsive Design Made Easy 1

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.

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.

Grid Block settings

Grid Block settings

What makes Toolset’s Grid block so great?

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.

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.

Toolset Blocks 1.1.1 – Beautiful Responsive Design Made Easy 2

The option to hide a Toolset block on screen sizes of your choice

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.

Toolset Blocks 1.1.1 – Beautiful Responsive Design Made Easy 3

Reminder icon for hidden element

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.

This post was first posted here.


Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.
Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
Pixallus Website Giveaway

We understand COVID has created shifts in many people’s lives. That’s why we’ve decided to giveaway a fully functional website with all the tools you

Read More »
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »
sendinblue