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

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

구성방법

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. 게시하기를 클릭해 웹에 적용합니다.