워드프레스 웹사이트를 디자인 할 때 , 가장 보기 좋은 메가 메뉴를 만드는 데 집중하는 것이 중요합니다. 특히 다양한 제품이나 카테고리를 웹사이트에 보여주고자 하는 전자상거래
워드프레스 메가 메뉴는 이러한 카테고리들을 체계적으로 정리하여 사용자가 쉽게 탐색할 수 있도록 도와줍니다. 어떻게 가능할까요? 워드프레스 메가 메뉴는 많은 콘텐츠를 하나의 탐색하기 쉬운 메뉴에 정리하고 표시하는 훌륭한 방법입니다. 메뉴 항목을 여러 열이나 행으로 배치할 수 있으므로 사용자는 페이지를 일일이 클릭하지 않고도 사이트의 다양한 섹션을 빠르게 찾을 수 있습니다.
메가 메뉴는 웹 디자인에서 탐색을 더욱 원활하고 접근하기 쉽게 만들어 방문자 경험을 크게 향상시킬 수 있습니다. 이 가이드에서는 워드프레스 사이트에 메가 메뉴를 추가하는 간단한 단계를 안내하여 누구나 원하는 정보를 쉽게 찾을 수 있도록 도와드립니다.
워드프레스 메가 메뉴 이해하기?
그렇다면 워드프레스에서 메가 메뉴란 무엇이며, 왜 필요한 걸까요? 아마 이런 생각이 드실 겁니다. 워드프레스 메가 메뉴를 사용하면 웹사이트 소유자는 다양한 열, 미디어 콘텐츠, 그리고 웹사이트 메뉴 스타일을 자유롭게 맞춤 설정할 수 있습니다. 예전의 전통적인 메가 메뉴는 탐색하기가 복잡했지만, 시간이 지나면서 워드프레스에서 메가 메뉴를 통해 여러 카테고리를 더욱 쉽게 구성하고 정리할 수 있게 되었습니다.
일반적으로 워드프레스에는 드래그 앤 드롭 방식의 메뉴 빌더가 있어 드롭다운 메뉴, 헤더 메뉴 등 다양한 유형의 메뉴를 쉽게 만들 수 있습니다. 또한 워드프레스 테마에서 탐색 메뉴를 사용자 지정할 수 있는 플러그인도 있습니다.
하지만 사이트에 콘텐츠가 많다면 일반 메뉴로는 부족할 수 있습니다. 그럴 때는 메가 메뉴가 좋은 선택입니다. 메가 메뉴를 사용하면 워드프레스 메뉴에 여러 열로 구성된 드롭다운 메뉴를 추가하여 다양한 제목과 소제목 아래에 콘텐츠를 체계적으로 정리할 수 있습니다. 이렇게 하면 방문자가 혼란스러워하지 않고 원하는 정보를 빠르게 찾을 수 있습니다.
공감되는 내용: 워드프레스에서 메뉴에 페이지를 추가할 수 없을 때 해결 방법은?
워드프레스에서 가장 보기 좋은 메가 메뉴를 만드는 방법
워드프레스에서 가장 멋진 메가 메뉴를 만드는 것은 그리 어렵지 않습니다. Max Mega Menu 플러그인만 멋진 메가 메뉴를 손쉽게 만들 수 있습니다.
하지만 메가 메뉴 제작의 기술적인 측면에 익숙하다면 수동으로도 만들 수 있습니다. 이 섹션에서는 최상의 결과를 얻기 위해 플러그인을 사용하는 방법과 수동 방법을 모두 다룹니다.
자, 그럼 시작하겠습니다
플러그인을 사용하여 워드프레스에서 멋진 메가 메뉴를 만드는 방법
워드프레스 사이트에 메가 메뉴를 추가하는 가장 간단한 방법은 Max Mega Menu 플러그인을 사용하는 것입니다. 이 도구를 사용하면 동영상, 이미지 갤러리, 검색창 등과 같은 콘텐츠를
Max Mega Menu를 사용하면 방문자에게 유용하고 시각적으로 매력적인 메뉴를 만들 수 있습니다.
1단계: Max Mega Menu 플러그인 설치 및 설정
시작하려면 WordPress 관리자 화면 플러그인 → 새 플러그인 추가 로 이동하세요 . 검색창에 "Max Mega Menu"를 입력하고 지금 설치 및 활성화를 .
빠른 팁 : 시작하기 전에 모든 필수 페이지를 게시하고 해당 페이지로 구성된 사용자 지정 탐색 메뉴를 만들었는지 확인하세요.
활성화되면 메가 메뉴 설정에 액세스하세요. 메뉴 위치를 설정하려면 다음 단계를 따르세요.
- 외관 → 메뉴 로 이동하세요 .
- 메뉴 위치를 선택 '다른 메뉴 위치 추가'를 클릭하세요 .
- 메뉴가 표시될 위치를 선택하세요(예: 헤더, 푸터, 사이드바).
- 사용자 지정 메뉴를 지정한 다음 [메뉴 위치 추가]를 .
일반 설정 에서 메가 메뉴를 활성화하고 메뉴가 열리는 방식을 설정하세요. 다음 옵션 중에서 선택할 수 있습니다.
- 마우스 오버 의도 : 약간의 지연 후 열리므로 실수로 클릭되는 것을 방지합니다.
- 호버 : 마우스 커서를 올리면 즉시 열려 부드러운 사용 경험을 제공합니다.
- 클릭 : 클릭 또는 탭 동작이 필요하며, 터치스크린 기기에 적합합니다.
"클릭"을 선택하는 경우, 고급 → 클릭 이벤트 동작 후속 클릭 시 발생하는 동작을 제어하세요.
효과 에서 애니메이션 효과를 추가할 수도 있습니다 . 페이드 , 슬라이드 , 페이드 업 등 , 속도는 빠름에서 느림까지 설정할 수 있습니다.
2단계: 메뉴 레이아웃 및 모양 사용자 지정
Max Mega Menu는 기본 테마를 제공하지만, 사용자 지정 테마를 만들 수도 있습니다. 사용자 지정 디자인을 만들려면 다음 단계를 따르세요
- Max Mega Menu 설정에서 메뉴 테마 로 이동하세요
- 세 점 아이콘을 클릭하여 테마를 선택 하고 새 테마를 추가 .
- 일반 설정 에서 화살표 스타일, 줄 간격, 메뉴 그림자 등의 설정을 사용자 지정할 수 있습니다.
메뉴 모음 에서 최상위 메뉴의 높이, 배경색, 여백을 조정하고 테두리를 추가하여 모양을 개인 설정할 수 있습니다. 각 메뉴 항목에 대해 다음과 같은 옵션을 설정할 수 있습니다.
- 정렬 : 항목을 왼쪽, 가운데 또는 오른쪽에 배치합니다.
- 글꼴 스타일 : 사이트 디자인에 맞는 글꼴을 선택하세요.
- 배경 및 간격 : 깔끔한 디자인을 위해 배경색, 여백, 패딩 및 테두리를 설정하세요.
3단계: 메뉴에 콘텐츠 추가
Max Mega Menu는 드래그 앤 드롭 인터페이스를 제공하여 콘텐츠 추가가 간편합니다. 텍스트 링크, WooCommerce 제품, 이미지, 검색 필터까지 포함할 수 있습니다.
- 메뉴를 만들거나 편집하려면 [외관] → [메뉴] 로 이동하세요
- 왼쪽의 Max Mega 메뉴 설정에서 선택한 위치에 대해 '활성화'를
- 메뉴 구조에 페이지, 게시물, 카테고리 및 제품을 추가하세요.
- 드래그 앤 드롭으로 항목을 여러 단계로 정렬할 수 있습니다.
메가 메뉴를 만들려면 페이지 위로 마우스를 가져간 다음 '메가 메뉴'를 . 여러 열로 '그리드 레이아웃 '표준 레이아웃' '아이콘' 에서 각 항목에 아이콘을 추가해 보세요 .
모든 설정을 완료했으면 "메뉴 저장"을 메가 메뉴를 활성화하세요!
읽어보세요: 드루팔에서 워드프레스로 마이그레이션하는 방법: 완벽 가이드
워드프레스에서 메가 메뉴를 수동으로 만드는 방법
첫 번째 방법에서는 Max Mega Menu 플러그인을 사용하여 워드프레스에서 메가 메뉴를 만드는 방법을 살펴보았습니다. 이제 CSS 코드를 사용하여 워드프레스에서 보기 좋은 메가 메뉴를 만드는 방법을 알아보겠습니다.
이 방법은 메뉴 디자인 요소에 대한 유연성과 제어력을 높이고자 하는 사용자에게 유용할 수 있습니다. 하지만 최상의 결과를 얻으려면 CSS에 대한
1단계: 스테이징 환경 설정
사이트를 변경하기 전에 실제 운영 중인 사이트에 영향을 주지 않고 테스트할 수 있는 안전한 환경에서 작업하는 것이 가장 좋습니다. 웹사이트 복사본을 만들어 변경 사항을 먼저 테스트할 수 있는 스테이징 도구를 제공하는 관리형 WordPress 호스팅 서비스를
스테이징 환경을 구축하려면 다음 단계를 따르세요
- hPanel 에 로그인 하고 웹사이트를 .
- 도메인을 선택하고 관리를 .
- 왼쪽 메뉴에서 WordPress → 스테이징 으로 이동하세요
- '스테이징 생성'을 클릭하고 안내에 따라 스테이징 환경에 사용할 서브도메인을 설정하세요.
워드프레스에서 사용하지 않는 CSS를 제거하는 방법을 알아보세요
2단계: 테마의 스타일시트에 접근하여 편집합니다
스테이징 사이트가 준비되면 테마의 스타일시트를 안전하게 편집하여 메뉴를 사용자 지정할 수 있습니다.
참고 : 가능하면 메인 테마를 직접 수정하는 대신 자식 테마를 만들어 테마 업데이트 시 사용자 지정 설정이 손실되는 것을 방지하세요.
호스팅 파일 관리자에서 스타일시트에 접근하려면 다음 단계를 따르세요
- hPanel에서 파일 → 파일 관리자 로 이동하세요
- 도메인의 public_html 폴더를 선택한 다음 Staging → wp_content → themes .
- 테마 폴더를 열고 style.css 편집하세요.
마우스 커서를 올렸을 때 하위 메뉴 항목이 표시되도록 하려면 다음 코드를 추가하세요
| .main-navigation ul: hover li ul,.main-navigation ul: hover li ul li ul {display: inherit;} |
워드프레스에서 데이터베이스를 덮어쓰지 않고 스테이징 사이트를 라이브 사이트로 배포하는 방법을 알아보세요.
3단계: 메가 메뉴 맞춤 설정
이제 메가 메뉴에 독특한 스타일을 적용해 보겠습니다. 시작하는 데 도움이 될 만한 몇 가지 CSS 코드 조각을 소개합니다
메가 메뉴 내에 열을 생성하세요:
| .mega-menu li.mega-menu-column {width: 25%; /* 4열 레이아웃용 */float: left;padding: 10px;} |
메뉴 항목의 색상, 여백 및 텍스트 스타일을 사용자 지정하세요:
| .mega-menu ul.mega-sub-menu li a {color: #555;padding: 8px 15px;display: block;text-decoration: none;} |
모바일 최적화:
| @media screen and (max-width: 767px) {.mega-menu li.mega-menu-column {width: 100%;float: none;}} |
이 코드 조각들은 훌륭한 시작점이 될 수 있지만, 사이트 디자인에 맞게 필요에 따라 테스트하고 조정하는 것이 중요합니다. 사용자 지정이 완료되면 스테이징 사이트에서 운영 사이트로 변경 사항을 적용할 수 있습니다.
워드프레스에서 미디어 쿼리가 작동하지 않을 때 해결 방법을 알아보세요
워드프레스에서 가장 멋진 메가 메뉴를 만들 수 있는 최고의 메가 메뉴 플러그인
이제 여러분은 플러그인을 사용하든 CSS 코드를 사용하든 워드프레스에서 메가 메뉴를 만드는 데 필요한 모든 지식을 갖추게 되었을 거라고 확신합니다. 하지만 플러그인을 사용하는 것이 워드프레스에서 메가 메뉴를 만드는 가장 좋은 방법입니다. 간편하고 시간도 적게 걸리며 워드프레스 초보자 .
그래서 Max Mega Menu 플러그인 외에도 WordPress 웹사이트에 더 보기 좋은 메가 메뉴를 만들 수 있는 몇 가지 최고의 플러그인을 선정했습니다.
우버메뉴
UberMenu는 유연하고 반응형 메가 메뉴 및 플라이아웃 메뉴를 추가하는 데 있어 WordPress 사용자들 사이에서 최고의 선택 중 하나입니다. 이 프리미엄 플러그인을 사용하면 전환 효과, 글꼴, 메뉴 방향(가로 또는 세로), 배경색을 완벽하게 제어할 수 있습니다. 또한, 고도로 맞춤 설정 가능한 모든 옵션은 사용하기 쉬운 관리자 대시보드에서 관리할 수 있습니다.
여기에서 열 너비를 설정하고, 위젯, 단축 코드 및 사용자 지정 HTML을 추가하고, 실시간 미리보기 모드를 통해 변경 사항을 확인할 수 있습니다. UberMenu는 매력적이고 역동적인 메뉴 레이아웃을 만들고자 하는 모든 사용자에게 강력한 도구입니다.
쿼드메뉴
QuadMenu 는 다양한 옵션과 테마를 제공하는 오픈 소스 WordPress 메가 메뉴 플러그인입니다. 무료 버전을 사용하면 내비게이션 위젯을 추가하고, 메뉴 접힘을 위한 사용자 지정 브레이크포인트를 설정하고, 오프캔버스, 고정형, 가로형, 세로형 메가 메뉴 등 다양한 메뉴 스타일을 만들 수 있습니다. 이러한 유연성 덕분에 프리미엄 옵션에 비용을 들이지 않고도 사이트 스타일에 맞는 내비게이션 환경을 손쉽게 디자인할 수 있습니다.
구텐키트
GutenKit은 블록을 사용하여 메가 메뉴를 간편하게 만들 수 있도록 도와주는 강력한 Gutenberg 플러그인입니다. 다양한 사전 제작 패턴과 템플릿이 포함되어 있어 원하는 디자인을 즉시 선택하고 취향에 맞게 사용자 정의할 수 있습니다.
콘텐츠, 스타일 및 고급 사용자 지정 기능을 완벽하게 제어할 수 있는 GutenKit의 사용자 친화적인 인터페이스는 블록 편집기를 사용하여 사이트를 구축하고 다듬으려는 사용자에게 훌륭한 선택입니다.
메가 메뉴 기능과 더불어 60개 이상의 블록과 25개 이상의 모듈을 제공하여 구텐베르크 내에서 다양한 맞춤 설정이 가능하며, 블록 기반 사이트를 위한 ElementsKit의 이상적인 대안입니다.
젯메뉴
JetMenu는 이미지, 비디오, 오디오 등 풍부한 콘텐츠를 활용하여 인터랙티브한 워드프레스 메가 메뉴를 제작할 수 있는 프리미엄 플러그인입니다. 연간 43달러에 드래그 앤 드롭 방식의 메뉴 빌더와 햄버거, 가로, 세로 등 다양한 메뉴 레이아웃을 이용할 수 있습니다.
가장 눈에 띄는 기능은 사전 설정 관리자로, 다양한 메뉴에 사용할 여러 템플릿을 저장할 수 있어 유연하고 매력적인 탐색 옵션이 필요한 사이트에 이상적입니다.
히어로 메뉴
Hero Menu는 사용자 정의 WordPress 메뉴를 제작하기 위한 뛰어난 프리미엄 옵션입니다. 색상으로 구분된 인터페이스를 갖춘 부드러운 드래그 앤 드롭 빌더를 제공하여 메뉴 항목의 계층 구조를 쉽게 구성하고 시각화할 수 있습니다. 로고, 검색창, 아이콘과 같은 특수 요소를 추가하는 것도 클릭 한 번으로 간단합니다.
Hero Menu는 다양한 메뉴 스타일과 60가지 사전 설정 색상 조합을 제공하여 디자인 시간을 절약해 줍니다. Hero Menu로 제작된 메뉴는 반응형 디자인을 지원하며 WooCommerce와 완벽하게 호환되므로 전자상거래 사이트에 매우 적합합니다.
또한 Divi 및 Avada와 같은 인기 있는 WordPress 테마와 완벽하게 호환되도록 테스트되었으므로 사이트 디자인과의 원활한 통합을 보장합니다.
마무리
이제 워드프레스에서 메가 메뉴를 만드는 방법을 알았으니, 테마에 메가 메뉴 기능이 없더라도 방대한 콘텐츠로 가득한 웹사이트를 훨씬 쉽게 탐색할 수 있습니다. 메가 메뉴는 많은 양의 콘텐츠를 체계적으로 정리하여 방문자가 원하는 정보를 더 쉽게 찾을 수 있도록 도와주므로 전반적인 사용자 경험을 향상시켜 줍니다.
워드프레스 사이트를 출시하기 전에 탐색이 자연스럽고 직관적인지 확인하는 것이 매우 중요합니다. 전자상거래 사이트나 페이지가 많은 웹사이트의 경우 메가 메뉴는 획기적인 변화를 가져올 수 있습니다. 일반 메뉴와 달리 메가 메뉴는 복잡한 정보를 명확하고 시각적으로 매력적인 방식으로 구성할 수 있도록 해줍니다.
