GutenKit Nav Menu 블록은 Gutenberg 편집기에서 메뉴 및 하위 메뉴 항목을 쉽게 추가하고 사용자 정의할 수 있는 강력한 솔루션입니다. 또한 모바일 기기를 위한 모바일 메뉴를 디자인하는 기능도 있습니다.

블록 편집기에서 GutenKit 탐색 메뉴 블록을 사용하는 방법을 알아보려면 이 문서를 살펴보세요.

GutenKit 탐색 메뉴 블록을 어떻게 사용하나요? #

Get started with installing the GutenKit 플러그인 WordPress 대시보드에서.
You can follow the video tutorial:

Or, follow the below steps and create your desired Nav Menu with GutenKit.

1단계: GutenKit Nav 메뉴 블록 추가 #

새로운 페이지를 열거나 기존 페이지로 이동하세요.

• “를 찾으세요.+” icon at the top of the editor screen
• Clicking it will open the block library

• 다음을 검색하세요. GutenKit 탐색 메뉴
• Once it appears, click or drag & drop the block in the editor screen

2단계: 탐색 메뉴 항목 추가 #

After you’ve added the Nav menu block on the editor screen. Now, you can choose from patterns or start blank to create a nav menu.

Start Blank: If you go with the blank option, it’ll display all your published menu items. Also, you’ll see a + icon to add more items.

Ready Pattern: Check GutenKit nav menu patterns and import one.

However, to access all the GutenKit patterns, you’ll need to activate GutenKit Pro 플러그인.

Step 3: Customize Nav Menu Block #

Whether you start with the blank option or pick a pattern, you can cuztomize it based on your preferences. Let’s learn how you can do it.

Adjust menu items #

그만큼 content tab of Nav Menu Item lets you cuztomize –

메뉴 링크: This is the URL the navigation menu item points to, where visitors go when they click it.

Add SubMenu: Click this toggle button to enable sub-menu. A “+” icon will appear below the menu item on the editor screen.

Submenu Type: There are two types –

• Dropdown: Choose Dropdown for a simple list of sub-links
• 메가 메뉴: Choose Mega Menu for a wider, multi-column submenu layout

Clicking the sub-menu item will open the settings options. Under the 설정 옵션:

• 컨테이너 폭: 이 슬라이더를 사용하면 하위 메뉴 너비를 오른쪽으로 늘릴 수 있습니다.

It also offers, 스타일 통제 수단.

Submenu Wrapper –

• 조정: 하위 메뉴 래퍼 내에서 하위 메뉴 텍스트 위치를 정의합니다.

하위 메뉴 안건 -

• 항목 간격: 이 슬라이더를 사용하여 하위 메뉴 항목 사이의 간격을 정의합니다.
• 타이포그래피: 글꼴 패밀리, 굵기, 변형, 스타일, 장식, 간격 등을 변경하려면 이 설정을 사용합니다.

다음 설정을 개별적으로 적용할 수 있습니다. 정상, 호버, 그리고 활동적인 하위 메뉴에 대한 모드.

• 배경: 단색 또는 그라데이션 배경 유형을 제공합니다.
• 텍스트 색상: 색상 선택기를 사용하여 텍스트 색상을 선택하세요.
• 국경: 테두리 색상을 선택하세요.
• 심: 테두리 안의 공백을 늘리려면 값을 수동으로 입력하세요.
• 테두리 반경: 테두리의 둥글기를 정의하려면 이 옵션을 사용합니다.

You will also see a new option named “하위 메뉴 표시기” 설정 영역에서.

• 하위 메뉴 표시 아이콘: 라이브러리에서 아이콘을 선택하거나 SVG 파일을 업로드하여 하위 메뉴 표시기 아이콘으로 사용합니다.
• 표시기 아이콘 크기: 슬라이더를 사용하여 하위 메뉴 표시기 아이콘의 크기를 정의합니다.
• 표시기 왼쪽 공간: 이 슬라이더를 사용하여 메뉴 이름과 아이콘 사이의 간격을 조정합니다.
• 국경: 아이콘 주위에 테두리를 만들고 색상, 스타일, 두께를 선택합니다.
• 심: 아이콘 테두리 안에 내부 공간을 추가합니다.
• 테두리 반경: 아이콘 테두리의 둥글기를 설정합니다.

Next, we’ll move on to the parent settings or the Nav Menu block customization. 

Configure the Nav Menu #

이 부분에서는 부모 메뉴 설정 기능을 시작해 보겠습니다.

콘텐츠 탭 #

메뉴 –

• 메뉴 중단점: 장치 유형을 선택하거나 사용자 지정 값을 추가하여 메뉴의 반응성을 제어합니다. 즉, 지정된 값보다 작은 장치나 유형을 선택하면 햄버거 또는 모바일 메뉴가 표시됩니다.
• Offcanvas를 위한 스크롤 잠금: 메뉴가 열려 있을 때 스크롤을 비활성화합니다.
• 콘텐츠 정당화: 6가지 옵션에 따라 메뉴 항목 텍스트 위치를 설정합니다.
• 항목 정렬: 탐색 메뉴 전체를 다른 위치에 맞춥니다.

모바일 메뉴 설정 –

• 모바일 메뉴 로고: 이 옵션을 사용하면 모바일 기기에 다른 로고를 추가할 수 있습니다.
• 메뉴 링크: 기본 홈페이지 링크나 모바일 메뉴 로고가 있는 사용자 지정 링크를 포함합니다.
• 햄버거 아이콘: 아이콘 라이브러리에서 아이콘을 선택하거나 SVG 파일을 업로드하여 햄버거 메뉴 아이콘을 추가하세요.

Style Navigation Menu #

여기에서 탐색 메뉴를 사용자 정의하기 위한 모든 설정을 얻을 수 있습니다. 

Menu Wrapper –

• 메뉴 배경: 메뉴 배경에 단색, 그라데이션 또는 이미지를 추가합니다.
• 사이드바 배경: 단색과 그라데이션 중에서 배경 유형을 선택하세요.
• 사이드바 메뉴 콘텐츠 정렬: 사이드바 메뉴 텍스트의 위치를 선택하세요.
• 심: 탐색 메뉴 주위의 내부 공간을 조정합니다.
• 테두리 반경: 테두리의 둥글기를 정의합니다.

Menu Items –

• 메뉴 항목 간격: 메뉴 항목 사이의 수평 간격을 조정합니다.
• 타이포그래피: 메뉴 항목에 대한 모든 타이포그래피 사용자 정의를 가져옵니다.
• 배경 유형: 색상과 그라데이션 사이의 배경 유형을 사용합니다.
• 텍스트 색상: 메뉴 텍스트에 색상을 적용합니다.
• 국경: 메뉴 항목에 테두리를 지정하고 스타일, 색상, 두께를 정의합니다.
• 테두리 반경: 테두리의 둥근 정도를 조정합니다.
• 심: 메뉴 테두리 영역의 내부 공간을 늘립니다.
• 여유: 메뉴 항목 사이에 공백을 추가하려면 수동으로 값을 추가합니다.

Hamburger Style –

• 아이콘 위치: 페이지에서 햄버거 아이콘의 위치를 선택하세요. (왼쪽/오른쪽/아이콘)
• 아이콘 크기: 이 슬라이더를 사용하여 햄버거 아이콘 크기를 결정합니다.
• 아이콘 너비: 이 슬라이더를 사용하여 햄버거 아이콘의 너비를 조정합니다.
• 키: 햄버거 아이콘의 높이를 정의합니다.
• 테두리 반경: 햄버거 아이콘 테두리의 둥글기를 결정합니다.

이 설정 영역의 나머지 옵션은 일반 옵션과 마우스 오버 옵션 모두에 적용할 수 있습니다.

• 배경: 햄버거 메뉴에 배경색을 추가합니다.
• 아이콘 색상: 햄버거 아이콘에 색상을 지정합니다.
• 국경: 햄버거 아이콘에 대한 테두리 설정을 가져옵니다.

Close Button

• 아이콘 크기: 이 슬라이더를 사용하여 아이콘 크기를 결정하세요.
• 여유: 닫기 버튼 주위에 공백을 추가하려면 수동으로 값을 입력하세요.
• 너비: 이 옵션을 사용하면 닫기 버튼의 너비를 늘릴 수 있습니다.
• 키: 닫기 버튼의 높이를 결정합니다.
• 테두리 반경: 슬라이더를 사용하여 테두리의 둥글기를 조정합니다.

다음 세 가지 옵션은 두 가지 모두에 적용할 수 있습니다. 정상 그리고 호버 옵션.

• 배경: 단색과 그라데이션 사이에 배경 유형을 추가합니다.
• 아이콘 색상: 닫기 버튼 아이콘에 색상을 지정합니다.
• 국경: 이 설정 영역을 사용하여 닫기 버튼 주위에 테두리를 추가하고 스타일을 지정합니다.

이것은 WordPress 웹사이트의 블록 편집기에 탐색 메뉴를 쉽게 추가하는 방법에 대한 튜토리얼입니다.