​​Elementor 탐색 메뉴 및 Elementor 포트폴리오 위젯을 사용자 지정하는 방법(자습서)

수익성 있는 디자인으로 WordPress 사이트의 사용자 경험을 향상하고 싶으십니까? 이 질문이 당신의 마음을 맴돌고 있다면 당신은 바로 여기에 있습니다.

사용자 여정은 웹사이트에 들어온 직후 시작됩니다. 방문자가 사이트가 정리되지 않거나 복잡하다고 생각하면 어떻게 됩니까? 확실히 귀하의 사이트는 나쁜 인상을 받을 것이며 사용자는 선호하는 콘텐츠를 찾을 수 없을 것입니다.

사용자의 61%는 원하는 것을 빨리 찾을 수 없는 경우 다른 사이트를 시도합니다.

Google

그렇다면 더 나은 사용자 경험을 위해 웹사이트 구조를 개발하는 데 무엇이 도움이 될까요?

오늘의 튜토리얼 게시물에서는 Elementor 사이트에서 탐색 메뉴 및 포트폴리오 위젯 을 활용하여 웹사이트의 사용자 경험을 개선하는 방법을 보여드리겠습니다.

Elementor Nav 메뉴 위젯 부터 시작하겠습니다.

Elementor 탐색 메뉴란 무엇입니까?

탐색 메뉴 또는 탐색 메뉴는 가장 중요한 클릭 가능한 링크를 함께 표시하는 웹 사이트 세그먼트입니다. 사용자가 사이트에 들어가면 각 링크를 클릭하여 웹사이트에서 선호하는 콘텐츠를 찾을 수 있습니다. 탐색 메뉴는 다양한 방식으로 표시될 수 있습니다. 수평, 수직 및 드롭다운과 같은 .

웹사이트의 템플릿에 따라 원하는 템플릿을 선택할 수 있습니다. 그러나 사이트 디자인과 가장 잘 맞는 호환성을 사용하는 것이 좋습니다.

다음은 Happy Addons의 현재 메뉴 샘플입니다. 훌륭하고 간단해 보입니다. 웹사이트 메뉴를 이와 같이 유지하고 가장 중요한 링크를 포함하도록 하십시오.

Elementor 탐색 메뉴 작동 방식(탐색 메뉴 유형)

Elementor Nav 메뉴 위젯에는 WordPress 사이트에서 사용할 수 있는 세 가지 유형의 패턴이 있습니다. Elementor의 다른 위젯과 마찬가지로 탐색 메뉴 위젯도 구현하기 쉽고 완전히 유연합니다. 이 위젯을 적용하기 위해 타사 확장을 사용할 필요도 없습니다.

이 세 가지 유형의 레이아웃 외에도 포인터 및 애니메이션, 미리 계획된 메뉴 사용자 지정, 하위 메뉴, 모바일 응답성 등을 추가할 수 있습니다.

한 부분씩 논의하고 WordPress 사이트에서 어떻게 작동하는지 살펴보겠습니다.

수평 탐색 메뉴

이 패턴을 사용하면 메뉴가 왼쪽에서 오른쪽으로 가로로 확장됩니다. 이 디자인 레이아웃은 웹사이트를 단순하고 깔끔하게 유지하려는 사용자에게 특히 적합합니다. 전문가, 공인, 뉴스 포털 및 기타 유형의 Elementor 웹 사이트와 같은 경우.

세로 탐색 메뉴

가로 메뉴와 마찬가지로 세로 메뉴는 메뉴를 위에서 아래로 확장합니다. 이 레이아웃은 멋지고 세련되고 단순해 보입니다. 사이트가 부동산, 교육 또는 온라인 에이전시를 나타내는 경우 Elementor 사이트에 이 레이아웃을 적용할 수 있습니다.

자세히 알아보기: 온라인 비즈니스를 위한 전환율이 높은 방문 페이지를 만드는 방법

드롭다운 탐색 메뉴

세로로 보이지만 드롭다운 버튼을 클릭하면 메뉴가 열립니다. 헤더 섹션에 공간을 유지하려면 이 간단하면서도 멋진 레이아웃을 사용할 수 있습니다. 충분한 공간은 사용자에게 로고, 헤더 텍스트, 소셜 버튼 등을 포함한 웹사이트의 멋진 보기를 제공합니다.

포트폴리오 웹사이트, 열정 웹사이트, 음악 또는 개인 웹사이트가 있는 경우 이 디자인 패턴을 활용할 수 있습니다. 다음은 볼 수 있는 예입니다.

Elementor에서 메뉴를 추가하는 방법

아래에서는 WordPress 사이트에 Elementor 탐색 메뉴를 추가하는 단계별 프로세스를 보여줍니다.

전제 조건

• 워드프레스 사이트
• 엘리멘터(무료)
• 엘리멘터(프로)

기존 WordPress 사이트가 있다고 가정해 보겠습니다. 그리고 Elementor FREE와 Pro 버전을 모두 설치했습니다. 탐색 메뉴는 프리미엄 기능입니다. 따라서 이 위젯을 사용하기 전에 프로 패키지를 구매해야 합니다.

1단계: 새 페이지 열기

• Elementor 캔버스 를 선택하고 ' Edit with Elementor ' 버튼을 클릭합니다.

2단계: 섹션 추가

• Elementor Canvas 를 선택하면 새로운 인터페이스를 얻게 됩니다. 이렇게 하려면 빨간색 (+) 버튼을 클릭합니다. 그런 다음 사용하려는 원하는 섹션을 선택하십시오. 우리의 경우 두 번째 패턴을 선택했습니다.

• 두 번째 패턴을 선택하면 화면 상단에 두 개의 섹션이 표시됩니다.

• 이제 Elementor 검색창에서 위젯 '탐색 메뉴'를 검색하세요.

• 찾으면 위젯을 원하는 섹션으로 끌어다 놓습니다. 섹션의 오른쪽에 붙여넣는 것이 좋습니다.

• 섹션에 메뉴를 추가 하면 즉시 나타납니다.

WordPress에서 메뉴를 만드는 방법이 없는 경우 여기에서 가이드를 확인하세요.

3단계: 탐색 메뉴 사용자 지정

자, 이제 사이트 메뉴를 사용자 정의할 준비가 되었습니다. 이 사용자 정의에서는 세 가지 중요한 부분을 활용할 수 있습니다.

• 콘텐츠
• 스타일
• 고급의

콘텐츠 커스터마이징

콘텐츠에서 두 가지 옵션을 찾을 수 있습니다. 레이아웃 및 래퍼 링크 . 이제 레이아웃 버튼을 탭합니다. 메뉴 디자인에 대한 모든 관련 사용자 정의 옵션을 찾을 수 있습니다.

• 메뉴 : WordPress 사이트에서 만든 메뉴를 선택합니다.
• 레이아웃 : 세 가지 유형의 레이아웃을 사용할 수 있습니다. 수평, 수직 및 드롭다운.
• Align : 메뉴의 정렬을 변경합니다.
• 포인터 : 메뉴를 더 보기 좋게 만들기 위해 추가합니다. 밑줄, 밑줄, 프레임, 텍스트 등
• 애니메이션 : 메뉴에 애니메이션을 추가할 수 있습니다. 페이드 인 아웃, 수축 인 아웃 등과 같은.
• Modile dropdown : 디자인이 모바일 반응형인지 확인합니다.

• 이 위젯에 레이아웃 을 추가하는 방법을 살펴보겠습니다.

• 같은 방법으로 위젯에 애니메이션 을 적용할 수 있습니다.

스타일 사용자 정의

초기 사용자 지정 후 메뉴를 스타일화할 수 있습니다. 이를 위해 스타일 버튼을 탭합니다. 그리고 두 가지 옵션이 있습니다 . 주 메뉴; 드롭다운 .

• Elementor 탐색 메뉴 위젯에 기능을 빠르게 추가하는 방법을 살펴보겠습니다. 여기에서 텍스트 색상, 너비, 패딩, 수직 패딩 및 공간을 변경할 수 있습니다.

• 마우스 오버 시 색상을 광고하려면 마우스 오버를 클릭하고 추가하려는 기본 색상을 변경하십시오.

고급 기능

고급 기능을 사용하면 현재 디자인으로 더 많은 작업을 수행할 수 있습니다. 모션 효과, 배경, 테두리 효과, 마스킹, 위치 지정, 응답성, 사용자 정의 CSS 등.

• 전체 디자인이 끝나면 게시 버튼을 클릭합니다. Elementor 탐색 메뉴는 다음과 같습니다.

이것이 Elementor 사이트에 탐색 메뉴 위젯을 추가하는 방법입니다. 기능이 어떻게 작동하는지 보여주고 디자인에 적용하려고 했습니다. 이제 하나씩 적용할 차례입니다.

하지만 자세한 안내를 원하신다면 지금 바로 확인하실 수 있는 영상입니다.

Elementor Nav 메뉴로 무엇을 더 추가할 수 있습니까?

• 밑줄 애니메이션
• 배경 애니메이션
• 텍스트 애니메이션
• 메뉴 간격 및 정렬
• 색상, 배경 및 타이포그래피
• 그리고 더

따라서 이러한 기능을 활용하면 WordPress 메뉴 구조를 개선하고 표준 모양을 제공할 수 있습니다. 하지만 기억해; 적절한 단계에 따라 구현하십시오. 예를 들어 로컬 서버에서 하나씩 시도할 수 있습니다. 최종 디자인을 확인한 후에는 라이브 사이트에 적용합니다. 웹사이트의 템플릿 구성을 무너뜨리고 싶지 않다면 이 규칙을 연습해 보세요.

보너스 팁: 해피 애드온 메가 메뉴 위젯 소개

이러한 기능을 웹사이트 메뉴에 결합하는 것 외에도 Happy Addons 메가 메뉴 위젯을 사용하여 고급 기능을 추가할 수 있습니다. 드리블, InVision, Bobbi Brown, Adidas, Puma, Evernote 등과 같은 메가 메뉴를 상상 속에서 만들 수 있습니다.

또한 사이트에 사용자 정의 아이콘, 배지 및 기본 WordPress 메뉴를 추가하여 사용자에게 더 아름답게 만들 수 있습니다.

다음은 Happy Addons Mega 메뉴 위젯에 대해 알아보기 위해 확인할 수 있는 짧은 자습서입니다.

자세한 가이드를 얻으려면 공식 문서를 확인하여 이 위젯의 ​​작동 방식과 적용 프로세스를 알아볼 수도 있습니다.

Elementor 포트폴리오 위젯을 사용하여 WordPress 사이트를 사용자 정의하는 방법

여기에서는 Elementor의 또 다른 프리미엄 기능인 포트폴리오 위젯 에 대해 이야기하겠습니다. Elementor 탐색 메뉴를 사용자 정의한 후 포트폴리오 위젯을 적용하여 사이트 모양을 아름답게 할 수 있습니다. 이 위젯은 게시물, 페이지 및 사용자 정의 게시물 유형을 매력적이고 필터링 가능한 그리드에 표시하는 데 도움이 됩니다. 프로세스를 완료하려면 몇 단계만 수행하면 됩니다. 따라서 사이트에서 이 위젯을 쉽게 사용할 수 있습니다.

하지만 Elementor로 포트폴리오를 추가하는 방법을 확인해보자. Elementor로 구축된 포트폴리오 웹사이트가 이미 있다고 가정합니다. 그렇지 않은 경우 기사를 확인하여 Elementor를 사용하여 포트폴리오 웹 사이트를 만드는 방법을 배울 수 있습니다.

1단계: 페이지 만들기

먼저 포트폴리오 위젯을 추가할 페이지를 엽니다. 그런 다음 Elementor로 편집 을 클릭합니다.

그런 다음 디자인 캔버스가 열립니다. Elementor 탐색 메뉴 위젯을 추가한 방법과 마찬가지로 이 위젯을 추가할 수 있습니다.

2단계: 포트폴리오 위젯 추가

검색창에서 포트폴리오 위젯을 검색하여 캔버스에 끌어다 놓습니다.

참고 : 포트폴리오 위젯은 게시물, 페이지 및 사용자 정의 게시물 유형에서만 작동합니다. 포트폴리오 위젯은 갤러리에서 작동하지 않습니다.

3단계: 포트폴리오 위젯 사용자 지정

위젯을 추가하면 게시물이 자동으로 화면에 표시됩니다.

전체 사용자 정의는 세 부분으로 구성됩니다. 내용, 스타일 및 고급 .

콘텐츠

• 열: 위젯에 표시되는 열 수 설정
• 게시물 수: 위젯에 표시할 정확한 게시물 수를 설정합니다.
• 이미지 크기: 이미지 의 크기를 설정합니다.
• 아이템 비율: 아이템 의 비율을 설정합니다.
• 제목 표시: 제목 을 표시할지 숨길지 선택합니다. 이미지 위로 마우스를 가져가면 제목이 표시됩니다.
• 제목 HTML 태그: 제목을 태그(H1…H6, span, div 또는 단락)로 래핑합니다.

• 필터 바 : 포트폴리오 상단에 필터 바를 표시할지 숨길지 설정합니다. 게시물을 표시할 분류를 선택합니다. 옵션에는 카테고리, 태그 및 모든 사용자 정의 게시물 유형 분류가 포함됩니다.

• 쿼리 : 위젯이 콘텐츠를 표시할 소스를 선택합니다. 옵션에는 게시물, 페이지, 사용 가능한 경우 사용자 지정 게시물 유형, 수동 선택, 현재 쿼리 및 관련 항목이 포함됩니다.

스타일

• 항목 간격 : 항목 사이의 정확한 간격을 설정합니다.
• 행 간격 : 항목 행 사이의 정확한 간격을 설정합니다.
• 테두리 반경 : 모서리 원형을 제어하기 위해 이미지의 테두리 반경을 설정합니다.
• 배경색 : 이미지 위로 마우스를 가져갈 때 오버레이의 배경색을 설정합니다.
• 색상 : 게시물의 제목 색상을 설정합니다. 이미지 위로 마우스를 가져가면 오버레이 내에 제목이 나타납니다.
• 타이포그래피 : 제목의 타이포그래피 사용자 정의
• Color : Filter Bar 텍스트의 색상을 설정합니다.
• 활성 색상 : 필터 막대의 활성 텍스트 색상을 설정합니다.
• 타이포그래피 : 필터 바 텍스트의 타이포그래피 사용자 정의
• 항목 사이의 간격 : 필터 막대의 항목 사이의 간격을 설정합니다.
• Filter Spacing : Filter Bar와 이미지 사이의 간격을 설정합니다.

고급 기능

디자인에 몇 가지 고급 기능을 추가할 수 있습니다. 여백, 패딩, Z-인덱스, CSS, 모션 효과, 배경, 테두리, 마스킹, 속성 등.

따라서 디자인의 모든 설정을 사용자 정의한 후 라이브 사이트에서 어떻게 보일지 보여줍니다.

하지만 더 자세한 튜토리얼을 추가하고 싶다면 다음 동영상 튜토리얼을 확인하면 된다.

Elementor 메뉴 및 포트폴리오 위젯에 관한 몇 가지 FAQ

결론

웹사이트 메뉴를 만들려면 많은 노력과 인내가 필요합니다. 그러나 WordPress와 같은 오픈 소스 플랫폼은 우리를 더 쉽게 만듭니다. 사용 가능한 리소스, 플러그인, 문서 및 기타 짧은 자습서는 누구나 쉽게 사이트를 구축하고 사용자 지정하는 데 도움이 될 수 있습니다.

그러나 사용자 정의 WordPress 메뉴 및 포트폴리오 사이트를 만드는 방법에는 여러 가지가 있습니다. 수동으로 수행하거나 위에 표시된 프로세스를 따를 수 있습니다. 그러나 수동 프로세스는 피하는 것이 좋습니다. 웹 사이트 디자인에 대한 경험이 충분하지 않으면 사이트 구조가 손상될 수 있습니다.

프로세스를 자동화하고 불필요한 노력을 줄이려면 Elementor 탐색 메뉴 위젯이 최고의 선택이 될 수 있습니다. 또한 포트폴리오 위젯을 사용하면 웹 페이지를 보다 수익성 있고 매력적으로 만들어 사이트를 재설계할 수 있습니다.

Elementor 사이트 디자인 경험을 한 단계 업그레이드하려면 Happy Addons 를 활용할 수 있습니다. 다양한 Elementor 기능과 위젯 모음입니다. 적절히 사용하면 단시간에 프로페셔널한 룩을 완성할 수 있습니다.