Want to build your customize layouts in Gutenberg Page Builder for designing website sections by adding multiple blocks? Well, you can’t do this with the default functionality. However, the GutenKit Container block is available with various presets of column structure. And, you can add multiple blocks within one column.

Further, it allows you to customize each column individually and control block positioning. This documentation will educate you to use the GutenKit Container block for creating column layouts in the Gutenberg page builder. 

How to Use the GutenKit Container Block #

Make sure you have installed the GutenKit plugin. Then, start from the WordPress dashboard, take a new page or post, and start editing. 

Step 1: Add Container Block #

Start from the WordPress dashboard and take a new page or post. You will be directed to the WordPress block editor. Then, click the “+” icon in the upper-left corner of your block editor. A block menu will appear with a range of blocks:

1. Use the search box to find the “컨테이너” block.
2. Once you find it, just click on it or drag and drop it to the editor screen.
3. 그만큼 컨테이너 block is added to your screen. 

Step 2: Choose a Column Structure/ Column Width Preset 

그만큼 컨테이너 block will show six different column structures/ preset column widths. Choose your preferred one according to your design and content type. For example, we are going for a 50/50 structure.  

Step 3: Configure The Container #

After selecting your preferred structure for the container, take a look at the block settings in the right sidebar. You will configure the container from the 공들여 나열한 것 탭. 

참고하세요 you can configure and style each column independently. Here are the settings:

컨테이너 #

• Container Width: From here you will control the column width. (Full Width, Boxed, Custom)
  • 전체 넓이: Selecting this will reveal the “Content Width" 옵션.
    • Content Width: Here, you will choose the width for the content in the column. Pick between the “박스형 & 전체 넓이” options. And, you can define the content box width while choosing the 박스형 옵션.
  • 관습: You will set the 사용자 정의 너비 for your column.
• Min Height: Select the minimum height for the column.

Draggable Container Width #

However, you can control the gap between containers manually like this –

Items Properties #

• 방향: From here you can place elements of the column into four different directions.
• 콘텐츠 정당화: Here you can control the space between and around elements in the container column.
• 항목 정렬: Set the alignment of elements vertically.
• Gap Between Elements: Define the gap between elements of the column.
• 포장하다: Enabling Wrap will place elements to the lower while there isn’t enough space in the column.

Additional Options #

• 과다: Show or hide a scroll bar in your column.
• HTML 태그: Set an HTML tag.

Step 4: Style The Container #

From this setting area, you will customize the appearance of the column.

NB: All the following design functionalities also apply to hover effects.

• 배경: Choose a background type between solid color, gradient, image, and video.
• 배경 오버레이: Set an overlay background between solid color, gradient, and image.
• 국경: Give a border color and define its width. Also, it gives shadow effects to the border.

That’s it! Now you can easily add and use a container block for making your own layout in the Gutenberg Page Builder.