모든 사이트에는 메뉴가 필요하며 테마의 기본 헤더는 사용자 정의 Elementor 디자인과 거의 일치하지 않습니다. 무료 Nav 메뉴 위젯 에서 Elementor용 마스터 애드온 elementor 편집기 내부의 모든 WordPress 메뉴를 렌더링합니다: 장치별로 설정된 수평 또는 수직 레이아웃, 스타일이 지정된 하위 메뉴, 휴대폰을 대신하는 햄버거 토글.
이 가이드는 첫 번째 드래그부터 라이브 페이지의 작업 드롭다운이 포함된 스타일 메뉴까지 위젯을 안내합니다.
탐색 메뉴 위젯이 수행하는 작업 #
위젯은 외관,메뉴 아래에 구축한 메뉴를 가져와서 Elementor 요소로 렌더링합니다. 레이아웃과 동작을 선택하고 항목의 모든 상태,드롭다운, 모바일 토글을 모두 Elementor 패널에서 선택합니다. 메뉴 항목 자체,레이블, 순서 및 하위 메뉴는 WordPress 에서 관리 상태를 유지하므로 콘텐츠 편집자는 Elementor 를 터치하여 메뉴에 페이지를 추가하지 않습니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 탐색 위젯 아래의 마스터 추가 옵션 패널에서 탐색 메뉴 위젯이 활성화되었습니다.
- 아래에서 만든 메뉴 외관, 메뉴 대시보드에서. 데모에서는 홈,가격, 팀,연락처가 포함된 “메인 메뉴”와 연락처 아래의 FAQ 하위 메뉴를 사용합니다.
탐색 메뉴 위젯을 추가하는 방법 #
Elementor 편집기에서 다음을 검색합니다 요소 위한 패널 Nav 메뉴 그리고 페이지로 드래그,일반적으로 헤더 섹션으로. 위젯은 즉시 첫 번째 워드 프레스 메뉴를 렌더링합니다.
메뉴와 레이아웃을 선택합니다 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 일반 섹션은 전체 위젯을 구동합니다. 메뉴 선택 메뉴 화면의 모든 메뉴를 나열합니다; 렌더링할 메뉴를 선택하세요. 레이아웃 제공합니다 수평, 수직의 그리고 햄버거 (프로), 그리고 기기별로 따로 설정할 수 있습니다. 세로 메뉴의 경우 유형 동작을 추가합니다: 보통의, 토글, 아코디언 또는 사이드. 수직 레이아웃의 데모 메뉴는 다음과 같습니다:
헤더의 경우 수평이 일반적인 선택입니다. 정렬 항목을 왼쪽,중앙, 오른쪽 또는 정당화 배치합니다. 단일 중단점 설정은 없습니다: Elementor 를 태블릿 또는 휴대폰 보기로 전환하고 해당 장치의 레이아웃을 선택합니다. 휴대폰은 기본적으로 햄버거 토글을 사용합니다. 필요하지 않더라도 한 번 시도해 볼 가치가 있습니다. Vertical; 두 레이아웃을 모두 보면 정렬 옵션이 클릭됩니다.
드롭다운 구성 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 드롭다운 메뉴 섹션은 하위 메뉴 동작과 표시기를 제어합니다:
- 드롭다운 지표: 하위 메뉴가 포함된 항목 옆에 화살표를 표시하거나 숨깁니다.
- 표시기 위치, 간격, 아이콘 크기: 화살표가 어디에 있고 얼마나 큰지.
- 드롭다운 아이콘: 일반 및 호버 상태와 회전 컨트롤을 사용하여 기본 쉐브론을 모든 아이콘으로 교체합니다.
- 드롭다운 너비 및 정렬: 하위 메뉴 패널의 크기 및 텍스트 정렬.
- 하위 메뉴 표시기: 3단계 메뉴의 아이콘입니다.
모바일 토글 설정하기 #
기기가 햄버거 레이아웃을 사용하면 메뉴가 토글 버튼 뒤로 축소됩니다. The 햄버거 메뉴 섹션이 구성합니다: 정렬, 유형 (아이콘, 텍스트 또는 둘 다), 보기 (기본값, 스택형 또는 프레임형), 모양 (사각형 또는 원), 그리고 일반 상태와 활성 상태에 대한 별도의 아이콘 편집기를 모바일 미리보기로 전환하면 그 아래에 메뉴가 쌓여 토글이 나타납니다:
메뉴 항목 스타일 지정 #
에서 스타일 탭, 메인 메뉴 항목 최상위 링크를 다룹니다. 타이포그래피 글꼴을 처리합니다:
그 아래, 보통의, 호버, 그리고 활동적인 탭은 각각 운반됩니다 색상, 항목 배경 색상, 그리고 텍스트 그림자, 플러스 공유 수평 및 수직 패딩, 사이의 공간및 테두리 컨트롤. 데모는 파란색 호버 색상을 설정하고 커서가 교차할 때 실시간으로 미리 봅니다. 가격:
토글, 드롭다운 목록 및 항목의 스타일을 지정합니다 #
세 가지 스타일 섹션이 더 작업을 완료합니다:
햄버거 토글 스타일 지정: 색상, 배경, 테두리 반경, 그림자, 아이콘 크기 및 패딩, 일반 상태, 호버 및 활성 상태.
드롭다운 메뉴 하위 메뉴 패널 스타일 지정: 배경색, 상단 간격, 테두리 및 패딩. 드롭다운 하위 메뉴 더 깊은 메뉴를 다룹니다.
드롭다운 메뉴 항목 동일한 세 가지 상태와 a를 사용하여 패널 내부의 링크를 스타일링합니다 분배기 항목 간 줄을 그룹화합니다:
페이지의 결과 #
라이브 페이지에서 메뉴는 스타일링: 호버 상태 실행으로 렌더링되고 FAQ 하위 메뉴는 드롭다운 설정이 적용한 위치인 연락처 아래에 표시됩니다.
일반적인 사용 사례 #
- 사용자 정의 헤더 테마 메뉴가 디자인을 따라갈 수없는 Elementor로 제작되었습니다.
- 랜딩 페이지 사이트 전체 메뉴와 별도로 자신만의 슬림한 메뉴가 있습니다.
- 사이드바 탐색 문서 또는 카테고리 페이지에서 수직 레이아웃을 사용합니다.
- 모바일 우선 메뉴 토글의 아이콘, 보기, 모양 옵션에 기대어.
- 다단계 메뉴 스타일 드롭다운 및 하위 레벨 패널 포함.
더 나은 탐색 메뉴를 위한 팁 #
- 먼저 WordPress에서 메뉴를 구축하세요. 위젯은 Appearance,Menus;에서 메뉴를 렌더링합니다. 그것들을 생성하지 않습니다. 거기 구조,여기 스타일.
- 호버와 액티브에 다양한 색상을 부여하세요. 호버는 커서에 답합니다; 액티브는 방문자에게 어느 페이지에 있는지 알려줍니다. 같은 색으로 신호를 낭비합니다.
- 실제 전화에서 각 장치를 확인하십시오. 4개 항목 메뉴는 태블릿에 잘 맞을 수 있고, 7개 항목 메뉴는 태블릿에도 수직 레이아웃이 필요할 수 있습니다.
- 드롭다운 배경을 명시적으로 스타일 지정합니다. 페이지 내용을 통해 투명 하위 메뉴는 우리가 볼 수있는 가장 일반적인 메뉴 불만입니다; 단단한 드롭 다운 메뉴 배경은 한 번의 클릭으로 수정합니다.
비디오 자습서 #
탐색 메뉴 위젯이 작동하는 것을 보고 싶다면 이 비디오는 메뉴 선택부터 라이브 페이지의 스타일 드롭다운까지 전체 설정을 살펴봅니다:
자주 묻는 질문 #
마스터 애드온의 탐색 메뉴 위젯은 무엇입니까?
모든 WordPress 메뉴를 완전한 스타일 제어로 렌더링하는 Elementor 위젯입니다. 장치별로 설정된 수평 및 수직 레이아웃,사용자 정의 표시기가 있는 스타일 하위 메뉴,기본적으로 휴대폰에서 사용하는 구성 가능한 햄버거 토글을 제공합니다.
메뉴 항목을 추가하거나 제거하는 곳은 어디입니까?
WordPress 의 모양,메뉴 아래. 위젯의 메뉴 선택 드롭다운은 거기에 구축한 모든 메뉴를 나열하고 선택한 메뉴를 렌더링합니다. 항목,주문 및 하위 메뉴는 WordPress 에서 관리됩니다; 위젯은 레이아웃과 스타일링을 처리합니다.
드롭다운 하위 메뉴를 어떻게 만들 수 있나요?
메뉴 화면의 상위 항목 아래로 항목을 드래그하여 WordPress 메뉴에 항목을 중첩합니다. 위젯은 상위 항목 옆에 자동으로 드롭다운 표시기를 표시하고 드롭다운 메뉴 및 드롭다운 목록 섹션은 패널의 동작과 스타일을 제어합니다.
모바일 햄버거 메뉴는 언제 뜨나요?
기본적으로 휴대폰에서. Master Addons Pro 를 사용하면 팝업 및 오프캔버스 유형과 함께 모든 장치에 대해 햄버거 레이아웃을 선택할 수 있습니다. 햄버거 메뉴 섹션은 아이콘 또는 텍스트 유형,스택 또는 프레임 뷰,정사각형 또는 원 모양,별도의 일반 아이콘과 활성 아이콘을 포함하여 토글 스타일을 지정합니다.
메뉴가 가로가 아닌 세로일 수 있나요?
예. 레이아웃 컨트롤은 수평,수직 및 햄버거 (Pro) 를 제공합니다. 수직 슈트 사이드바 및 문서 페이지,타입 컨트롤은 토글,아코디언 또는 사이드 동작을 맨 위에 추가합니다.
감싸는 #
탐색 메뉴 위젯은 디자인이 나머지 부분에 살고있는 사이트 메뉴를 넣습니다: WordPress 메뉴를 선택하고 레이아웃을 선택하고 항목,드롭 다운 및 모바일 토글을 스타일링하고 게시합니다. 그것은 자연스럽게 쌍을 이룹니다 캔버스 외부 콘텐츠 슬라이드 아웃 모바일 탐색을위한 위젯 (프로). 의 전체 세트를 찾아보기 마스터 애드온 위젯 및 확장, 그리고 보세요 Nav 메뉴 위젯 페이지 elementor Pro 의 메뉴 위젯과 비교를 위해.
