갤러리 대표 이미지 클릭 시 관련된 다른 여러 갤러리 이미지들이 표시되도록 구성할 수 있습니다. 예를 들어 이미지 하나를 클릭하면, 갤러리가 나오며, 방문자는 화살표를 클릭해 다음 이미지들을 감상할 수 있게 됩니다.

이 방법은 로딩 없이 방문자들이 빠르게 감상할 수 있는 점이 장점입니다.

구성방법

1단계: 메뉴 추가하기

1. 디자인 모드에 접속합니다. 접속방법
2. 디자인 모드 왼쪽 상단 메뉴 관리를 클릭합니다.
3. 상단 메뉴 오른쪽 끝 ⨁를 클릭합니다.
4. 메뉴명을 입력하고 확인을 누릅니다.

2단계: 갤러리 위젯 추가하기

1. 왼쪽 상단 위젯 추가를 클릭합니다.

2. 갤러리 위젯을 클릭합니다.

   

3단계: 이미지 추가하기

1. 갤러리 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
2. 갤러리 설정을 클릭합니다.
3. 갤러리 설정 창 왼쪽 상단 +이미지, 동영상 추가에서 이미지 추가를 클릭합니다.
4. 내 PC 이미지를 선택하고 업로드합니다.
   참고: 모든 이미지를 미리 같은 비율(4:3, 16:9 등)로 편집해두시면 더욱 깔끔하게 표시됩니다.

4단계: 갤러리 묶음으로 구성하기

1. 갤러리 설정 창 상단 디자인 탭을 클릭합니다.

2. 아래 설정 항목을 다음처럼 지정합니다.

   

   • 이미지 비율: 편집하신 이미지 비율 선택 *필수
   • 한줄 표시: 1개 *필수
   • 간격: 0
   • 세로 줄 수: 1줄 *필수
   • 이미지 음영: rgba(0, 0, 0, 0) 을 입력
   • 라이트 박스 사용 안함: 체크 해제 *필수

(선택 사항) 5단계: 갤러리 묶음 추가하기

1. 위 2-4단계를 반복해 원하는 만큼 추가합니다.

2. 갤러리 위젯을 다음 샘플 사이트처럼 배치합니다.

   

(선택 사항) 6단계: 더보기 표시 감추기

한 줄에 1개가 표시되도록 갤러리를 설정했지만 1개 이상 이미지를 넣은 경우 다음처럼 더보기가 표시될 수 있습니다. 이 더보기 표시를 숨기는 코드를 추가합니다.

1. 코드 위젯을 추가합니다. 위젯 추가방법

   

2. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
3. 코드 설정을 클릭합니다.

4. 다음 코드를 복사합니다.

   <style>
   #섹션ID .widget._gallery_wrap a._more_btn {
   display: none !important;
   }
   </style>

5. 복사한 코드를 코드 설정 빈칸에 붙여넣습니다.

6. 코드에 작성된 #섹션ID를 갤러리 위젯이 삽입된 섹션의 #섹션ID로 변경합니다. 섹션 ID 확인방법

   

7. 저장을 클릭합니다.

7단계, 미리보기 및 게시하기

1. 디자인 모드 오른쪽 상단 미리보기  아이콘을 클릭합니다.
2. 작업한 사항이 정상적으로 동작하는지 확인합니다.
3. 문제가 없다면 게시하기 버튼을 클릭해 적용합니다.