탐색 메뉴

모든 사이트에는 메뉴가 필요하며 테마의 기본 헤더는 사용자 정의 Elementor 디자인과 거의 일치하지 않습니다. The 탐색 메뉴 위젯 인 Elementor용 마스터 애드온 elementor 편집기 내부의 모든 WordPress 메뉴를 렌더링합니다: 수평, 수직 또는 드롭다운 레이아웃, 스타일이 지정된 하위 메뉴, 모바일을 대신하는 햄버거 토글.

이 가이드는 첫 번째 드래그부터 라이브 페이지의 작업 드롭다운이 포함된 스타일 메뉴까지 위젯을 안내합니다.

탐색 메뉴 위젯이 수행하는 작업 #

위젯은 외관,메뉴 아래에 구축한 메뉴를 가져와서 Elementor 요소로 렌더링합니다. 레이아웃과 동작을 선택하고 항목의 모든 상태,드롭다운, 모바일 토글을 모두 Elementor 패널에서 선택합니다. 메뉴 항목 자체,레이블, 순서 및 하위 메뉴는 WordPress 에서 관리 상태를 유지하므로 콘텐츠 편집자는 Elementor 를 터치하여 메뉴에 페이지를 추가하지 않습니다.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• 탐색 위젯 아래의 마스터 추가 옵션 패널에서 탐색 메뉴 위젯이 활성화되었습니다.
• 아래에서 만든 메뉴 외관, 메뉴 대시보드에서. 데모에서는 홈,가격, 팀,연락처가 포함된 “메인 메뉴”와 연락처 아래의 FAQ 하위 메뉴를 사용합니다.

탐색 메뉴 위젯을 추가하는 방법 #

Elementor 편집기에서 다음을 검색합니다 요소 위한 패널 탐색 메뉴 그리고 페이지로 드래그,일반적으로 헤더 섹션으로. 위젯은 즉시 첫 번째 워드 프레스 메뉴를 렌더링합니다.

메뉴와 레이아웃을 선택합니다 #

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 일반 섹션은 전체 위젯을 구동합니다. 메뉴 선택 메뉴 화면의 모든 메뉴를 나열합니다; 렌더링할 메뉴를 선택하세요. 레이아웃 제공합니다 수평, 수직의, 그리고 드롭다운, 그리고 유형 동작을 추가합니다: 보통의, 토글, 아코디언, 또는 사이드. 수직 레이아웃의 데모 메뉴는 다음과 같습니다:

헤더의 경우 수평이 일반적인 선택입니다. 메뉴 정렬 항목을 왼쪽, 중앙, 오른쪽 또는 정당화 위치에 배치합니다 중단점 메뉴가 모바일 토글로 축소되는 시기를 태블릿 또는 모바일 너비로 결정합니다. 필요하지 않더라도 한 번 수직으로 시도해 볼 가치가 있습니다; 두 레이아웃을 모두 보면 정렬 옵션이 클릭됩니다.

콘텐츠 겹치기 드롭다운을 절대 위치로 설정하여 페이지를 아래로 누르는 대신 페이지 위로 떠오르게 합니다 드롭다운 위치 와 함께 드롭다운 최소 너비 하위 메뉴가 있는 곳을 미세 조정합니다.

드롭다운 구성 #

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 메뉴를 선택하고 레이아웃을 선택하고 항목,드롭 다운 및 모바일 토글을 스타일링하고 게시합니다. 그것은 자연스럽게 쌍을 이룹니다 캔버스 외부 콘텐츠 슬라이드 아웃 모바일 탐색을위한 위젯. 의 전체 세트를 찾아 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 pro 가 추가하는 것을 위해.