갤러리

그만큼 갤러리 구성 요소는 전체 화면 슬라이드쇼 모달 창 내에 이미지(설명 포함 또는 제외) 또는 비디오를 표시합니다. 또한 갤러리는 다양한 화면 크기에 맞게 조정 가능하므로 컴퓨터, 태블릿, 스마트폰에서 미디어를 표시하는 데 편리합니다.

이 튜토리얼에서는 다음을 다룹니다.

1. 갤러리 설정 지침
2. 갤러리에 미디어 추가
3. 갤러리 그룹을 사용하여 갤러리 간 연결 만들기

갤러리 구축

갤러리는 링크 블록 내에 포함된 클릭 가능한 썸네일로 구성됩니다. 방문자가 라이브 사이트에서 링크 경계 내부를 클릭하면 갤러리가 열리고 관련 미디어가 표시됩니다.

갤러리를 설정하려면:

1. 로 이동 패널 삽입 > 고급의
2. 선택 갤러리 구성요소를 선택하거나 Webflow 캔버스로 드래그하세요.

갤러리 썸네일 이미지의 기능

갤러리에는 다른 이미지 요소처럼 작동하는 이미지 요소가 포함되어 있습니다. 크기를 조정하고, 자리 표시자 축소판 이미지를 두 번 클릭하여 바꾸고, 대체 텍스트를 포함할 수 있습니다. 더 자세히 알아보려면 이미지 요소에 대해 자세히 알아보세요.

갤러리 썸네일과 더 큰 갤러리 모달 창에 동일한 이미지를 활용할 수 있습니다. Webflow는 모든 인라인 이미지에 대해 적응 가능한 버전을 자동으로 생성합니다. 자세한 내용은 반응형 이미지에 대해 자세히 알아보세요.

대체 콘텐츠로 갤러리 축소판 변경

자리 표시자 이미지 요소를 교체하고 다양한 콘텐츠(예: 제목 또는 링크가 아닌 구성 요소)를 삽입할 수 있습니다. 갤러리 링크.

또는 다음을 사용할 수 있습니다. 분할 블록 배경 이미지를 사용하여 동일한 크기의 이미지 썸네일을 설정합니다.

갤러리 외관 향상

갤러리 링크와 해당 콘텐츠를 모두 디자인할 수 있습니다. 예를 들어 갤러리 링크 내에 텍스트 요소를 중첩하는 경우 갤러리 링크 구성 요소의 서체를 사용자 정의할 수 있습니다.

갤러리 링크를 클릭하면 열리는 모달 창에서 배경 오버레이를 사용자 정의할 수는 없지만 원하는 경우 이미지 설명과 함께 이미지나 비디오를 삽입할 수 있습니다.

갤러리에 미디어 추가

갤러리 모달 창에 이미지와 설명을 포함하려면:

1. 다음을 선택하세요. 갤러리 링크 캔버스에
2. 액세스 요소 설정 패널 > 갤러리 설정 > 미디어
3. “를 클릭하세요.이미지 추가"버튼
4. 선택하다 이미지 선택
5. 다음에서 이미지를 선택하세요. 자산 패널
6. 설명을 입력하세요. 표제 필드
7. 선택하다 구하다

필요에 따라 갤러리 링크에 수많은 이미지를 삽입할 수 있습니다. 이러한 이미지는 갤러리 모달 창 내에 슬라이드쇼로 표시됩니다.

참고하세요: 현재 갤러리 요소는 갤러리 내의 이미지에 대한 대체 텍스트를 지원하지 않습니다.

라이트박스 모달 창에 비디오를 삽입하려면:

1. 다음을 선택하세요. 라이트박스 링크 캔버스에
2. 로 이동 요소 설정 패널 > 라이트박스 설정 > 미디어
3. 누르세요 "비디오 추가" 아이콘
4. 동영상의 URL을 포함하세요. URL 필드
5. 딸깍 하는 소리 구하다

컬렉션 필드 미디어에서 동적 라이트박스를 형성하는 방법

CMS 또는 전자상거래 컬렉션의 미디어 컬렉션 필드(예: 이미지 필드, 다중 이미지 필드 또는 비디오 필드)에서 썸네일 이미지 및/또는 라이트박스 미디어를 가져와 동적 라이트박스를 생성할 수 있습니다.

동적 컬렉션 필드를 라이트박스 썸네일에 연결하려면:

1. 통합 라이트박스 동적으로 연결된 컬렉션 목록 또는 CMS 컬렉션 페이지로
2. 자리표시자 썸네일 이미지를 선택하세요.
3. 입장 요소 설정 > 이미지 설정
4. "다음에서 이미지 가져오기"라고 표시된 상자를 선택합니다. 블로그 게시물” (컬렉션 이름은 선택한 컬렉션에 따라 다를 수 있습니다.)
5. 다음에서 이미지 컬렉션 필드를 선택하세요. 분야 선택 쓰러지 다

다음으로, 라이트박스와 컬렉션 필드 사이의 연결을 설정하여 라이트박스에서 동적 컬렉션 이미지에 액세스할 수 있도록 할 수 있습니다. 동적 컬렉션 필드를 라이트박스 미디어에 첨부하려면:

1. 다음을 선택하세요. 라이트박스 링크
2. 입장 요소 설정 > 라이트박스 설정 > 미디어
3. "다음에서 미디어 가져오기"라고 표시된 상자를 선택합니다. 블로그 게시물” (컬렉션 이름은 선택한 컬렉션에 따라 다를 수 있습니다.)
4. 미디어 컬렉션 필드를 선택하세요. 분야 선택 쓰러지 다

라이트박스 클러스터를 사용하여 라이트박스 단위를 연결하는 단계

여러 개의 라이트박스를 상호 연결하여 슬라이드쇼 갤러리를 구축할 수 있는 옵션이 있습니다. 방문자가 연결된 라이트박스를 클릭하면 연결된 라이트박스 그룹과 관련된 모든 미디어가 표시됩니다.

라이트박스 클러스터를 구성하는 프로세스

1. 내의 요소를 선택하세요. 라이트박스
2. 로 진행 요소 설정 > 라이트박스 설정
3. "다른 라이트박스와 상호 연결"이라고 표시된 상자를 선택합니다.
4. 명칭을 입력하세요. 무리

추가 라이트박스를 동일한 클러스터에 연결

다른 라이트박스를 클러스터에 연결하려면 각 라이트박스에 대해 독립적으로 다음 단계를 따르세요.

1. 안에 있는 요소를 선택하세요. 라이트박스
2. 로 이동 요소 설정 > 라이트박스 설정
3. "다른 라이트박스와 상호 연결"이라는 제목의 상자를 표시합니다.
4. 동일하게 입력하세요. 클러스터 이름

컬렉션 목록의 라이트박스를 처리할 때 컬렉션 항목 내에서 하나의 라이트박스를 생성하고 연결하면 컬렉션 목록에 있는 모든 라이트박스가 자동으로 연결됩니다.

단일 페이지에 여러 라이트박스 클러스터 설정

여러 개의 라이트박스가 동일한 페이지에 표시되는 경우 고유한 할당을 지정하여 라이트박스를 분리할 수 있습니다. 클러스터 이름.