헤더는 방문자가 웹사이트에 접속했을 때 가장 먼저 보게 되는 부분입니다. 헤더 태그 것은 매우 중요합니다. 하지만 워드프레스에서 헤더를 편집하고 사용자 지정하는 것은 쉽지 않습니다. 워드프레스 테마 커스터마이저, 코드 편집기 및 기타 도구를 제대로 사용하는 방법을 이해해야 합니다.
개인 맞춤형 헤더는 브랜드 이미지를 강화하고, 메뉴를 통해 사이트 탐색을 개선하며, 로고와 같은 시각적 요소로 더 많은 방문자를 유치하는 데 도움이 됩니다. 맞춤 로고 레이아웃 디자인부터 고급 드롭다운 메뉴 코딩까지, 워드프레스 헤더 사용자 정의 기능을 익히면 사이트의 첫인상과 기능을 특정 요구 사항에 맞게 완벽하게 제어할 수 있습니다. 이 글에서 자세히 알아보겠습니다.
워드프레스 헤더에 대한 간략한 개요
워드프레스 헤더는 웹사이트 상단에 표시되며 방문자의 시선을 가장 먼저 사로잡는 요소입니다. 워드프레스 유지보수 이유는 다음과 같은 핵심 요소들이 포함되어 있기 때문입니다.
- 내비게이션 메뉴 – 방문자가 사이트 내의 다른 페이지로 쉽게 이동할 수 있도록 해줍니다.
- 로고 – 사람들이 브랜드를 알아볼 수 있도록 도와주는 회사 로고입니다.
- 기타 유용한 항목 – 소셜 미디어 아이콘, 특정 작업을 수행하는 버튼(예: "지금 구매"), 검색창, 연락처 정보 등.
헤더는 좋은 첫인상을 남기고 방문자가 즉시 접근할 수 있어야 할 모든 정보를 제공해야 합니다.
다행히 워드프레스의 새로운 전체 사이트 편집 기능을 사용하면 이제 원하는 대로 헤더를 디자인하고 맞춤 설정할 수 있습니다. 워드프레스 헤더에는 다양한 유형이 있습니다
- 글로벌 헤더 – 모든 페이지에 일관되게 표시되는 헤더입니다.
- 고정 헤더 – 스크롤을 내려도 헤더가 상단에 계속 표시됩니다.
- 전체 화면 헤더 - 큰 이미지/동영상으로 화면 전체를 차지합니다.
- 슬라이드인 메뉴 – 모바일에서 메뉴가 측면에서 슬라이드되어 나타납니다.
- 슬라이드 다운 헤더 - 스크롤하면 아래로 슬라이드되어 더 많은 옵션이 표시됩니다.
- 세로 메뉴 – 메뉴가 가로 방향이 아닌 세로 방향으로 측면에 표시됩니다.
- 투명 헤더 – 페이지 콘텐츠 위에 투명한 헤더가 표시됩니다.
- 회전형 헤더 – 헤더가 90도 회전되어 독특한 외관을 자랑합니다.
- 메가 메뉴 – 확장 가능한 카테고리로 전자상거래 사이트
어떤 헤더 유형을 선택할지는 사이트 디자인, 콘텐츠, 그리고 이상적인 사용자 경험에 따라 달라집니다. 어떤 헤더는 크리에이티브 포트폴리오에, 또 다른 헤더는 콘텐츠 사이트, 온라인 쇼핑몰 등에 적합합니다. 적절한 헤더는 방문자 경험을 향상시킬 수 있습니다.
헤더의 모양을 편집하는 방법
웹사이트의 전체적인 분위기에 맞춰 글꼴 스타일, 크기, 색상을 조정하여 헤더의 모양을 손쉽게 바꾸고 싶으신가요? 효과적인 세 가지 방법을 알려드리겠습니다
방법 1: 테마 커스터마이저 사용
테마 커스터마이저는 워드프레스에 내장된 도구로, 사용자가 웹사이트 테마의 다양한 요소를 실시간으로 수정할 수 있도록 해줍니다. 사용자 친화적인 인터페이스를 제공하여 코드를 몰라도 색상, 글꼴, 레이아웃, 위젯 등 여러 요소를 변경할 수 있습니다. 이 직관적인 기능을 통해 웹사이트 소유자는 사이트의 디자인을 개인화하고 변경 사항을 적용하기 전에 즉시 확인할 수 있습니다.
아래 단계를 따라 테마 커스터마이저를 사용하여 헤더 디자인을 완벽하게 조정함으로써 WordPress 웹사이트의 시각적 매력을 높여보세요.
1단계: 워드프레스 웹사이트에 접속합니다
시작하려면 관리자 정보를 사용하여 WordPress 대시보드에 로그인하세요. 웹사이트 주소 끝에 wp-admin을 WordPress 로그인 URL을 .
2단계: 테마 사용자 정의 도구로 이동합니다
WordPress 관리자 대시보드
왼쪽에서 ' 외관 '을 클릭하세요 . 그런 다음 '사용자 정의'를 . 그러면 테마 사용자 정의 도구가 열리고, 여기에서 다양한 디자인 조정을 할 수 있습니다.
자세히 보기 : 워드프레스 변경 사항이 표시되지 않나요? 간단하게 해결하세요!
3단계: 헤더 설정 찾기
'헤더' , '헤더 및 탐색' , '헤더 옵션' 같은 섹션에서 찾을 수 있습니다 . 헤더 관련 섹션을 클릭하면 헤더 메뉴가 열리고 변경 가능한 설정을 확인할 수 있습니다.
4단계: 헤더 요소 사용자 지정
사용 중인 테마와 사용자 지정 가능한 항목에 따라 일반적으로 헤더의 다음 부분을 변경할 수 있습니다
- 사이트 제목/로고: 사이트 제목을 변경하거나 사용자 지정 로고를 넣을 수 있습니다.
- 사이트 슬로건: 사이트 슬로건을 변경하거나 숨길 수 있습니다.
- 헤더 이미지/그라디언트: 일부 테마에서는 헤더 배경에 이미지나 그라디언트 색상을 추가할 수 있습니다.
- 탐색 메뉴: 웹사이트 상단에 표시할 메뉴, 위치 및 모양을 선택할 수 있습니다.
- 헤더 레이아웃: 헤더의 너비, 높이 및 위치를 변경합니다.
- 머리글 텍스트 및 색상: 머리글의 텍스트, 링크 및 기타 스타일 요소의 색상을 조정합니다.
5단계: 변경 사항 미리 보기
워드프레스 커스터마이저에서 설정을 변경할 때 헤더가 어떻게 표시될지 실시간 미리보기를 통해 확인할 수 있습니다. 변경 사항을 게시하기 전에 시간을 들여 꼼꼼히 확인하세요. 이렇게 하면 사이트에 적용하기 전에 모든 것이 제대로 보이는지 확인할 수 있습니다.
6단계: 변경 사항 저장
헤더를 원하는 대로 조정했으면 '게시' 또는 '저장 후 게시' 버튼을 클릭하세요. 그러면 변경 사항이 저장되고 웹사이트에 즉시 반영됩니다.
자세히 보기 : WordPress "게시 실패. 응답이 유효한 JSON 응답이 아닙니다." 문제 해결
7단계: 웹사이트에서 확인하기
변경 사항이 적용된 헤더를 확인하려면 새 웹 브라우저 탭에서 웹사이트 URL을 . 모든 것이 제대로 표시되도록 몇 번 탭을 왔다 갔다 해야 할 수도 있습니다. 작업하는 동안 WordPress 사이트의 캐시를 지우는 것이 좋습니다. 이렇게 하면 최신 업데이트가 정확하게 표시됩니다.
꿀팁 : 테마마다 헤더를 꾸미는 방법이 다릅니다. 현재 사용 중인 테마에서 헤더 옵션이 충분하지 않다면 새로운 테마로 바꾸는 것을 고려해 보세요.
또는 맞춤 디자인 서비스를 이용하시면 헤더를 원하는 대로 디자인하는 데 추가적인 도움을 받으실 수 있습니다.
방법 2: 전체 사이트 편집기를 사용하여 헤더 편집
워드프레스에서 헤더를 더욱 고급스럽고 유연하게 꾸미고 싶다면 기본 사용자 정의 도구 대신 전체 사이트 편집기를 사용해 보세요. 전체 사이트 편집기는 워드프레스의 새로운 기능이나 최신 블록 편집기인 구텐베르크를 통해 접근할 수 있습니다.
다음은 전체 사이트 편집기를 사용하여 헤더를 편집하는 방법입니다
1단계: 워드프레스 웹사이트에 접속합니다
로그인하여 워드프레스 관리자 대시보드에 접속하세요.
2단계: 전체 사이트 편집기로 이동합니다
WordPress 대시보드 메뉴에서 '외관' 합니다 '사이트 편집기'를 . 그러면 전체 사이트 편집기 인터페이스가 실행됩니다.
3단계: 머리글 블록을 선택합니다
웹사이트의 실시간 미리보기가 표시되고 있으며, 왼쪽에서 모든 편집 옵션을 확인할 수 있습니다. 일반적으로 사이트 상단에 위치한 헤더 부분을 찾으세요. '헤더' 또는 '사이트 헤더' . 헤더 부분을 클릭하여 진행하세요.
4단계: 헤더를 편집합니다
헤더 섹션을 선택하면 사이드바에 다양한 편집 옵션이 표시됩니다. 테마와 블록 편집기의 기능에 따라 다음과 같은 방법으로 헤더를 사용자 지정할 수 있습니다
- 로고 변경: 사용자 지정 로고를 업로드하거나 현재 로고를 교체하세요.
- 블록 추가: 이 고급 도구를 사용하여 헤더 내에 텍스트, 이미지, 버튼 또는 기타 콘텐츠를 통합하고 구성하세요.
- 헤더 높이 조정: 웹 디자인 요구 사항에 맞춰 헤더의 높이를 조절하여 페이지에서 사이트가 얼마나 눈에 띄게 표시되는지 제어하세요.
- 헤더 블록: 블록을 활용하여 헤더 내에 다양한 콘텐츠 요소를 통합하세요. 텍스트 블록, 이미지 블록, 버튼, 소셜 미디어 아이콘, 검색창 등이 일반적으로 사용됩니다.
- 헤더 요소 정렬: 각 블록을 왼쪽, 가운데 또는 오른쪽으로 정렬할 수 있습니다. 로고, 사이트 제목, 탐색 메뉴와 같은 헤더 요소의 정렬 및 배치도 관리할 수 있습니다.
- 고정 헤더: 사용자가 스크롤을 내릴 때 페이지 상단에 헤더가 계속 표시되는 고정 헤더 기능을 활성화 또는 비활성화합니다.
웹 디자인에서 커닝의 중요성에 대한 디자인 인사이트를 얻으 세요
5단계: 변경 사항 미리 보기 및 게시
WordPress 전체 사이트 편집기를 사용하면 웹사이트 헤더의 실시간 미리보기를 볼 수 있습니다. 변경 사항을 검토하여 디자인 선호도와 요구 사항에 부합하는지 확인하세요.
6단계: 웹사이트를 확인하세요
사이트로 이동하여 새롭게 업데이트된 헤더를 확인해 보세요.
전반적으로 워드프레스 전체 사이트 편집기는 테마 사용자 정의 도구에 비해 더욱 시각적이고 유연한 방식으로 사용자 고유의 헤더를 맞춤 설정할 수 있도록 해줍니다. 하지만 사용 가능한 기능과 사용자 정의 옵션은 테마 및 설치된 플러그인에 따라 다를 수 있습니다.
방법 3: 헤더 플러그인을 사용하여 헤더 편집
워드프레스 웹사이트 헤더를 가장 효과적으로 개선하려면 플러그인을 활용하는 것을 고려해 보세요. 플러그인은 다양한 사용자 지정 옵션을 제공하여 헤더를 완벽하게 맞춤 설정할 수 있도록 해줍니다.
게다가 이러한 도구들은 정기적인 업데이트를 통해 최신 WordPress 버전과의 호환성을 보장하고 새로운 기능을 제공합니다. 따라서 이러한 역동적인 도구를 활용하여 사이트의 필요에 맞춰 발전하는 독창적인 헤더를 만들어 보는 것은 어떨까요?
계속 읽어보세요 : 기업을 위한 최고의 원페이지 워드프레스 웹사이트 빌더
다음 단계를 따르세요:
1단계: Elementor 헤더 및 푸터 빌더를 설치합니다
WordPress 사이트를 개선하려면 WordPress 관리자 대시보드에 접속하세요. 거기서 플러그인 섹션으로 이동합니다. 다음으로, 새 플러그인 추가를 하고 Elementor 헤더 및 푸터 빌더 플러그인을 검색하세요.
해당 파일을 찾으면 '설치' 버튼을 클릭하세요. 설치가 완료되면 '활성화' 플러그인을 활성화하세요. 이 단계를 따르면 Elementor 헤더 및 푸터 빌더 플러그인이 활성화되어 바로 사용할 수 있습니다.
2단계: 헤더 템플릿 생성
워드프레스 대시보드 에 접속하면 템플릿 으로 이동하세요 . 거기서 테마 빌더 새 추가 클릭하세요 . 그런 다음 헤더 템플릿 유형을 선택하여 시작하세요.
3단계: 헤더 구조 선택
Elementor는 미리 만들어진 헤더 디자인을 제공합니다. 하지만 원한다면 처음부터 완전히 맞춤형 헤더를 만들 수도 있습니다. 디자인을 선택하면 Elementor 편집기가 열리고, 선택한 디자인을 다듬기 시작할 수 있습니다.
4단계: 헤더 디자인하기
Elementor 편집기를 활용하여 완벽한 헤더 디자인을 만들어 보세요. 직관적인 인터페이스를 통해 로고, 내비게이션 메뉴, 텍스트, 버튼, 이미지, 심지어 단축 코드까지 왼쪽 패널의 선택 항목에서 드래그 앤 드롭하여 손쉽게 추가하고 맞춤 설정할 수 있습니다.
또한 Elementor는 스타일, 색상, 타이포그래피 및 간격에 대한 광범위한 사용자 지정 옵션을 제공하여 디자인 비전에 맞춰 각 요소를 세밀하게 조정할 수 있습니다. Elementor의 위젯과 기능을 활용하여 헤더에 역동성과 상호작용성을 더하고, 더욱 돋보이게 만들어 보세요.
계속 읽어보세요: 워드프레스 푸터를 5가지 간단한 방법으로 편집하는 방법 (단계별 가이드)
5단계: 헤더 미리보기
'게시' 옆에 있는 눈 모양 아이콘을 클릭하기만 하면 제작한 헤더를 미리 볼 수 있습니다 . 이를 통해 실제 웹페이지에 영향을 주지 않고 디자인을 검토하고 필요한 조정을 할 수 있습니다.
6단계: 헤더 템플릿 저장
'게시' 버튼을 클릭하면 생성한 헤더를 표시할 위치를 선택하는 대화 상자가 나타납니다. 이 팝업 창에서 옵션을 선택하지 못했더라도 다음 단계로 진행하면 됩니다.
7단계: 웹사이트에 헤더를 할당합니다
웹사이트에 나만의 헤더를 표시하려면 특정 페이지 또는 조건에 헤더를 지정해야 합니다. 먼저 WordPress 관리자 대시보드로 이동한 다음 템플릿을 클릭합니다. 헤더 섹션에 지정한 이름 아래에 여러 옵션이 표시됩니다. 해당 패널에서 편집을 클릭합니다. 아래로 스크롤하여 표시 조건을 선택하면 헤더를 삽입하는 표시 규칙을 구성할 수 있습니다.
추가 정보: 워드프레스 접근성 가이드: WCAG 표준 준수
8단계: 헤더 템플릿 게시
'게시' 클릭하여 웹사이트에 사용자 지정 헤더를 활성화하세요 .
새로운 헤더가 적용되었습니다! Elementor의 헤더/푸터 플러그인은 헤더 디자인 및 개인화에 다재다능하고 시각적으로 매력적인 기능을 제공합니다. 이 플러그인을 사용하면 고정형, 스티키형 또는 투명형 헤더를 제작할 수 있습니다.
더 읽어보기 : Elementor가 로딩 화면에서 멈췄나요? 해결 방법 25가지 이상!
전체 사이트 편집 기능을 사용하여 WordPress 헤더 사용자 지정하기
워드프레스의 전체 사이트 편집 기능은 기존 테마 커스터마이저의 한계를 뛰어넘어 완전히 새로운 맞춤 설정 방식을 제공합니다. 기존 커스터마이저도 여전히 사용할 수 있지만, 사이트 편집기는 창의적인 자유를 만끽할 수 있는 새로운 영역입니다(아직 베타 버전입니다). 예를 들어, Twenty Twenty-Three 테마를 사이트 편집기는 헤더의 글꼴, 색상, 버튼 스타일 등을 원하는 대로 맞춤 설정하는 데 매우 유용합니다.
이것을 확인해 보세요 : Elementor를 사용한 최고의 SaaS 워드프레스 테마 25가지
사이트 편집기에서 워드프레스 헤더에 접근하기
- WordPress 관리자 페이지에서 외관 > 사이트 편집기 로 이동하세요.
- 에디터를 실행하면 홈 설정 화면으로 이동합니다
- 헤더 설정에 접근하려면 WordPress 로고(왼쪽 상단) 또는 드롭다운 화살표를 클릭한 다음 ' 모든 템플릿 찾아보기'를
- 다음으로 WordPress 메뉴에서 템플릿 구성 요소를
- 마지막으로 '헤더'를 사이트 헤더를 편집하세요.
헤더 스타일링
간단한 사용자 지정 헤더를 만들기 위해 템플릿 편집하는 방법을 살펴보겠습니다
- 목록 보기 클릭하여 헤더 구조를 확인하세요.
- 그룹 블록 안에 행(Row)이 있고, 그 안에 페이지 제목(Page Title) 과 탐색(Navigation)
- 행은 이미 세로 방향으로 중앙에 정렬되어 있고 전체 너비로 설정되어 있습니다
헤더 사용자 지정
- 사이트 제목 삭제하려면 점 세 개로 표시된 메뉴를 펼치고 ' 사이트 제목 제거'를
- 탐색 메뉴 옆에 있는 더하기 아이콘을 클릭하고 소셜 아이콘을
- 원하는 소셜 플랫폼 아이콘(페이스북, 인스타그램 등)을 모달 상자를 통해 추가하세요
- 소셜 아이콘 블록의 레이아웃, 정렬, 방향, 링크 동작, 색상 및 간격을 조정하여 스타일을 지정하세요
- 추가 설정 > 배경을 통해 행 블록에 배경색을 추가하세요.
- 추가 헤더 요소를 위해 새 행 블록을 삽입하세요
- 탐색 블록을 드래그하여 새 행으로 이동하세요
- 첫 번째 행에 버튼 블록을 추가하고 스타일을 지정하세요(텍스트, 색상, 테두리 반경)
- 두 번째 행에 사이트 로고 블록을 추가하고 로고를 업로드한 후 설정을 구성하세요
- 두 번째 행의 너비를 전체 너비로 설정하고 정렬 방식을 "항목 간 간격"으로 설정했는지 확인하십시오
- 행 정렬을 가운데 정렬 .
블록을 신중하게 배치하고 스타일을 조정하면 WordPress 헤더의 모든 측면을 세밀하게 제어하여 브랜드 이미지 최적의 사용자 경험을 제공하는 맞춤형 헤더를 만들 수 있습니다.
워드프레스 헤더를 맞춤 설정하고 싶으신가요?
저희는 혁신적으로 저렴한 가격으로 최적의 스타일을 갖춘 워드프레스 웹사이트 전체 디자인을 제공합니다! 단 한 번의 결제로 999달러에 이 특별한 혜택을 누리세요.
결론
워드프레스 헤더를 맞춤 설정하면 방문자에게 강렬한 인상을 남기고 브랜드 고유의 정체성을 효과적으로 전달할 수 있다는 점을 기억하세요. 테마 커스터마이저, 전체 사이트 편집기 또는 특수 플러그인 등 강력한 도구를 최대한 활용하십시오. 다양한 레이아웃, 색상 및 요소를 실험하여 시각적으로 매력적이고 사용자 친화적인 헤더를 만들어 참여도와 전환율을 높이세요. 창의성을 발휘하고 기능성을 우선시하며 지속적으로 헤더를 개선하여 트렌드를 선도하십시오.
