Better Responsive Controls, Better List Block Icons and Low-Highlight Effect

Better Responsive Controls, Better List Block Icons and Low-Highlight Effect

Last Updated on June 7, 2021

Today we have a handful of updates: we’ve improved the responsiveness across all our blocks, we’ve added a brand new Low-Highlight text format, enhanced the icons in the Icon List Block, and added support for Kadence Theme global palette. Now in Stackable v2.10.0

Here are the things you’d expect when you update Stackable:

Improved Responsive Controls

Block responsiveness is always a challenge and we’ve been continuously improving how our blocks adapt for different device screens.

Stackable blocks have always been responsive. You can edit desktop, tablet or mobile block properties by simply clicking the responsive toggles found in our options. The last update also brought Live Responsive Editing which took responsive controls to the next level!

However, people have been pointing out to us that after designing their blocks to make them look great in desktop screens, there was a tendency for the blocks to appear broken in tablets and mobile screens. 😯

We’ve been investigating this issue for quite a while now, and we think we’ve pinpointed a few key issues that cause this and addressed them in this update.

Improvement #1: Some Desktop Styles Will No Longer Automatically Apply to Tablet and Mobile

I don’t want to bore you with a lot of details, so I’ll be quick, the issue is that some block options get applied both in large screens and in smaller screens. This normally doesn’t pose a problem, but for some design controls is can mean disaster for small screens.

Here’s a simple example to show the problem. Let’s say you have a Card block and then you added some huge paddings inside it. It might look great in desktops, but here’s what happens when you slowly resize the window to see what it looks like in tablet and in mobile screens:

Clearly, this looks wrong. To fix things, you’d have to dive into the tablet or mobile settings for the paddings and tweak them. This works, but that additional step to further refine for tablet and mobile isn’t second nature to most people. And more often than not, pages are left with huge paddings in mobile.

To address this issue, we’ve adjusted some styling options so that they won’t apply their desktop styles automatically to tablet and mobile screen sizes.

Here’s the new behavior of the same Card block above:

In tablet and mobile mode, the paddings reverted back to the default size.

Much better!

This new behavior only applies to styles which may cause issues in smaller screens. Think of options like paddings or maximum content widths.

If you’re worried about what might happen to your current page designs after updating, don’t be! All your previously created pages will remain the same. This new behavior will only apply for new or updated pages.

Improvement #2: Styles Now Show the Current Value

A concern has been raised a number of times before in the Stackable Community in Facebook that the default values in range controls are always blank. And because of that, you wouldn’t know what the actual default value was.

“Does blank paddings mean that the block had 0 paddings?” was a common question. Sometimes, a blank doesn’t mean the value was0, in some paddings for example, it may mean 35 pixels.

In this update, almost all of the number fields will now show the default values. Now you won’t have to second guess whether you need to remove a padding or not. 😎

Improvement #3: Tablet and Mobile Options Are Now Blank to Signify a Default Value

Continuing on from the previous improvement, tablet and mobile values were sometimes hard to set. Sometimes, they showed a 0 value, but in reality, the value wasn’t zero, instead the value is inherited from the desktop value. This made tablet and mobile values hard to change since typing in zero won’t have any effect.

We’ve changed things, and to make things consistent, now all tablet and mobile values show up as blanks. Now you can set any value (including setting it to zero), and they should now work. Then if you want to reset it to the default, then just put in a blank value (or hit the reset button).

This makes for a much more easy editing experience all throughout, and we’re excited for you to try it!

New: Low-Highlight Text Format

In Stackable, we have a button in your toolbar that allows you to turn any text into highlighted text. While this is helpful, we’ve expanded this and added in a new format style called low-highlight text (sometimes called half-highlights) which I think was popularized by Squarespace.

I find this low-highlighted text very appealing and I’m excited to see whether you can put it to use in your website headings.

Can’t achieve what you want with your Gutenberg blocks?
Get the most powerful page building blocks with Stackable!
Learn more about Stackable Premium.

Icon List Block Icon Enhancements

When we notice something being requested again and again by our users (that’s you!), we take that as a signal to add that feature in. It’s a great feedback system, so if you have any suggestions, let us know in the comments at the end of this post.

We have gotten a lot of requests to allow any icon for the Icon List block, and to allow different icons per list item. Needless to say, we added these requests in, plus more.

Icon List Block Enhancement #1: Pick Any Icon (or Upload Your Own)

The Icon List Block before only had 5 types of icons with 3 variations each. This was very limiting for quite a few people. Now, we made it so you can pick any Font Awesome icon, similar to how you can pick from any icon in the Icon Block and Button Block.

If you have a custom SVG icon that you want to use, you can also just drop it in there to use it in your icon list. Sweet!

Icon List Block Enhancement #2: Pick Different Icons per Row

You can now also pick different icons for every list item you have.

To do this, just click on any bullet icon in the Icon List Block to open up the icon picker. From there, you can pick a different one or upload your own SVG icon.

Icon List Block Enhancement #3: More Icon Options

Lastly, we’ve added in a bunch more options if you want to spruce up your bullet icons. Now you can also change their opacity, rotate them, and specify different icon sizes for desktop, tablet or mobile.

Kadence Theme Global Palette Support

Last, but not the least, if you’re using Kadence Theme, then we’re happy to say that we’ve added in support for their global color palette.

Now, when you pick a color from Kadence’s global color palette in a Stackable block, any future palette changes would also apply to Stackable.

This is similar to the global color palette of the Blocksy Theme.

Final Words

Aside from the new things above, we’ve also fixed and addressed a few notable issues:

  • Font size options now try and detect the actual font sizes of your theme.
  • Responsive columns didn’t take effect in the Icon List Block.
  • Categories and Tag taxonomies now appear custom post types in the Blog Post Block.
  • Container Blocks will no longer add large paddings in mobile.

Whew! This was a lengthy update post.

If you’ve reached this far into the article, I’d like to thank you for your time, and I hope you enjoy this new Stackable update.

9 thoughts on “Better Responsive Controls, Better List Block Icons and Low-Highlight Effect

  1. Yeeees! I loved the additions in the icon list blocks. It was an awesome idea to let us upload SGV icons and also to have more than 1 icon per list.
    Right now I can make my pros and cons icon list easily 😀

  2. Wow! Thank you for this update. The ability to change each icon in a list is a huge plus for me. I will not have to edit the code manually anymore. I’m eager to see what will be in the next update. 🙂

  3. Hello! Why is the “call to action” block not working since this update? I’ve got it for awhile on almost all the pages of my website, but now the size of the Title is no longer available for mobile version. Even if I introduce different size values in the mobile and desktop boxes, the font never changes when the page is displayed on the phone, remaining the same as it is for desktop. Can you please check and tell me what should I do? I really love this block and I don’t want to change the entire design of my website.

    1. Hey Ana, we’ve modified the behavior of the font sizes so that if you make it very large in desktops, it won’t appear very large in tablet and mobile automatically. They’ll resize a bit. You can use the responsive toggles to resize in tablet and mobile. This automated limiting only takes effect if you assigned a large font size of more than 50px.

      Since this was a new update, if they’re working in your existing pages already, you won’t have to edit them all and they would still behave the old way when there was no automated limit.

    2. Each and every update is bringing more exciting features. I liked the option of adding different icons in a list. It will make pros and cons list more exciting

  4. Thank you for you reply. But I think you did not understood what I was trying to say. The update does not work. It automatically moddified all the fonts set for mobile and tablet. When I try to change them back, nothing happens. The fonts for mobile are not individually changing, on the phone being displayed the same value set for desktop.
    For exemple, I designed my website with many call to action blocks. For desktop the title font is set to 100px, and for mobile 65px. With this update, the mobile version changed automatically. Even though the value is still set to 65px, on mobile the block is displaying it as 100px. Can you please fix this? I was really happy with the previous version of Stackable.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.