갤러리 대표 이미지 클릭 시 관련된 다른 여러 갤러리 이미지들이 표시되도록 구성할 수 있습니다. 예를 들어 이미지 하나를 클릭하면, 갤러리가 나오며, 방문자는 화살표를 클릭해 다음 이미지들을 감상할 수 있게 됩니다.
이 방법은 로딩 없이 방문자들이 빠르게 감상할 수 있는 점이 장점입니다.
구성방법
1단계: 메뉴 추가하기
- 디자인 모드에 접속합니다. 접속방법
- 디자인 모드 왼쪽 상단 메뉴 관리
를 클릭합니다. - 상단 메뉴 오른쪽 끝 ⨁를 클릭합니다.
- 메뉴명을 입력하고 확인을 누릅니다.
2단계: 갤러리 위젯 추가하기
- 왼쪽 상단 위젯 추가
를 클릭합니다. 갤러리 위젯을 클릭합니다.

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

- 이미지 비율: 편집하신 이미지 비율 선택 *필수
- 한줄 표시: 1개 *필수
- 간격: 0
- 세로 줄 수: 1줄 *필수
- 이미지 음영: rgba(0, 0, 0, 0) 을 입력
- 라이트 박스 사용 안함: 체크 해제 *필수
(선택 사항) 5단계: 갤러리 묶음 추가하기
- 위 2-4단계를 반복해 원하는 만큼 추가합니다.
갤러리 위젯을 다음 샘플 사이트처럼 배치합니다.

(선택 사항) 6단계: 더보기 표시 감추기
한 줄에 1개가 표시되도록 갤러리를 설정했지만 1개 이상 이미지를 넣은 경우 다음처럼 더보기가 표시될 수 있습니다. 이 더보기 표시를 숨기는 코드를 추가합니다.
코드 위젯을 추가합니다. 위젯 추가방법

- 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
- 코드 설정을 클릭합니다.
다음 코드를 복사합니다.
<style>
#섹션ID .widget._gallery_wrap a._more_btn {
display: none !important;
}
</style>
- 복사한 코드를 코드 설정 빈칸에 붙여넣습니다.
코드에 작성된 #섹션ID를 갤러리 위젯이 삽입된 섹션의 #섹션ID로 변경합니다. 섹션 ID 확인방법

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