Elementor에서 메뉴 표시줄을 편집하는 방법

브랜드를 반영하는 웹사이트 구축은 명확하고 사용자 친화적인 탐색에서 시작됩니다. 하지만 많은 워드프레스 초보자가 Elementor에서 메뉴바를 편집하는 데 어려움을 겪습니다. 

기본적으로 Elementor에는 고급 메뉴 도구가 없기 때문에 메뉴가 표시되지 않거나 모바일 응답성이 떨어지는 등의 문제가 발생합니다. 

그렇다면 해결책은 무엇일까요? 이 문제를 해결할 수 있는 간단한 방법이 있습니다.

함께 Element Pack를 사용하면 코딩할 필요 없이 메가 메뉴 위젯을 사용하여 Elementor 탐색 메뉴를 완벽하게 제어할 수 있습니다. 

Element Pack 탐색 위젯의 가장 강력한 기능 중 하나를 사용하여 Elementor 헤더 빌더의 잠재력을 최대한 발휘해 보겠습니다.

Elementor 메뉴 바에 Element Pack Pro를 사용하는 이유는 무엇인가요?

Elementor의 기본 메뉴 옵션은 완전히 사용자 정의되거나 메가 스타일의 탐색 모음을 만들려는 경우 제한적으로 느껴질 수 있습니다. Elementor 팩은 이러한 문제를 해결하기 위해 전용 위젯 를 사용하면 코드 한 줄 건드리지 않고도 엘리멘터에서 메뉴 막대를 빠르고 쉽게 생성하고 편집할 수 있습니다.

이제 엘리먼트 팩이 기본 엘리멘터와 어떻게 다른지 자세히 살펴보겠습니다:

기본 워드프레스 메뉴와 Elementor 메뉴 모음 비교

6단계로 메뉴 표시줄을 만들고 사용자 지정하는 방법

따라서 기본 메뉴 표시줄 편집을 시작하려면 Element Pack를 설치하기만 하면 됩니다. 공식 사이트. 이제 모든 설정이 완료되었으므로 Element Pack Pro를 사용하여 Elementor에서 메뉴 바를 만들고 사용자 지정하는 전체 프로세스를 살펴보겠습니다. 

먼저 워드프레스에서 메뉴 구조를 만든 다음 Elementor 및 Element Pack의 메가 메뉴 위젯을 사용하여 사용자 정의하겠습니다.

1단계: 워드프레스에서 기본 메뉴 만들기

메뉴 모음을 만들기 전에 요소 팩에서 필요한 메뉴 위젯을 활성화해야 합니다. 메뉴 모음 기능을 활성화하려면 다음과 같이 하세요:

• 다음으로 이동 Dashboard > Element Pack Pro > Other Settings
  
• 검색 메가 메뉴 목록에서
  
• 스위치를 다음과 같이 토글합니다. 켜짐

• 클릭 설정 저장

이제 Elementor 편집기에서 메뉴 위젯을 활성화했으므로 Elementor에서 전체 제어 아이콘을 사용하여 Element Pack Pro의 탐색 메뉴를 편집할 준비가 되었습니다, 애니메이션, 배지 등!

이제 워드프레스 대시보드에 기본 메뉴를 만들어 보겠습니다. 

• 다음으로 이동 Dashboard > Appearance > Menus
  
• 클릭 새 메뉴 만들기
  
• 추가 메뉴 이름을 클릭한 다음 메뉴 만들기

• 페이지, 글 또는 사용자 정의 링크를 선택하여 메뉴 항목 추가하기

• 클릭 저장 메뉴
  

팁: '서비스', '쇼핑', '연락처' 등 의미 있는 링크 이름을 사용하여 Elementor 탐색 메뉴를 사용자 친화적이고 명확하게 만들 수 있습니다.

2단계: 메뉴 모음 토글 활성화

메뉴가 생성되었다면 이제 Element Pack로 구동되는 메뉴바로 전환할 차례입니다.

• 검색 메가 메뉴 옆에 있는 메뉴 이름 필드

• 스위처 활성화 - 활성화되면 메뉴 항목이 녹색으로 빛나며, 이제 해당 메뉴 항목이 E레먼트 팩 탐색 위젯
  
• 메뉴 항목 위로 마우스를 가져가서 작은 부동형 메가 메뉴 버튼이 나타납니다.

3단계: 메뉴 모음 설정 구성

플로팅을 클릭하면 메가 메뉴 버튼을 클릭하면 메뉴 표시줄의 주요 디자인 설정을 구성할 수 있는 팝업이 열립니다:

• 활성화 메가 메뉴 사용 스위처
  
• 설정 사용자 지정 너비 (기본값은 750px이며 필요한 경우 늘릴 수 있습니다.)
  
• 를 선택하고 오리엔테이션 - 가로가 일반적이지만 세로도 전자상거래 레이아웃에 적합합니다.
  
• 추가 아이콘 또는 배지 를 메뉴 항목에 추가하여 시각적으로 강조합니다.

• 클릭 메가 메뉴 저장
  

이러한 디자인 조정은 Elementor 메뉴 커스터마이징의 강력한 기능 중 큰 부분을 차지합니다. 코드를 건드리지 않고도 시각적으로 완벽하게 제어할 수 있습니다.

4단계: Elementor에서 메뉴 막대 콘텐츠 사용자 지정하기

설정을 저장하면 새 옵션이 표시됩니다: 메가 메뉴 콘텐츠 편집

• 를 클릭합니다. 메가 메뉴 콘텐츠 편집

• 그러면 전체 화면이 실행됩니다. Elementor 편집기 팝업
  
• 이제 다음을 수행할 수 있습니다. 메뉴 콘텐츠 디자인 Elementor 섹션과 마찬가지로:
  
  • 다음과 같은 위젯 추가 열, 이미지, 버튼또는 하위 메뉴
    
  • 드래그 앤 드롭으로 유연하게 레이아웃을 정렬하세요.
    

이 접근 방식은 Elementor의 시각적 인터페이스의 모든 기능을 메뉴 모음 디자인에 적용합니다.

메뉴 바를 전체 디자인 캔버스라고 생각하면 더 이상 지루한 드롭다운에 갇혀 있지 않습니다.

레이아웃 제작이 완료되면 레이아웃에서 X 아이콘을 클릭하세요. 

6단계: 페이지에 메뉴 모음 위젯 삽입하기

이제 메뉴가 디자인되고 준비되었으니 웹사이트에 배치할 차례입니다:

• 다음을 사용하여 대상 페이지를 엽니다. Elementor
  
• 검색 메가 메뉴 위젯 패널에서
  
• 드래그 앤 드롭 메가 메뉴 위젯 를 레이아웃에 추가합니다.

• 위젯 설정에서 앞서 만든 메뉴를 선택합니다.
  

여기까지입니다! 

이제 Elementor의 반응형 메뉴 표시줄이 실시간 대화형으로 바뀝니다. 

위젯의 콘텐츠 및 스타일 탭을 사용하여 세로 레이아웃, 토글 메뉴, 애니메이션, 디바이스 가시성 등의 디스플레이 설정을 추가로 조정할 수 있습니다.

사용자 지정 옵션으로 메뉴 바 미세 조정 

이제 Element Pack Pro를 사용하여 Elementor 메뉴 바를 만들었으니 레이아웃, 동작 및 디자인을 미세 조정할 차례입니다. 

Elementor의 시각적 인터페이스와 추가된 성능 덕분에 Element Pack Pro를 사용하면 메뉴 모음 코드 없이도 다양한 기기에서 보고 응답할 수 있습니다.

레이아웃 설정

이동합니다: 콘텐츠 > 레이아웃

여기에서 메뉴 표시줄의 기본 레이아웃을 설정할 수 있습니다.

• 메뉴 선택: 드롭다운에서 앞서 만든 미리 만들어진 워드프레스 메뉴를 선택합니다. 

• 메뉴를 선택할 때까지 메뉴 표시줄에 메뉴를 선택하라는 메시지가 표시됩니다.

• 오리엔테이션: 다음 중에서 선택하세요. 수평 그리고 세로.

• 헤더 섹션에는 가로 메뉴가 표준입니다.
  
• 세로 메뉴는 사이드바 또는 전자상거래 레이아웃에 적합합니다.
  
• 메뉴 옵션을 토글합니다: 활성화 토글 스위처를 사용하여 메뉴 표시줄을 모바일 및 태블릿 보기에 적합한 접이식 메뉴로 전환할 수 있습니다. 

• 이 섹션에서는 토글 제목, 화살표 아이콘, 아이콘 배치, 오프셋 및 애니메이션 설정도 사용자 지정할 수 있습니다.
  

이 설정을 통해 다음을 수행할 수 있습니다. Elementor에서 반응형 메뉴 바 만들기 다양한 기기에 잘 적응할 수 있습니다.

햄버거 메뉴 설정

이동합니다: 콘텐츠 > 햄버거 메뉴

이 섹션은 모바일 반응성을 위해 설계되었습니다. 작은 기기에서도 메뉴에 계속 액세스할 수 있도록 합니다.

• 특정 디바이스(태블릿, 모바일 등)에서 공개 여부를 설정하거나 비활성화할 수 있습니다.
  
• 햄버거 아이콘의 정렬(왼쪽, 가운데, 오른쪽)을 설정합니다.
  
• 간격 및 레이아웃 동작 사용자 지정

이는 특히 Elementor의 모바일 메뉴 또는 다음과 같은 문제를 해결합니다. Elementor 메뉴 표시줄이 표시되지 않음 를 작은 화면에서 올바르게 표시합니다.

드롭다운 설정

이동합니다: 콘텐츠 > 드롭다운 설정

사용자가 기본 메뉴 항목과 상호 작용할 때 드롭다운 콘텐츠가 작동하는 방식을 제어합니다.

• 설정 오프셋 값 를 사용하여 기본 항목과 드롭다운 콘텐츠 사이의 공백을 정의합니다.
  
• 를 선택하고 애니메이션 유형 (예: 페이드, 슬라이드 등)
  
• 설정 애니메이션 지속 시간 를 사용하여 애니메이션의 속도를 제어합니다.
  
• 정의 트리거 유형 중 하나로 호버링 또는 클릭 - 사용자가 드롭다운에 액세스하는 방식에 따라 다음과 같이 설정할 수 있습니다.

드롭다운은 다단계 Elementor 탐색 메뉴에 필수적이며, 이러한 설정을 통해 모양과 상호 작용을 정밀하게 제어할 수 있습니다.

메뉴 스타일 지정하기(스타일 탭 개요)

모든 디자인 사용자 지정은 스타일 탭 을 클릭합니다. 각 구성 요소를 제어하는 방법은 다음과 같습니다:

메뉴 항목

이동합니다: 스타일 > 메뉴 항목

• 사용자 지정 텍스트 색상, 배경색, 패딩, margin, 테두리및 상자 그림자
  
• 고유한 스타일 설정 호버 상태를 사용하여 상호작용을 더욱 동적으로 만들 수 있습니다.
  
• 이러한 컨트롤은 표시되는 기본 항목에 적용됩니다. Elementor 메뉴 표시줄
  

드롭다운 컨테이너

이동합니다: 스타일 > 드롭다운

• 조정 배경색 드롭다운 영역의
  
• 사용 패딩, margin, border및 상자 그림자 를 사용하여 구조와 간격을 정의합니다.
  
• 내부 콘텐츠에 이미 흰색 배경이 있는 경우 패딩을 추가하면 드롭다운 배경이 더 선명하게 표시됩니다.
  

햄버거 아이콘

이동합니다: 스타일 > 햄버거 메뉴

• 변경 아이콘 색상, 배경, 패딩, margin및 기타 시각적 속성
  
• 이를 통해 데스크톱과 모바일 버전 모두에서 일관성을 유지할 수 있습니다. 반응형 헤더 메뉴
  

배지

메뉴 배지를 사용자 지정하려면

• From WordPress Dashboard > Appearance > Menus를 클릭하고 메가 메뉴 편집 레이블을 지정하려는 기본 메뉴 항목 옆의

• 팝업 창에서 다음과 같이 설정할 수 있습니다. 배지 텍스트, 텍스트 색상및 배경색

• 그런 다음 Elementor로 돌아가서 메가 메뉴 위젯을 엽니다.
  
• Go to: Style > Badge에서 배지 위치, 패딩, 여백, 테두리 및 반경을 미세 조정할 수 있습니다.

배지는 다음 작업을 할 때 유용합니다. Elementor 헤더 편집 "신규", "세일" 또는 "베타"와 같은 특수 메뉴 항목을 강조해야 하는 작업입니다.

이러한 옵션을 사용하면 모든 기기에서 작동하는 대화형 브랜드 내비게이션 시스템을 설계할 수 있습니다. 

Elementor 헤더 빌더와 Element Pack Pro 탐색 위젯의 결합으로 한 차원 높은 제어 및 디자인 유연성을 제공합니다.

메뉴 막대 디자인 및 사용자 경험을 개선하기 위한 팁

깔끔하고 반응이 빠르고 직관적인 메뉴는 참여도를 크게 높이고 이탈률을 줄일 수 있습니다. Element Pack Pro 및 Elementor의 헤더 빌더를 사용하여 워드프레스 메뉴 디자인을 향상시킬 수 있는 몇 가지 필수 디자인 팁을 소개합니다.

메뉴 항목을 간결하게 유지

• 기본 메뉴 레이블을 다음과 같이 유지합니다. 한 두 단어
  
• 어수선함 피하기 - 목표 5~7개의 최상위 메뉴 항목
  
• '정보', '서비스', '연락처'와 같이 명확하고 인식하기 쉬운 용어를 사용합니다.
  

이렇게 하면 스캔 가능성이 향상되고 Elementor 탐색 메뉴가 방문자를 압도하지 않습니다.

피드백에 호버 애니메이션 사용

• 아래에서 호버 애니메이션을 사용하도록 설정합니다. Style > Menu Items 탭
  
• 애니메이션을 매끄럽게 유지하세요. 300ms 응답성을 유지하기 위해
  

이렇게 하면 Elementor 메뉴 사용자 지정에 세련미를 더하고 방해받지 않으면서도 사용자 피드백을 향상시킬 수 있습니다.

깔끔한 글꼴과 간격 유지

• 읽기 쉬운 글꼴 사용(메뉴에는 산세리프가 가장 적합)
  
• 오클릭을 방지하기 위해 항목 간 가로 간격을 충분히 확보합니다.
  
• 글꼴 가중치 및 크기로 시각적 계층 구조 유지
  

이러한 개선 사항은 Elementor에서 사용자 지정 헤더로 작업할 때 핵심이며 여러 기기에서 접근성을 보장합니다.

모바일 메뉴가 완벽하게 반응하는지 확인하기

• 사용 햄버거 메뉴 아래의 설정 Content > Hamburger Menu
  
• 다음 사항을 확인하십시오. Elementor의 모바일 메뉴 가 중단점 전체에 올바르게 나타납니다.
  
• 모바일, 태블릿, 데스크톱 디바이스에서의 가시성 테스트
  

Chrome 개발자 도구 또는 브라우저스택과 같은 도구를 사용하면 게시하기 전에 응답성을 확인할 수 있습니다.

레이아웃에 따라 다양한 방향 테스트

사이트 레이아웃과 콘텐츠 밀도에 따라 가로형 메뉴 모음에서 세로형 메뉴 모음으로 전환하는 것이 더 나은 UX를 제공할 수 있습니다.

• 세로 메뉴 사이드바 또는 전자상거래 카테고리에 적합합니다.
  
• 가로 메뉴 는 기존 헤더 레이아웃에 가장 적합합니다.
  
• 아래에서 다양한 방향을 시도해 보세요. Content > Layout > Orientation
  

실험하고 피드백을 수집하여 사용자 흐름과 콘텐츠 구조에 가장 적합한 것을 찾아보세요.

이 팁을 따르면 메뉴 표시줄이 매력적이고 빠르게 로딩되며 최신 검색 습관에 맞게 조정됩니다.

결론

축하합니다. 이제 Elementor에서 모든 기능을 갖춘 사용자 지정 메뉴 표시줄을 만들었습니다. Element Pack Pro!

플러그인 설정부터 워드프레스에서 메뉴 만들기, 삽입 및 사용자 정의에 이르기까지 메가 메뉴 위젯 를 Elementor의 비주얼 에디터에 통합했습니다. 이 강력한 조합을 통해 코드 한 줄 작성하지 않고도 동적이고 반응이 빠른 사용자 친화적인 탐색 메뉴를 구축할 수 있습니다.

디자인은 반복적인 과정입니다. 브랜드 아이덴티티에 맞게 다양한 레이아웃, 글꼴, 아이콘, 메뉴 트리거를 자유롭게 탐색해 보세요. 

유연성을 갖춘 Elementor 메뉴 사용자 지정유일한 한계는 여러분의 창의력입니다.

아직 시작하지 않으셨다면 다음을 적극 권장합니다. Element Pack Pro 시도하기특히 모든 기기에서 원활하게 작동하는 전문적이고 완벽하게 사용자 정의할 수 있는 워드프레스 메뉴 디자인을 만들고자 한다면 더욱 그렇습니다. 다음을 사용하는 모든 사용자에게 꼭 필요한 툴킷입니다. Elementor.

자주 묻는 질문