Elementor Nav 메뉴 위젯: Elementor Pro가 필요하지 않습니다
Nav 메뉴는 모든 WordPress 메뉴를 Elementor 헤더,바닥글 또는 페이지에 배치하고 패널에서 스타일을 지정할 수있는 Master Addons 위젯입니다. 각 장치에 대한 수평 또는 수직 레이아웃을 선택하고 기본 항목,드롭 다운 및 하위 메뉴를 정상,호버 및 활성 상태로 스타일링하고 다중 열 패널 용 Mega Menu 확장과 페어링하십시오. 전화에서는 기본적으로 햄버거 토글로 축소됩니다. Master Addons Pro 는 Popup 및 Offcanvas 메뉴와 함께 모든 너비에 대한 Hamburger 레이아웃을 추가합니다.
수평, 수직 및 햄버거 레이아웃
데스크탑,태블릿 및 휴대폰에 대해 레이아웃을 별도로 설정합니다. 가로형은 상단 막대에 적합합니다. 세로형은 네 가지 유형으로 제공됩니다: 측면 드롭다운이 있는 일반,토글, 아코디언 및 메뉴를 페이지 가장자리에 고정하는 사이드. 전화는 기본적으로 햄버거 토글을 사용합니다. Pro 를 사용하면 모든 너비에 대해 햄버거를 선택하고 기본 드롭다운,팝업 또는 오프캔버스 패널로 메뉴를 열 수 있습니다.
- Elementor 의 추가 중단점을 포함하여 장치별로 설정된 레이아웃.
- 일반, 토글, 아코디언 또는 측면의 수직 메뉴.
- Master Addons Pro가 포함된 팝업 및 오프캔버스 햄버거 메뉴.
- 와 함께 작동합니다 메가 메뉴 다중 열 패널용 확장.
수직 메뉴 레이아웃: 일반, 토글, 아코디언 및 측면
레이아웃에서 수직 을 선택하고 두 번째 컨트롤인 유형이 나타납니다. 각 유형은 하위 메뉴를 다른 방식으로 열고 장치별로 레이아웃과 유형을 모두 설정할 수 있으므로 데스크톱에서는 메뉴가 정상으로 유지되고 휴대폰에서는 아코디언으로 전환할 수 있습니다.
- 보통의 리더가 상위 항목을 마우스를 올리면 목록 측면에 하위 메뉴가 열립니다.
- 토글 클릭 시 상위 메뉴 아래에 하위 메뉴를 확장하고 여러 메뉴가 한 번에 열려 있을 수 있습니다.
- 아코디언 또한 클릭 시 확장되지만 하위 메뉴 하나를 열면 열려 있던 하위 메뉴가 닫힙니다.
- 사이드 페이지 가장자리에 메뉴를 고정합니다. 주요 항목만 바에 있고 하위 메뉴는 바 옆 패널에서 열립니다.
일반: 하위 메뉴가 호버링 시 측면으로 열립니다.
전환: 하위 메뉴가 해당 항목 아래로 확장됩니다.
아코디언: 한 번에 하나의 하위 메뉴가 열립니다.
측면: 페이지 가장자리에 있는 막대의 주요 항목과 그 옆에 있는 패널의 하위 메뉴.
모든 메뉴 레벨과 상태를 스타일링합니다
스타일 탭에는 기본 메뉴 항목,드롭다운 메뉴,드롭다운 메뉴 항목,드롭다운 하위 메뉴 및 드롭다운 하위 메뉴 항목에 대한 별도의 섹션이 있습니다. 각각은 일반,호버 및 활성 상태에 대한 색상과 배경,더하기 패딩,테두리 및 구분선을 가져오므로 현재 페이지의 링크는 나머지와 다르게 보일 수 있습니다.
- 주요 항목 및 드롭다운 항목에 대한 일반, 호버 및 활성 상태입니다.
- 드롭다운 패널, 해당 항목 및 더 깊은 하위 메뉴에 대한 별도의 스타일링.
- 유형, 크기 및 색상에 따른 항목 간 구분선입니다.
햄버거 토글 및 표시기 아이콘
햄버거 토글을 기본,스택 또는 프레임 보기와 정사각형 또는 원형 모양으로 아이콘,텍스트 또는 둘 다로 스타일 지정합니다. 메뉴가 닫혀 있는 동안 하나의 아이콘을 표시하고 열려 있는 동안 다른 아이콘을 표시할 수 있습니다. 표시기 아이콘은 드롭다운 및 하위 메뉴가 있는 항목을 표시합니다: 자신의 아이콘을 선택하고 표시하거나 숨기고 크기,색상, 위치 및 회전을 설정합니다.
- 햄버거는 아이콘, 텍스트 또는 둘 다로 전환됩니다.
- 닫힌 메뉴와 열린 메뉴에 대한 다양한 아이콘입니다.
- 회전이 포함된 사용자 정의 드롭다운 및 하위 메뉴 표시기 아이콘입니다.
드롭다운 간격 및 장치별 레이아웃
드롭다운 너비와 메뉴 상단의 간격,각 링크 내부의 항목과 패딩 사이의 간격을 설정합니다. 전환 기간은 호버 색상과 드롭다운의 변화 속도를 제어합니다. 레이아웃은 장치별로 설정되어 있기 때문에 메뉴가 가로 막대에서 세로 목록으로 전환되거나 Pro 가 있는 햄버거로 전환되는 위치를 결정합니다.
- 드롭다운 너비와 상단으로부터의 간격.
- 쉽게 탭할 수 있도록 항목과 링크 패딩 사이의 간격이 있습니다.
- 호버 및 드롭다운 변경에 대한 전환 기간입니다.
Elementor Pro 메뉴 위젯과 Master Addon Nav 메뉴
Elementor 의 무료 플러그인에는 WordPress 메뉴를 배치하고 스타일링하기위한 위젯이 없습니다. 그 메뉴와 WordPress 메뉴 위젯은 Elementor Pro 와 함께 제공됩니다. 비교 방법은 다음과 같습니다.
| 엘리멘터 프로 | 마스터 애드온 Nav 메뉴 | |
|---|---|---|
| 가격 | Elementor Pro 라이센스 | 마스터 애드온에 포함; Pro가 포함된 팝업 및 오프캔버스 햄버거 유형 |
| 레이아웃 | 수평, 수직, 드롭다운 | 가로, 세로 (4 종), 햄버거 |
| 모바일 메뉴 | 선택한 중단점 아래로 전환합니다 | 기본적으로 휴대 전화에 햄버거; Pro와 팝업 및 오프 캔버스 |
| 장치별 레이아웃 | 하나의 중단점 설정 | 모든 장치에 대해 설정합니다 |
| 호버 포인터 애니메이션 | 예 | 아니요 |
| 메가 메뉴 | 드롭다운 콘텐츠가 포함된 메뉴 위젯 | 메가 메뉴 확장 |
Elementor Pro 에 대해 이미 비용을 지불하면 해당 메뉴 위젯이 작업을 수행합니다. 그것없이 Nav 메뉴 및 메가 메뉴 확장은 Elementor Pro 없이 스타일이 지정된 헤더 메뉴를 제공합니다.
Nav 메뉴를 한눈에 살펴보세요
위젯이 수행하는 작업은 Master Addon 3.2.3에서 읽어보세요.
| 항목 | Nav 메뉴 위젯 |
|---|---|
| 메뉴 소스 | 메뉴 선택에서 선택한 모양, 메뉴의 모든 메뉴입니다 |
| 레이아웃 | 모든 장치에 수평 및 수직; 기본적으로 휴대폰의 햄버거 |
| 수직 유형 | 일반, 토글, 아코디언 및 측면 |
| 데스크탑과 태블릿에 햄버거 | 마스터 애드온 프로 |
| 햄버거 종류 | 전화에 기본값; Pro를 사용하면 팝업 및 오프캔버스가 제공됩니다 |
| 하위 메뉴 | 드롭다운, 해당 항목, 더 깊은 하위 메뉴 및 해당 항목에 대한 별도의 스타일 섹션입니다 |
| 주 | 주요 항목 및 드롭다운 항목에 대한 일반, 호버 및 활성 |
| 표시기 아이콘 | 크기, 색상, 위치 및 회전과 함께 선택한 드롭다운 및 하위 메뉴 아이콘입니다 |
| 호버 포인터 애니메이션 | 아니오 (Elementor Pro 의 메뉴 위젯에는 그것들이 있습니다) |
| 끈적끈적한 | 위젯에 설정이 없습니다; 헤더 컨테이너를 끈적하게 만듭니다 |
| 메가 메뉴 패널 | 메가 메뉴 확장 |
| 필요 | Elementor 및 Master Addons, Elementor Pro 없음 |
Nav 메뉴 예
위젯으로 빌드된 라이브 데모 5 개. 하나를 연 다음 아래 템플릿 뷰어에서 레이아웃을 가져옵니다.
- 숯불 나브바와 메가 메뉴: 다중 열 메가 메뉴 패널이 있는 어두운 헤더 막대입니다.
- 상단 바가 있는 탐색 메뉴: 메인 메뉴 위의 연락처 스트립.
- 드롭다운 메뉴 변형: 동일한 메뉴에 여러 드롭다운 스타일이 있습니다.
- 수직 탐색 메뉴: 메뉴를 수직 목록으로 표시합니다.
- 수직 사이드 메뉴: 페이지 가장자리에 고정된 측면 유형입니다.
Elementor 에서 nav 메뉴를 추가하는 방법
위젯은 WordPress에서 빌드한 메뉴를 사용하므로 거기서 시작하세요.
- 모양 > 메뉴에서 메뉴를 만듭니다.
- Elementor에서 마스터 애드온 Nav 메뉴 위젯을 머리말, 바닥글 또는 페이지로 드래그하세요.
- 메뉴 선택에서 메뉴를 선택하고 데스크탑 레이아웃을 선택하세요.
- 태블릿 및 휴대폰 보기로 전환하여 각 장치의 레이아웃을 확인합니다. 휴대폰은 기본적으로 햄버거 토글을 얻습니다.
- 메뉴 항목, 드롭다운을 스타일링하고 스타일 탭에서 전환한 다음 게시합니다.
전체 헤더 연습을 보려면 다음을 읽어보세요 pro 없이 Elementor에서 탐색 메뉴를 구축하는 방법. 사이트 전체 헤더의 경우 free 를 사용합니다 테마 빌더.
다음과 잘 짝을 이룹니다: 메가 메뉴 다중 열 패널의 경우 캔버스 외부 콘텐츠 (Pro) 슬라이드아웃 패널의 경우 테마 빌더 사이트 전체 헤더의 경우 표시 조건 (Pro) 로그인한 방문자에게 다른 메뉴를 표시합니다 탭 페이지 내 탐색용.
Nav 메뉴에 대해 자주 묻는 질문
다른 Nav Menu 위젯과 어떻게 다른가요?
Elementor 의 자체 메뉴 위젯에는 Elementor Pro 가 필요합니다. 마스터 애드온 Nav 메뉴는 Elementor Pro 없이 실행되며 장치별 레이아웃,4 개의 수직 메뉴 유형,모든 메뉴 수준 및 상태에 대한 별도의 스타일링,사용자 지정 표시 아이콘 및 스타일 지정 가능한 햄버거 토글을 추가합니다. 또한 Mega Menu 확장 기능에서도 작동합니다.
이 메뉴를 메가 메뉴 확장과 함께 사용할 수 있나요?
예. 메가 메뉴 확장 프로그램을 켜고 WordPress 메뉴 화면에서 메뉴 항목에 대한 패널 콘텐츠를 빌드한 다음 Nav 메뉴 위젯에서 해당 메뉴를 선택합니다. 위젯은 프런트 엔드에 메가 메뉴 패널을 보여줍니다.
정상, 호버, 액티브에 대해 다양한 스타일을 설정하는 것이 어렵습니까?
아니요. 스타일 탭을 열고 메뉴의 기본 메뉴 항목과 같은 부분을 선택한 다음 일반 탭, 호버 탭, 활성 탭 사이를 전환하여 각 상태의 색상을 설정합니다.
위젯에 표시되는 메뉴를 어떻게 편집하나요?
위젯은 WordPress 메뉴를 보여 주므로 모양,메뉴에서 편집합니다. 거기에 항목을 추가,이름 변경 또는 재정렬하고 저장합니다. 위젯의 메뉴 선택 컨트롤은 해당 화면에 대한 직접 링크를 가지며 변경 사항은 새로 고침 후 Elementor 에 표시됩니다.
하위 메뉴를 어떻게 추가하나요?
모양,메뉴에서 WordPress 가 하위 항목으로 표시 할 때까지 항목이 속한 항목 아래의 오른쪽으로 항목을 조금 드래그 한 다음 저장하십시오. 위젯은 드롭 다운으로 표시합니다. 스타일,드롭 다운 메뉴 및 드롭 다운 메뉴 항목에서 스타일 지정하십시오.
Pro 없이 모바일에서 햄버거 메뉴를 받을 수 있나요?
예. 전화에서는 위젯이 기본적으로 햄버거로 전환되고 메뉴는 토글 아래에 열립니다. 데스크톱이나 태블릿에서 햄버거를 사용하거나 팝업 또는 오프캔버스 패널로 열려면 Master Addons Pro 가 필요합니다.
"Offcanvas" 또는 "Popup" 메뉴 유형의 가장 좋은 사용 사례는 무엇입니까?
둘 다 Pro 햄버거 유형입니다. 오프캔버스는 메뉴를 왼쪽이나 오른쪽에서 밀어 넣는데,이는 휴대폰과 최소한의 디자인에 적합합니다. 팝업은 페이지 위에 메뉴를 열어 포트폴리오나 대행사 사이트의 전체 사이트 탐색에 잘 작동합니다. Pro 가 없으면 휴대폰의 햄버거는 토글 아래에 있는 메뉴를 엽니다.
이 메뉴는 기존 워드 프레스 테마의 헤더와 함께 작동합니까?
예,Elementor 가 실행되는 모든 곳에 위젯을 배치할 수 있습니다. 테마의 헤더를 완전히 교체하려면 free 로 헤더 템플릿을 구축하십시오 마스터 애드온 테마 빌더 그리고 여기에 Nav 메뉴 위젯을 추가하세요.
모바일과 데스크톱에서 다른 메뉴 스타일을 사용할 수 있나요?
예. 레이아웃,정렬 및 많은 스타일 설정은 장치별로 설정할 수 있습니다. 예를 들어 데스크탑에 가로 막대를 유지하고 태블릿에 세로 아코디언을 사용하고 휴대폰에 햄버거 토글을 사용합니다.
메뉴를 끈적하게 만들 수 있나요?
위젯은 끈적한 설정이 없으므로 대신 헤더 컨테이너를 끈적하게 만듭니다. Elementor Pro 를 사용하면 해당 컨테이너에 Advanced,Motion Effects,Sticky: Top 을 사용합니다. Pro 가 없으면 추가하십시오 selector { position: sticky; top: 0; z-index: 99; } 마스터 애드온 사용자 정의 CSS 섹션의 컨테이너에. 우리의 끈적한 헤더 가이드 전체 설정을 다룹니다.
왜 내 메뉴가 표시되지 않습니까?
네 가지를 확인하십시오. 위젯은 메뉴 선택에서 선택한 메뉴가 필요하고 사이트는 모양,메뉴 아래에 적어도 하나의 메뉴가 필요합니다. 헤더 템플릿은 표시 조건이 적용되는 위치 만 보여줍니다. 전화에서 메뉴는 햄버거로 접혀 있으므로 헤더 배경에서 토글 색상이 눈에 띄는지 확인하십시오. 마지막으로 캐시와 변경 후 JavaScript 지연 설정을 지우십시오.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
![Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
