Elementor로 WordPress 헤더를 편집하는 방법

웹사이트 헤더는 사용자가 사이트와 처음 상호작용하는 영역입니다. 방문자가 다른 페이지를 방문하는 동안 명확한 방향을 얻을 수 있도록 주로 웹 사이트 탐색에 사용됩니다. 또한 브랜딩, CTA 버튼 추가, 필요한 정보를 많이 보관하는 장소로 사용할 수 있습니다.

기본적으로 WordPress 테마는 헤더에 대한 글로벌 디자인 형식을 제공합니다. 그러나 사용자 정의 헤더를 만들고 싶다면 핵심 테마 파일을 편집할 수 있습니다. 비 기술 사용자에게는 시간이 많이 걸리고 어렵습니다.

가장 쉬운 해결책은 무엇입니까?

Elementor는 드래그 앤 드롭 기능으로 웹사이트 디자인 작업을 그 어느 때보다 쉽게 ​​만들어주는 인기 있는 페이지 빌더 플러그인입니다. Elementor를 사용하면 헤더를 매우 효율적으로 만들고 사용자 지정할 수 있습니다.

이 블로그에서는 Elementor에서 헤더를 편집하는 방법 에 대한 단계별 가이드를 보여 드리겠습니다.

오늘은 다음 방법을 배우게 됩니다.

• Elementor로 기존 웹사이트 헤더 편집
• 미리 만들어진 Elementor 헤더 템플릿을 사용하여 헤더 만들기
• 유용한 위젯을 사용하여 처음부터 Elementor 헤더 디자인

가이드가 끝나면 웹사이트 디자인 능력을 한 단계 끌어올릴 보너스 포인트를 얻을 수 있습니다. 그러니 놓치지 마세요.

Elementor로 기존 웹 사이트 헤더를 편집하는 방법

Elementor 웹사이트의 현재 헤더를 편집하는 방법을 보여드릴 시간입니다. 여기에서 Elementor 무료 및 프로 위젯을 사용하여 헤더를 디자인합니다.

따라서 이 두 가지 플러그인을 설치해야 합니다.

• 엘리멘터(무료)
• 엘리멘터 프로

먼저 현재 웹사이트 헤더를 살펴보십시오. 헤더에 웹사이트 로고와 탐색 메뉴가 추가되었음을 알 수 있습니다.

매우 일반적인 헤더처럼 보이므로 수정하기로 결정했습니다. 이제 현재 헤더에 Button 을 추가하겠습니다. 또한 검색 양식 , 소셜 채널 및 사무실 주소 를 표시하는 상단 헤더를 디자인하십시오.

원하는 모양을 얻으려면 5단계만 수행하면 됩니다.

• 1단계: 버튼 추가
• 2단계: 검색 양식 추가 및 사용자 지정
• 3단계: 소셜 아이콘 추가 및 사용자 지정
• 4단계: 지도 아이콘 추가
• 5단계: 제목 추가 및 사용자 지정

1단계: 버튼 추가

버튼을 추가하려면 탐색 메뉴의 오른쪽에 A New Column 을 추가해야 합니다. Elementor에서 새 열을 추가하는 방법을 알고 싶다면 아래 이미지를 확인하십시오.

이제 Elementor 위젯 갤러리에서 Button 위젯을 찾습니다. 그런 다음 새 열에 끌어다 놓습니다.

콘텐츠 영역에는 버튼 콘텐츠를 추가하는 데 필요한 모든 옵션이 있습니다. 여기에서 Default, Info, Success, Warning 및 Danger 와 같은 버튼 유형 을 설정할 수 있습니다. 버튼 Text 작성, Link 삽입, 버튼 Alignment , Size 관리가 가능합니다.

또한 필요에 따라 아이콘을 추가하고 아이콘 간격 을 제어할 수 있습니다. 그러나 버튼에 사용자 정의 코드를 추가하는 데 도움이 되는 버튼 ID 를 추가할 수 있습니다.

버튼 기본 스타일을 사용자 지정하려면 스타일 영역으로 이동할 수 있습니다. 여기에서 아래의 스타일 옵션을 사용하여 버튼 디자인을 변경할 수 있습니다.

• 고정 크기
• 타이포그래피
• 텍스트 그림자
• 텍스트 색상
• 배경 유형
• 테두리 유형
• 테두리 반경
• 박스 섀도우
• 심

이제 상단 헤더를 추가할 차례입니다. 이렇게 하려면 머리글 상단에 세 개의 열과 함께 새 섹션을 추가해야 합니다. Elementor에서 새 섹션을 추가하는 방법을 알아보겠습니다.

2단계: 검색 양식 추가 및 사용자 지정

새 섹션을 성공적으로 추가한 후 검색 양식 위젯을 오른쪽 열에 추가합니다.

콘텐츠 섹션으로 이동하여 기본 검색 양식 콘텐츠를 변경할 수 있습니다. Classic, Minimal, Full Screen 과 같은 검색 양식 스킨을 선택할 수 있습니다. Placeholder 를 작성할 수 있습니다. 또한 Button Type Icon 또는 Text and Icon Type Search & Arrow 를 설정합니다. 그러나 여기 콘텐츠 영역에서 아이콘 크기 를 관리할 수 있습니다.

스타일 영역에서 검색 양식 입력 스타일을 변경하고 버튼 텍스트 색상, 배경 색상, 아이콘 크기 및 너비 를 사용자 정의할 수도 있습니다.

3단계: 소셜 아이콘 추가 및 사용자 지정

우리는 소셜 채널을 상단 헤더에 표시하고 싶습니다. 그래서 중간 열에 Elementor Social Icons 위젯을 추가했습니다.

+ 항목 추가 버튼을 클릭하면 소셜 계정을 효율적으로 추가할 수 있습니다. 필요에 따라 항목을 복제 및 제거할 수 있습니다. 또한 Rounded, Square 및 Circle 과 같은 사용자 정의 모양 을 선택하십시오. 그리고 Columns 를 관리하고 Alignment 를 설정합니다.

항목, 콘텐츠를 추가하려면 먼저 항목을 열어야 합니다. 그런 다음 소셜 아이콘 을 추가하고 링크 를 삽입하고 색상 을 정의할 수 있습니다.

스타일 영역에서는 아이콘 색상, 크기, 패딩, 간격, 행 간격, 테두리 유형 및 테두리 반경 을 사용자 정의할 수 있습니다. 여기에서 소셜 아이콘을 생동감 있게 표현하기 위해 아이콘 호버 애니메이션 도 선택합니다.

이제 맨 위 헤더에 사무실 주소 를 추가할 차례입니다. 위치 Man Icon 과 Heading 을 추가하고 싶습니다. 그렇기 때문에 상단 헤더의 왼쪽 열에 내부 섹션 을 추가해야 합니다. 왼쪽 Elementor 위젯 패널에서 위젯을 찾아 열에 추가할 수 있습니다.

4단계: 지도 아이콘 추가

이제 상단 헤더의 왼쪽 부모 열에 두 개의 열이 있습니다. 먼저 아이콘 위젯을 추가했습니다. 그런 다음 지도 아이콘 을 추가하고 정렬 을 설정했습니다.

스타일 영역으로 이동하여 아이콘 기본 색상 과 크기 를 변경했습니다. 여기에서 아이콘 회전 값을 설정할 수 있습니다.

5단계: 제목 추가 및 사용자 지정

주소를 추가하기 위해 제목 위젯을 추가했습니다. 콘텐츠 섹션을 사용하여 제목 을 추가하고 필요에 따라 링크 를 삽입할 수 있습니다. 또한 제목 Size, HTML Tag, Alignment 를 원하는 스타일로 설정합니다.

텍스트 색상, 타이포그래피, 텍스트 획, 텍스트 그림자 및 혼합 모드 와 같은 기본 스타일 옵션을 사용하여 제목을 사용자 정의할 수도 있습니다.

현재 헤더의 최종 미리보기

헤더를 사용자 정의한 후, 이것은 헤더의 새로운 모양입니다.

커스텀 Elementor 헤더를 나만의 방식으로 만들고 싶다면 아래 가이드를 따라가시면 됩니다. 두 가지 방법을 사용하여 맞춤형 Elementor를 설계할 수 있습니다. 미리 만들어진 Elementor 들린 블록을 선택하거나 Elementor 위젯을 사용하여 처음부터 만들 수 있습니다. 봅시다.

Elementor 헤더 템플릿을 사용하여 헤더 생성

Elementor의 Theme Builder를 사용하여 헤더를 생성하려면 웹사이트에 Elementor(무료 및 Pro) 를 모두 설치해야 합니다.

다음 단계에 따라 사용자 정의 헤더를 만드십시오.

1. 템플릿->테마 빌더->헤더 로 이동합니다.
2. 새로 추가 버튼 또는 새 헤더 추가 버튼을 클릭합니다.
3. 템플릿 유형->헤더를 선택하고 템플릿 이름을 작성합니다.
4. 템플릿 생성 버튼을 클릭하여 템플릿을 저장합니다.
5. 다음 페이지에서는 미리 만들어진 블록 및 페이지 가 있는 Elementor Library 를 얻을 수 있습니다.
6. 올바른 헤더 블록 을 선택하고 웹 사이트에 설치 하십시오.

그게 다야

Elementor 위젯을 사용하여 처음부터 Elementor 헤더 디자인 및 사용자 지정

일반 Elementor 사용자인 경우 Elementor 위젯을 사용하여 사용자 정의 헤더를 만들 수 있습니다. Elementor는 헤더를 디자인하는 데 필요한 모든 위젯을 무료 버전으로 제공합니다. 기본적으로 공통 헤더에는 사이트 로고, 탐색 메뉴 및 검색 양식이 있습니다.

이 단계별 가이드를 따르고 Elementor 위젯을 사용하여 Elementor 헤더를 만들고 사용자 지정하는 방법을 배울 수 있습니다.

현대적인 웹 디자인을 따르기 위해 웹사이트에 고정 헤더를 만들 수 있습니다. 사용자가 웹 페이지를 아래로 스크롤하는 동안 화면의 동일한 위치에 표시됩니다. Elementor에서 고정 헤더를 만드는 방법에 대한 이 가이드를 확인하세요.

보너스: 해피 애드온의 해피 메가 메뉴 위젯을 사용하여 아디다스, 드리블, 푸마와 같은 대규모 메뉴 생성

전자 상거래 또는 비즈니스 웹 사이트가 있고 메뉴에 많은 페이지를 추가해야 합니다. 그러나 기본 Elementor 탐색 메뉴에서는 필요에 따라 더 큰 메뉴를 만들 수 있는 옵션을 제공하지 않습니다. 그리고 당신은 그것을 없애기 위한 해결책을 찾고 있습니다.

이 문제를 해결하기 위해 가장 빠르고 로딩이 빠른 Elementor 애드온 중 하나인 Happy Addons에서 최근에 새로운 ' Happy Mega Menu ' 위젯을 출시했습니다. 이 독점 위젯을 사용하면 Adidas, Dribbble, weDevs, InVision, Puma 등과 같은 큰 메뉴를 만들 수 있습니다.

해피 메가 메뉴 위젯을 사용해 몇 분 안에 탐색 메뉴를 만드십시오.

또한 Happy Addons의 Happy Mega Menu 위젯에 대한 전체 문서를 확인하고 올바른 방법으로 사용하는 방법을 배울 수 있습니다.

Elementor 헤더를 편집할 준비가 되셨습니까?

Elementor는 웹사이트 헤더를 디자인하고 맞춤화할 수 있는 모든 유연성을 제공합니다. Elementor를 사용하면 처음부터 새 헤더를 생성할 수 있을 뿐만 아니라 사이트의 현재 헤더를 편집할 수도 있습니다.

위 가이드에서는 Elementor에서 헤더를 올바르게 편집하는 방법을 다루었습니다. 우리는 사용자 정의 Elementor 헤더를 만들기 위해 무엇을 해야 하는지에 대해 논의했습니다. 마지막으로 해피 애드온의 해피 메가 메뉴 위젯이 귀하의 웹사이트를 위한 메가 메뉴를 쉽게 구축하는 데 어떻게 도움이 되는지에 대한 보너스 포인트도 공유했습니다.

튜토리얼이 유용하다고 생각되면 소셜 채널에서 공유하십시오. 뉴스레터에 가입하여 WordPress 및 Elementor에 관한 보다 편리한 가이드를 확인하는 것을 잊지 마십시오.