Gutenberg Page Builder에서 여러 블록을 추가하여 웹사이트 섹션을 디자인하기 위한 사용자 지정 레이아웃을 구축하고 싶으신가요? 글쎄요, 기본 기능으로는 이 작업을 할 수 없습니다. 그러나 GutenKit 컨테이너 블록은 다양한 열 구조 사전 설정과 함께 제공됩니다. 그리고 한 열에 여러 블록을 추가할 수 있습니다.
또한, 각 열을 개별적으로 사용자 정의하고 블록 위치를 제어할 수 있습니다. 이 설명서는 Gutenberg 페이지 빌더에서 열 레이아웃을 만드는 데 GutenKit 컨테이너 블록을 사용하는 방법을 알려줍니다.
GutenKit 컨테이너 블록 사용 방법 #
GutenKit 플러그인을 설치했는지 확인하세요. 그런 다음 WordPress 대시보드에서 시작하여 새 페이지나 게시물을 가져와서 편집을 시작하세요.
1단계: 컨테이너 블록 추가 #
WordPress 대시보드에서 시작하여 새 페이지나 게시물을 작성합니다. WordPress 블록 편집기로 이동하게 됩니다. 그런 다음 "+블록 편집기의 왼쪽 상단 모서리에 있는 "아이콘을 클릭합니다. 블록 메뉴가 다양한 블록과 함께 나타납니다.
- 검색창을 사용하여 "컨테이너” block
- Once you find it, just click on it or drag and drop it to the editor screen
그만큼 컨테이너 block is added to your screen. It offers 15 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.
드래그 가능한 컨테이너 너비 #
GutenKit container is draggable. You can control the gap between containers manually like this.
Step 2: Configure The Container #
After selecting your preferred structure for the container, take a look at the block settings in the right sidebar.
Layout Tab #
로 이동 Layout Tab → Container section in the right sidebar to configure its settings.
컨테이너 #
Container Width: From here you will control the column width (Full Width, Boxed, Custom).
- Full Width: Selecting this will reveal the “콘텐츠 너비” option. Here, you will choose the width for the content in the column. Pick between the “박스형 & 전체 넓이” options.
Boxed –
- Set a fixed Content Box Width (in px) for the container
- Control the 최소 높이 of the content area
- Adjust these values using the slider or by typing the exact number
- Keep the content centered with defined width, instead of stretching full screen
Full Width –
- Content automatically stretches to full screen width (no fixed box width option here)
- 조정하다 최소 높이 of the content area
- Set the value using the slider or by typing the exact number in px
- Boxed: 세트 최소 높이 of the container (in px, using slider or manual input).
- Custom: 세트 사용자 정의 너비 as a percentage (%) and 최소 높이 (in px), both adjustable via slider or manual input.
- 관습: 당신은 설정할 것입니다 사용자 정의 너비 귀하의 칼럼에 대한 내용입니다.
- 최소 높이: 열의 최소 높이를 선택하세요.
항목 속성 #
- 방향: 여기에서 열의 요소를 네 개의 다른 방향으로 배치할 수 있습니다.
- 콘텐츠 정당화: 여기에서 컨테이너 열의 요소 사이와 주변의 공간을 제어할 수 있습니다.
- 항목 정렬: 요소의 수직 정렬을 설정합니다.
- 요소 사이의 간격: 열의 요소 사이의 간격을 정의합니다.
- 포장하다: Wrap을 활성화하면 열에 공간이 충분하지 않을 때 요소가 아래쪽에 배치됩니다.
추가 옵션 #
- 과다: Show or hide a scroll bar, or choose Auto to add one automatically only when the content exceeds the column’s size.
- HTML 태그: Set an HTML tag for this container to control how it’s structured semantically, choosing from options like Div, Header, Main, Article, and more.
Step 3: Style The Container #
이 설정 영역에서 열의 모양을 사용자 지정할 수 있습니다.
- 배경: Set the background type, such as color, gradient, image, or video, for the container in its normal and hover states.
- 배경 오버레이: Set an overlay background between solid color, gradient, and image.
- 국경: 테두리 색상을 지정하고 너비를 정의합니다. 또한 테두리에 그림자 효과를 줍니다.
그게 다입니다! 이제 Gutenberg Page Builder에서 컨테이너 블록을 쉽게 추가하고 사용하여 나만의 레이아웃을 만들 수 있습니다.
