생산 장비, 부품과 같은 다양한 제품을 취급하면서 온라인 브로셔 개념으로 웹사이트를 만들려는 경우 쇼핑 위젯을 사용하면 수백, 수천 개의 제품도 빠르고 효율적으로 진열이 가능합니다.

이 도움말은 제품 소개 페이지 제작을 위한 가이드로, 사용자가 상품을 등록하고, 상품 상세페이지에 가격, 구매하기 버튼과 같은 쇼핑 요소들을 숨기는 방법을 설명합니다.



1단계: 상품 카테고리 구성하기

제품군, 제품 종류에 맞춰 상품 카테고리를 생성하고 구성합니다. 이렇게 구성한 상품 카테고리는 나중에 쇼핑 위젯을 사용해 사이트 상단 메뉴에 그대로 적용할 수 있습니다.

 상품 카테고리 구성하기



2단계: 표시할 제품 등록하기

웹사이트에 진열할 제품들을 등록합니다.

  1. 내 사이트 관리자 페이지에 접속합니다. 접속방법
  2. 왼쪽 메뉴에서 [쇼핑 > 상품관리]를 클릭합니다.
  3. 오른쪽 상단의 상품 추가 버튼을 클릭합니다.
  4. 상품 이미지, 상품명, 브랜드, 제조사, 원산지, 상세설명 등의 상품 정보를 입력합니다.
  5. (선택 사항) 가격 항목에서 가격을 공개하지 않으려면 가격없음 을 선택합니다. 쇼핑 위젯 및 상품 상세페이지에 상품 가격 대신 가격문의로 표시됩니다.
    참고: 가격없음 으로 설정하면 구매하기 버튼과 옵션을 사용할 수 없게 됩니다.
  6. 등록할 상품이 속할 카테고리를 선택합니다. 
  7. 저장 버튼을 클릭해 등록을 완료합니다.
  8. (선택 사항) 위 3~7번 과정을 반복해 필요한 만큼 상품을 추가합니다.
    참고: 같은 형식을 유지하는 경우 상품을 복제해 일부 정보만 바꿔 빠르게 추가할 수 있습니다. 상품 복제하기



3단계: 쇼핑 위젯 추가 및 상품 카테고리 연동하기

위 2단계에서 추가한 상품을 웹 페이지에 진열하고, 상단 메뉴에 상품 카테고리가 나타나도록 설정합니다.

  1. 관리자 페이지 왼쪽 상단의 디자인 모드를 클릭합니다.
  2. 디자인 모드 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭하고, 새로운 메뉴를 생성합니다. 메뉴 추가하기
  3. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  4. 쇼핑 위젯을 클릭합니다.
  5. 쇼핑 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  6. 컨텍스트 메뉴가 나오면 쇼핑 설정을 클릭합니다.
  7. 진열 항목에서, 연동할 상품 카테고리를 선택합니다. 가장 최상위 카테고리를 선택해 주세요. 그럼 하위 카테고리의 메뉴 및 상품들도 모두 연동됩니다. 표시되는 형태는 아래 8번 과정의 스크린샷을 참고할 수 있습니다.
  8. 쇼핑 설정 창 바깥을 클릭해 설정 창을 끄고, 상단 메뉴에 마우스 포인터를 올려봅니다. 메뉴명이 최상위 카테고리명(SHOP)으로 바뀌고, 하위 카테고리들도 모두 연동되어 표시되는 걸 볼 수 있습니다.
    참고: 자동 변경된 최상위 카테고리명은 메뉴 관리에서 언제든 다시 변경할 수 있습니다. 단, 하위 카테고리명은 관리자 페이지 [쇼핑 > 상품관리] 페이지의 카테고리 변경 메뉴에서 가능합니다.
  9. 쇼핑 위젯에 모든 상품들이 표시되는 걸 확인할 수 있으며, 방문자는 원하는 카테고리를 클릭해, 해당 카테고리의 상품들만 보는 것도 가능해집니다.



4단계: 상품 상세페이지 표시요소 설정하기

 상품 상세페이지에 표시되는 표시요소 중 쇼핑 관련 요소들을 숨기는 과정입니다. 

  1. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  2. 글로벌 메뉴에서 메뉴를 클릭합니다.
  3. 상품 상세페이지 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 상품 상세페이지 설정을 클릭합니다.
  5. 왼쪽 탭에서 표시요소를 클릭합니다.
  6. 상품 상세페이지에 표시될 요소들을 선택 또는 선택 해제합니다. 예를 들어, 온라인 판매를 하지 않기 때문에, 판매량, 회원등급가, 남은 재고, 적립금, 배송정보는 선택 해제할 수 있습니다.

  7. 상품 상세페이지에 표시되는 구매하기, 장바구니, 위시리스트 버튼 사용여부를 선택할 수 있습니다. 예를 들어 상세페이지에서 버튼을 숨기려면 사용안함 을 선택할 수 있으며, 필요에 따라 사용자 정의옵션을 선택해 임의의 링크(예: 견적문의 게시판)로 연결할 수도 있습니다.
    주의: 단, 상품 가격을 가격없음 으로 설정한 경우, 버튼 옵션을 사용자 정의로 설정해도 상세페이지에 표시되지 않습니다.



(선택 사항) 5단계: 페이지에 상품 카테고리 표시하기

방문자의 편의를 위해 페이지에 상품 카테고리를 표시할 수 있습니다. 이 단계에서는 메뉴 리스트 위젯을 활용해, 페이지에 상품 카테고리를 표시하는 방법을 설명합니다.

  1. 쇼핑 위젯이 포함된 메뉴에서, 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  2. 메뉴 리스트 위젯을 클릭합니다.
  3. 메뉴 리스트 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 메뉴/카테고리 설정을 클릭합니다.
  5. 다른 스타일 버튼을 클릭해, 원하는 스타일을 선택해 주세요.
  6. 기준 위치 항목에서 SHOP 카테고리를 선택합니다. 그럼 위 5번 과정에서 선택한 메뉴 리스트 스타일에 맞춰 카테고리가 표시됩니다. 
  7. 메뉴/카테고리 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
  8. 설정 완료한 메뉴 리스트 위젯을 마우스로 클릭해 드래그하여 원하는 위치로 이동시킵니다. 위젯 이동하기



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

  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 쇼핑 메뉴로 이동합니다.
  3. 의도한대로 상품 목록이 표시되고, 상품 상세페이지도 표시되는지 확인합니다.
  4. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.



도움말에 찾으시는 답변이 없으신가요? 문의하기


2012년 부터 시행된 전자상거래법 제10조 1항에 따라 모든 쇼핑몰 하단엔 사업자정보와 함께 호스팅 제공자도 함께 표시되어야 합니다. 이를 위반할 경우 과태료 등 행정처분이 내려질 수 있습니다.

전자상거래 시장 내에 신원이 불분명한 사업자들이 무분별하게 유입되어 사기 등 피해를 유발하는 것을 예방하고자 사업자의 신원확인을 정확히 함으로써 신속한 소비자 사고해결을 하기 위한 것이오니 쇼핑몰 운영자 여러분들께선 아래 설명과 예시를 참고해 적용해 주시길 당부드립니다.



표시 문구

표시 문구에는 호스팅 제공자명이 정확하게 명시되어야 합니다. 아래 예시를 참고해 주세요.

  • 예시1: 호스팅 제공자: (주)아임웹
  • 예시2: 호스팅 제공자: Hosting by (주)아임웹



적용 예시

쇼핑몰 호스팅 제공자 정보는 일반적으로 웹사이트 하단(Footer)에 사업자 및 사업자 정보와 함께 표시하며, 아래 예시를 참고할 수 있습니다.

상호: (주)홍길동 | 대표자: 홍길동 | 소재지: 서울특별시 서대문구 OO로 000
사업자등록번호: 000-00-0000 | 통신판매신고번호: 제2012-서울서대문-00000
개인정보관리책임자: 홍길동 | 전화번호: 00-0000-0000 | 팩스: 00-0000-0000
호스팅 제공자: (주)아임웹
Copyright © 2012 GILDONG Corp. All rights reserved.



적용 방법

디자인 모드에 접속해, 아임웹에서 제공하는 하단 템플릿을 사용하거나, 나만의 커스텀 하단 디자인을 만들 수 있습니다. 자세한 방법은 아래 도움말 링크를 참고해 주세요.

  • 하단 설정하기
  • 커스텀 하단 만들기



도움말에 찾으시는 답변이 없으신가요? 문의하기


 

위젯 소개

쇼핑 기획전 위젯은 쇼핑 위젯을 보조하는 위젯입니다. 쇼핑 기획전 위젯은 쇼핑 위젯과 같이 상품을 연동해 페이지에 출력한다는 개념에서는 같지만, 카테고리에 포함된 상품만을 불러오는 쇼핑 위젯과 달리 쇼핑 기획전 위젯은 기획전 목록에 포함된 상품도 불러온다는 점에서 다릅니다. 

기획전이란?

기획전이란 카테고리에 상관없이 사용자가 직접 지정한 상품들만 모아 판매할 때 유용하게 활용할 수 있는 기능입니다. 예를 들어 여름철에 인기 있는 상품만을 모아 보여주거나, 블랙 프라이데이를 위한 특별 할인가가 적용된 상품만을 모아 보여줄 수 있습니다.

쇼핑 기획전을 설정하는 방법은 다음 쇼핑 기획전 만들기 도움말을 확인해 주세요.



한 페이지에 여러 개의 기획전 추가하기

쇼핑 기획전 위젯은 쇼핑 위젯과 달리 하나의 페이지에 여러 개의 위젯을 추가할 수 있습니다. 만약 아래의 그림처럼 하나의 페이지에 여러 종류의 기획 상품들을 표시하려는 경우 쇼핑 기획전 위젯을 사용해 보세요. 


쇼핑 기획전 위젯 설정항목

쇼핑 기획전 설정 창을 열어, 게시판처럼 스타일을 변경하고, 연동할 카테고리 및 기획전을 선택할 수 있습니다. 또한, 상품 목록에 표시할 요소를 선택할 수 있으며 디자인도 변경할 수 있습니다.

  • 스타일: 다른 스타일 버튼을 클릭해 쇼핑 기획전 위젯의 스타일을 변경할 수 있습니다. 
  • 표시 옵션: 상품 목록에 표시할 요소들을 선택 또는 선택 해제합니다.
  • 표시 대상: 쇼핑 기획전 위젯에 표시할 카테고리와 기획전을 선택합니다. 기획전은 여러 개 선택 가능합니다.
  • 진열 방식: 상품 표시 순서를 정렬하거나, 진열할 총 상품 수를 지정할 수 있습니다.
  • 디자인: 쇼핑 기획전 위젯의 디자인을 수정합니다.
  • 옵션: 옵션 항목은 선택한 쇼핑 기획전 위젯 스타일에 따라 달라집니다. 옵션 항목이 나타나는 경우 상품의 전환 속도, 대기시간, 좌우여백, 페이징 버튼 등의 옵션을 설정해 주세요.

 


도움말에 찾으시는 답변이 없으신가요? 문의하기


 

위젯 소개


쇼핑 위젯은 내 사이트를 쇼핑몰로 구성할 때 필수적으로 필요한 위젯입니다. 쇼핑 위젯은 관리자 페이지의 상품관리에서 추가한 상품을 방문자가 보고 구매할 수 있도록 페이지에 표시하는 역할을 합니다.



상품을 표시하는 원리

쇼핑 위젯의 핵심 기능은 관리자 페이지에서 등록한 상품 데이터를 불러와 출력하는 것입니다. 상품은 개별적으로 불러오지 않고, 카테고리 단위로 불러오게 됩니다.

사용자는 먼저 관리자 페이지에서 상품을 추가하고, 해당 상품에 카테고리를 부여할 필요가 있습니다. 그럼 하나의 카테고리에 여러 개의 상품들이 포함되는데, 이 카테고리에 속한 상품들을 모두 불러와 쇼핑 위젯에 표시할 수 있게 되는 거죠.

의류 쇼핑몰을 만들려는 사용자를 예로 들어보겠습니다. 사용자는 T-Shirts라는 카테고리를 생성하고, 해당 카테고리에 다양한 종류의 티셔츠 상품을 추가할 수 있습니다.

이제 사용자는 디자인 모드에 진입해 쇼핑 위젯을 추가하고, 쇼핑 위젯과 연동할 카테고리로 T-Shirts를 선택합니다. 그럼 T-Shirts 카테고리에 속한 모든 티셔츠 상품들이 쇼핑 위젯에 표시되는 걸 확인할 수 있습니다.



쇼핑 위젯 추가 시 참고할 내용

쇼핑 위젯을 추가하면 회원이 웹사이트에서 쇼핑하기 위한 다음과 같은 기능들이 활성화됩니다.

  • 원활한 사용을 위해 쇼핑 사용을 설정합니다.
  • 쇼핑 위젯에 카테고리를 연동할 경우 메뉴명이 연동한 카테고리명으로 변경됩니다. 만약 연동한 카테고리에 하위 카테고리가 있는 경우, 하위 메뉴도 카테고리와 똑같이 변경됩니다.
  • 쇼핑등급 기능을 사용하는 경우 회원등급별 할인, 적립금, 무료배송 혜택을 제공하는 것도 가능합니다. 쇼핑등급 설정하기
  • 위젯에 설정한 값이 모든 쇼핑 위젯에 동일하게 적용됩니다.

쇼핑 위젯은 1개 페이지(메뉴)에 1개만 사용 가능하며, 더 다양한 상품을 동일한 페이지에 표시하려면 쇼핑 기획전 위젯을 사용해 주세요.



쇼핑 위젯 설정항목

 쇼핑 위젯의 설정항목은 크게 쇼핑 설정과 뱃지 설정으로 나눠집니다. 

쇼핑 설정

쇼핑 위젯에 연동할 카테고리를 선택하고, 쇼핑 위젯에 표시할 요소 선택 및 디자인을 변경할 수 있습니다. 

  • 표시옵션: 상품 목록에 표시할 요소들을 선택 또는 선택 해제합니다.
  • 진열: 쇼핑 위젯과 연동할 카테고리를 선택하고, 상품 순서를 정렬하거나 출력할 상품 수를 선택합니다.
  • 디자인: 쇼핑 위젯의 디자인을 수정합니다. (이미지 비율 옵션에서 선택한 비율은 상품 상세페이지 이미지에도 영향을 줍니다. 컬러옵션 모양 옵션에서 선택한 모양은 상품 상세페이지 컬러옵션 모양에도 영양을 줍니다.)


뱃지 설정

쇼핑 위젯에 표시되는 뱃지의 모양을 변경할 수 있습니다. 카메라 아이콘을 클릭해, 원하는 뱃지의 모양으로 변경해 주세요. 뱃지 이미지 제작 시 모바일 기기 해상도를 고려해 이미지의 세로 크기는 46픽셀을 권장합니다.


관련 도움말

커스텀 상품 뱃지 설정하기



도움말에 찾으시는 답변이 없으신가요? 문의하기  



일반적으로 사이트 회원은 상단 영역의 프로필 이미지를 클릭하면 나오는 프로필 메뉴를 통해 로그아웃할 수 있습니다. 만약 상단 영역에 로그아웃 메뉴를 직접적으로 표시하려는 경우 아래 지침에 따라 로그아웃 메뉴를 추가해 주세요.



로그아웃 추가방법


1단계: 상단설정 진입하기

  1. 내 사이트 디자인 모드에 접속합니다. 접속방법
  2. 디자인 모드 오른쪽 상단의 상단설정을 클릭합니다.


2단계: 로그아웃 메뉴 추가하기

  1. 로그인/장바구니 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  2. 컨텍스트 메뉴가 나오면, 로그인 설정을 클릭합니다.
  3. 설정 창 상단 로그인 후 탭을 클릭합니다.
  4. 설정 창 왼쪽 상단의 + 추가를 클릭합니다.
  5. 로그아웃을 클릭합니다.
  6. 생성된 로그아웃 메뉴를 마우스로 클릭하고 드래그하여, 원하는 위치로 이동합니다.

  7. 로그인 설정 창 바깥 영역을 클릭해 설정을 완료합니다.


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

  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 로그아웃 메뉴가 정상적으로 표시되는지 확인됩니다. (로그인한 상태에서만 표시됩니다.)

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



도움말에 찾으시는 답변이 없으신가요? 문의하기


게시판 게시물에 네이버 동영상을 삽입할 수 있습니다. 네이버 동영상을 삽입하려면 동영상 주소(URL)가 포함된 소스 코드가 필요합니다.

이 도움말에서는 네이버 동영상 소스 코드를 복사하는 방법과 게시물에 삽입하는 방법을 설명합니다.



삽입방법


1단계: 네이버 동영상 주소 가져오기

  1. 네이버 동영상에 마우스 포인터를 올리고, 동영상 오른쪽 상단의 공유하기 아이콘을 클릭합니다.
    참고: 네이버TV 동영상의 경우 동영상 화면 아래 공유 메뉴가 별도로 존재합니다.
  2.  동영상 왼쪽 상단의 소스 코드를 클릭합니다.
  3. 게시물에 출력할 동영상 크기를 선택하고, 복사 버튼을 클릭합니다.
  4. 네이버 동영상 주소가 포함된 HTML 소스 코드가 복사 완료됩니다.


2단계: 게시물에 삽입하기

  1. 게시판이 추가된 내 사이트 메뉴로 이동합니다.
  2. 글쓰기 버튼을 클릭합니다.
  3. 텍스트 도구에서 파일첨부 오른쪽의, 더보기 아이콘을 클릭한 다음 동영상 삽입 아이콘을 클릭합니다.
  4. 임베디드 코드 아이콘을 클릭하고, 복사한 동영상 소스 코드를 키보드 단축키(CTRL+V) 사용해 붙여넣습니다.
  5. 삽입을 클릭합니다.
  6. 동영상이 정상적으로 표시된다면 작성 버튼을 클릭해 게시물을 올립니다.



도움말에 찾으시는 답변이 없으신가요? 문의하기


게시판 게시물에 YouTube(유튜브), Vimeo(비메오) 동영상을 삽입할 수 있습니다. YouTube 및 Vimeo 동영상 주소(URL)을 가져오는 방법은 이 도움말 하단의 설명을 참고해 주세요. 


첨부방법

  1. 내 사이트의 게시판이 있는 메뉴로 이동합니다.
  2. 글쓰기 버튼을 클릭합니다.
  3. 텍스트 도구에서 파일첨부 아이콘 오른쪽의 더보기 아이콘을 클릭한 다음 동영상 삽입 아이콘을 클릭합니다.

  4. 동영상 URL 입력 칸에, 동영상 주소를 입력합니다. (동영상 주소 형식은 사용하시는 동영상 플랫폼마다 다릅니다.)

  5. 삽입을 클릭하면 동영상 삽입이 완료됩니다.




관련 도움말


  • YouTube(유튜브) 동영상 주소 가져오기
  • Vimeo(비메오) 동영상 주소 가져오기


도움말에 찾으시는 답변이 없으신가요? 문의하기


 


상품 상세페이지에 표시 가능한 요소들을 선택 또는 선택 해제할 수 있습니다. 일부 요소는 선택할 수 없으며, 구매하기, 장바구니, 위시리스트 버튼의 경우 표시여부 및 사용 용도도 설정 변경할 수 있습니다. 


설정방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 글로벌 메뉴에서 상품 상세페이지 메뉴를 클릭합니다.
  4. 상품 상세페이지에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 상품 상세페이지 설정 창 왼쪽의 표시항목탭을 클릭합니다.
  6. 상품 상세페이지에 표시 가능한 요소들을 선택 또는 선택 해제합니다.



도움말에 찾으시는 답변이 없으신가요? 문의하기


디자인 모드에서 메뉴 관리를 열어, 새로운 메뉴를 생성하거나, 메뉴 설정을 변경할 수 있습니다. 이때 메뉴 목록을 보면 아래 그림과 같이 상단 메뉴, 하단 메뉴, 글로벌 메뉴, 모달 메뉴로 그룹이 나눠진 걸 볼 수 있습니다.

이 도움말에서는 각 메뉴 그룹에 대해 소개하고 어떤 역할을 하는지 설명합니다.



상단 메뉴

사이트 상단(Header)에 표시되는 메뉴들을 가리킵니다. 상단 메뉴 오른쪽 끝 ⨁를 클릭해 새로운 메뉴를 생성할 수 있습니다. 추가된 메뉴는 아래 그림처럼 상단 메뉴 그룹에 속하게 됩니다. 상단 메뉴 그룹에 속한 메뉴는 사이트 상단 메뉴(내비게이션 메뉴)에 표시됩니다. 상단 메뉴는 필요에 따라 그룹 메뉴로 만들 수도 있고, 특정 메뉴(예시: HOME 메뉴)는 숨기는 것도 가능합니다.



하단 메뉴

사이트 하단(Footer)에 표시되는 메뉴들을 가리킵니다. 하단 메뉴 역시 상단 메뉴와 같은 방법으로 새로운 메뉴를 추가할 수 있습니다. 하단 메뉴 그룹에 메뉴를 추가하면, 위 그림과 같이 하단 섹션의 메뉴 표시 위치에 표시됩니다. 단, 하단 섹션의 메뉴 위치는 선택하신 하단 섹션 디자인(또는 템플릿)에 따라 달라질 수 있습니다.

주의: 하단을 직접 커스텀 디자인하여 사용하는 경우, 하단 메뉴가 표시되지 않을 수 있습니다. 커스텀 하단 만들기

 


글로벌 메뉴

글로벌 메뉴는 상단 또는 하단에 속하지 않으면서, 독립적인 특수 기능을 가진 공통 메뉴들을 말합니다. 글로벌 메뉴는 사용자가 임의로 삭제하거나 이동할 수 없으며, 메뉴의 일부만 수정할 수 있습니다. 또한, 상단/하단 메뉴와 달리 임의로 메뉴 설정(메뉴명, 주소 등)을 변경할 수 없습니다. 

글로벌 메뉴는 특정 위젯을 삽입한 경우에만 표시되거나 작동됩니다. 예를 들어, 쇼핑 위젯을 삽입하지 않은 경우 글로벌 메뉴에 상품 상세페이지 메뉴는 표시되지 않으며, 마이페이지, 장바구니 메뉴도 나타나지 않습니다. 



모달 메뉴

모달은 팝업 형식의 메뉴를 말합니다. 모달 메뉴는 상단/하단 메뉴와 다르게 페이지 어디에도 표시되지 않으며, 사용자가 직접 버튼과 같은 위젯을 통해 링크를 연결해 주어야 표시됩니다.

모달 디자인 후 모달을 표시하는 방법은 다음 모달창 띄우기 도움말을 참고해 주세요.



 도움말에 찾으시는 답변이 없으신가요? 문의하기


아임웹 로그인/가입 위젯에는 기본적으로 회원가입 및 내 계정 찾기 메뉴가 포함되어 있습니다. 그러나 때에 따라 일부 메뉴를 더 크게 표시해야 하는 경우가 있습니다.

이 도움말에서는 다음 그림과 같이 로그인 메뉴와 회원가입 및 비밀번호 찾기 버튼을 한 페이지에 구성하는 방법을 설명합니다. 사용자에 따라 회원가입 및 비밀번호 찾기 대신 광고/이벤트 배너 같은 이미지를 삽입해도 됩니다.



설정방법

1단계: 로그인/가입 팝업으로 사용 옵션 해제하기

로그인/가입 팝업으로 사용 옵션이 이미 해제되어 있는 경우, 이 과정은 건너 뛰어도 무방합니다. 

  1. 디자인 모드에 접속합니다. 접속방법
  2. 디자인 모드 오른쪽 상단의 톱니바퀴 아이콘을 클릭합니다.
  3. 공통 디자인 설정 메뉴가 브라우저 오른쪽에서 나타납니다.
  4. 메뉴 최하단에 위치한 옵션 항목에서 로그인/가입 팝업으로 사용 옵션을 선택 해제합니다.

  5. 최상단의 닫기 아이콘을 누른 다음 저장 버튼을 클릭해 설정을 적용합니다.



2단계: 로그인/가입 메뉴로 이동하기

로그인/가입 팝업 사용 해제 시 로그인 및 회원가입 메뉴 편집이 가능해집니다.

  1. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  2. 글로벌 메뉴로그인/가입 메뉴를 클릭합니다.
    참고: 글로벌 메뉴에 포함된 메뉴들은 웹사이트에서 공통으로 사용하는 메뉴입니다.

  3. 로그인을 클릭합니다.
  4. 아래 그림과 같이 로그인/가입 메뉴가 나타납니다.



3단계: 로그인/가입 메뉴 꾸미기

  1. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭해 여백 위젯 2개, 텍스트 위젯 3개, 가로선 위젯 2개, 버튼 위젯 2개를 추가합니다.
  2. 각 위젯을 마우스로 클릭 후 드래그하여, 다음 그림과 같이 배치합니다.
  3. 텍스트 위젯을 마우스로 더블-클릭하여, 각 항목에 필요한 문구를 작성합니다.
  4. 각 가로선 위젯의 설정을 열고, 아래 항목들을 수정합니다. 위젯 설정 열기
  • 선 스타일: 긴점선
  • 선 색(선택): 선 색이 색상을 변경할 수 있습니다.


5. 각 버튼 위젯의 설정을 열고 아래 항목들을 수정합니다. 위젯 설정 열기
참고: 회원가입, 로그인 주소는 이 도움말 링크를 클릭해 상세히 알아보세요. 

  • 정렬: 왼쪽
  • 텍스트: 버튼명을 키보드로입력합니다.
  • 링크: 클릭 시 이동할 주소를 입력합니다.



4단계: 섹션 배경색 변경 및 좌우 폭 줄이기

로그인 메뉴 및 기타 항목이 좌우로 너무 넓은 경우 섹션 폭을 좁혀 크기를 줄일 수 있습니다. 4단계에서는 섹션의 가로폭을 좁히는 방법을 설명합니다. 

  1. 위젯이 없는 곳에 마우스 포인터를 올립니다.
    참고: 위젯에 마우스 포인터를 올리면 안 됩니다.
  2. 마우스 오른쪽 버튼을 클릭하고, 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
  3. 간격 항목에서 기본 그리드 간격을 선택 해제합니다.

  4. 섹션의 간격 옵션을 아래와 같이 수정합니다.
    참고: 좌우 여백 값은 입력한 만큼 폭이 안쪽으로 좁아집니다. 또한 그리드 좌우 간격을 변경해 왼쪽 로그인 위젯과 오른쪽 위젯들 간의 거리를 띄우거나 좁힐 수 있습니다.

  • 좌우 여백: 150px
  • 그리드 상하 간격(선택): 10px
  • 그리드 좌우 간격: 30px


5. (선택 사항) 필요에 따라 배경색 색상을 변경합니다. 이 도움말 샘플에서는 연한 회색(#F5F5F5)이 사용되었습니다.

6. 섹션 설정 바깥 영역을 클릭해 설정을 종료합니다.



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

  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. Google 크롬 시크릿창을 열어, 비회원 상태에서 회원가입을 클릭해봅니다.
  3. 로그인/가입 메뉴가 의도한대로 표시되는지 확인합니다.
  4. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.



도움말에 찾으시는 답변이 없으신가요? 문의하기



도움말에 찾으시는 답변이 없으신가요? 문의하기
TOP