라이트박스 효과를 활성화하여 어두운 배경의 오버레이에서 이미지를 엽니다.

라이트박스는 이미지를 클릭했을 때 중앙에 오버레이로 이미지를 열고 페이지의 나머지 부분을 어둡게 만드는 디자인 효과입니다. 상단 모서리에 있는 x를 클릭하면 창이 닫히고 페이지로 돌아갑니다. 라이트박스는 이미지를 강조하고 확대하여 자세히 보고자 하는 방문자에게 훌륭한 방법입니다.

비디오를 시청하십시오

시작하기 전에

• 모바일 기기에서는 라이트박스 이미지에 핀치 투 줌 기능이 지원되지 않습니다.
• 사이트가 Squarespace 버전 7.0에 있는 경우, 갤러리 페이지 옵션은 템플릿에 따라 다릅니다.

라이트박스 배경색 변경

버전 7.1의 갤러리 섹션에서는 섹션 테마 편집기에서 라이트박스를 원하는 색상으로 스타일 조정할 수 있습니다.

대부분의 다른 경우에는 블록 설정 또는 사이트 스타일에서 라이트박스의 어두운 또는 밝은 오버레이를 선택할 수 있습니다. 자세한 내용은 이미지 블록, 갤러리 블록 및 갤러리 페이지 섹션을 참조하세요.

갤러리 섹션(버전 7.1)

버전 7.1의 그리드 레이아웃에 있는 갤러리 섹션에는 섹션 스타일에서 라이트박스 옵션이 있습니다. 라이트박스를 활성화하는 방법:

1. 페이지에서 편집을 클릭한 다음 갤러리 섹션 위로 커서를 올리고 연필 아이콘을 클릭합니다.
2. 갤러리 유형이 그리드: 심플, 그리드: 스트립, 또는 그리드: 메이슨리로 설정되어 있는지 확인하세요. 슬라이드쇼 레이아웃은 라이트박스 기능을 지원하지 않습니다.
3. 라이트박스 토글을 켜세요.
4. 저장을 클릭하여 변경 사항을 저장하고 계속 편집하거나, 종료를 클릭한 후 저장을 클릭하여 편집기를 닫습니다.

라이트박스 색상을 스타일링하는 방법:

1. 페이지를 편집하는 동안 사이트 스타일을 연 다음 색상을 클릭합니다.
2. 갤러리 섹션과 일치하는 테마 위로 커서를 올리고 연필 아이콘 을 클릭하세요.
3. 갤러리 섹션 아래에서 라이트박스 배경 조정을 사용하여 라이트박스 색상을 선택하세요.
4. 라이트박스 탐색 컨트롤의 색상을 변경하려면 라이트박스 아이콘 조정을 사용하세요.
5. 저장을 클릭하여 변경 사항을 저장하고 계속 편집하거나, 종료를 클릭한 후 저장을 클릭하여 편집기를 닫습니다.

다음 사항을 참고하세요.

• 캡션 텍스트가 갤러리 섹션 라이트박스에 표시되지 않습니다.
• 이미지에 클릭스루 URL을 추가한 후 라이트박스를 켜면 이미지를 클릭하면 URL로 이동합니다. 라이트박스가 열리지 않습니다.

이미지 블록

이미지 블록은 다음의 경우 라이트박스를 지원합니다.

• 7.0 사이트 및 7.1 섹션에서 클래식 에디터를 사용하여 인라인 레이아웃 사용
• 플루이드 엔진 섹션 추가 완료 

라이트박스를 활성화하려면:

1. 이미지 블록을 추가하세요, 또는 기존 이미지 블록을 두 번 클릭하여 이미지 편집기를 여세요.
2. 디자인 탭을 클릭합니다.
3. 블록에 레이아웃 옵션이 있는 경우, 해당 옵션이 인라인으로 설정되어 있는지 확인하세요. 다른 레이아웃은 라이트박스를 지원하지 않습니다.
4. 라이트박스 토글을 켜세요.
5. 라이트박스 테마 드롭다운에서 라이트박스 스타일에 사용할 다크 오버레이 또는 라이트 오버레이를 선택하세요.

다음 사항을 참고하세요.

• 캡션은 선택한 캡션 표시 옵션과 관계없이 라이트박스 이미지에 커서를 올릴 때마다 표시됩니다. 모바일의 경우, 점 아이콘을 탭하면 캡션이 표시됩니다.
  
  • 플루이드 엔진 섹션에 추가된 이미지 블록은 캡션을 지원하지 않습니다. 텍스트 블록을 사용하여 이미지 블록에 인접하거나 오버레이하는 텍스트를 추가할 수 있습니다. 이 텍스트는 라이트박스에 표시되지 않습니다. 
• 클릭스루 URL을 추가하는 경우 라이트박스를 활성화할 수 없습니다.
• 라이트박스를 활성화된 상태로 유지하고 이미지를 링크하려면 이미지 설명에 텍스트 링크를 추가하세요. 이미지 블록의 경우, 특정 레이아웃은 버튼도 지원합니다.

그리드 갤러리 블록

그리드 갤러리 블록에 이미지를 추가한 후 디자인 탭을 클릭하고 라이트박스를 선택하세요. 드롭다운에서 다크 오버레이 또는 라이트 오버레이를 선택하여 라이트박스 슬라이드쇼 스타일을 설정하세요.

다음 사항을 참고하세요.

• 라이트박스 이미지 위에 커서를 올리면 캡션이 항상 표시됩니다. 모바일의 경우, 점 아이콘을 탭하면 캡션이 표시됩니다.
• 슬라이드쇼, 캐러셀 및 스택 갤러리 블록은 라이트박스를 지원하지 않습니다.
• 클릭스루 URL을 추가하고 라이트박스를 활성화하면 이미지를 클릭할 때 URL 대신 라이트박스가 열립니다.
• 비디오를 라이트박스에서 열려면 아이템 설정에서 섬네일 사용을 켜야 합니다.

요약 블록

벽 또는 그리드 요약 블록이 갤러리 페이지에 연결되면 이미지가 라이트박스 슬라이드쇼에서 자동으로 열립니다. 요약 블록 라이트박스 색상은 항상 어두운 색상입니다. 마우스로 가리키면 캡션이 표시됩니다.

라이트박스 슬라이드쇼는 클릭스루 URL에 영향을 미칩니다.

• 페이지를 보는 동안 클릭스루 URL이 있는 이미지를 클릭하면 라이트박스 슬라이드쇼 대신 클릭스루 하이퍼링크가 열립니다.
• 라이트박스 슬라이드쇼가 열려 있을 때, 클릭스루 URL은 비활성화됩니다.

팁: 라이트박스를 지원하는 버전 7.0 사이트에서는 갤러리 페이지에 추가된 비디오가 요약 블록의 라이트박스에서 열리도록 설정할 수 있습니다. 이 기능을 활성화하려면 갤러리 페이지의 비디오에 대한 아이템 설정에서 비디오 섬네일을 켜세요. 이 기능을 활성화하지 않거나 템플릿이 라이트박스를 지원하지 않는 경우 동영상은 라이트박스에서 열리지 않고 요약 블록에서 재생됩니다.

갤러리 페이지 (버전 7.0)

버전 7.0의 일부 템플릿 갤러리 페이지는 라이트박스 기능을 지원합니다. 표준 갤러리 페이지의 경우, 사이트 스타일에서 라이트박스 색상을 밝게 또는 어둡게 설정할 수 있습니다. 라이트박스에서 비디오 설명이 표시되지 않습니다.

템플릿 그룹에서 라이트박스 옵션이 어떻게 작동하는지 알아보려면 아래 표를 참조하세요.