Pro 없이 Elementor에서 메가 메뉴를 만드는 방법(무료 2026 가이드)

Elementor Pro 를 구입하지 않고도 Elementor 에서 전체 메가 메뉴를 빌드할 수 있습니다. 메가 메뉴는 사이트의 전체 섹션을 한 번에 보여주는 넓은 다중 열 드롭다운입니다: 링크,이미지, 아이콘,심지어 연락처 양식까지,얇은 세로 목록 대신 Elementor 의 무료 버전에는 메가 메뉴 위젯이 없지만 무료입니다 마스터 애드온 메가 메뉴 하나를 추가하고 일반 Elementor 편집기로 각 패널을 디자인합니다.

이 가이드는 전체 빌드를 다룹니다: 확장 기능 활성화,메가 메뉴를 메뉴 항목에 첨부,드롭 다운 패널 디자인,모바일에서 바로 가져 오기,대부분의 튜토리얼은 건너 뜁니다.

메가 메뉴에 Elementor Pro가 필요합니까?

아니. Elementor 에서 메가 메뉴로가는 세 가지 경로가 있으며 그 중 하나만 비용이 듭니다:

메가 메뉴가 업그레이드를 하려는 유일한 이유라면 무료 경로도 동일한 작업을 수행합니다. 마스터 애드온도 충돌 없이 Elementor Pro 와 함께 실행되므로 기존 Pro 라이센스가 낭비되지 않습니다. Elementor 여기에 자체 Pro 메가 메뉴 워크플로우를 문서화합니다 두 가지 접근 방식을 나란히 비교하려면; 시작하려면 몇 가지 실험 기능을 켜야 합니다.

시작하기 전에 필요한 것

• Elementor(무료 버전은 괜찮음)가 설치되어 활성화되어 있습니다
• Elementor용 마스터 애드온 설치되고 활성화됩니다
• 아래에 이미 생성된 WordPress 메뉴입니다 외관 → 메뉴 (대략적인 것이라도 나중에 편집할 수 있습니다)

1단계: 메가 메뉴 확장을 활성화합니다

로 이동 마스터 애드온 → 애드온 및 확장 wordpress 대시보드에서 찾으세요 메가 메뉴 확장 목록 에서,그리고 그것을 켜십시오. 저장.

마스터 애드온은 기본적으로 모든 것이 꺼진 상태로 제공되므로 사용하는 것만로드합니다. 이것이이 단계가 전혀 존재하는 이유입니다. 옵션이 즉시 표시되지 않으면 관리자 페이지를 하드 새로 고침 (Cmd/Ctrl + Shift + R); 캐싱 플러그인은 1 분 동안 이전 관리자 메뉴를 유지합니다.

2단계: 메뉴 항목을 메가 메뉴로 바꿉니다

오픈 외관 → 메뉴 그리고 메가 패널에서 삭제하려는 최상위 항목, 일반적으로 “제품”, “서비스” 또는 “상점”과 같은 광범위한 항목을 확장하십시오.

1. 틱 더 메가 메뉴 활성화 해당 메뉴 항목의 옵션입니다.
2. 패널 너비를 선택하십시오. 전폭은 가장자리에서 가장자리까지 늘이고,컨테이너 너비는 콘텐츠에 맞춰 정렬됩니다.
3. 메뉴 저장.

진정으로 공간을 필요로하는 항목에서만 활성화하십시오. 단일 “연락처”링크의 메가 메뉴는 일반 링크보다 나쁩니다: 사람들이 하나의 목적지를 위해 더 열심히 일하게 만듭니다.

3단계: Elementor에서 드롭다운 패널을 설계합니다

패널 내용은 Elementor 템플릿으로, 이 접근 방식을 유연하게 만듭니다: 페이지에서 만들 수있는 모든 것을 메뉴 안에 넣을 수 있습니다.

1. 클릭 메가 메뉴 내용 편집 elementor 편집기를 열 메뉴 항목에서.
2. 다중 열 레이아웃을 구축합니다. 3 개 또는 4 개의 열이 대부분의 탐색에 적합합니다.
3. 열 채우기: 제목 위젯을 카테고리 레이블로, 아이콘 목록을 링크 그룹으로, 시각적 앵커링을 위한 이미지 한두 개.
4. 템플릿을 게시합니다.

메가 메뉴가 단지 바쁜 것처럼 보이지 않고 작동하게 만드는 몇 가지:

• 조직도가 아닌 고객의 사고방식으로 그룹화합니다. 열 제목은 방문자가 사용하는 단어와 일치해야 합니다.
• 열당 대략 5~7개의 링크로 캡을 씌웁니다. 그 과거에는 스캔이 무너지고 메뉴가 벽이 됩니다.
• 한 열에 작업을 제공합니다. 추천 제품, 프로모션 또는 행동 촉구 네 번째 링크 목록보다 더 많은 공간을 확보합니다.
• 이미지를 가볍게 유지하세요. 메뉴 이미지는 모든 페이지에로드됩니다. 그들을 압축하고 WebP 를 제공: 무거운 메가 메뉴는 전체 사이트의 드래그합니다 로드 시간, 한 페이지가 아닙니다.

4단계: 헤더에 메뉴를 추가합니다

테마가 이미 헤더에서 WordPress 메뉴를 렌더링하면 메가 메뉴가 즉시 작동합니다. 더 이상 단계가 필요하지 않습니다.

헤더 자체를 완전히 제어하려면 free로 하나를 구축하세요 마스터 애드온 테마 빌더: 헤더 템플릿을 생성하고 드롭합니다 Nav 메뉴 위젯를 선택하고,메가 메뉴를 운반하는 메뉴를 선택하고,전체 사이트에 표시 조건을 설정합니다. 그 페어링,무료 테마 빌더 플러스 무료 메가 메뉴는 사람들이 가장 자주 프로를 구입하는 두 가지 기능을 대체합니다.

5단계: 모바일 환경 수정

대부분의 메가 메뉴가 무너지는 곳입니다. 1440px 화면에서 날카롭게 보이는 4 열 패널은 전화기에서 끝없는 스크롤이됩니다.

• Elementor 에서 모바일 보기로 전환하고 패널의 실제 높이를 확인합니다. 두 화면을 지나 실행되면 모바일용 콘텐츠를 잘라냅니다.
• Elementor의 반응형 가시성 컨트롤을 사용하여 모바일에서 장식 이미지를 숨깁니다; 링크를 유지하고 장식을 떨어뜨리세요.
• 기둥을 수직으로 쌓고 탭 대상이 편안하게 크다는 것을 확인하세요.
• 편집기 미리보기뿐만 아니라 실제 휴대폰에서 테스트합니다. 미리보기는 대략적입니다; 터치 동작을 재현하지 않습니다.

중단점이 디자인과 일치하지 않으면 무료입니다 사용자 지정 중단점 확장 직접 설정할 수 있습니다. 기본 태블릿 중단점이 메뉴를 어색한 너비로 잘라낼 때 유용합니다.

문제 해결

• 메가 메뉴가 나타나지 않습니다. 확장 프로그램이 전환되었는지,메가 메뉴 사용 항목이 체크되어 있는지,패널 템플릿이 초안으로 남지 않고 게시되었는지 확인합니다. 그런 다음 캐시를 지웁니다.
• 패널이 나타나지만 스타일이 지정되지 않았습니다. 보통 캐시된 스타일시트. 페이지 캐시와 모든 CDN 을 제거한 다음 하드-다시 로드합니다.
• 패널은 콘텐츠 뒤에 잘리거나 숨겨져 있습니다. 상위 컨테이너에는 다음이 있습니다 overflow: hidden 또는 낮은 z-index.헤더의 z-index 를 올리고 헤더 컨테이너의 오버플로 설정을 확인합니다.
• 데스크탑에서 작동, 모바일에서 깨진. 거의 항상 토글/햄버거 영역. 메뉴 위젯의 모바일 설정을 확인하고 탭 대상에 오버레이되는 항목을 확인하지 마십시오.

자주 묻는 질문

관련 읽기

• Elementor 테마 빌더를 무료로 사용하는 방법
• Elementor에서 무료로 팝업을 추가하는 방법
• Elementor를 사용하여 WordPress에서 바닥글을 편집하는 방법