Elementor 및 ElementsKit을 사용하여 메가 메뉴를 구축하는 방법

메가 메뉴가 없는 대규모 웹사이트를 상상할 수 있습니까? 
안 돼요!

사람들은 온라인에서 보내는 시간에 대해 점점 더 까다로워지고 있습니다. 최근 연구에 따르면  웹 사용자의 94% 쉬운 탐색이 웹사이트의 가장 유용한 기능이라고 가정해 보겠습니다.
거의 모든 사람이 그렇죠?

사용성 및 사용자 참여 능력을 높이기 위해 메가 메뉴는 사람들을 향상시키는 데 중요한 역할을 합니다. 간단하지만 기능적인 메가 메뉴는 사용자가 웹사이트의 더 많은 영역을 탐색하고 즉시 조치를 취하도록 유도합니다.

Amazon 및 eBay와 같은 가장 큰 전자 상거래 웹사이트에서도 사용자가 웹사이트의 전체 탐색을 단일 메뉴로 탐색할 수 있도록 메가 메뉴를 사용하고 있습니다. 

전자상거래 웹사이트뿐만 아니라 메가 메뉴는 모든 뉴스 웹사이트, 잡지, 콘텐츠 게시자, 기업 등에 적합한 옵션입니다. 

여러 카테고리와 하위 카테고리로 구성된 대규모 웹사이트를 구축할 때 Megamenu는 모든 것을 한 번에 볼 수 있는 큰 다중 열 확장 가능 메뉴입니다.
정말 많은 질문이 떠오르는 것 같아요! 오른쪽? 

걱정하지 마세요... 여기에서는 귀하의 질문에 대한 모든 답변을 얻을 수 있도록 도와드릴 것이며, 이 기사의 마지막 부분에서는 자신만의 메가 메뉴를 쉽게 만드는 방법을 배우게 될 것입니다. 

ElementsKit 메가 메뉴 빌더 소개

풍부한 기능을 사용하여 ElementsKit 메가메뉴 빌더 Elementor 라이브 콘텐츠 인터페이스를 사용하여 모든 유형의 메가메뉴를 만들고 맞춤 설정할 수 있습니다. 

다양한 사용자 정의 옵션과 함께 탐색 메뉴 및 수직 메가 메뉴와 같은 메가 메뉴의 변형이 제공됩니다. 

전반적으로 ElementsKit Elementor Mega Menu는 전문 사이트를 위한 모든 기능을 갖춘 메뉴 빌더입니다. 

Elementor로 메가 메뉴를 만드는 방법은 무엇입니까? 

Elementor는 메가 메뉴를 디자인하는 데 필요한 많은 기능을 제공하지만 추가 기능을 얻으려면 타사 플러그인을 사용할 수 있습니다.

정확히는 당신이 필요합니다 ElementsKit. 메가 메뉴를 생성하는 플러그인이 너무 많지만 ElementsKit은 수직 메가 메뉴, 수평 메가 메뉴 및 더 많은 사용자 정의 옵션을 포함한 다양한 유형의 메가 메뉴를 지원합니다.

여기에서는 모든 기능을 갖춘 메가 메뉴를 만드는 단계별 과정을 자세히 보여드리겠습니다.

Elementor로 메가메뉴를 만드는 데 필요한 것

이 튜토리얼 블로그를 따르려면 두 가지가 필요합니다.–>

• 엘레멘터
• ElementsKit

또는 단계별 지침을 따르십시오.

확실하게 하다 메가메뉴 모듈은 에 ~에서 ElementsKit → 모듈.

#1 단계: 메뉴 추가

• 클릭 새 메뉴 만들기.
• 제공하다 메뉴명=> 확인해보세요 체크박스=> 메뉴 생성.
• 클릭 맞춤 링크=> 제공 링크 그리고 메뉴 항목 추가 같은 방법으로.

#2 단계: 메가메뉴 콘텐츠 사용자 정의

확인란을 선택하세요. “메가메뉴 콘텐츠를 보려면 이 메뉴를 활성화하세요” => 다음을 클릭하세요. 설정 아이콘이 포함된 메가 메뉴 메가 메뉴를 추가하려는 메뉴 항목을 선택하세요.

• 팝업이 열리면 메가 메뉴 옵션 및 구하다. 그 후 th를 클릭하세요.e 메가메뉴 콘텐츠 편집 단추.

템플릿 선택

• 다음을 클릭하세요. Elementskit 템플릿 라이브러리 아이콘을 클릭한 후 다음으로 이동하세요. 헤더.
• 클릭 머리글=> 메가 메뉴 콘텐츠=> 아무거나 삽입하세요 메가 메뉴.

제어 공들여 나열한 것

• 내부 섹션 편집 점선 섹션을 클릭하면 됩니다.
• 콘텐츠 너비 상자: 오른쪽이나 왼쪽으로 드래그하여 콘텐츠 너비를 맞춤설정하세요.
• 콘텐츠 전체 너비: 선택하다 전체 넓이.

선택하다 기둥 간격

• 기둥 간격=> 다음에서 열 간격을 선택하세요. 쓰러지 다.

직위 선택

• 높이: 왼쪽에서 오른쪽으로 드래그하여 높이를 선택합니다.
• 수직 정렬: 드롭다운에서 수직 정렬을 선택합니다.
• 오버플로: 오버플로 기본값 또는 숨김을 선택합니다.

선택하다 HTML 태그

• 선택하세요 HTML 태그 ~에서 쓰러지 다.

메가 메뉴 사용자 정의 제목 텍스트

• 아이콘 유형 선택.
• 아이콘 추가 활성화.
• 헤더 아이콘 업로드.
• 제목 추가 또는 편집.
• 편집 설명 추가.

텍스트 사용자 정의

• 텍스트 추가 또는 편집.
• 부제목 추가 또는 편집.
• 라벨 표시 활성화.
• 라벨 추가 또는 수정.
• 배경색, 타이포그래피, 패딩, 정렬, 반경 사용자 정의.

#3단계: 사용자 정의 상

1. '를 클릭하세요.업데이트' 메뉴 저장 => 편집기를 닫습니다.
2. 이제 아이콘 탭으로 이동하여 => 색상 팔레트에서 원하는 색상을 선택하세요.
3. 아이콘 라이브러리에서 아이콘을 선택하세요.
4. 이제 사이트로 이동=> 선택한 아이콘과 색상이 나타납니다.

#4단계: 사용자 정의 배지

• 텍스트 추가 또는 편집.
• 선택하다 배지 색상.
• 선택하다 배지 배경 색상.
• 딸깍 하는 소리 구하다.

#5단계: 설정

기본 너비

• 메가 메뉴 너비 선택: 기본.
• 메가 메뉴 위치 선택: 기본.
• 창을 저장합니다.
• 사이트 보기: 기본 위치와 기본 너비를 표시합니다.

기본 상대 

• 메가 메뉴 너비 선택: 기본.
• 메가 메뉴 위치 선택: 상대적인.
• 딸깍 하는 소리 구하다.
• 사이트 보기: 상대 위치와 함께 기본 너비를 표시합니다.

기본 전체 너비

• 메가 메뉴 너비 선택: 전체 넓이.
• 메가 메뉴 위치 선택: 기본.
• 딸깍 하는 소리 구하다.
• 사이트 보기: 기본 위치로 전체 너비를 표시합니다.

전체 폭 상대 위치

• 메가 메뉴 너비 선택: 전체 넓이.
• 메가 메뉴 위치 선택: 상대적인.
• 딸깍 하는 소리 구하다.
• 사이트 보기: 표시 상대 위치가 포함된 전체 너비.

사용자 정의 기본 너비

• 메가 메뉴 너비 선택: 사용자 정의 너비.
• 사용자 정의 너비를 제공하지만 기본적으로는 750px.
• 메가 메뉴 위치 선택: 기본.
• 딸깍 하는 소리 구하다.
• 사이트 보기: 표시 기본 위치의 사용자 정의 너비.

사용자 정의 기본 너비 상대적인

• 메가 메뉴 너비 선택: 사용자 정의 너비.
• 사용자 정의 너비를 제공하지만 기본적으로는 750px.
• 메가 메뉴 위치 선택: 상대적인.
• 딸깍 하는 소리 구하다.
• 사이트 보기: 표시 상대 위치에 따른 사용자 정의 너비.

#6 단계: 헤더 템플릿 만들기

여기에서 다음을 사용할 수 있습니다. 요소 헤더 템플릿 또는 당신은 사용할 수 있습니다 ElementsKit 헤더 템플릿.

• 지금 검색 탐색 메뉴=> 드래그 에킷 내비 메뉴 그리고 떨어지다 선택한 영역에. ElementsKit Nav 메뉴를 드래그해야 합니다. 그렇지 않으면 생성된 Megmenu가 표시되지 않습니다.
• 이동 메뉴 설정=> 생성된 항목을 선택하세요. 헤더 메뉴 드롭다운에서
• 여기에서 모든 유형의 위젯을 추가하여 헤더 템플릿을 사용자 정의할 수 있습니다.

구텐베르그를 사용하여 메가 메뉴 만들기

WordPress 블록 편집기로 웹사이트를 구축했다면 메가 메뉴도 쉽고 원활하게 생성할 수 있습니다. GutenKit 블록 편집기 플러그인은 가장 쉬운 방법을 제공합니다. 구텐베르크에서 WordPress 메가 메뉴 만들기.

GutenKit을 사용하면 편집기에서 전체 메뉴를 생성하고 수직 및 수평 방향 모두에서 메가 메뉴를 디자인할 수 있습니다.

필요한 것은 GutenKit Pro 플러그인을 설치하고 Gutenberg에서 아름다운 사이트 구축을 시작하는 것뿐입니다.

최종 출력

• 완료되면 업데이트 버튼을 누르면 메뉴가 저장됩니다.
• 이제 귀하의 사이트로 이동하면 선택한 메가메뉴가 그에 따라 표시되는 것을 볼 수 있습니다.

마무리

드디어 성공적으로 끝까지 해냈습니다. 이 튜토리얼이 도움이 되었기를 바랍니다. 이제 다음을 사용하여 사용자 정의 Elementor 메가 메뉴를 만들 수 있습니다. ElementsKit!

여기에서 단일 비디오로 모든 단계를 볼 수 있습니다.

더 많은 우려사항이 있거나 다른 문제가 발생한 경우 댓글 섹션을 통해 알려주시기 바랍니다!