How does the columns block work?

Hi, this is Sandra from GREYD and today I’d like to show you the abundant options that the columns block offers you in GREYD.SUITE. This is a block that saves you from a lot of design plugins, as all these designs here are possible out of the box. So columns give your website its structure. When you add a columns block, you can select a layout right away or if you skip that step, a two-columns-layout will automatically be created.

So now you can make settings on different levels and we will start here with the parent column element. So here in the toolbar you can at first decide whether the column should use the content width as defined in the site editor or the wide width, also defined in the site editor, or full width. And you can also define the alignment of elements that will be placed in your columns. And here on the right you can again define the number of columns and decide whether you want the individually columns be placed under each other automatically on smaller screens.

Next you can add an image, video or animation to your background and then set the size, opacity, scroll behavior and a couple of other settings here. If necessary you can add a second layer, a color layer, either just one color or you can also work with gradients here. And you can define the opacity. After the same principle you can also add a pattern to your background, either one of the presets or you can also create a custom pattern and define its size, opacity and scroll behavior.

With separators you can create such intermediate areas like here. To do that, just select which type of separator you’d like to have, define its size, opacity and you can either have the separator between your content and background or in front of both. Down here you can define paddings and margins for different screen sizes and also individually for each side. As always you can add animations to this block. And in the advanced settings there are a couple of interesting options here. For example here you can define what should happen when you have for example 3 columns with content boxes with different lengths, do you want them to stretch to the same height or not. You can also change that individually per breakpoint. As always you can work with HTML anchors and CSS and you can hide the entire column in the frontend, which is a very handy feature for example if you just prepare a new section on your website that you don’t want to be visible yet in the frontend.

Let’s move on to the design settings of the parent element. Here can define colors for text, background and if applicable links in your columns. For the background you can again also work with gradients. And to do that you can create as many color points as you like. When you place two color dots on top of each other, you can create such hard edges here. You can work with linear or radial gradients and if necessary change the angle here. Down here it’s about padding, margin and block spacing. If you want to differ from your global settings as set in the site editor you can do that here. And you can also work with a border and / or border radius.

So now let’s have a look at the individual columns. Lets go here. Design settings are pretty much the same, but these settings here offer some very interesting differences. With this option here if you define that the content inside this column uses the content width and not automatically the maximum available space, which often might be full width. If necessary you can also adjust the global settings here specifically for this column. And then you have the width settings to define the width of the column. You may wonder why you have two times the width. This is because we wanted to add some in our opinion necessary options here to the native Gutenberg ones, but it’s not possible to add it directly here. So you can work with both, it’s going to work, but our options offer a lot more possibilities.

So for example you can define the width individually per breakpoint and say for example, I want this column to be much larger on bigger screens, but smaller on smaller screens and full width on mobile screens, for example. You can also indent columns – again individually per breakpoint. You can change the order, which is also very interesting for example if you have 2 columns or 3 columns next to each other and let’s say this one is the most important one, but automatically on mobile screens when these elements will be stacked, this will be the second one. And maybe I want it to be the first one, as it’s the most important one. Then I can just say on mobile screens, I want this to be the number one and from this breakpoint on I want this to be in the middle. To make sure that this works properly, you should do these settings not just for one column, but for all three of them. And sometimes it might make sense to hide individual columns depending on the breakpoint. That’s what you can do here.

For more videos and information please visit our Helpcenter.