What's New in the Stackable Inspector UI

The New Stackable Inspector UI comes with exciting, new customization settings and improvements in the user experience. This article will help you navigate the new Stackable Inspector so that you can easily find the settings you need to start building fast and professional-looking websites.

What’s New in the Stackable Inspector?

The new Stackable Inspector comes with a brand new user interface which consists of a Layout tab, a Style tab, and an Advanced tab.

What’s in the Layout tab?

The Layout tab is one of the major changes in the new Stackable Inspector, replacing the Block tab from the old Inspector.

It contains all the customization settings related to the layout, size and spacing, and alignment of your columns, blocks and content.

Along with adding more columns to a block, the Layout tab now offers you new options to select or adjust the Column Widths, change the order of blocks with Column Arrangement, and adjust the Inner Column Spacing and Column Gap.

Another exciting new addition is the option to use Flexbox controls which consist of Inner Block Direction, Inner Block Justify, Inner Block Alignment, and a toggle switch to Align Last Block to Bottom. Flexbox gives you more alignment capabilities with your Inner Blocks.

Learn more about What is Flexbox and How to Use It.

Block Size & Spacing

The Block Size & Spacing panel has been renamed from Size & Spacing to be more specific as it relates to the size and spacing settings for a Block.

Container Settings

There is a new Container panel in the Layout tab which contains the size and spacing settings for the Container.

Toggling on the Container will enable its style settings in the Style tab.

Visual Guides for Easier Layouts

Visual Guides have been added to make it easier for you to visualize and lay out your columns, blocks, and content when building a page.

Visual guides will appear on a block when you hover over some of the layout options. These visual guides will help you know what the option does when you use it.

What’s New in the Style Tab?

The Style tab contains all the customization settings related to the design of a block such as backgrounds, typography, borders and shadows, and other block-specific settings that can improve the look of your block and the elements inside it.

This is where you can now customize both the Block and Container background by choosing a color, image or video.

To design the Container, you will need to toggle on the Container in the Layout tab for the style settings to appear in the Style tab. Turning it off will hide the Container settings, but the design you have added to the Container will still be saved when you turn it on again.

New Link Panel in the Advanced Tab

The Advanced tab is where you’ll find more customization settings to take your block’s layout and design to the next level.

In the Inner Column block, there is now a Link panel where you can enter a link or enable the Lightbox setting for your media to open up in a Lightbox upon clicking.

Columns and Inner Column

In addition to the changes made in the new Stackable Inspector UI, there are also changes made to the names of two blocks: Columns, previously Columns/Container, and Inner Column, previously Column, to make it easier to distinguish.