표준 드롭다운은 얇은 링크 목록을 보여줍니다. 메가 메뉴는 사이트의 전체 섹션을 한 번에 표시하는 넓은 패널을 엽니다: 그룹화된 링크 열,이미지, 아이콘,심지어 행동 촉구까지. The 메가 메뉴 확장 Elementor용 마스터 애드온 이 패널 중 하나를 WordPress 메뉴 항목에 연결하면 일반 Elementor 편집기에서 패널 자체를 디자인하므로 페이지에서 구축할 수 있는 모든 것이 탐색 내부에 존재할 수 있습니다. 빠른 개요 및 데모는 다음을 참조하세요 무료 Elementor 메가 메뉴 빌더 페이지.
다음은 데모의 완성된 결과입니다: 제품을 호버링하면 그룹화된 링크와 추천 이미지가 있는 3열 패널이 열립니다.
메가 메뉴 확장 기능이 수행하는 작업 #
활성화되면 WordPress 메뉴의 모든 항목에 메가 메뉴 구성 팝업이 나타납니다 외관 → 메뉴. 아이템에 대해 켜면 해당 아이템의 드롭다운이 Elementor 템플릿이 됩니다. 확장 기능은 다음을 처리합니다:
- 품목별 패널: 메가 패널이 필요한 항목에만 활성화하십시오; 나머지는 일반 링크를 유지합니다.
- 시각적 패널 디자인: 드롭다운 콘텐츠는 Elementor 편집기로 제작되며 원하는 위젯을 사용합니다.
- 메가 메뉴 너비: 정확한 픽셀 값을 갖는 기본값, 전체 너비 또는 사용자 정의 너비입니다.
- 트리거 효과: 호버링이나 클릭 시 패널을 엽니다.
- 전환: 패널 애니메이션 방식을 선택하고 데모에서 페이드합니다.
- 모바일 메뉴: 토글 메뉴 안에 빌더 콘텐츠를 표시하는 것을 포함하여 휴대폰에 어떤 정보가 제공되는지 결정하세요.
- 배지 및 아이콘: 메뉴 항목 라벨에 하이라이트 배지 (무료), 또는 자체 색상이 있는 아이콘 (Pro) 을 첨부합니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치 및 활성화; 무료 버전으로 충분합니다.
- Elementor용 마스터 애드온 설치 및 활성. 플러그인에 새로운? 따라 설치 가이드 첫번째.
- 아래에 이미 생성된 WordPress 메뉴입니다 외관 → 메뉴, 심지어 거친 것; 나중에 다듬을 수 있습니다.
참고: 페이지 스타일 옵션에서 메가 메뉴의 배경을 제어할 수 있습니다. 배경 색상,이미지 또는 원하는 것을 페이지 스타일 옵션에 넣어야 합니다. 기본적으로 흰색 배경으로 설정됩니다. 하지만 이 설정에서 배경 사용자 정의를 수행할 수 있습니다. –을 살펴보세요
1 단계: 메가 메뉴 확장 프로그램 사용 #
WordPress 대시보드에서 다음으로 이동하세요 마스터 애드온 그리고 열어보세요 확장 탭. 메가 메뉴는 에 앉습니다 디스플레이 위젯 그룹. 보라색으로 변하도록 토글을 클릭한 다음 누르십시오 변경 사항 저장 그리고 녹색 “설정이 성공적으로 저장”공지를 기다립니다. 마스터 애드온 기본적으로 모든 꺼짐과 함께 배송 그래서 귀하의 사이트는 실제로 사용하는 것만로드합니다. 새 옵션이 바로 관리자에 표시되지 않으면 하드 새로 고침 페이지 (Cmd/Ctrl + Shift + R); 캐싱 플러그인은 1 분 동안 이전 관리자 메뉴를 유지하는 경향이 있습니다.
2 단계: 메뉴에 대한 메가 메뉴를 켭니다 #
오픈 외관 → 메뉴. 새로운 마스터 애드온 메가 메뉴 메뉴 항목 목록 위에 상자가 나타납니다. 전환 메가 메뉴 활성화 에와 녹색 “메가 메뉴 저장” 확인을 기다립니다. 메뉴 구조의 모든 항목은 이제 보라색으로 운반됩니다 마스터 메가 배지, 즉 패널을 호스팅할 수 있습니다.
3 단계: 메뉴 항목에서 패널을 활성화합니다 #
일반적으로 제품이나 서비스와 같이 광범위한 최상위 항목을 마우스를 가져가서 메가 메뉴 설정을 엽니다. 팝업에서 콘텐츠 탭, 뒤집기 메가메누 활성화 에 네. 그만큼 메가메누 콘텐츠 편집 버튼이 나타납니다; 이 항목의 패널에 대한 Elementor 편집기를 엽니다. 누르십시오 저장 완료되었을 때 팝업에 있습니다.
진정으로 공간이 필요한 항목의 패널만 활성화합니다. 단일 연락처 링크의 메가 메뉴는 방문자가 하나의 목적지를 위해 더 열심히 일하게 만듭니다.
4 단계: Elementor 에서 패널을 디자인합니다 #
클릭 메가메누 콘텐츠 편집 그리고 친숙한 Elementor 편집기는 패널을 캔버스로 엽니다. 데모는 세 개의 열을 만듭니다: 레코드 및 분석 제목 아래에 두 개의 링크 그룹과 패널이 텍스트의 벽이 아닌 이미지 열을 더한 레이아웃이 준비되면 템플릿을 게시합니다; 초안 템플릿은 라이브 메뉴에서 렌더링되지 않으며,이는 다른 어떤 것보다도 사람들을 넘어 뜨립니다.
그룹 링크는 조직도가 아닌 고객의 사고 방식에 따라 각 열을 5~7개의 링크로 제한합니다; 그 과거에는 스캔이 축소됩니다. 추천 제품이나 a와 같이 링크 이상의 작업을 한 열에 제공합니다 행동 촉구. 그리고 이미지를 압축된 상태로 유지하세요. 왜냐하면 패널은 사이트의 한 페이지가 아닌 모든 페이지에 로드되기 때문입니다.
5 단계: 너비, 트리거 및 전환 설정 #
항목 팝업으로 돌아갑니다 설정 탭은 패널의 동작 방식을 제어합니다:
- 메가 메뉴 너비: 기본값은 메뉴와 일치하며 전체 너비는 가장자리에서 가장자리로 확장되며 사용자 정의 너비는 800px와 같은 정확한 픽셀 값을 사용합니다.
- 모바일 메뉴: 어떤 전화가 수신; 빌더 콘텐츠는 모바일 토글 메뉴 내부에 동일한 디자인 패널을 보여줍니다.
- 트리거 효과: 마우스 오버에서 패널을 여는 호버; 고의적으로 열기를 원하는 경우 클릭하도록 전환합니다.
- 전환: 입구 애니메이션, 데모에서 페이드.
- 메뉴 표시 라벨/설명 표시(Pro): 항목에 대한 선택적 라벨 및 설명 텍스트입니다.
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 배지 동일한 팝업의 탭에는 새 항목 또는 판매 항목을 표시하는 데 유용한 강조 표시 배지가 첨부됩니다. The 아이콘 탭에서 아이콘과 아이콘 색상을 보려면 Master Addons Pro가 필요합니다.
6 단계: 메뉴를 헤더에 넣으십시오 #
테마가 이미 WordPress 메뉴를 렌더링하면 메가 메뉴가 즉시 작동합니다. 전체 헤더 제어를 위해 무료로 하나를 구축하십시오 마스터 애드온 테마 빌더: 헤더 템플릿을 생성하고 드롭합니다 Nav 메뉴 위젯를 선택하고 메가 패널을 운반하는 메뉴를 선택합니다. 위젯의 일반 섹션에서는 레이아웃,정렬 및 메뉴가 축소되는 중단점을 다룹니다.
모바일 뷰를 확인합니다 #
게시하기 전에 Elementor 편집기를 모바일 미리보기로 전환하십시오. 메뉴는 햄버거 토글 뒤에 무너지고 링크는 수직으로 쌓입니다. 여기에서 패널의 실제 높이를 확인하십시오; 1440px 에서 날카롭게 보이는 4 열 패널은 전화기에서 끝없는 스크롤로 바뀔 수 있습니다. 길게 실행되면 Elementor 의 반응 형 가시성 컨트롤로 장식 이미지를 숨기고 링크를 유지하십시오. 그런 다음 실제 전화기에서 테스트하십시오. 미리보기는 터치 동작에 가깝지만 재현하지 않기 때문입니다.
페이지의 결과 #
전체 너비를 선택한 경우 게시된 패널은 전체 뷰포트 가장자리에서 가장자리까지 확장됩니다; 이 페이지 상단의 박스형 버전은 비교를 위해 기본 너비를 보여줍니다. 어느 쪽이든 항목을 마우스오버하면 선택한 전환으로 디자인된 템플릿이 열립니다.
메가 메뉴가 잘 작동하는 곳 #
- 상점. Shop 아래 하나의 패널에 제품 카테고리, 베스트셀러 및 프로모션 이미지가 있습니다.
- 대행사 및 서비스 사업. 주요 사례 연구를 통해 결과별로 그룹화된 서비스입니다.
- 출판사 및 블로그. 최신 게시물이 포함된 주제 허브가 패널에 들어있습니다.
- SaaS 사이트. 중첩된 드롭다운 대신 기능, 솔루션 및 리소스가 나란히 구성됩니다.
- 대학 및 단체. 그렇지 않으면 세 가지 레벨을 깊이 묻어 버릴 부서 및 빠른 링크.
문제 해결 #
- 메가 메뉴가 나타나지 않습니다. 확장자 토글이 켜져 있고 메뉴 항목에 메가메뉴 사용 설정이 YES 로 설정되어 있으며 패널 템플릿이 초안으로 저장되지 않고 게시되어 있는지 확인합니다. 그런 다음 캐시를 지웁니다.
- 패널이 나타나지만 스타일이 지정되지 않았습니다. 보통 캐시된 스타일시트. 페이지 캐시와 모든 CDN 을 제거한 다음 하드-다시 로드합니다.
- 패널이 잘리거나 숨겨집니다. 부모 컨테이너에 오버플로 숨김 또는 낮은 z-index 가 있습니다. 헤더의 z-index 를 올리고 헤더 컨테이너의 오버플로 설정을 확인합니다.
- 데스크탑에서 작동, 모바일에서 깨진. 거의 항상 토글 영역. Nav 메뉴 위젯의 모바일 설정을 확인하고 탭 대상에 오버레이되는 것이 없음을 확인합니다.
자주 묻는 질문 #
Pro 없이 Elementor에서 메가 메뉴를 추가하려면 어떻게 해야 합니까?
마스터 애드온 확장 탭에서 메가 메뉴 확장을 활성화하고 모양 → 메뉴에서 메가 메뉴 활성화를 켜고 원하는 항목에서 메가메뉴 활성화를 YES로 설정하고 메가메뉴 콘텐츠 편집으로 패널을 디자인합니다. Elementor Pro는 필요하지 않습니다.
메가 메뉴 확장 프로그램은 무료입니까?
예. Mega Menu 는 확장 탭의 디스플레이 위젯 그룹에서 Elementor 용 Master Addons 무료 버전과 함께 제공됩니다. The 가격 페이지 pro 플랜이 추가하는 내용을 다룹니다.
패널은 전폭 일 수 있습니까?
예. 항목 팝업의 설정 탭은 기본값,전체 너비 및 사용자 지정 너비를 제공합니다. 사용자 지정 너비는 페이지보다 패널이 좁아지도록 할 때 800px 와 같은 정확한 픽셀 값을 사용합니다.
드롭다운 패널 안에 무엇을 넣을 수 있나요?
Elementor 가 구축 할 수있는 모든 것: 표제 위젯,아이콘 목록,이미지, 버튼,양식. 패널은 일반 Elementor 템플릿이므로 페이지에서 사용할 수있는 모든 위젯은 메뉴에서 사용할 수 있습니다.
모바일에서 메가 메뉴는 어떻게 작동하나요?
메뉴는 햄버거 토글 뒤에 축소되고 링크는 수직으로 쌓입니다. 모바일 메뉴 설정은 휴대폰이 토글 안에 디자인된 빌더 콘텐츠를 넣을지 여부를 제어하며 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 메가 메뉴 확장 일반 WordPress 메뉴를 세 가지 동작으로 설계된 탐색으로 전환합니다: 확장 프로그램을 켜고, 항목에서 패널을 활성화하고, Elementor에서 드롭다운을 구축합니다. 너비, 트리거, 전환, 배지 및 (Pro 포함) 아이콘은 모두 항목 팝업에서 설정되어 있으며, 무료와 페어링됩니다 테마 빌더 그리고 Nav 메뉴 위젯 elementor Pro 없이 완전한 사용자 정의 헤더를 제공합니다. 의 전체 세트 마스터 애드온 위젯 및 확장 한 페이지 떨어져 있습니다.
