How to Use Column Settings & Responsive Columns

Hello! Welcome to Stackable, your all-in-one solution to building stunning websites with Gutenberg

In this video, you will be learning how to use the Advanced Column and Grid block, and how to make them responsive.

Let’s get right to it!

First, add the advanced columns & grid block.

After adding the block, you will be able to see the various design options on the inspector panel on the right.

You can add blocks within the advanced columns and grid by clicking on the plus button within the rounded boxes.

Just type in the block you want or click browse all to view all available blocks.

Adjust the columns you need by swiping the slider in the inspector or typing the number of columns in the text field.

You can add up to 6 columns. You can also adjust the column widths by swiping the slider in the inspector or inputting your desired size in the column width text field.

Scroll further down in the inspector and you will be able to see the different ways you can layout your advanced columns and grid block.

Now, let’s explore the different responsive settings for the Advanced Columns and Grid block.

When you navigate to the advanced tab and open the responsive accordion, you can control how the columns collapse in other devices, such as mobile or tablet.

Simply drag and drop how you want the sequence of your blocks to be once they are collapsed in the Collapsed Column Arrangement.

Now let’s see how this will all work together. For this video, we’ll add an Image Box block and an Advanced Text block within a 2 column Adv. Columns & Grid block.

So we’ll just upload this image and toggle off the title, subtitle, and description options. On the right column, we’ll input our title and text 

Let’s adjust the column widths under the Style tab.

So now we’re done designing the block. The thing is, on desktop, I want this block to appear this way, but on mobile, I want the text to come before the image. 

To do that, let’s head on over to the Advanced tab, under the Responsive settings. Let’s drag and drop the 2nd column at the top so that our adv. Text block will appear first on the mobile view.

Let’s update the page and click Preview and then Mobile, you’ll see that our Adv. text block comes before the Image Box block

But if we go back to our Desktop view, it doesn’t change anything. Isn’t this great!

Another thing to note is, you can toggle the displays for the advanced column and grid blocks and hide them for specific devices. 

And there you have it! You have a better understanding of the advanced columns and grids block. 

Thanks for watching! Don’t hesitate to reach out to us with any questions you may have. If you liked this video, subscribe to our channel for more videos.