Last Updated on April 17, 2020
This update adds one of the most requested blocks to Stackable: the Advanced Columns & Grid Block. This increases our library to 24 amazing blocks. Update to version 2.4.0 now!
A Super Improved Native Columns Block
Think of Stackable’s new Columns block as a super improved version of the native columns block. We’ve increased the capabilities of the columns block, making it into an essential block for building layouts.
Let me go through every aspect on why we’re excited about this new block addition.
Very Easy Column Widths
In the native columns block and in other blocks you may have come across with, in order to modify the widths of your columns, you would have to go through every “Column” block and change the individual widths. In some cases, you can drag the columns to resize them but you won’t be able to precisely control their widths.
In Stackable’s Advanced Columns & Grid block, we’ve added in a single column width slider control that you can drag to adjust all your columns easily. We’ve also added in some pre-set column width buttons, and a reset button to make things even simpler.
You can even set different column widths for when your page is viewed in tablet-sized devices. So you can make sure that your content won’t look squished in small screens.
On mobile screens, your columns would collapse and stack on top of each other.
Height and Vertical Align
To help with building your page layouts, we’ve added in height controls and vertical alignment controls.
You can set your columns to be of half-screen or full-screen height. Or you can also set your own custom height in
You can also set the columns to occupy the whole column height, or compress to the top, middle or bottom. This is very helpful when you have columns with backgrounds to achieve some nice effects.
We also provide you the ability to change all the colors of your headings, normal text and links of your content inside your columns.
You can also do this on a per-column basis if you’re designing your columns to have different colored backgrounds.
The Advanced Columns & Grid Block also supports Stackable’s common block style settings such as Block Background, Block Title, Block Description, and Top and Bottom Separators.
This means that you can turn your columns into entire sections in your page with a single toggle.
Individual Column Controls
Every column has 2 available layouts: basic and plain. Basic gives you a container with a background, and the plain layout just displays the content without any paddings or backgrounds.
Each column has their own set of options where you can adjust the size and location of your content and whether they’re placed on the top, middle, or bottom of your column.
So far, what we’ve shown you are all free features of the Advanced Columns & Grid Block.
While the above features are quite powerful and flexible, we have some great things in store for Premium users.
More Columns Layouts
Aside from Grid and Plain layouts, Premium provides you with 3 more layouts: Uneven, Uneven 2 and Tiled:
Column Gap and Row Gap
Premium users would have the ability to change the distance between the columns with the Column Gap option. For layouts that span multiple rows, we also have a Row Gap option.
Easily Switch Columns Around
There are times that you may want to swap or switch columns around. In Premium, we give you an easy way to move columns without the need to move individual blocks around.
Advanced Responsive Controls
Lastly, Premium gives you advanced responsive controls for controlling the arrangement of your columns when they’re stacked on top of each other in mobile screens. You can also adjust the Row Gap when they’re stacked.
The Advanced Columns & Grid Block is quite a useful and robust block. Check out the block’s demo page to see what it can do in action. There’s also a link to the live demo in there if you want to try it out for yourselves.