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

elementor와 elementkit을 사용하여 메가 메뉴를 만드는 방법

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

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

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

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

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

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

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

ElementsKit 메가 메뉴 빌더 소개

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

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

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

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

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

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

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

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

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

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

확실하게 하다 메가메뉴 모듈은 ~에서 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!

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

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


코멘트

  1. 피터
    베드로

    안녕하세요,
    훌륭한 튜토리얼!
    메가 메뉴에 관해 아직 질문이 있습니다.
    마우스 오버가 아닌 클릭으로 메가 메뉴를 열 수 있나요?
    답변을 주시면 매우 기쁠 것입니다.
    인사말,
    베드로

    1. 탄자나 사브린 받아
      탄자나 사브린

      안녕 피터,

      감사드립니다. 이것은 우리에게 많은 것을 의미합니다. 현재는 해당 기능을 사용할 수 없습니다. 하지만 이에 대한 기능을 요청할 수는 있습니다. 우리는 고객의 요구에 따라 지속적으로 새로운 기능을 추가하고 있습니다.

      여기 링크가 있습니다 - https://wpmet.com/plugin/elementskit/roadmaps/#ideas. 멋진 아이디어를 공유하고 제출 버튼을 클릭하세요. 😍

      안전하게 지내세요 😃

  2. 앤드류를
    앤드류

    안녕,
    나는 당신의 메가 메뉴 빌더를 좋아하지만 작은 문제가 있습니다.
    내 메가 메뉴 중 하나가 내 머리글 맨 오른쪽에 있고 메가 메뉴의 일부가 오른쪽에서 사라집니다.
    메가 메뉴를 오른쪽, 왼쪽 또는 가운데로 정렬하는 옵션이 있나요?

    감사해요

    1. 아유브 알리(Ayub Ali)

      안녕 앤드류,

      귀하의 사이트를 확인하지 않으면 이 문제의 정확한 원인을 알 수 없습니다. 따라서 문제를 명확하게 이해할 수 있도록 실제 웹사이트 링크나 관련 스크린샷을 제공해 주시기 바랍니다. 하지만 이 스크린샷(https://d.pr/i/ccf6RC). 여기에 업데이트를 알려주거나 지원 티켓을 열 수 있는 경우 더 나은 결과를 알려주십시오. https://help.wpmet.com/

  3. 파르잔(Farzan)

    안녕하세요. 놀라운 튜토리얼을 제공해 주셔서 감사합니다! 사소한 문제 하나만 있으면 무엇이든 적용할 수 있습니다. 헤더에는 4개의 페이지가 있는데 그 중 하나에 마우스를 올리면 메가 메뉴가 표시됩니다. 그러나 헤더에서는 상위 페이지(이름: persoonlijk)를 클릭할 수 없으며 메가 헤더의 항목만 클릭할 수 있습니다. 내가 무엇을 놓치고 있는지 알 수 있나요? (사이트는 아직 개발 중이지만, 헤더는 https://insight.nl/home url. PERSOONLIJK 버튼을 클릭할 수도 있는 옵션을 갖고 싶습니다. 내가 거기서 뭘 잘못했는지 알아내도록 도와주실 수 있나요?
    미리 감사드립니다.

    1. 아유브 알리(Ayub Ali)

      Farzan 님, 안녕하세요. 이는 기술적인 문제이고 맞춤화된 도움이 필요할 수 있으므로 다음에서 지원 티켓을 개설하시기 바랍니다. https://help.wpmet.com/

      우리 지원팀은 매우 도움이 되므로 최대한 빨리 문제를 해결하기 위해 최선을 다할 것이라고 말씀드릴 수 있습니다.

      최고의 소원.

  4. 마니
    마니

    좋은 글 정말 감사드립니다. 정말 도움이 됩니다. 유튜브에 영상을 많이 보시는 것보다는 누구나 쉽게 이해하실 수 있을 것 같습니다.

  5. 멜리사
    멜리사

    여기요,
    훌륭한 튜토리얼; 명확하고 간단하게 설명해 주셨네요. 좋은 메가 메뉴를 만드는 것은 항목 간의 관계를 시각적으로 강조하고, 사용자가 선택 사항을 알 수 있도록 하며, 아이콘과 이미지를 쉽게 사용할 수 있도록 도와주기 때문에 필수적입니다.

  6. 데이비드(David)
    데이비드

    이 튜토리얼을 정확하게 따라했는데 메뉴가 표시되지 않습니다.
    위에 링크된 페이지로 이동하면 메뉴가 표시됩니다. 이는 기본 WordPress 메뉴입니다. 바로 아래에 탐색 메뉴 위젯을 사용했는데 메뉴가 채워지지 않습니다.

    이견있는 사람?

  7. 콜린이
    콜린

    메가 메뉴가 훌륭해요! 다만, 메뉴 이름을 클릭하면 해당 페이지가 열리게 하고, 마우스를 오버하면 메가 메뉴가 나타나게 하고 싶습니다. 어떻게 해야 하나요? 이제 클릭하면 메가메뉴만 나옵니다. 도와주셔서 감사합니다.

  8. 마가렛이
    마가렛

    이 훌륭한 튜토리얼에 감사드립니다! 편집 토글 아래의 메가 메뉴 내에서 제목 및 설명을 하이퍼링크로 연결할 수 있습니까? 내 메가 메뉴에 주와 도시 목록이 있지만 단락 섹션에서 하나의 하이퍼링크를 만들 수 있도록 주를 두 번 나열해야 하는 문제가 있습니다. 이 중복성을 제거할 수 있는 방법이 있습니까?

  9. 마가렛이
    마가렛

    제목 위로 마우스를 가져가면 제목 아래에 도시가 팝업되어 선택될 수 있는 옵션이 있는지 추가하는 것을 잊어버렸습니다. 감사합니다.

  10. 사미 아잠(Sami Azam)
    사미 아잠

    메뉴 항목 대신 햄버거 아이콘에 메가 메뉴를 표시하려면 어떻게 해야 합니까?

    1. 디파 샤하 받았어요
      디파 샤하

      친애하는 사미
      안타깝게도 원하시는 기능을 이용하실 수 없습니다. 그러나 이 기능을 요청할 수 있습니다. ElementsKit 팀은 항상 기능 제안을 기쁘게 받아들입니다.
      이 링크를 사용하여 기능을 요청할 수 있습니다 https://wpmet.com/plugin/elementskit/roadmaps/#ideas
      감사합니다

  11. 아제이
    아제

    이 튜토리얼을 정확하게 따라했는데 메뉴가 표시되지 않습니다.
    위에 링크된 페이지로 이동하면 메뉴가 표시됩니다. 이는 기본 WordPress 메뉴입니다. 바로 아래에 탐색 메뉴 위젯을 사용했는데 메뉴가 채워지지 않습니다.

    메가 메뉴에 버그가 있는 것 같은데 이제 더 이상 작동하지 않습니다

    1. 하시브
      하시브

      Ajay님, 안녕하세요. 메가 메뉴를 만들기 전에 백엔드에 메뉴를 만들었는지 확인하세요. 그리고 네비게이션 메뉴를 선택한 후, 메가 메뉴에서 어떤 메뉴를 공유하고 싶은지 선택해야 합니다.

  12. Jy 했어

    안녕,

    메가메뉴는 모든 플러그인을 업데이트할 때까지 매우 잘 작동합니다. 메가 메뉴 중 일부는 작동하지만 일부는 작동하지 않고 "콘텐츠 없음"이 표시되는 것이 이상합니다. 플러그인 버전을 롤백했지만 문제를 해결할 수 없습니다. 이 문제의 원인이 무엇인지 아시나요?

답글쓰기

이메일은 표시되지 않습니다. 필수 필드는 *로그인이 됩니다