페이지 접속 후 특정 시간이 지나면 숨어 있던 버튼이 나타나도록 제작할 수 있습니다. 이와 같은 타이머 버튼은 종종 마케팅에 활용되며, 방문자가 필수 콘텐츠를 보도록 유도하는데 사용될 수 있습니다.

이 버튼을 만들려면 코드를 사용해야 합니다. 아래 설명과 샘플 코드를 사용해 타이머 버튼을 제작해 보세요.

구현방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭해, 버튼을 삽입할 메뉴로 이동하거나 새로운 메뉴를 생성합니다. 메뉴 추가하기
3. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 코드 위젯을 추가합니다.
4. 코드 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
5. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.

6. 코드 입력 칸에 아래의 코드를 복사하여 붙여넣습니다.

    <style> .hiddenBlock { display: none; }
   </style>
   <p class="hiddenBlock" style="text-align: 정렬;"> <a style="font-weight: 텍스트 두께; font-size: 텍스트 크기;" class="btn btn-primary btn-lg" href="링크 주소">버튼명</a> </p>
   <script type="text/javascript">$(document).ready(function(){setTimeout(function(){$('.hiddenBlock').show()},시간)});</script>

7. 아래 그림과 설명을 참조하여 코드를 수정합니다.

   

   • 정렬: 버튼을 정렬시킬 수 있습니다. left, center, right 3가지 중 하나를 입력합니다.
   • 텍스트 두께: 버튼 텍스트의 두께를 정할 수 있습니다. normal로 바꾸면 기본으로 돌아갑니다.
   • 텍스트 크기: 버튼 텍스트의 두께를 지정합니다. bold 라고 입력하면 두껍게 작성되며, normal로 입력하면 기본으로 돌아갑니다.
   • 링크 주소: 버튼을 클릭하면 이동할 주소(URL)를 입력합니다. 예) https://wemento.kr
   • 버튼명: 버튼에 표시될 버튼 이름을 입력합니다.
   • 시간: 1000당 1초라고 생각하시면 되겠습니다. 3초 후 버튼이 나오게 하려면 3000을 입력합니다.
8. 저장 버튼을 클릭해 코드 입력을 완료합니다.
9. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.

10. 지정한 시간이 지나면 버튼이 표시되는지 확인합니다.

    

11. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

자주 묻는 질문(FAQ) 게시판 만들기

자주 묻는 질문 게시판은 운영자(또는 운영진 그룹)의 고객지원 업무를 줄여줄 뿐만 아니라, 방문자가 빠르게 궁금증을 해결하는 데도 도움을 줍니다.

이 도움말에서는 운영자(또는 운영진 그룹)만 작성할 수 있는 게시판을 만들어, 자주 묻는 게시판으로 제작하는 방법을 설명합니다.

1단계: 게시판 위젯 추가 및 게시판 설정 열기

1. 디자인 모드에 접속합니다. 
2. 새로운 메뉴를 추가하거나, 게시판을 추가할 메뉴로 이동합니다.   메뉴 추가방법
3. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 게시판 위젯을 클릭합니다.
4. 게시판 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
5. 컨텍스트 메뉴가 나오면 게시판 설정을 클릭합니다.
6. 게시판 설정 창이 나타납니다.

2단계: 게시판 위젯 설정하기 (게시판 설정)

게시판 위젯을 자주 묻는 질문 게시판으로 설정하기 위한 과정입니다.

1. 게시판 이름 항목에서 게시판의 이름을 작성합니다. 작성한 게시판 이름은 게시판에 표시할 수 있습니다.

2. (선택 사항) 작성해야 할 게시물 수가 많은 경우, 카테고리 옵션을 사용할 수 있습니다. 카테고리를 미리 구성한 다음, 게시물 작성 시 해당 게시물이 속할 카테고리를 선택할 수 있습니다.

• 카테고리 사용함 옵션을 선택합니다.
• 새 카테고리 추가를 클릭합니다.
• 새로 추가된 카테고리 오른쪽의 연필 아이콘을 클릭합니다.
• 카테고리 이름을 작성합니다.
• (선택 사항) 카테고리 색상을 선택합니다.
• 오른쪽 상단의 X를 클릭해 새 카테고리 추가 창을 닫습니다.
• (선택 사항) 위 2~7번 과정을 반복해 카테고리를 추가합니다.
• (선택 사항) 카테고리에 마우스 포인터를 올리면 나타나는 이동 아이콘을 클릭해 순서를 변경합니다.

3. 옵션 항목에서 자주 묻는 게시판 제작을 위한 필수 옵션을 설정합니다.

• NEW 표시기한: 신규 게시물을 등록한 경우 NEW 뱃지가 표시되는 기한을 지정합니다. 0일인 경우 기한 제한 없이 계속해서 표시됩니다.
• 글쓰기 버튼: 권한이 있는 경우로 변경합니다. 글쓰기 권한이 있는 사용자만 작성할 수 있게 제한됩니다.

• 댓글 표시: 댓글 사용 안함으로 변경합니다.

  참고: 자주 묻는 질문 게시글에 댓글 작성을 허용하는 경우, 고객 문의가 여러 채널로 분산되어 관리가 어려워질 수 있습니다. 댓글 사용은 제한을 추천해 드립니다.

4. 권한 항목에서 자주 묻는 게시판 제작을 위한 필수 권한을 설정합니다.

• 목록: 모든 사용자를 선택합니다. 모든 사용자가 게시물 목록을 볼 수 있습니다.
• 읽기: 모든 사용자를 선택합니다. 모든 사용자가 게시물을 읽을 수 있습니다.

• 글 작성: 소유자 또는 선택그룹 사용자를 선택합니다.

  참고: 앞서 사용자 그룹을 생성하지 않은 경우, 선택그룹 사용자로 선택 시, 선택할 그룹이 표시되지 않습니다. 새 그룹 만들기 도움말을 참고해 사용자 그룹(운영진 그룹)을 생성해 주세요.

• 댓글: 위 3번 과정에서 댓글 사용 안함으로 설정하여 옵션을 변경해도 무시됩니다.

3단계: 게시판 위젯 설정하기 (디자인)

자주 묻는 질문 게시판의 디자인 스타일을 설정합니다.

1. 게시판 설정 창 상단의 디자인 탭을 클릭합니다.

   
   

   
   
   
2. 리스트 항목에서 자주 묻는 질문 게시판에 표시될 요소들을 선택합니다. 자주 묻는 질문 게시판에는 주로 작성시각, 글번호, 카테고리(선택 사항)가 표시됩니다.

   
   

   
   
   
3. 게시판 설정 창 닫기 아이콘을 클릭해 설정을 완료합니다.

4단계: 게시물 작성하기

1. 디자인 모드 오른쪽 상단의 게시하기 버튼을 클릭해 적용합니다.
   
   
2. 게시하기 버튼 왼쪽의 미리보기 아이콘을 클릭해 자주 묻는 게시판 메뉴에 접속합니다.
   
   
3. 글쓰기 버튼을 클릭합니다.
   
   
4. 아래 그림과 설명을 참고해, 자주 묻는 질문을 작성합니다.
   

   카테고리: 위 2단계에서 설정한 카테고리 중 하나를 선택합니다. 제목: 게시물 제목을 작성합니다. 본문: 게시물 본문을 작성합니다. 상태: 게시물의 상태(공지, 비밀글, 알림)을 설정할 수 있습니다.

5. 오른쪽 상단의 작성 버튼을 클릭해 게시물을 등록합니다.
6. 위 3~5번 과정을 반복해, 필요한 만큼 게시물을 작성합니다.

상품 진열하기

등록한 상품들을 내 사이트에서 방문자가 보고 구매할 수 있도록 진열합니다.

1단계: 빈 메뉴 추가하기

1. 디자인 모드에 접속합니다. 
2. 왼쪽 상단 메뉴 관리  ≡ 를 클릭합니다.
3. 상단 메뉴 오른쪽 끝 ⨁ 아이콘을 클릭합니다.
4. 메뉴명을 작성하고 확인을 클릭합니다. 예시) SHOP, STORE 등

2단계: 쇼핑 위젯 추가하기

1. 디자인 모드 왼쪽 상단의 위젯 추가 아이콘을 클릭합니다.
2. 쇼핑 위젯을 클릭합니다.

3단계: 위젯 설정 열기

1. 쇼핑 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
2. 컨텍스트 메뉴가 나타나면 쇼핑 설정을 클릭합니다.

4단계: 카테고리 연동하기

아래 그림을 참고하여, 상품 카테고리를 연결합니다. 해당 카테고리에 포함된 모든 상품(하위 카테고리 포함)들이 모두 표시됩니다.

5단계: 쇼핑 위젯 디자인하기

남은 쇼핑 설정 항목들을 수정해 쇼핑 위젯에 표시할 요소들을 선택하고, 스타일을 변경합니다.

1. 표시옵션 : 상품 목록에 표시할 표시요소를 켜고 끌 수 있습니다.
2. 진열 : 표시할 상품 카테고리를 선택하고, 정렬, 출력수, 페이지 방식을 설정할 수 있습니다.
   
   • 카테고리 : 표시할 상품의 카테고리를 선택해 주세요. 위 4단계 설명을 참고할 수 있습니다.
   • 정렬 : 상품 정렬순을 등록순, 인기순 등으로 변경할 수 있습니다.
   • 출력수 :  한 번에 출력할 상품 개수를 선택합니다.
   • PC 페이지 방식 : PC 버전에서 다음 상품을 보기 위해 숫자 대신 더보기 등 페이지 방식으로 변경할 수 있습니다.
   • 모바일 페이지 방식 : 모바일 버전에서 다음 상품을 보기 위해 숫자 대신 더보기 등 페이지 방식으로 변경할 수 있습니다.
3. 디자인
   
   • 이미지 비율 : 상품 이미지 비율을 선택합니다. *선택한 비율은 상품 상세페이지 이미지에도 그대로 적용됩니다.
   • 1줄 개수 : 1줄에 몇 개의 상품을 표시할지 선택합니다.
   • 상품 간격 : 상품 이미지 간 간격을 조절할 수 있습니다.
   • 텍스트 정렬 : 상품명 및 상품가격과 같은 정보를 왼쪽, 가운데, 오른쪽 정렬시킵니다.
   • 상품명, 판매가, 회원등급가, 요약설명 : 각 옵션 텍스트의 크기 및 색상, 굵게 옵션을 수정합니다.

6단계: 미리보기 및 게시하기

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 연동한 상품 카테고리의 상품들이 표시되는지 확인합니다.
3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

쇼핑 위젯과 상품 카테고리 연동 후 메뉴의 변화

1. 웹사이트에 표시된 SHOP 메뉴와 상품 카테고리(하위 메뉴)

위 과정을 마치면 다음 그림처럼 SHOP 메뉴 아래 상품 카테고리가 하위 메뉴처럼 표시됩니다.

2. 생성한 상품 카테고리

위 상품 카테고리의 이름, 순서 등은 관리자 페이지의 [쇼핑 > 상품관리]에서 카테고리 관리를 클릭해 변경할 수 있습니다.

회원그룹 이용권 활용하기

회원그룹 이용권이란?

회원그룹 이용권은 상품 판매 방식의 하나입니다. 

사이트 회원은 회원그룹 이용권을 결제해 구매할 수 있으며, 구매 즉시 판매자가 설정한 특정 그룹으로 지정된 기간 동안 유지됩니다. 

구매자는 판매자가 지정한 그룹에게만 허용하는 콘텐츠를 열람할 수 있습니다.

활용예시

• 인터넷 강의 (구매한 회원만 페이지, 게시물 열람 가능)
• 유료 커뮤니티 (구매한 회원만 페이지, 게시물 열람 가능)
• 헬스장, 골프장 (온라인 결제로 회원 관리)

구현방법

1단계, 사용자 그룹 추가하기

회원이 회원그룹 이용권 상품 구매 시 자동으로 변경될 사용자 그룹을 추가합니다.

1. 관리자 메뉴에 접속합니다.
2. 왼쪽 관리 메뉴에서 [사용자 관리 - 사용자 목록]을 클릭합니다.

3. 새 그룹 만들기를 클릭합니다.

   

4. 그룹명을 입력하고, 그룹 유형을 일반 회원 그룹으로 선택합니다.

   
5. 그룹 만들기를 클릭해 새 그룹 생성을 완료합니다.

2단계, 회원그룹 이용권 상품 카테고리 만들기

쇼핑 위젯에 연동할 상품 카테고리를 추가합니다. 

상품 카테고리 구성에 대한 더 자세한 방법은 이 도움말을 참조할 수 있습니다. 

1. 왼쪽 관리 메뉴에서 [쇼핑 - 상품관리]를 클릭합니다.

2. 카테고리 관리를 클릭합니다.

   
3. 카테고리 관리 창이 켜지면 새 카테고리를 클릭합니다.

4. 카테고리명을 입력하고 엔터(Enter)를 클릭해 적용합니다.

   
5. 저장 버튼을 눌러 반영합니다.

3단계, 회원그룹 이용권 상품 등록하기

회원그룹 이용권이 적용된 상품을 등록합니다.

1. 상품관리 페이지의 오른쪽 상단 상품 추가를 클릭합니다.

2. 상품 정보를 꼼꼼히 입력합니다.

   
   • 상품 이미지를 1개 이상 추가합니다. 권장 해상도 : 750x750픽셀 / PNG, JPG, GIF
   • 상품명 및 요약설명을 입력합니다.
   • 분류 항목에 위 1단계에서 추가한 카테고리를 선택합니다.
   • 상세설명을 입력합니다.
   • 판매 방식을 회원그룹 이용권으로 선택하고, 위 1단계에서 추가한 사용자 그룹으로 지정합니다.
   • 해당 회원그룹이 유지되는 기간을 입력합니다.
     참고 : 회원그룹 이용권은 구매 시각에 관계 없이 만료 당일 23시 59분에 만료됩니다.
   • 상품 가격을 입력합니다.
   • 배송 및 택배 항목에서 배송설정 수정을 클릭하고 배송없음을 선택합니다.
   • (선택 사항) 필요에 따라 연관 상품, 검색엔진 최적화, 옵션 등을 수정합니다.
   •  저장 버튼을 눌러줍니다.

4단계, 회원그룹 전용 메뉴 만들기

특정 회원그룹만이 접근할 수 있는 메뉴를 추가합니다.

1. 디자인 모드에 접속합니다.
2. 왼쪽 상단 메뉴 추가 버튼을 클릭합니다.
3. 메뉴명을 입력하고 확인을 눌러줍니다.
4. 새로운 메뉴에 마우스 커서를 올리고, 오른쪽 끝 ⓘ 아이콘이 나타나면 클릭합니다.

5. 메뉴 설정 창 하단에 접근 권한 항목에서 사용자 지정 그룹을 선택합니다.

   

6. 허용 그룹 항목에서 이 메뉴에 접근 가능한 그룹을 지정합니다.
   참고 : 실수로 그룹을 잘못 지정한 경우 추가된 그룹을 마우스 클릭하면 해제됩니다.

   

5단계, 회원그룹 전용 콘텐츠 추가하기

위 4단계에서 추가한 회원그룹 전용 메뉴에 해당 회원그룹만이 볼 수 있는 콘텐츠를 추가합니다.

• 단일 페이지 또는 여러 페이지에 교육 콘텐츠를 직접 추가할 수 있습니다.
• 단일 페이지에 여러 개 콘텐츠를 추가하려면 게시판 위젯을 권장드립니다.

6단계, 상품 목록 메뉴 만들기

회원이 상품정보를 보고 구매할 수 있는 상품 목록 메뉴를 제작하는 단계입니다. 

새로운 빈 메뉴에 쇼핑 위젯을 추가하고, 2단계에서 생성한 상품 카테고리를 연동합니다.

1. 디자인 모드에 접속합니다.
2. 왼쪽 상단 메뉴 관리버튼을 클릭합니다.
3. 메뉴명을 입력하고 확인을 눌러줍니다.
4. 왼쪽 상단 위젯 추가버튼을 클릭합니다.

5. 쇼핑 위젯을 선택합니다.

   
6. 쇼핑 위젯에 마우스 오른쪽 버튼을 클릭합니다.
7. 보조 메뉴가 나타나면 쇼핑 카테고리 설정을 클릭합니다.

8. 진열 항목에서 상품 카테고리를 선택합니다.
   참고 : 상품 카테고리는 위 2단계에서 회원그룹 상품 등록 시 지정했던 상품 카테고리여야 합니다.

   
9. (선택 사항) 위젯을 더해 상품 목록 페이지를 디자인합니다.

7단계, 상품 구매 테스트하기

1. 구글 크롬 브라우저를 켭니다.

2. 시크릿 모드 창을 엽니다. (단축키 : Ctrl + Shift + N)

   
3. 사이트에 접속합니다.
   

   참고 : 시크릿 모드를 사용하면 해당 브라우저 탭에서만 로그인 기록이 사라지기 때문에 방문자로 사이트 테스트가 편리합니다.

4. 테스트 용 계정으로 회원가입합니다.
5. 회원그룹 이용권 전용 메뉴에 접속을 시도합니다. 접속 되지 않는다면 정상입니다.
6. 상품 목록 페이지로 이동해 회원그룹 이용권 판매 방식이 적용된 상품을 구매합니
   참고 : 상품 등록 시 가격을 0원으로 해두시면 테스트가 편리합니다.
7. 구매완료 즉시 회원그룹 이용권 전용 메뉴에 접속합니다.
8. 접속되었다면 성공입니다. 추가적인 콘텐츠를 만들고 더 다양한 회원그룹 이용권을 판매해보세요!

상품 카테고리별 다른 디자인 적용하기

시작에 앞서

쇼핑 위젯과 쇼핑 기획전 위젯 2가지를 함께 사용해, 메뉴마다 다른 디자인으로 페이지를 꾸미고 상품을 진열할 수 있습니다. 

다음 사이트에서 샘플을 확인하실 수 있습니다.

본 튜토리얼을 진행하기에 앞서 기본 쇼핑설정을 하지 않으셨다면 다음 도움말을 먼저 읽어주세요.

PART 1. 숨김 쇼핑 메뉴 만들기

쇼핑 위젯이 삽입된 숨김 메뉴를 제작합니다. 

본 숨김 메뉴는 쇼핑몰 자동 구성을 위한 메뉴이며, 실제 페이지에는 표시되지 않습니다.

1단계, 빈 메뉴 추가하기

1. 디자인 모드에 접속합니다.
2. 왼쪽 상단 메뉴 관리를 클릭합니다.

3. 상단 메뉴 오른쪽 끝 ⨁를 클릭해 새로운 빈 메뉴를 추가합니다.

   

4. 메뉴명을 입력하고 확인을 클릭합니다. (예시 메뉴명 : SHOP 숨김)

   

2단계, 메뉴 숨기기

1. 새로 추가한 메뉴에 마우스 오른쪽 버튼을 클릭해 메뉴 설정을 켭니다.

2. 설정 창 하단 옵션 항목에서 메뉴 숨김를 체크합니다.

   
3. 상단 메뉴바에서 상품 메뉴가 숨겨집니다.

3단계, 쇼핑 위젯 추가 및 설정 열기

1. 왼쪽 상단 더하기를 클릭해 쇼핑 위젯을 추가합니다.
2. 추가한 쇼핑 위젯에 마우스 오른쪽 버튼을 클릭해 위젯 설정을 엽니다.

4단계, 위젯 설정하기

쇼핑 위젯에 상품 카테고리를 연동하고 주요 설정 요소들을 수정합니다.

1. 진열 항목에서 상품 카테고리를 선택합니다.
2. 디자인 항목에서 이미지 비율 지정합니다.
   *주의 : 이곳에서 지정한 비율이 상품 상세페이지 이미지에도 적용됩니다.

3. Hover 효과를 지정합니다. *예 : 상품명, 가격 표시

   

5단계, 글로벌 메뉴 확인하기

1. 디자인 모드 왼쪽 상단 메뉴 관리를 클릭합니다.

2. 글로벌 메뉴에 상품 상세페이지, 장바구니, 마이페이지 메뉴가 생성 되었는지 확인합니다. *쇼핑 위젯 추가 시 자동 생성

   

PART 2. 상품 카테고리 메뉴 디자인

상품 카테고리 수만큼 메뉴를 만들고, 추가한 메뉴에 쇼핑 기획전 위젯 외 기타 위젯들을 사용해 페이지를 디자인하고 상품을 진열하는 방법을 알아봅니다.

1단계, 메뉴 추가하기

1. 디자인 모드 왼쪽 상단 메뉴 관리를 켭니다.

2. 상품 카테고리 메뉴로 사용할 메뉴를 추가(4개) 합니다. *상품 카테고리 수에 따라 메뉴 개수는 달라질 수 있습니다.

   

2단계, 메뉴 그룹화 및 메뉴명 수정하기

1. 메뉴를 다음 그림처럼 그룹 메뉴로 구성합니다.

   
2. (필요한 경우) 메뉴명과 메뉴별 주소(URL)를 수정합니다.

3단계, 상위 메뉴 디자인 및 상품 진열하기

SHOP(상위 메뉴)에 상품을 진열하고 페이지를 디자인합니다.

1. SHOP(상위 메뉴)로 이동합니다.
2. 원하는 구성으로 SHOP 페이지를 디자인합니다.
3. 기획전 위젯을 추가합니다.
4. 추가한 위젯에 마우스 오른쪽 버튼을 클릭하고 쇼핑 기획전 설정을 클릭합니다.

5. 표시 대상 항목에서 표시할 상품 카테고리를 선택합니다.

   

4단계, 하위 메뉴 디자인 및 상품 진열하기

1. Beans(하위 메뉴)로 이동합니다.
2. 원하는 구성으로 Beans 페이지를 디자인합니다.
3. 기획전 위젯을 추가합니다.
4. 추가한 위젯에 마우스 오른쪽 버튼을 클릭하고 쇼핑 기획전 설정을 클릭합니다.

5. 표시 대상 항목에서 표시할 상품 카테고리를 선택합니다.

   

6. 나머지 Cup, Equipment 메뉴도 위 절차에 따라 제작합니다.

5단계, 사이트 미리보기 및 게시하기

미리보기를 클릭해 작업한 내용을 확인하고 게시하기를 클릭해 방문자가 보고 구매할 수 있도록 적용합니다.

마우스 오른쪽 버튼을 클릭하면 모든 설정 가능

디자인 모드에서 마우스 오른쪽 버튼을 활용해 메뉴, 위젯, 섹션의 컨텍스트 메뉴를 열 수 있습니다. 

사용자는 컨텍스트 메뉴를 통해 메뉴, 위젯, 섹션의 설정을 변경할 수 있을 뿐만 아니라, 다양한 추가 옵션도 적용할 수 있기 때문에 디자인 모드에서 가장 많이 이용하게 되는 기능 중 하나 입니다.

이 도움말에서는 디자인 모드에서 마우스 오른쪽 버튼을 사용하게 되는 여러 상황과 마우스 오른쪽 버튼 클릭 후 표시되는 컨텍스트 메뉴에 관해 상세히 설명합니다.

메뉴 관리에서 마우스 오른쪽 버튼 클릭

1. 메뉴 설정 : 메뉴명 수정, 메뉴 주소(URL), 페이지 제목 및 설명 등을 변경할 수 있는 설정 메뉴를 엽니다.
2. 메뉴 추가 : 새로운 메뉴(페이지)를 추가합니다.
3. 메뉴 복제 : 해당 메뉴를 복제합니다.
4. 삭제 : 메뉴를 삭제합니다.

위젯에서 마우스 오른쪽 버튼 클릭

1. (위젯) 설정 : 위젯 설정 메뉴를 엽니다. 위젯별로 옵션을 변경할 수 있습니다.
2. 애니메이션 : 애니메이션 설정 메뉴를 엽니다. *여백 위젯 제외
3. 가로 영역 확장 : 위젯 가로 크기를 브라우저 양끝까지 확장시킵니다.
4. 위젯 복사 : 위젯을 복사합니다.
5. 위젯 붙여넣기 : 위 4번 기능을 통해 복사한 위젯을 페이지에 붙여넣습니다.
6. (위젯) 삭제 : 위젯을 삭제합니다.

섹션에서 마우스 오른쪽 버튼 클릭

1. 섹션 설정 : 섹션 설정 창을 엽니다. 섹션 배경에 색/이미지/동영상을 넣거나 각종 효과, 옵션을 줄 수 있습니다.
2. 빈 섹션추가 : 빈 섹션을 추가합니다.
3. 위로 이동 : 섹션을 위로 이동 시킵니다.
4. 아래로 이동 : 섹션을 아래로 이동 시킵니다.
5. 섹션 복사 : 섹션을 복사합니다.
6. 섹션 붙여넣기 : 섹션을 붙여넣기 합니다. *다른 메뉴에서 붙여넣기 가능
7. 섹션 반복 : 해당 섹션이 다른 모든 페이지에서도 반복되도록 설정합니다. *하단 제일 끝에 위치하는 경우만 해당
8. 섹션 삭제 : 섹션을 삭제합니다.

상단 헤더 (Header)에서 마우스 오른쪽 버튼 클릭

1. 상단 설정 : 상단 설정 메뉴로 이동합니다.
2. 겹치기 : 상단 메뉴와 본문 배경이 겹치는 효과를 줍니다.

하단 푸터 (Footer)에서 마우스 오른쪽 버튼 클릭

• 하단 설정 : 하단 설정 메뉴를 엽니다.

비주얼 섹션 사용하기

비주얼섹션이란?

슬라이드 방식으로 동작하는 비주얼섹션은 사이트의 대표적인 아이덴티티를 나타내거나 중요한 정보(이벤트, 행사 등)를 알리는데 사용됩니다.

사용방법

1단계: 비주얼섹션 추가하기

메뉴에 비주얼섹션을 추가합니다.

1. 디자인 모드에 접속합니다. 
2. 비주얼섹션을 추가할 메뉴를 추가하거나, 특정 메뉴로 이동합니다. 메뉴 추가방법
3. 디자인 모드 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
4. 비주얼섹션을 클릭합니다.
5. 비주얼섹션 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
6. 컨텍스트 메뉴가 나오면 비주얼 설정을 클릭합니다.

2단계: 비주얼 설정하기

비주얼 설정 창이 나오면 아래 그림과 설명을 참고해, 필요한 만큼 슬라이드를 추가하고, 콘텐츠를 추가합니다.

• 새로운 슬라이드 추가 : 새로운 슬라이드 버튼을 클릭해 새 슬라이드를 추가합니다.
• 슬라이드 순서 변경 및 삭제 : 기존 슬라이드를 마우스 클릭해 드래그 하여 순서를 변경하거나, X를 클릭해 삭제할 수 있습니다. 삭제한 슬라이드는 복구할 수 없습니다.
• 슬라이드 에디터 : 에디터를 사용해 텍스트를 입력하고 이미지 첨부 등 편집 도구를 사용해 콘텐츠를 작성합니다.
• 슬라이드 배경 설정 : 슬라이드 배경으로 이미지 또는 유튜브 동영상을 사용할 수 있습니다. 동영상 배경을 설정하는 경우 단일 슬라이드만 이용 가능합니다.
• 슬라이드 링크 : 슬라이드 클릭 시 이동할 링크 설정할 수 있습니다. 링크는 메뉴를 선택하거나 직접 URL을 입력할 수 있습니다.
• 슬라이드 디자인 설정 : 슬라이드 모드, 디자인, 전환 효과, 버튼 디자인, 추가 효과 옵션을 설정할 수 있습니다.

3단계: 비주얼섹션 위치 이동하기

비주얼섹션은 위 또는 아래로 이동할 수 있습니다.

1. 비주얼섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
2. 컨텍스트 메뉴가 나오면 위로 이동 또는 아래로 이동을 클릭해, 비주얼섹션의 위치를 이동합니다.
   

   참고: 비주얼섹션이 페이지의 최상단 또는 최하단에 위치하는 경우 한 방향으로만 이동 가능합니다.

권장하는 배경 이미지 형태

비주얼섹션 내 배경 이미지는 브라우저 가로폭을 기준으로 꽉 차게 표시됩니다. 

비주얼섹션은 하단 끄트머리를 마우스로 드래그하여 높이 조절이 가능하지만, 브라우저 가로폭에 따라 원본 이미지의 상하 또는 좌우가 잘려 표시될 수 있기 때문에, 배경 이미지를 작업하실 때 사방에 여유 공간을 주세요.

사용자 기기의 화면 크기는 매우 다양하고 비주얼섹션에 사용한 이미지는 모바일에서도 그대로 사용됩니다. 

따라서 이미지에 텍스트가 포함되거나 특정한 인물 또는 제품에 포커스가 맞춰진 사진은 PC에서 잘 보인다 하더라도, 아래 그림처럼 다른 기기에서는 잘려 보일 수 있습니다.

• 텍스트는 비주얼섹션에서 텍스트를 사용해 표현합니다.
• 풍경, 패턴, 특정 사물에 포커스가 맞춰지지 않은 이미지를 선택합니다.

갤러리 클릭 시 새로운 갤러리가 나오게 하는 방법 (메뉴 활용)

갤러리 위젯과 메뉴 링크를 활용해 갤러리 이미지 중 하나를 클릭하면, 또 다른 갤러리가 나오도록 페이지를 구성할 수 있습니다.

본 도움말에서는 다음 샘플 사이트와 같이 City, Nature, Sky, Street 4개 중 하나를 클릭하면 관련 갤러리가 나타나는 페이지를 구성하는 방법을 알려드립니다.

설정 방법

1단계, City, Nature, Sky, Street 메뉴 만들기

갤러리를 위한 빈 메뉴 4개를 추가합니다.

1. 디자인 모드에 접속합니다.
2. 왼쪽 상단 메뉴 관리를 클릭합니다.

3. 상단 메뉴 오른쪽 끝 ⨁를 클릭해 City, Nature, Sky, Street 4개 메뉴를 추가합니다. 메뉴 추가 방법
   
   

2단계, 갤러리 만들기

추가한 4개 메뉴에 갤러리 위젯을 추가하고 이미지를 추가합니다.

1. City 메뉴로 이동합니다.

   *참조 : 메뉴 관리에서 이동하거나 상단 메뉴에 City 메뉴를 클릭해 이동할 수 있습니다.

2. 빈 메뉴에 갤러리 위젯을 추가합니다. 

   

3. 갤러리 위젯에 마우스 우클릭하여 추가한 갤러리 설정을 엽니다. 

   
4. 갤러리 설정 창 왼쪽 상단 + 상단 이미지, 동영상 추가에 마우스를 놓습니다.
5. 이미지 추가를 클릭합니다.
6. 내 PC에서 이미지를 업로드합니다.
7. 위 1번부터 6번 절차에 따라 남은 3개 메뉴에도 갤러리 이미지를 추가합니다.

3단계, 갤러리 홈 메뉴 만들기

위 2단계에서 만든 갤러리들로 이동할 수 있는 갤러리 홈 메뉴를 추가합니다.

1. 디자인 모드 왼쪽 상단 메뉴 관리를 클릭합니다.
2. 상단 메뉴 오른쪽 끝 ⨁를 클릭해 빈 메뉴(메뉴명 예 : 갤러리 홈)를 추가합니다.

4단계, 갤러리 이미지 추가 및 링크 걸기

갤러리 홈에 갤러리를 추가하고, 이미지 클릭 시 각 City, Nature, Sky, Street 메뉴로 이동하도록 이미지에 링크를 걸어줍니다.

1. 갤러리 위젯을 추가합니다.

   

2. 갤러리 위젯에 마우스 우클릭하여 갤러리 설정을 엽니다. 

   
3. 설정 창 왼쪽 + 상단 이미지, 동영상 추가에 마우스를 놓습니다.
4. 이미지 추가를 클릭합니다.

5. 위 2단계에서 만든 갤러리들을 대표하는 이미지 4개를 추가합니다.

   
6. 첫 번째 이미지를 클릭합니다.

7. 왼쪽 하단 링크를 클릭하면 추가한 메뉴들이 나타납니다. 그 중 City를 선택합니다.

   
8. 나머지 이미지에도 같은 방식으로 링크 추가합니다. *주의 : 링크를 추가할 때는 반드시 관련 이미지를 선택하고 링크를 추가해야 정상 적용됩니다.
9. (선택 사항) 이미지 내 제목과 설명을 함께 표시하려면 내용을 입력해주세요.

갤러리 스타일은 설정에서 [다른 스타일]을 클릭해 변경할 수 있습니다.

(선택 사항) 5단계, 그룹 메뉴 만들기

상단 메뉴바에 갤러리 홈(DIARY)만 표시되도록 메뉴를 그룹화 시키려면 다음 도움말을 참조하세요.

갤러리 클릭 시 새로운 갤러리가 나오게 하는 방법 (라이트박스 활용)

메뉴 이동 없이 갤러리 대표 이미지 클릭 시 여러 갤러리 이미지가 표시되도록 구성할 수 있습니다. 

메뉴 이동을 활용한 갤러리 위젯 응용 방법은 다음 도움말을 참조하세요.

구성 방법

1단계, 메뉴 추가하기

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

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

1. 왼쪽 상단 아이콘을 클릭합니다.

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

   

3단계, 이미지 추가하기

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

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

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

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

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

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

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

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

   

메뉴명 변경하기

메뉴 추가 이후 언제든 메뉴명을 수정할 수 있습니다. 다음 절차에 따라 기존 메뉴 이름을 변경해 보세요.

변경방법

1. 디자인 모드에 접속합니다. 
2. 왼쪽 상단의 메뉴 관리 ≡ 를 클릭합니다.
3. 변경을 원하는 메뉴명 오른쪽 끝 ⓘ 아이콘을 클릭해 메뉴 설정을 켭니다.
4. 메뉴명 항목의 기본 메뉴에 입력된 이름을 수정합니다.
   
5. (선택 사항) Hover에 메뉴명을 입력하면, 기본 메뉴명 위에 마우스 포인터를 올렸을 때 입력하신 Hover 메뉴로 변환됩니다.
6. 닫기 ✕ 아이콘을 클릭해 메뉴 설정 창을 끕니다.
7. 닫기 ✕ 아이콘을 클릭해 메뉴 관리를 끕니다.
8. 변경된 메뉴명을 확인합니다.
   참고: 메뉴명이 바로 변경되지 않을 시 새로고침(F5) 후 확인해 보세요.