사이트의 모든 페이지 상단에 표시되는 요소의 스타일을 지정하세요.

머리말은 사이트 제목이나 로고, 탐색 메뉴 및 기타 기능이 표시되는 부분입니다. 일반적으로 머리말은 사이트 전체에서 동일하게 표시되고 방문자가 콘텐츠를 탐색하고 상호 작용하는 방식에 큰 역할을 합니다.

이 기능은 버전 7.1부터 사이트 머리말에서 사용할 수 있습니다. 사이트가 버전 7.0인 경우 머리말은 사이트 템플릿에 따라 달라집니다.

사이트 머리말 관련 비디오

이 비디오에서는 사이트 머리말 편집하고 스타일을 지정하는 방법을 보여줍니다.

사이트 제목 또는 로고 편집

사이트를 만들 때 사이트 제목을 지정했을 수도 있습니다. 로고를 추가하면 머리말에 표시되는 사이트 제목이 로고로 대체되지만, 그럼에도 사이트 제목은 별도로 추가해야 합니다. 별도의 SEO 제목을 추가하지 않는 한, 검색 엔진은 검색 결과와 브라우저 탭에 제목을 사용합니다.

머리말의 탐색 링크 추가, 편집 또는 삭제

사이트 머리말의 탐색 메뉴는 페이지 패널에 추가한 페이지를 반영합니다. 탐색 링크를 변경하는 방법:

• 탐색에 페이지 추가
• 페이지 제목 편집
• 페이지 삭제

머리말에 버튼 추가

머리말에 버튼을 추가하면 콜투액션이 전면 중앙에 배치되어 방문자가 바로 클릭하도록 유도할 수 있습니다. 머리말 레이아웃에 따라 버튼이 탐색 링크와 그룹화되거나 분리될 수 있습니다. 모바일에서는 버튼이 항상 탐색 링크 아래에 표시됩니다.

머리말에 버튼을 추가하는 방법:

1. 페이지 패널을 엽니다.
2. 사이트 미리보기의 왼쪽 상단 모서리에서 편집을 클릭하세요.
3. 머리말 위에 커서를 올리고 사이트 머리말 편집을 클릭하세요.
4. 요소 추가를 클릭하세요.
5. 버튼 토글을 켜세요.

머리말 버튼 편집

버튼 텍스트, 링크, 스타일을 설정하는 방법:

1. 페이지 패널을 엽니다.
2. 사이트 미리보기의 왼쪽 상단 모서리에서 편집을 클릭하세요.
3. 머리말 위에 커서를 올리고 사이트 머리말 편집을 클릭하세요.
4. 머리말 버튼을 클릭한 다음 연필 아이콘을 클릭합니다.
5. 콘텐츠에서 버튼 텍스트와 링크를 편집하세요.
6. 디자인 탭을 클릭한 다음 메인, 보조 또는 부가의 스타일을 선택하여 버튼 스타일을 설정합니다.

머리말 모양은 버튼 스타일을 따릅니다.

머리말 버튼 글꼴 설정

버튼 스타일을 보조 또는 부가로 설정하면 머리말 버튼의 텍스트도 버튼 스타일을 따릅니다.

메인 스타일 설정으로 머리말 버튼 글꼴의 스타일을 지정하는 방법:

1. 사이트 스타일을 여세요.
2. 글꼴 옆의 >를 클릭합니다.
3. 스타일 지정을 클릭하세요.
4. 머리말 버튼을 클릭하고 변경합니다.

머리말 버튼 색상 설정

머리말 버튼 색상을 변경하는 방법은 머리말 배경 스타일에 따라 다릅니다.

머리말 배경 스타일이 다음과 같을 경우:

• 단색 - 색상 - 버튼 색상이 사이트의 기본 색상 테마를 따릅니다.
• 단색 - 테마 - 버튼 색상이 선택된 색상 테마를 따릅니다.
• 그라데이션 - 버튼 색상은 사이트의 기본 색상 테마를 따릅니다.
• 적응형 - 버튼 색상은 각 페이지 상단 섹션의 색상 테마를 따릅니다. 섹션에서 사용하는 각 색상 테마에 맞춰 버튼 색상을 설정합니다.

머리말에 계정 로그인, 소셜 링크, 장바구니 또는 언어 전환 기능 추가

머리말에 고객 계정 로그인, 소셜 링크, 장바구니, 또는 언어 전환과 같은 다른 요소를 추가하는 방법: 

1. 페이지 패널을 엽니다.
2. 사이트 미리보기의 왼쪽 상단 모서리에서 편집을 클릭하세요.
3. 머리말 위에 커서를 올리고 사이트 머리말 편집을 클릭하세요.
4. 요소 추가를 클릭하세요.
5. 활성화하려는 기능 옆의 토글을 켭니다.

머리말 기능 사용자 지정

소셜 링크와 장바구니 아이콘의 디자인을 맞춤 설정할 수 있습니다. 사이트에서 Weglot을 사용하는 경우 언어 전환 기능을 사용자 지정할 수도 있습니다.

이러한 기능을 편집하는 방법:

1. 페이지 패널을 엽니다.
2. 사이트 미리보기의 왼쪽 상단 모서리에서 편집을 클릭하세요.
3. 머리말 위에 커서를 올리고 사이트 머리말 편집을 클릭하세요.
4. 편집하려는 기능을 클릭한 다음 연필 아이콘을 클릭합니다.
5. 설정을 통해 디자인을 변경합니다. 이 옵션들은 기능에 따라 다릅니다.
6. 저장을 클릭하세요.

머리말에 디자인 효과 추가

사이트 머리말 디자인 편집 시, 시각적 효과를 추가하여 독특한 모양을 만들거나 브랜드 이미지를 강조할 수 있습니다. 이러한 효과는 머리말의 컴퓨터 버전과 모바일 버전 모두에 적용됩니다.

머리말 효과를 추가하는 방법:

1. 페이지 패널을 엽니다.
2. 사이트 미리 보기의 왼쪽 상단 모서리에서 편집을 클릭한 다음 머리말 위에 커서를 올리고 사이트 머리말 편집을 클릭합니다.
3. 디자인 편집을 클릭합니다.
4. '효과'에서 그림자를 추가하고, 테두리를 추가하고, 고정 머리말 스타일을 설정합니다.

머리말에 그림자 효과 추가

머리말 주변에 그림자 효과를 만드는 방법:

1. 머리말 디자인을 편집하는 동안 그림자를 클릭합니다. 이렇게 하면 그림자가 즉시 적용됩니다.
2. 부드럽게 또는 강하게 사전 설정 중에서 선택합니다. 선택 후에도 사전 설정을 사용자 지정할 수 있습니다.
3. 색상을 선택하고 스타일을 지정하려면 색상을 클릭합니다.
4. 그림자의 모양을 변경하려면 확장, 거리 및 흐림 슬라이더를 사용합니다. 마음에 드는 스타일을 찾을 때까지 다양한 조합으로 조절해 보시는 것을 추천합니다.
5. 그림자를 제거하려면 제거를 클릭합니다.

머리말 주변에 테두리 추가

머리말 테두리를 설정하는 방법:

1. 머리말 디자인을 편집하는 동안 테두리를 클릭합니다. 이렇게 하면 즉시 테두리가 적용됩니다.
2. 색상을 선택하고 스타일을 지정하려면 색상을 클릭합니다.
3. S, M 또는 L을 클릭하여 선 두께를 설정하거나, …을 클릭하여 사용자 지정 두께를 설정합니다.
4. 테두리의 위치를 설정합니다. 머리말의 모든 면, 상단, 하단 또는 상단과 하단 모두에 표시할 수 있습니다.
5. 테두리를 제거하려면 제거를 클릭합니다.

고정 머리말 활성화

기기에 따라, 어떤 스타일의 고정 머리말이든 스크롤할 때 약간 늘어나거나 줄어들 수 있습니다. 방문자가 스크롤할 때 사이트 상단에 머리말을 고정하는 방법:

1. 머리말 디자인을 편집하는 동안 고정 위치 토글을 켭니다.
2. 고정 머리말 스타일을 기본(머리말이 항상 브라우저 상단에 표시됩니다) 또는 스크롤 시 숨김(방문자가 위로 스크롤할 시에만 브라우저 상단에 머리말이 표시됩니다)으로 설정합니다.

모바일 탐색 메뉴 스타일 설정

모바일 보기에서는 머리말 탐색 메뉴가 확장형 메뉴로 축소됩니다.

모바일 탐색 메뉴 스타일을 설정하는 방법:

1. 페이지 패널을 엽니다.
2. 사이트 미리 보기의 왼쪽 상단 모서리에서 편집을 클릭한 다음 머리말 위에 커서를 올리고 사이트 머리말 편집을 클릭합니다.
3. 오른쪽 상단 모서리에 있는 모바일 보기 아이콘을 클릭합니다.
4. 모바일 탐색 메뉴를 클릭한 다음 연필 아이콘을 클릭합니다.
5. 메뉴 아이콘 스타일을 선택합니다.
6. 아이콘 선의 두께를 설정하려면 S, M, 또는 L을 클릭하고, 사용자 지정 두께를 설정하려면 …을 클릭합니다.

머리말 배경 효과 및 색상 변경

머리말에 배경 스타일을 추가하여 머리말을 다른 콘텐츠와 차별화하거나 사이트의 나머지 브랜딩과 조화롭게 연출할 수 있습니다. 탐색 메뉴에 드롭다운이 있는 경우, 컴퓨터의 드롭다운 배경 색상은 머리말 배경 색상과 일치합니다.

배경 스타일을 변경하는 방법:

1. 사이트 미리보기의 왼쪽 상단 모서리에서 편집을 클릭하세요.
2. 머리말 위에 커서를 올리고 사이트 머리말 편집을 클릭하세요.
3. 디자인 편집을 클릭한 후 색상 탭을 클릭하세요.
4. 편집기 상단의 드롭다운 메뉴에서 배경 스타일을 선택하세요. 단색, 그라데이션 또는 적응형 중에서 선택합니다. 
5. 선택한 스타일에 따라 배경 스타일의 색상, 흐림 효과, 불투명도를 사용자 정의합니다. 일부 브라우저에서는 흐림 효과가 표시되지 않을 수 있습니다.

단색 머리말 배경

머리말 배경을 단색으로 설정하려면 단색 배경 스타일을 선택하세요. 사용자 정의 색상을 선택하거나, 사이트의 팔레트를 사용하거나, 사이트의 색상 테마 중 하나를 적용하세요.

그라데이션 머리말 배경

머리말 배경이 각 페이지의 첫 번째 섹션의 배경 속으로 자연스럽게 스며들듯 사라지게 하려면 그라데이션 스타일을 선택하세요. 그라데이션 배경 색상과 탐색 색상을 사용자 지정할 수 있습니다.

적응형 머리말 배경

페이지마다 머리말의 모양을 다르게 설정하려면 적응형 스타일을 선택하여 머리말을 투명하게 설정하세요. 그러면 각 페이지의 첫 번째 섹션 배경이 머리말 뒤로 비쳐 보이게 됩니다.

사이트 머리말 숨기기

콘텐츠에 대한 관심을 끌거나 방문자의 행동을 유도하기 위해 특정 페이지에서 머리말을 숨길 수 있습니다.

블로그 및 스토어 페이지와 같은 컬렉션 페이지에서는 이 옵션을 사용할 수 없습니다.

머리말을 숨기는 방법:

1. 페이지 패널을 엽니다.
2. 페이지 제목 위에 커서를 올리고, 제목 옆의 를 클릭합니다.
3. 페이지 설정 탭에서 탐색을 클릭합니다.
4. 머리말 표시 토글을 꺼주세요.
5. 머리말을 숨기려는 페이지마다 이 단계를 반복합니다.

모바일 기기에서 머리말을 다르게 설정할 수 있나요?

데스크톱 보기와 별도로 모바일 기기용 머리말의 레이아웃, 높이 및 너비를 개별적으로 사용자 지정할 수 있습니다. 기타 디자인 변경 사항은 데스크톱 및 모바일 보기 모두에 영향을 미칩니다.

데스크톱 또는 모바일 보기에 별도의 스타일을 설정하는 방법:

1. 사이트 미리 보기의 왼쪽 상단 모서리에서 편집을 클릭합니다. 오른쪽 상단에서 편집하려는 항목에 따라 데스크톱 보기 아이콘이나 모바일 보기 아이콘을 클릭합니다.
2. 머리말 위에 커서를 올리고 사이트 머리말 편집을 클릭하세요.
3. 디자인 편집을 클릭합니다. 
4. 레이아웃 드롭다운 메뉴를 클릭하고 머리말 배열을 변경할 레이아웃을 선택합니다. 슬라이더를 사용하여 링크와 다른 요소 사이의 간격을 변경합니다.
5. 머리말 슬라이더를 사용하여 머리말의 높이를 조정합니다.
6. 전체 또는 인셋 을 클릭하여 머리말의 너비를 설정합니다.
7. 저장을 클릭하세요.