쉽고 상세히 알수있는

온라인 사용가이드


위멘토 홈페이지로 쉽고 간편하게 만들 수 있는

온라인사용가이드를 확인하실 수 있습니다.

위멘토 사용가이드


포토샵을 못해도 코딩을 못해도 쉽고 간편하게 관리 해보세요

위멘토 사용 가이드

가이드 302

섹션 고정하기 (본문)



이 옵션을 사용하면 마우스 스크롤을 통해 특정 섹션이 브라우저 화면을 벗어나더라도 상단에 고정되는 효과를 줄 수 있습니다.

참고 : 본 옵션의 작동 여부는 사이트 미리보기에서만 확인 가능합니다.



설정방법

  1. 디자인 모드에 접속합니다.
  2. 옵션을 줄 섹션에서 위젯이 없는 공간에 마우스 오른쪽 버튼을 클릭합니다.
  3. 보조 메뉴가 나타나면 섹션 설정을 클릭합니다.

  4. 섹션 설정에서 오른쪽 하단 섹션 고정을 체크합니다.

  5. 사이트 미리보기를 클릭해 확인 후 웹에 게시합니다.






관련 도움말: 섹션을 둘로 나누고자 하시나요?

섹션 사이드 기능을 활성화하면 다음 그림처럼 섹션의 왼쪽 또는 오른쪽에 사이드 영역을 둘 수 있습니다. 이 기능은 섹션 사이드에 서브메뉴 등을 넣어 방문자의 편리한 메뉴 이동에 도움이 될 수 있습니다.

섹션 사이드 나누기 (사이드 섹션)


섹션 반복하기



디자인 모드 섹션 반복 기능을 통해 페이지 하단에 공통적으로 표시할 내용을 지정할 수 있습니다.

중요: 섹션 반복을 사용하려면 반드시 해당 섹션을 페이지 최하단에 배치해야 합니다.



설정방법


  1. 새로운 빈 섹션을 추가합니다. 
  2. 추가한 빈 섹션을 페이지 최하단으로 이동시킵니다. 
  3. 위젯을 추가해 섹션을 디자인 합니다.
  4. 디자인한 섹션에서 위젯이 없는 공간에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 컨텍스트 메뉴가 나오면 섹션 반복을 클릭합니다.


  6. 다른 메뉴로 이동하면 같은 섹션이 반복되는 것을 확인할 수 있습니다.




2개 이상 섹션 반복하기

섹션이 페이지 최하단에 붙어 있다면 2개 이상의 섹션도 반복시킬 수 있습니다. 위 절차를 반복하여 또 다른 섹션을 추가하고 반복 설정해 보세요.



섹션 반복을 해제하려면?

위 설정 방법 4번을 참조하여 섹션 컨텍스트 메뉴를 열어주세요. 섹션 반복이 정상적으로 설정 되었다면 다음처럼 반복 해제 메뉴가 표시됩니다. 반복 해제를 클릭해 해제 시킵니다.





특정 섹션으로 이동하도록 링크 연결이 가능한가요?




모든 섹션은 고유의 ‘섹션 ID’를 갖고 있으며, 버튼 등에 추가할 수 있는 링크 주소로 활용할 수 있습니다.


예를 들어, 방문자가 ‘섹션 ID’가 링크된 버튼을 클릭하면 아래의 애니메이션과 같이 방문자를 동일한 페이지의 다른 섹션으로 이동시킬 수 있으며, 필요에 따라 다른 페이지의 특정 섹션으로 이동시키는 것도 가능합니다.


이 도움말을 통해 버튼을 클릭하면 특정 섹션으로 이동시키는 앵커 링크를 만드는 방법을 배워보세요.

참고: 아래는 버튼 위젯을 예로 설명하지만, 링크를 설정할 수 있는 위젯(이미지 위젯, 갤러리 위젯 등)이라면 모두 적용할 수 있습니다.





설정방법

동일한 페이지의 특정 섹션에 앵커 링크 걸기


  1. 디자인 모드에 접속합니다. 
  2. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  3. 버튼 위젯을 클릭해 페이지에 추가합니다.
  4. 버튼 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 컨텍스트 메뉴가 나오면 버튼 설정을 클릭합니다.
  6. 링크 타입으로 코드를 선택합니다.

  7. 오른쪽 코드 입력 칸에 링크 걸 섹션의 섹션 ID 를 입력합니다. (예: #s201910224dc7406405bc4)

    참고: 메뉴 URL과 섹션 ID를 찾는 방법은 이 도움말 하단의 관련 도움말 항목에서 찾아보실 수 있습니다.

  8. 버튼 설정 창에서 닫기 ✕ 아이콘을 클릭해 설정을 완료합니다.
  9. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  10. 버튼을 클릭하면 의도한 섹션으로 이동하는지 확인합니다.
  11. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.




다른 페이지의 특정 섹션에 앵커 링크 걸기


참고: 다른 페이지에 앵커 링크를 걸 땐 페이지 새로고침이 일어나며 이건 정상적인 현상입니다.
  1. 디자인 모드에 접속합니다. 
  2. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  3. 버튼 위젯을 클릭해 페이지에 추가합니다.
  4. 버튼 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 컨텍스트 메뉴가 나오면 버튼 설정을 클릭합니다.
  6. 링크 타입으로 코드를 선택합니다.

  7. 링크 타입 오른쪽에 위치한 코드 입력 칸에 /메뉴URL#섹션ID 형식으로 메뉴 URL과 섹션 ID를 붙여서 입력합니다. (예: /lookbook#s20200623123e797c6dfb8)

    참고: 메뉴 URL과 섹션 ID를 찾는 방법은 이 도움말 하단의 관련 도움말 항목에서 찾아보실 수 있습니다.

  8. 버튼 설정 창에서 닫기 ✕ 아이콘을 클릭해 설정을 완료합니다.
  9. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  10. 버튼을 클릭하면 의도한 섹션으로 이동하는지 확인합니다.
  11. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.




컬러피커 활용하기 (색상값, 색상 투명도 조절)




컬러피커의 투명도 조절 슬라이더를 사용해 색상을 투명하게 처리할 수 있습니다. 투명 색상은 색상 변경 가능한 옵션이 있는 모든 위젯(텍스트 편집모드 포함), 섹션에 적용할 수 있습니다.


투명도 조절방법

  1. 디자인 모드에 접속합니다.
  2. 오른쪽 상단의 공통 디자인 설정  아이콘을 클릭합니다.
  3. 본문 항목에서 브랜드/링크색의 오른쪽 끝 원을 클릭해 컬러피커를 켤 수 있습니다.
    참고: 색상 변경이 가능한 여러 위젯, 섹션, 설정 옵션에서 컬러피커를 켤 수 있습니다.


  4. 마우스로 원하는 색상을 선택하고, 투명도 슬라이더를 클릭해 좌우로 이동합니다.


  5. 색상 값이 RGBA 형식으로 바뀌며, 색상이 투명하게 처리됩니다.
  6. 색상 값을 복사해, 색상 옵션에 붙여넣어 사용할 수 있습니다.



애니메이션 효과 적용하기



위젯마다 페이드인, 날아오기, 회전하기, 뒤집기 등 애니메이션 효과를 추가할 수 있습니다. 적절히 활용하면 심미성을 높일 뿐더러 주목도를 높이는 데도 도움이 됩니다.

 

적용방법

위젯에 애니메이션 효과를 적용하는 방법을 두 가지가 있습니다.


방법1: 한 번에 애니메이션 효과 적용하기

한 번에 애니메이션 효과를 적용하는 경우 페이드인 애니메이션 효과만 적용 가능합니다.

  1. 디자인 모드 오른쪽 상단의 톱니바퀴 아이콘을 클릭합니다.
  2. 화면 오른쪽에서 공통 디자인 설정 메뉴가 나타나면 마우스 휠 스크롤을 내려 옵션 항목으로 이동합니다.
  3. 위젯에 애니메이션 적용을 선택합니다.

  4. 닫기 ✕ 아이콘을 클릭해 공통 디자인 설정을 종료합니다.
  5. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  6. 애니메이션이 모두 정상적으로 작동하는지 확인합니다.
  7. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.



방법2: 위젯 별로 애니메이션 효과 적용하기

여백 위젯을 제외한 모든 위젯에 개별적으로 애니메이션 효과를 적용할 수 있습니다.

  1. 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  2. 컨텍스트 메뉴가 나오면 애니메이션을 클릭합니다.
  3. 아래 그림과 설명을 참고해 애니메이션 효과를 적용합니다.

    • 애니메이션: 애니메이션 설정 창 왼쪽에서 적용하려는 애니메이션 효과를 선택합니다.
      참고: 애니메이션 효과를 삭제하려면 없음을 선택하세요.
    • 방향: 선택한 애니메이션에 방향 옵션이 있는 경우 애니메이션 진행 방향을 지정합니다.
    • 지속시간: 애니메이션이 지속되는 시간을 초 단위로 입력합니다.
    • 지연시간: 애니메이션이 지연되는 시간을 초 단위로 입력합니다.
  4. 닫기 ✕ 아이콘을 클릭해 애니메이션 설정 창을 종료합니다.
  5. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  6. 마우스 휠을 스크롤하여 원하는 움직임으로 애니메이션이 작동하는지 확인합니다.
  7. 마음에 드는 경우 게시하기 버튼을 클릭해 적용합니다.


적절한 이미지 해상도



위멘토는 반응형 웹 제작 솔루션이기 때문에 PC/태블릿/모바일 기기 해상도에 따라 이미지 크기가 달라집니다. 따라서 명확한 이미지 크기를 명시해 드리기에 어려움이 있습니다.

다만, 디자인 모드의 그리드 기준에 따른 근접한 크기를 안내해 드릴 수는 있습니다. 아래 내용을 참고하여 적절한 크기를 찾아 보시길 바랍니다.

참고 크기

  • 공통 디자인 그리드 기준 본문폭: 1280 px
  • 가로 영역 확장 시: 1920 px
  • 모바일 전용 가로 크기: 768 px


하단 설정하기 (푸터)




하단이란?

하단 또는 푸터(Footer)라는 이름을 가진 이 섹션은 문서로 치면 꼬리말 영역을 말합니다. 

하단/푸터 영역은 사용자가 의도적으로 제외하지 않는 이상 모든 페이지 최하단에 똑같이 표시됩니다.



하단 디자인 시작하기

하단 디자인을 변경하고, 설정하는 단계별 방법을 설명합니다.


1단계: 하단 디자인 변경하기

미리 구성된 하단 디자인 템플릿을 불러와 하단 디자인을 변경합니다.

변경방법

  1. 디자인 모드에 접속합니다. 
  2. 왼쪽 상단의 마술봉 아이콘을 클릭합니다.

  3. 섹션 추가 메뉴가 나오면 푸터 카테고리에 마우스 포인터를 올립니다.
  4. 마음에 드는 푸터 템플릿을 마우스로 클릭합니다.

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



2단계: 하단에 텍스트 정보 입력하기

하단 템플릿마다 텍스트를 입력할 수 있는 영역이 존재합니다. 텍스트 영역을 마우스로 클릭하여, 사업자 정보, 연락처, 주소 등의 정보를 입력합니다.

설정방법

  1. 하단 영역에서 텍스트가 입력된 영역을 마우스로 클릭합니다.

  2. 텍스트 에디터가 열리면 텍스트를 입력하거나, 이미지를 첨부하여 꾸밉니다.
  3. 텍스트 에디터 바깥 영역을 클릭해 텍스트 입력을 종료합니다.



3단계: 하단 표시요소 변경 및 설정하기

하단 설정을 열어, 하단에 표시되는 요소 및 링크 설정하고 배경을 변경할 수 있습니다. 하단 표시요소 및 기타 설정에 대한 더 자세한 내용은 하단 요소 변경 및 설정하기 도움말에서도 알아볼 수 있습니다.

설정방법

  1. 하단 영역에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

  2. 컨텍스트 메뉴가 나타나면 하단 설정을 클릭합니다.
  3. 표시요소 항목에서 하단에 표시될 요소를 선택 또는 선택 해제합니다.
  4. 디자인 요소 항목에서 하단 섹션의 텍스트와 여백, 배경을 설정합니다.
  5. SNS/링크 공유하기 항목에서 하단 섹션에 표시할 SNS 또는 일반 링크를 설정합니다.


커스텀 하단 디자인하기

기본 하단 섹션 템플릿이 디자인 콘셉트에 맞지 않는 경우, 아래의 도움말 링크를 참고해 사용자가 직접 하단을 디자인할 수 있습니다.




하단 SNS 링크 추가 및 삭제하기 (푸터)



참고: 사이트 개설 시 선택하신 테마에 따라 현재 화면의 하단 디자인과 아래 예시 그림은 다를 수 있습니다. 하단 디자인이 마음에 들지 않는 경우 다음 하단 푸터 설정하기 도움말을 참고해 변경해 보세요.


하단(Footer) 영역에 SNS 링크를 추가할 수 있습니다. SNS 링크를 표시 및 추가하는 경우 다음처럼 하단에 표시됩니다.


설정방법

  1. 디자인 모드에 접속합니다. 
  2. 하단 영역에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭하여 하단 설정을 엽니다. 하단 설정 열기
  3. 표시 요소 항목에서 SNS 바로가기를 선택합니다.
  4. 마우스 휠을 스크롤 하여 SNS 링크/공유하기 항목으로 내려갑니다.
  5. 다음 설명을 참고해 링크를 추가하거나 삭제합니다.


    • 링크 추가 : 링크 추아이콘을 클릭해 필요한 만큼 링크 수를 추가합니다.
    • 아이콘 : 링크할 SNS 아이콘을 선택합니다.
    • 새창 : 선택 시 새 브라우저 탭으로 링크가 열립니다.
    • URL : 클릭 시 이동할 링크를 추가합니다.
    • 링크 삭제 : 삭제아이콘을 클릭해 링크를 삭제합니다.
  6. 하단 설정 오른쪽 상단  아이콘을 클릭합니다.
  7. 저장을 클릭합니다.
  8. 하단에 SNS 링크가 추가된 것을 확인할 수 있습니다.




하단을 변경했는데 바뀌지 않습니다. (푸터, 하단 숨김)




하단 섹션 템플릿을 변경했지만 페이지 하단 디자인이 바뀌지 않는다면, 메뉴에 하단 숨김 옵션이 적용되었을 가능성이 높습니다. 

이 도움말에서는 숨겨진 하단이 다시 표시되도록 하단 숨김 옵션을 해제하는 방법을 설명합니다.


설정방법

  1. 디자인 모드에 진입합니다. 
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 하단이 바뀌지 않는 메뉴명 오른쪽 끝의 ⓘ 아이콘을 클릭합니다.
  4. 메뉴 설정 창이 나오면 옵션 항목에서 하단 숨김 옵션을 선택 해제합니다.


  5. 메뉴 설정 창 바깥 영역을 클릭해 설정을 종료합니다.
  6. 마우스 휠 스크롤을 내려 페이지의 하단 섹션이 표시되는지 확인합니다.



쇼핑몰 하단 법적 필수 정보 (푸터)


이 도움말에서는 온라인 쇼핑몰에 필수적으로 기재해야 하는 항목들을 설명합니다. 쇼핑몰 오픈 전 아래 사항들을 확인하고 반드시 추가해 주시기 바랍니다.


표시목록

  1. 상호 및 대표자 성명 : 사업자등록증과 일치하는 대표자명을 기입합니다.
  2. 사업장 주소 : 소비자 불만사항을 처리할 수 있는 곳의 주소를 입력합니다.
  3. 연락처 : 사업장 전화번호 및 전자우편주소를 입력합니다.
  4. 개인정보관리책임자 : 개인정보관리책임자의 이름을 입력합니다. 별도의 관리자가 없는 경우 대표자명을 기입합니다.
  5. 호스팅제공자 : 전자상거래법 규정에 따라 호스팅서비스 제공자 상호를 반드시 표시하도록 의무화 되어 있습니다. 예시는 다음과 같습니다.
    • 호스팅제공자: (주)위멘토
    • Hosting by (주)wemento
  6. 사업자등록번호 : 사업자등록증과 일치하는 번호로 기입합니다.
  7. 통신판매업신고번호 : 인터넷 쇼핑몰 사업자는 반드시 통신판매업신고를 진행해야 합니다. 통신판매업신고는 정부24에서 신청할 수 있습니다.
  8. 이용약관 : 차후 발생할 수 있는 고객과의 갈등 상황을 사전에 방지하도록 하기 위해 필요하며, 서비스 이용자에게 공시함으로써 효력이 발생합니다. 영업상 중요 사유가 있을 시 변경할 수 있지만 최소 2주 전 고객에게 반드시 알려야 합니다.
  9. 개인정보취급방침 : 자체적으로 개인정보처리를 하고 있어도 홈페이지에 반드시 개인정보처리방침을 공표해야 합니다. 그리고 개인정보취급방침은 다른 항목들과 달리 파란색으로 표기되어 있는 것을 볼 수 있는데요. 개인정보처리(또는 취급)방침은 글자 크기, 색상 등을 활용하여 쉽게 확인할 수 있도록 해야 하기 때문입니다.
  10. 에스크로 인증마크 : 에스크로 인증마크는 구매자를 대상으로 안전거래에 대한 신뢰를 줄 뿐만 아니라 네이버페이, 카카오페이, 지그재그 등의 서비스 가입 심사요소 중 하나이므로 꼭 삽입해 주세요.




대표.  김성진  ㅣ  사업자등록번호.  506-87-00931  ㅣ  Emeil. sales@wemento.kr  ㅣ  고객센터.  1800-2142 (09:00~18:00 / 주말 및 공휴일 휴무)

주소.  서울특별시 강서구 공항대로 212(퀸즈파크11), B동 404호  ㅣ    Copyright 2023 ⓒ Hosting Design by WEMENTO.