갤러리를 표시할 새로운 메뉴를 생성합니다.

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

5. 새로운 메뉴(Home)가 추가됩니다.

   

갤러리 위젯을 추가하고, 갤러리의 스타일을 설정합니다.

1. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
2. 갤러리 위젯을 클릭합니다.
3. 갤러리 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
4. 컨텍스트 메뉴가 나오면 갤러리 설정을 클릭합니다.

5. 갤러리 설정 창 상단에 위치한 디자인 탭을 클릭합니다.

   

6. 다른 디자인 버튼을 클릭합니다.

   

7. 갤러리가 표시되는 스타일을 선택합니다. 그리드 갤러리 또는 Masonry 갤러리 항목의 4번 스타일을 권장합니다.

   

8. 갤러리 스타일 선택을 마쳤으면, 아래 그림과 설명을 참고해 갤러리 디자인을 편집합니다.

   참고: 스타일 설정 항목은 위 7번 과정에서 선택하신 갤러리 스타일마다 일부 옵션 사항이 다를 수 있습니다.

   

   • 이미지 비율: 갤러리에 표시할 이미지의 비율 선택
   • 한줄 표시: 1개 *필수
   • 세로 줄 수: 1줄 *필수
   • 이미지 음영: rgba(0, 0, 0, 0.3)
   • 라이트박스 사용 안함: 체크 해제 *필수
   • 텍스트 제목: 갤러리 이미지 위에 표시될 "제목" 텍스트의 크기
   • 텍스트 설명: 갤러리 이미지 위에 표시될 "설명" 텍스트의 크기
   • 텍스트 안쪽 여백: 이미지 안쪽의 여백을 설정
   • 선두께: 선 두께와 색상을 설정해 갤러리 이미지에 외곽선을 표시

갤러리 이미지를 추가하고, 대표 이미지에 표시할 텍스트를 작성합니다.

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

   

2. 왼쪽 하단의 갤러리 이름 항목에 이 갤러리의 이름을 작성해 줍니다.

3. 왼쪽 상단의 + 이미지, 동영상 추가 에 마우스 포인터를 올립니다.

   

4. 이미지 추가 를 클릭해 갤러리 대표 이미지 1개를 추가합니다.

5. 하단의 이미지 제목과 이미지 설명에 카테고리의 제목(Nature)과 부제목(Green & Wild Life)을 작성해 줍니다.

   

6. 갤러리 대표 이미지 업로드 및 제목과 설명 작성을 마쳤다면, 다시 왼쪽 상단의 + 이미지, 동영상 추가 에 마우스 포인터를 올리고, 이미지 추가 를 클릭합니다.

7. 대표 이미지와 연관된 모든 갤러리를 한 번에 모두 올려줍니다. (이미지 크기에 따라 약간의 시간이 소요됩니다.)

   

8. 갤러리 설정 창 바깥 영역을 클릭해 갤러리 설정을 완료합니다.

위 3단계에서 추가하고 설정한 갤러리 위젯을 복제합니다. 복제한 갤러리 위젯은 각 카테고리에 맞게 별도의 설정이 필요합니다.

1. 위 3단계에서 설정한 갤러리 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
2. 컨텍스트 메뉴가 나오면 위젯 복사를 클릭합니다.
3. 페이지 아무 곳에 마우스 포인터를 올리고, 다시 마우스 오른쪽 버튼을 클릭합니다.
4. 컨텍스트 메뉴가 나오면 위젯 붙여넣기를 클릭합니다. (갤러리 위젯이 복제되어 추가됩니다.)
5. 위 3~4번 과정을 반복해 갤러리 위젯을 1개 더 복제합니다. (총 3개의 갤러리 위젯이 존재하게 됩니다.)
6. 위 3단계 내용을 참고하여, 복제한 2개의 갤러리 위젯의 이름을 입력하고, 연관된 이미지를 추가한 다음, 대표 이미지를 설정합니다.

한 줄에 1개 이미지가 표시되도록 갤러리를 설정하면, 갤러리 아래 더보기가 표시됩니다. 더보기 표시는 간단한 코드를 추가해 숨길 수 있습니다.

1. 아래의 더보기 숨김 코드를 복사합니다.

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

2. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
3. 코드 위젯을 클릭합니다.

4. 코드 위젯을 마우스로 클릭 후 드래그하여 갤러리 위젯(들) 밑에 배치합니다.

   참고: 코드 위젯은 방문자에게 노출되지 않아, 아무 곳에 배치해도 무관합니다. 단, 차후 코드를 수정하거나 삭제하는 경우를 대비해 관련 위젯 주변에 배치하는 것이 좋습니다.

   

5. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
6. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.
7. 위 1번 과정에서 복사한 코드를 코드 설정 공란에 붙여넣습니다.

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

   

9. 저장을 클릭합니다.

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 갤러리 클릭합니다. (라이트박스 형식으로 이미지가 표시됩니다.)
3. 이미지 좌우의 화살표를 클릭하거나, 마우스 클릭 후 드래그하여, 다음 또는 이전 갤러리로 변경해 봅니다.
4. 갤러리 이미지가 정상적으로 표시된다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.