Pro 없이 Elementor에서 Nav 메뉴를 구축하는 방법

주요 시사점

• Elementor Menu 위젯(이전 Nav Menu)은 Elementor Pro로만 제공되므로 Pro가 없는 Elementor는 WordPress 메뉴를 페이지나 헤더에 배치할 수 없습니다.
• Pro가 없는 Elementor 탐색 메뉴는 WordPress 메뉴를 표시하고 데스크톱, 태블릿 및 모바일에 대해 별도로 레이아웃을 설정하는 Master Addons Nav Menu 위젯으로 구축할 수 있습니다.
• Elementor nav 메뉴의 하위 메뉴는 WordPress에서 제공됩니다: 모양 > 메뉴의 상위 항목 바로 아래에서 “하위 항목”을 읽을 때까지 항목을 드래그한 다음 저장합니다.
• 마스터 애드온 Nav 메뉴 위젯은 네 가지 수직 유형이 있습니다: 일반은 호버링 시 하위 메뉴를 측면으로 열고, 토글 및 아코디언은 클릭 시 확장하며, 측면은 메뉴를 페이지 가장자리에 고정합니다.
• Master Addons Nav 메뉴 위젯은 기본적으로 휴대폰에 햄버거 토글을 제공하는 반면, 데스크탑이나 태블릿의 Hamburger와 Popup 및 Offcanvas 유형에는 Master Addons Pro가 필요합니다.

Elementor Pro 를 구입하지 않고도 스타일이 지정된 Elementor nav 메뉴를 빌드할 수 있습니다. Elementor 의 자체 메뉴 위젯은 Pro 전용이지만 Master Addons Nav Menu 위젯은 모든 WordPress 메뉴를 편집기로 가져와 패널의 모든 레벨을 스타일링하고 휴대폰에서 햄버거로 축소합니다.

이 가이드에서는 핵심 Elementor 가 갭을 남기는 이유,채우는 방법 및 헤더 빌드를 6 단계로 다룹니다. 그런 다음 하위 메뉴,네 가지 수직 메뉴 유형,모바일 동작,메뉴가 표시되지 않는 일반적인 이유 및 Master Addons Pro 가 필요한 부분이 있습니다.

Elementor free에 메뉴 위젯이 없는 이유

Elementor 의 무료 플러그인은 수십 개의 레이아웃 및 콘텐츠 위젯을 제공하며 WordPress 탐색 메뉴를 페이지 또는 템플릿에 배치 할 수있는 방법이 없습니다. 원래 Nav 메뉴라고 불렸고 지금은 메뉴 위젯 인 그것을 수행하는 위젯은 Pro 전용입니다. Elementor 자신의 문서 확인시켜줍니다.

여전히 모양 > 메뉴 아래에 메뉴를 빌드할 수 있습니다. 간격은 디자인 측면에 있습니다: core Elementor 에는 해당 메뉴를 드롭할 항목이 없으므로 테마가 인쇄하는 곳마다 나타납니다.

메뉴 준비 테마가있는 간단한 사이트에서,그 정도면 충분할 수 있습니다. 사용자 정의 헤더,당신이 제어하는 햄버거 토글 또는 메가 메뉴를 원하면 무료 Elementor 만 거기에 갈 수 없습니다. 오래된 튜토리얼은 Pro 위젯 Nav 메뉴를 호출하고 최신 튜토리얼은 메뉴를 호출하지만 항상 Pro 가 필요했습니다.

Pro 없이 탐색 메뉴를 추가하는 세 가지 방법

Elementor Pro 라이선스가 없는 실제 옵션은 세 가지가 있습니다. 네 번째 행은 Elementor Pro 로,비교를 위한 것입니다.

테마 메뉴 위치. 모든 테마는 적어도 하나의 메뉴 영역을 등록합니다. 메뉴를 할당하면 플러그인이 0 으로 작동하지만 Elementor 에서 모양을 제어 할 수 없으며 모바일 동작은 테마 작성자가 구축 한 것과 같습니다. 해당 메뉴가 이미 전화에서 올바르게 보이는 경우 위젯을 건너 뛰십시오.

마스터 애드온 Nav 메뉴 위젯. Elementor Pro 없이 실행되는 Elementor-native 옵션입니다. 드롭 더 Nav 메뉴 위젯 템플릿의 모양 > 메뉴 메뉴와 스타일 색상, 간격, 하위 메뉴 및 패널의 모바일 토글을 가리킵니다.

마스터 애드온 메가 메뉴. 카테고리가 많은 사이트의 경우 Mega Menu 확장 프로그램은 동일한 위젯 위에 다중 열 패널을 구축하고 Elementor Pro 없이 실행됩니다. 연습: pro 없이 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 Nav 메뉴 위젯 페이지 수평 헤더, 수직 사이드바 및 휴대폰 햄버거의 라이브 데모가 있습니다.

메뉴를 만들고 시작부터 끝까지 하세요

빌드는 코드 없이 wp-admin 과 Elementor 에디터에서 발생합니다. 먼저 테마가 자체 헤더를 인쇄하지 않는지 확인하십시오. 왜냐하면 두 개의 쌓인 헤더가 여기에서 가장 일반적인 혼란이기 때문입니다.

1 단계: 메뉴 등록

모양 > 메뉴로 이동하여 메뉴를 만들고 페이지와 링크를 추가하고 6 개월 후에 인식 할 이름을 지정하십시오. 이것은 평범한 WordPress 이며 플러그인 전용은 없으며 WordPress 에는 a 가 있습니다 메뉴 화면 안내 이전에 구축하지 않은 경우. 여기에도 드롭다운을 설정하세요(참조 하위 메뉴 섹션).

2 단계: Header 템플릿 만들기

열다 마스터 애드온 테마 빌더 그리고 Header 로 설정된 타입으로 새로운 템플릿을 추가합니다. 이것은 테마의 헤더를 싸우는 대신 교체할 수 있게 해줍니다. 완성된 디자인에서 시작하려면,이들 중 하나를 가져옵니다 Elementor 헤더 템플릿 그리고 메뉴 위젯을 메뉴로 가리키세요.

3단계: Nav 메뉴 위젯을 추가하고 메뉴를 선택하세요

Elementor 패널에서 “Nav 메뉴”를 검색하고 헤더로 드래그합니다 (패널에는 탐색 메뉴가 표시됩니다). 콘텐츠 > 일반에서 메뉴 선택 드롭다운에서 1 단계에서 빌드한 메뉴를 선택한 다음 레이아웃을 설정합니다. 수평은 표준 헤더에 적합하고 그 옆에는 정렬 컨트롤이 있습니다. 수직은 사이드바에 적합하며 일반,토글, 아코디언 및 측면이 있는 유형 컨트롤을 추가합니다.

장치별로 레이아웃이 설정됩니다. 데스크톱은 Horizontal 에서 시작하고 전화기는 Hamburger 에서 시작하므로 추가 설정없이 전화기에서 메뉴가 축소됩니다.

4 단계: 스타일링하기

글꼴,색상, 간격 및 호버 상태는 사용자 정의 CSS 가없는 스타일 탭에 모두 있습니다. 기본 메뉴 항목에는 패딩,항목 간격,정렬, 타이포그래피,일반, 호버 및 활성 색상,배경, 테두리,반경 및 텍스트 그림자가 있습니다. 핵심 Elementor 는 메뉴에 대해이 중 하나를 수행 할 수 없습니다.

5 단계: 게시하고 할당합니다

템플릿을 저장하고 전체 사이트에 할당합니다. Master Addons Pro 가 없으면 사용 가능한 유일한 표시 조건이며 모든 곳에서 하나의 헤더를 원할 때 작동합니다.

6 단계: 프런트 엔드에서 확인하십시오

사이트를 로드하고 헤더 렌더링 하나만 확인합니다. 테마 메뉴에도 표시되면 CSS로 숨기면 페이지에 마크업이 남기므로 테마 사용자 정의기 설정에서 해당 메뉴를 끄십시오.

하위 메뉴를 추가하고 드롭다운 스타일을 지정하는 방법

Elementor 탐색 메뉴에 하위 메뉴를 추가하려면 Appearance > Menus 에서 해당 항목을 상위 항목 아래에 중첩하고 위젯은 해당 항목을 드롭다운으로 바꿉니다. Elementor 내부에는 하위 메뉴 설정이 없습니다.

1. 모양 > 메뉴를 열고 위젯이 사용하는 메뉴를 선택합니다.
2. 아직 메뉴에 없으면 하위 페이지나 링크를 추가하세요.
3. 이름 옆에 “하위 항목”이라는 레이블이 나타날 때까지 상위 항목 아래를 약간 오른쪽으로 드래그합니다.
4. 메뉴 저장을 클릭한 다음 Elementor 편집기 또는 프런트 엔드를 다시 로드합니다.

가로 헤더에서 부모는 표시기 화살표(콘텐츠 > 표시기 아이콘으로 설정)를 얻고 하위 메뉴는 호버링 시 열립니다.

드롭다운 메뉴는 패널을 스타일링합니다 (너비,배경, 테두리,반경, 그림자,상단 막대로부터의 거리). 드롭다운 메뉴 아이템은 그 안의 링크를 스타일링합니다: 타이포그래피,갭, 패딩,일반, 호버 및 액티브 색상,선택적 구분선. 세 번째 레벨 메뉴는 일치하는 드롭다운 하위 메뉴 섹션을 얻습니다. The 드롭다운 메뉴 변형 데모 이런 방식으로 구축된 여러 패널 스타일을 보여줍니다.

네 가지 수직 메뉴 유형

마스터 애드온의 Elementor 수직 메뉴는 네 가지 유형으로 제공됩니다: 일반,토글, 아코디언 및 측면. 레이아웃을 수직으로 설정하고 그 아래에 유형 컨트롤이 나타납니다. 유형도 장치별로 설정되므로 사이드바는 태블릿에서 아코디언을,데스크톱에서 일반을 사용할 수 있습니다.

보통의

노멀은 플라이아웃처럼 각 하위 메뉴를 호버링 시 상위 메뉴의 측면으로 엽니다. 오른쪽에 공간이 있는 데스크탑 사이드바에 적합합니다.

토글

Toggle 은 클릭 시 항목 아래의 하위 메뉴를 확장하고 아래 항목을 아래로 푸시합니다. 여러 하위 메뉴가 한 번에 열려 있을 수 있으므로 사이드바가 인덱스로 두 배가 될 때 도움이 됩니다.

아코디언

아코디언은 클릭 시에도 확장되지만 하위 메뉴 하나를 열면 열린 메뉴가 닫힙니다. 그러면 긴 메뉴가 좁은 열에 짧게 유지됩니다.

사이드

사이드에서는 메뉴를 페이지 가장자리로 고정하며,주요 항목은 세로 막대에,각 하위 메뉴는 옆에 있는 패널에 있습니다. The 세로 사이드 메뉴 데모 전체 페이지에 표시합니다.

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 수직 탐색 메뉴 데모 스타일이 지정된 사이드바 버전을 표시합니다.

모바일에서 작동하게 만드는 것

전화기에서 Nav 메뉴 위젯은 기본적으로 햄버거 토글로 축소됩니다. 콘텐츠 탭의 햄버거 메뉴 섹션은 정렬,아이콘, 텍스트 또는 둘 다,기본, 스택 또는 프레임 뷰,모양 및 별도의 일반 아이콘과 활성 아이콘을 설정합니다.

토글은 키보드에서뿐만 아니라 터치로 작동합니다. Enter 및 Space 에서 열고 Esc 에서 닫고 메뉴 외부의 탭도 닫습니다.

전화에서 메뉴는 토글 아래에 제자리에 열리고 하위 메뉴는 그 안에서 확장됩니다. 그것은 짧은 메뉴와 중간 메뉴에 적합합니다. 측면에서 미끄러지는 오프 캔버스 패널은 Pro 기능으로 아래에서 다룹니다.

탭 대상과 외부 탭이 터치스크린에서 다르게 동작하기 때문에 실제 휴대폰은 물론 브라우저의 장치 도구 모음에서도 테스트합니다. 메뉴가 열려 있을 때 아이콘의 상태가 바뀌는지,그리고 한 번의 엄지손가락으로 하위 메뉴 항목에 연결할 수 있는지 확인합니다.

Elementor nav 메뉴가 표시되지 않는 이유

Elementor nav 메뉴가 표시되지 않으면 원인은 거의 항상 이 네 가지 중 하나입니다. 순서대로 확인하세요.

1. 메뉴가 선택되지 않았거나 메뉴가 존재하지 않습니다. 메뉴를 만들면 위젯에 연결되지 않으므로 메뉴 선택에서 선택하십시오. 필드에 “사이트에 메뉴가 없습니다”라고 표시되면 먼저 메뉴를 만드십시오.
2. 헤더 템플릿이 적용되지 않습니다. 헤더 템플릿은 표시 조건이 있을 때까지 아무 작업도 수행하지 않습니다. 테마 빌더에서 전체 사이트를 설정하고 테마 헤더가 해당 템플릿을 덮지 않는지 확인합니다.
3. 전화에서는 메뉴가 햄버거 뒤에 있습니다. 전화기에는 링크 대신 토글이 표시됩니다. 토글 색상이 헤더 배경과 일치하면 아이콘이 보이지 않고 메뉴가 누락된 것처럼 보입니다. 스타일 > 햄버거에서 토글에 대조되는 색상을 지정합니다.
4. 캐싱 또는 지연된 JavaScript. 페이지 캐시는 이전 헤더를 제공할 수 있으며,방문자가 마우스를 이동할 때까지 JavaScript 지연으로 인해 드롭다운과 토글이 작동하지 않습니다. 캐시를 지우고 메뉴 스크립트를 JS 지연에서 제외합니다.

마스터 애드온 프로가 필요한 것

이 설정의 두 부분에는 Master Addons Pro가 필요합니다.

데스크탑이나 태블릿의 햄버거와 팝업 및 오프캔버스 유형. 레이아웃은 모든 기기에서 수평 및 수직 기능을 제공하며 햄버거에는 Pro라고 표시되어 있습니다. 전화기는 기본 햄버거를 즉시 사용할 수 있지만 더 넓은 화면의 햄버거와 팝업 또는 오프캔버스 유형에는 Pro가 필요합니다. 따라서 슬라이딩 오프캔버스 메뉴는 햄버거 레이아웃이나 별도의 레이아웃을 통해 여기에서 유료 기능입니다 캔버스 외부 콘텐츠 위젯패널에 저장된 템플릿을 여는. Pro 가 없으면 가장 가까운 옵션은 Vertical 레이아웃의 Side 유형입니다.

테마 빌더 타겟팅은 하나의 규칙입니다. 무료 테마 빌더는 정확히 하나의 표시 조건을 저장합니다: 전체 사이트. 방문 페이지 또는 로그인 회원을위한 다른 헤더는 프로가 필요합니다. 우리의 디스플레이 조건 분석 조건 규칙이 어떻게 작동하는지 설명합니다 무료 테마 빌더 가이드 해당 계층의 나머지 부분을 다룹니다.

위젯에는 호버 포인터 애니메이션이 없으며 (Elementor Pro 의 메뉴에 해당 애니메이션이 있음) 어떤 계획에도 끈적한 설정이 없습니다. 헤더를 계속 보려면 헤더 컨테이너에 Elementor Pro 의 모션 효과를 사용하거나 추가하십시오 selector { position: sticky; top: 0; z-index: 99; } 를 통해 컨테이너로 마스터 애드온 사용자 정의 CSS 확장. 그만큼 끈적한 헤더 가이드 둘 다 걷는다.

Elementor Pro 를 이미 소유하고 있다면 이 중 어느 것도 적용되지 않습니다. The 위젯 및 확장 디렉토리 플러그인의 나머지 부분을 나열하고 헤더에 직접 재구축하는 섹션이 필요한 경우 위젯 빌더 (프로) 는 진짜 위젯으로 바꾼다. The 가격 페이지 계층을 나열합니다.

자주 묻는 질문

다음에 할 일

가로 레이아웃과 하나 또는 두 개의 하위 메뉴로 헤더를 빌드한 다음 다른 스타일을 지정하기 전에 자신의 휴대폰에 로드합니다. 대부분의 메뉴 문제는 모바일 문제이며 실제 장치에서는 10초 안에 나타납니다. 메뉴에 다중 열 패널이 필요한 경우 메가 메뉴 가이드 거기에서 픽업합니다 Nav 메뉴 문서 모든 컨트롤을 나열합니다.

• Nav 메뉴 위젯 페이지: 레이아웃, 라이브 데모 및 Elementor Pro의 메뉴 위젯과의 비교.
• 메가 메뉴 확장: 내부에 Elementor 위젯이 있는 다중 열 패널.
• 메가 메뉴 데모가 포함된 숯 탐색 모음: 둘 다로 구축된 전체 헤더입니다.

관련 읽기

• 메가 메뉴란 무엇입니까? 정의, 예 및 사용 시기
• Elementor에서 레스토랑 메가 메뉴를 만드는 방법
• Elementor로 원페이지 웹사이트를 만드는 방법
• Pro 없이 Elementor를 사용하여 WordPress에서 바닥글을 편집하는 방법