페이지 상단에 시각적 구심점을 추가해 방문자들의 시선을 사로잡으세요.

배너 이미지는 페이지 상단 부근에 표시되어 사이트의 분위기를 좌우하는 시각적 요소로 작용합니다. 이 가이드에서는 버전 7.0에서 배너 이미지를 추가하고 스타일을 지정하는 방법을 살펴보겠습니다. 배너 이미지를 추가하고 스타일을 지정하는 방법은 사용하는 템플릿에 따라 다릅니다.

버전 7.1에서 배너 이미지를 만들려면 페이지 상단 섹션에 섹션 배경 이미지를 추가하세요.

비디오를 시청하십시오

이미지 서식 지정 팁

사이트에 업로드하기 전에 이미지 형식을 확인하세요. 배너 이미지의 경우, 다음 가이드라인을 따라주세요.

• 너비가 1500픽셀에서 2500픽셀 사이인 이미지를 사용하세요.
• 가로로 넓은 이미지를 사용하세요.
• 테두리가 없는 추상적인 패턴의 이미지를 사용하세요.
• 파일 자체에 텍스트가 포함된 이미지를 사용하지 말고 이미지 위에 텍스트를 추가하세요.
• 이미지 파일 형식과 이미지 요구 사항 전문은 이미지의 웹 표시 서식 지정 페이지를 참고하세요.
• 사이트 상단에 텍스트만 있는 메시지를 넣고 싶다면 배너 대신 공지사항 표시줄을 추가하세요.

배너 이미지를 추가하십시오

템플릿은 각각 서로 다른 유형의 배너 이미지를 지원합니다.

• 페이지 배너 - 개별 페이지 상단에 표시됩니다. 페이지 대표 이미지로 추가됩니다.
• 컬렉션 아이템 배너 - 개별 블로그 게시물, 제품, 이벤트 위에 표시됩니다. 아이템 대표 이미지로 추가됩니다.
• 사이트 전체 배너 - 모든 페이지에 표시될 수 있습니다. 사이트 스타일에 추가됩니다.

더 자세한 정보가 궁금하다면 템플릿별 배너 옵션 비교표를 살펴보거나, 각 배너 옵션을 추가하는 비디오 예시를 시청하세요.

페이지 배너 추가

페이지 배너를 추가하는 방법은 다음과 같습니다.

1. 페이지 패널을 엽니다.
2. 페이지 제목 위에 커서를 올리고 를 클릭한 후 미디어를 클릭합니다.
3. 이미지 추가를 클릭해 컴퓨터에서 이미지를 업로드합니다. 또는 이미지 검색을 클릭해 이미지를 재사용하거나 스톡 이미지를 추가합니다. 일부 템플릿은 비디오 배너도 지원합니다.
4. 초점을 클릭한 후 끌어당겨 이미지의 중심점을 설정합니다. 이 방식을 사용해 대부분의 템플릿에서 잘림 문제를 해결할 수 있습니다.
5. 저장을 클릭해 변경 사항을 게시합니다.
6. 사이트 스타일을 사용해 배너 스타일을 지정합니다.

기존 배너를 편집하려면 페이지 위에 커서를 올리고 배너를 클릭하거나, 를 눌러 페이지 설정을 다시 여세요.

어떤 템플릿에서 페이지 배너가 지원되는지 자세히 알아보려면 템플릿별 배너 옵션 페이지를 살펴보세요.

팁: 기본 탑재된 옵션의 대안으로, Squarespace 사이트의 레이아웃 페이지 상단에 이미지 블록을 추가할 수 있습니다.

컬렉션 아이템 배너 추가

컬렉션 아이템 배너는 개별 블로그 게시물과 제품, 이벤트 위에 표시됩니다.

컬렉션 아이템 배너를 추가하려면 해당 아이템의 편집기를 연 후 옵션 탭에서 대표 이미지를 추가하세요. 더 자세한 방법은 대표 이미지 추가하기 페이지에서 확인할 수 있습니다.

일부 컬렉션 아이템에서는 컬렉션 아이템 배너 대신 페이지 배너가 표시됩니다. 예를 들어, 블로그 게시물에서는 블로그 페이지 배너가 표시될 수 있습니다. 어떤 템플릿에서 컬렉션 아이템 배너가 지원되는지 자세히 알아보려면 템플릿별 배너 옵션 페이지를 살펴보세요.

사이트 전체 배너 추가

사이트 전체 배너는 Five 템플릿과 중단된 템플릿 일부에서 사용할 수 있습니다. 사이트 전체 배너는 페이지 배너가 추가되지 않은 모든 페이지에 표시됩니다.

사이트 전체 배너를 추가하려면 사이트 스타일에서 스타일 조정을 클릭하세요.

• Five 템플릿에서 조정은 머리말 배경 이미지입니다.
• 중단된 템플릿에서는 조정 기능의 이름이 다를 수 있습니다.

이미지를 추가한 후 표시되는 옵션을 사용해 스타일을 지정하세요.

참고: 사이트 전체 배너는 2500px보다 크면 안 됩니다. 2500px보다 큰 배너는 모바일에서 문제를 일으킬 수 있습니다.

템플릿별 배너 옵션

다음의 템플릿 그룹은 하나 또는 그 이상의 배너 유형을 지원합니다.

배너에 텍스트 추가

사이트에 따라 배너 이미지 위에 텍스트나 다른 콘텐츠를 추가할 수 있습니다. 추가하는 텍스트는 모든 화면 크기와 모바일 기기에 맞게 조정됩니다. 따라서 배너에 텍스트를 추가하고 싶다면 이 방법을 사용하는 것이 좋습니다.

Squarespace는 이미지 파일 자체에 텍스트가 포함된 배너 이미지를 사용하는 것을 권장하지 않습니다. 그 이유는 다음과 같습니다.

• 컴퓨터가 텍스트를 읽을 수 없어 검색 엔진이 텍스트를 색인화해 결과로 표시할 수 없습니다.
• 브라우저 너비에 맞게 배너 모양이 바뀌면 텍스트 일부가 잘릴 수 있습니다.

텍스트 오버레이는 각 템플릿에 따라 서로 다른 유형이 지원됩니다.

• 페이지 제목과 설명 - 페이지 설정에 추가된 제목과 설명이 페이지 배너 위에 표시됩니다.
• 컬렉션 아이템 배너 텍스트 - 블로그 게시물, 이벤트, 제품 아이템 위에 컬렉션 아이템 설정에서 가져온 텍스트가 표시됩니다.
• 색인 페이지 배너 텍스트 - 템플릿에 따라 배너 위에 설명 텍스트가 오버레이되거나 페이지 내용이 배너 위에 오버레이됩니다.
• 인트로 영역 오버레이 텍스트 - 텍스트 블록과 기타 블록 콘텐츠가 배너가 표시되는 페이지의 머리말 영역에 오버레이됩니다.

어떤 템플릿이 어떤 유형의 오버레이 텍스트를 지원하는지 자세히 알아보려면 템플릿별 배너 텍스트 옵션 페이지를 살펴보세요.

인트로 영역 오버레이 텍스트 추가

Brine 그룹에 속하는 템플릿은 배너 위에 표시되는 인트로 영역을 지원합니다. 이 영역은 텍스트 블록 또는 버튼 블록 등의 블록을 사용해 맞춤 설정할 수 있습니다.

페이지 제목과 설명 추가

대부분의 템플릿에서는 페이지 제목과 설명이 페이지 배너 위에 표시됩니다. 템플릿에서 배너에 텍스트를 추가하는 방법은 다음과 같습니다.

1. 페이지 패널을 엽니다.
2. 왼쪽 패널의 페이지 제목 위에 커서를 올리고 를 클릭합니다.
3. 일반 탭의 페이지 제목과 페이지 설명 필드에 텍스트를 추가합니다.
4. 저장을 클릭한 후 페이지를 새로 고칩니다. 페이지를 새로 고칠 때까지는 배너 변경 사항이 사이트 미리 보기에 표시되지 않는 경우도 있습니다.

다음 사항을 참고하세요.

• 이러한 템플릿의 경우 페이지 설명을 검색 엔진 최적화 기반 콘텐츠를 추가하는 용도로만 사용해서는 안 됩니다. 배너에 페이지 설명을 사용해도 검색 엔진 최적에 부정적인 영향을 미치지 않습니다.
• 검색 결과와 소셜 미디어에 공유하는 콘텐츠에 서로 다른 제목을 표시하려면 검색 엔진 최적화 제목을 추가하세요.
• 대부분의 템플릿에서 설명에 공백을 추가해 높이를 추가할 수 있습니다. 설명 텍스트 부근에서 Return 또는 Enter 키를 눌러 이미지의 더 많은 부분을 표시하세요. 이 방식은 잘림 문제를 해결하는 데 도움이 되고 배너의 높이를 높여 극적인 효과를 줄 수 있습니다.

컬렉션 아이템 배너 텍스트 추가

컬렉션 아이템 배너는 일반적으로 블로그 게시물, 이벤트, 제품 설정에서 가져온 텍스트로 오버레이 텍스트를 생성합니다. 각 아이템 유형에 텍스트를 추가하는 자세한 방법은 아래 링크에서 확인할 수 있습니다.

• 블로그 게시물
• 이벤트
• 제품 아이템

문제 해결

텍스트가 표시되지 않을 경우, 아래의 문제 해결 단계를 시도하세요.

• 페이지를 새로 고쳐보세요.
• 템플릿 표에서 템플릿이 해당 페이지 유형에 배너 텍스트를 지원하는지 확인하세요.
• 사이트 스타일을 열고 템플릿에 배너 또는 배너 텍스트를 숨기는 스타일 옵션이 있는지 확인합니다.
• 일부 템플릿에서는 배너 이미지가 있어야 텍스트가 표시됩니다. 배너 이미지가 추가되었는지 다시 한번 확인하세요.
• 템플릿 가이드를 검토하세요.

템플릿별 배너 텍스트 옵션

템플릿 그룹에서 지원되는 배너 텍스트 옵션은 다음과 같습니다.

배너 스타일 지정

사이트 스타일을 사용해 글꼴, 색상, 기타 배너 요소를 조정하세요. 배너 스타일 조정은 보통 사이트의 모든 배너에 영향을 미칩니다.

배너 스타일 옵션에 관한 내용은 템플릿 가이드에서 알아보세요.

투명 이미지

배경이 투명한 .png 파일을 사용하는 경우, 다음과 같은 조정을 사용하면 배너 뒤에 표시되는 색상이 변경됩니다.

• Adirondack - 콘텐츠 배경 색상
• Bedford - 배너 오버레이 색상
• Brine - 메인: 오버레이 섹션의 오버레이 색상
• Farro - 게시물 배경색. 오버레이 색상도 색상에 영향을 미침
• Five - 머리말 배경
• Montauk - 캔버스 배경
• Pacific - 오버레이 색상
• Skye - 사이트 배경
• Supply - 페이지 색상
• Tremont - 사이트 배경 색상
• York - 배너 섹션의 배경 색상

일반적으로 색상은 100% 불투명도로 표시됩니다. 원하는 색상이 제대로 표현되지 않을 경우 투명도를 변경해 보세요.

배너 크기 변경

아래 표를 사용해 템플릿 그룹에서 배너 크기를 변경하는 방법을 알아보세요. 대부분의 템플릿에서는 배너 너비를 변경할 수 없다는 점에 유의하세요.

배너가 올바르게 보이지 않으면 잘림 문제 해결 페이지를 살펴보세요.

배너에 버튼 추가

배너에 버튼 블록을 추가하는 방법은 다음과 같습니다.

• 방문자가 특정 페이지로 이동하는 링크를 클릭하도록 유도
• 조직에 기부
• 뉴스레터 구독

다음의 템플릿 그룹에는 개별 페이지의 배너 이미지와 비디오 위에 버튼을 추가할 수 있는 특수 오버레이 옵션이 포함되어 있습니다.

• Bedford - 페이지 설명 텍스트의 서식을 지정해 마지막 줄에 버튼을 만들 수 있습니다.
• Brine - 배너가 있는 페이지의 인트로 영역에 버튼 블록을 추가할 수 있습니다.
• Pacific - 색인 페이지에서 배너가 있는 페이지에 버튼 블록을 추가할 수 있습니다.

모바일에서의 배너

배너 이미지는 모바일 기기에서 항상 일부 잘려서 표시됩니다.

배너가 모바일 기기에서 어떻게 표시되는지 알아보려면 내 사이트는 모바일 기기에서 어떻게 보이나요? 페이지를 살펴보세요.

배너 이미지 제거

배너 이미지를 제거하는 방법은 배너가 사이트 어느 부분에 위치해 있느냐에 따라 다릅니다.

• 페이지 배너 - 페이지 설정의 미디어 탭에서 이미지 제거를 클릭합니다.
• 컬렉션 아이템 배너 - 개별 아이템(블로그 게시물이나 제품, 이벤트)을 열고 옵션 탭을 클릭한 후 휴지통 아이콘을 클릭합니다.
• 사이트 전체 배너 - 사이트 스타일에서 조정을 열고 제거를 클릭합니다.