목차
헤더 없이는 웹사이트가 완성되지 않는다는 데 동의하실 겁니다. 워드프레스에서 헤더를 만드는 데 두 가지 옵션이 있다는 사실을 알고 계셨나요? 이 튜토리얼에서는 개인별 차이점을 설명합니다.
정품 헤더 이미지
아시다시피 클래식 워드프레스 헤더는 모든 페이지에서 사용됩니다. 일반적으로 좌우로 넓은 직사각형 상자입니다. 내부에는 로고 또는 웹사이트 이름, 태그 라인 및 메뉴 항목이 있습니다. 헤더 이미지라고 하는 배경 이미지를 삽입할 수도 있습니다. 헤더 이미지는 방문자의 관심을 끌고 전체적인 웹사이트 룩앤필을 만드는 데 유용합니다. 눈에 잘 띄지 않는 헤더 이미지를 사용할지, 방문자의 주의를 웹사이트 탐색에 집중시킬 수 있는 지배적인 이미지를 사용할지는 회원님의 결정에 달려 있습니다.
워드프레스 사용자 정의 관리자에서 헤더를 편집하는 방법
기본적으로 헤더 이미지는 워드프레스 사용자 정의 기능을 통해 변경할 수 있습니다. 워드프레스 관리자와 웹사이트 모두에서 액세스할 수 있습니다:
- WP 관리자에서 직접 다음 주소로 이동하면 됩니다. 모습 -> 사용자 지정
- 프론트엔드에서 로그인한 경우 상단 표시줄에서 '사용자 지정'을 클릭합니다.
사용자 정의 관리자에는 현재 활성화된 테마의 모든 기본 모양 설정이 포함되어 있습니다. 따라서 헤더 이미지 설정을 찾을 수 있는 위치는 활성 테마에 따라 다릅니다. Citadela 테마에서는 다음 위치에서 헤더 이미지를 추가하고 편집할 수 있습니다. 사용자 지정 -> 모습 -> 헤더 배경.
헤더 이미지 설정
어떤 헤더 이미지를 선택하든 필요에 맞게 구성할 수 있습니다. "헤더 이미지 반복"을 사용하면 흥미로운 효과를 얻을 수 있습니다. 다음 옵션을 구성할 수 있습니다:
- 타일
- 가로로 타일링
- 세로로 타일링
- 반복 안 함(이미지를 반복하지 않으려는 경우)
워드프레스의 기타 설정 - 헤더 이미지 크기
헤더를 편집하고 이미지를 조정하는 또 다른 옵션은 적절한 크기를 설정하는 것입니다. 헤더 이미지 크기에는 다음 세 가지 옵션이 있습니다:
- 원본 - 원본 이미지 크기를 유지합니다.
- 커버 - 업로드된 이미지는 좌우에 맞게 크기가 조정되며, 이미지도 잘라낼 수 있습니다.
- 포함 - 헤더 이미지 크기가 전체 이미지가 보이도록 조정됩니다.
헤더 내에서 이미지 위치를 설정하고 배경 고정을 설정할 수도 있습니다.
헤더로 작동하는 커버 블록
이 글의 서두에서 이미 언급했듯이 워드프레스 편집기에서 헤더를 편집하는 방법에는 여러 가지가 있습니다. 커스터마이저를 사용하는 것 외에도 커버 블록이라는 핵심 워드프레스 블록 중 하나를 사용할 수도 있습니다. 그렇다면 차이점은 무엇일까요?
사용자 정의 기능으로 만든 클래식 헤더는 웹사이트 전체에 적용되는 반면, 커버 블록을 사용하면 기본적으로 모든 페이지 또는 글에 헤더 이미지로 작동하는 커버 이미지를 추가할 수 있습니다. 한 페이지나 글에서 여러 번 다른 설정으로 사용할 수도 있습니다.
커버 블록 사용처
커버 블록은 기존 웹사이트 헤더에 비해 웹사이트 전반에 걸쳐 더 폭넓게 적용됩니다. 커버 블록은 콘텐츠에 전체 너비의 넓은 타이틀 이미지를 추가합니다. 블로그 글에서 콘텐츠를 시각적으로 구분하는 데 사용할 수 있습니다. 각 글 섹션에는 다음 콘텐츠에 연결할 수 있는 고유한 헤더 이미지가 표시됩니다. 커버 블록 안에 바로 텍스트를 작성할 수 있다는 점이 가장 큰 특징입니다. 이 텍스트는 이미지 위에 표시됩니다.
홈페이지 헤더
독창적인 디자인을 원한다면 웹사이트 헤더 대신 커버 블록을 사용할 수도 있습니다. 커버 블록은 다양한 맞춤 옵션을 제공하므로 콘텐츠 너비로 설정하거나 전체 너비로 만들 수 있습니다. 전체 너비 헤더는 큰 배경 이미지로도 사용할 수 있습니다. 하지만 Citadela 테마에서 페이지 제목을 끄는 것을 잊지 마세요. 이 단계는 커버 블록을 웹사이트 헤더로 사용하려는 경우에 필요합니다.
커버 블록을 사용하여 헤더를 만드는 방법
가장 먼저 커버 블록을 추가해야 합니다. 다음과 같은 방법으로 모든 페이지 또는 글에 추가할 수 있습니다:
상단 표시줄의 '+' 기호 또는 콘텐츠의 아무 곳이나 '+' 기호를 클릭합니다. 그런 다음 커버 블록을 검색합니다.
또 다른 빠른 방법은 블록 이름 뒤에 "/"를 사용하여 블록을 추가하는 것입니다.
커버 블록을 추가하면 이미지 또는 동영상을 업로드할 수 있는 공간이 생깁니다. 미디어 라이브러리에서 이미지를 선택할 수도 있습니다. 선택한 이미지 또는 동영상이 헤더로 사용됩니다.
헤더 제목
커버 블록을 사용하여 헤더를 추가할 때 흥미로운 점은 이미지 위에 텍스트 제목을 쓸 수 있다는 것입니다. 이 제목은 블로그 게시물과 같은 섹션의 헤더로도 사용할 수 있습니다. 여기에 URL을 추가하는 것도 가능합니다.
커버 블록 정렬
블록 툴바를 사용하여 커버 블록을 정렬할 수 있습니다. 콘텐츠 영역 내에서 왼쪽, 오른쪽 또는 가운데에 정렬할 수 있습니다. 너비 또는 전체 너비로 설정할 수도 있습니다. 이러한 옵션은 웹사이트 구축에 사용하는 활성 테마에서 지원해야 합니다.
표지 이미지 설정
인스펙터에서 표지 이미지 모양을 수정할 수 있습니다. 고정 배경으로 설정하면 이미지가 페이지의 나머지 콘텐츠와 함께 스크롤되지 않고 항상 제자리에 유지됩니다.
초점 선택기를 사용하면 이미지의 어느 부분을 헤더에 표시할지 선택할 수 있습니다. 이미지에 더 많은 작업을 할 수 있습니다. 예를 들어 오버레이 색상과 배경 불투명도를 설정할 수 있습니다. 두 설정 모두 헤더를 마무리하는 데 도움이 됩니다. 블로그 글 안에 커버 블록을 사용하는 경우 올바른 색 구성표와 투명도를 사용하여 글에 원하는 분위기를 더할 수 있습니다. 제목 텍스트가 명확하게 보여야 하므로 이러한 설정에 주의하세요.
동영상 헤더 만들기
커버 블록은 웹사이트 헤더 내에서 동영상을 재생하는 데에도 사용할 수 있습니다. 방문자의 관심을 끌거나 제품 또는 서비스를 홍보할 수 있습니다. 다음이 있습니다. 지원되는 여러 비디오 형식가장 일반적으로 사용할 수 있는 파일은 .mp4입니다.
좋은 점은 동영상 위에 제목을 쓰거나, 정렬하거나, 전체 너비로 만들거나, 색상 오버레이를 설정할 수도 있다는 것입니다. 커버 블록의 설정은 모든 미디어 유형에 대해 동일합니다.
헤더에 대한 경험은 어떤가요? 헤더를 만들기 위해 커버 블록을 이미 사용해 보셨나요? 워드프레스 커스터마이저를 사용하는 클래식 웹사이트 헤더를 선호하시나요? 아래 댓글로 알려주세요.