텍스트 위젯을 통해 포토샵 등을 사용해 직접 제작한 이미지 버튼을 추가할 수 있습니다. 이미지 위젯을 사용해, 이미지 버튼을 삽입하는 것도 가능하지만, 정밀한 편집 및 이미지 크기 조절이 필요하신 경우 다음 도움말을 참고해 추가할 수 있습니다.

이 도움말에서는 버튼을 예시로 설명하지만, 필요에 따라 버튼이 아닌 다른 디자인을 사용하셔도 됩니다.

중요: 이 방법을 통해 이미지 버튼을 추가하시는 경우 모든 크기의 디스플레이에 대응이 어려울 수 있습니다. 꼭 필요한 경우가 아닌 한 이미지는 이미지 위젯을 사용하실 것을 권장합니다.



1단계: 이미지 버튼 추가 및 링크 걸기

직접 디자인한 이미지를 업로드하고, 클릭 시 이동하도록 링크를 추가합니다.

  1.  디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  3. 텍스트 위젯을 클릭합니다.
  4. 텍스트 위젯을 마우스로 더블-클릭합니다.
  5. 텍스트 도구의 이미지 첨부  버튼을 클릭합니다.
  6. 내 PC에서 업로드할 파일을 선택하고 확인을 클릭합니다.
  7. 아래 그림처럼 옵션 메뉴가 나타나면 링크 버튼을 클릭합니다. 옵션 메뉴가 나타나지 않는 경우, 업로드한 이미지를 마우스로 클릭해 보세요.
  8. 링크(URL)를 입력합니다. (예: http://imweb.me/faq)
  9. 삽입을 클릭해 링크 추가를 완료합니다.



2단계: 이미지 크기 편집하기

업로드한 이미지의 크기를 조절할 수 있습니다. 

  1. 업로드한 이미지를 마우스로 클릭합니다.
  2. 옵션 메뉴가 나타나면 이미지 크기  버튼을 클릭합니다.
  3. 높이를 숫자로 입력하고, 업데이트를 클릭합니다.
    참고: 둘 중 하나만 입력해도 상대 비율에 따라 자동 조절됩니다.



3단계: 이미지 정렬하기

업로드한 이미지 버튼은 정렬 기능을 통해 텍스트 위젯 영역 안에서 왼쪽/가운데/오른쪽으로 정렬할 수 있습니다. 

  1. 이미지를 마우스로 클릭합니다.
  2. 옵션 메뉴가 나타나면 정렬  버튼을 클릭합니다.
  3. 왼쪽, 가운데, 오른쪽 중 하나를 선택합니다.
  4. 텍스트 에디터 바깥 영역을 클릭해 텍스트 에디터를 종료합니다.



4단계: 작동여부 확인하기

  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭해 작동여부를 확인합니다.
  2. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.



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


온라인 판매는 하지 않지만, 쇼핑 위젯을 사용해 방문자에게 상품을 보여주고 싶은 경우, 상품 상세페이지의 구매하기 버튼, 장바구니 버튼, 위시리스트 버튼사용안함으로 설정하여 숨길 수 있습니다.


 

앞서 완료해야 할 사항들

다음 설정을 진행하기에 앞서 아래 항목들을 체크하고 완료해야 합니다.

  1. 상품 카테고리 구성하기: 상품 카테고리를 추가하고 메뉴로 구성합니다.
  2. 상품 등록하기: 상품을 등록합니다. 만약 가격을 공개하지 않는 경우 가격없음으로 선택할 수 있습니다.
  3. 상품 진열하기: 디자인 모드에서 쇼핑 위젯을 필수로 추가하고 상품을 진열합니다.


설정방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 메뉴 관리 ≡ 를 클릭합니다.
  3. 글로벌 메뉴의 상품 상세페이지메뉴를 클릭합니다.
    중요: 미리 쇼핑 기능을 활성화하지 않으면 상품 상세페이지 메뉴가 표시되지 않습니다.
  4. 상품 상세페이지에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 상품 상세페이지 설정 을 클릭합니다.
  6. 왼쪽 메뉴에서 표시항목 탭 메뉴를 클릭합니다.
  7. 구매하기 버튼 옵션을 사용안함 으로 변경합니다.

  8. (선택 사항) 필요에 따라 장바구니 버튼, 위시리스트 버튼도 사용안함 으로 설정합니다.




관련 도움말

  • 회원에게만 상품 가격(판매가)을 공개하는 방법
  • 상품 상세페이지 버튼 커스텀 설정방법



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


섹션 배경에 특수한 배경 효과를 줄 수 있습니다.



적용방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 섹션 내 위젯이 없는 빈 공간에 마우스 오른쪽 버튼을 클릭합니다.
  3. 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
  4. 배경 효과를 선택합니다. 옵션은 중복으로 선택할 수 있습니다.


  5. 닫기 ✕ 아이콘을 클릭해 섹션 설정 창을 끕니다.
  6. 디자인 모드 오른쪽 상단에 위치한 미리보기 아이콘을 클릭해 확인합니다.
  7. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.



효과목록

  • 흑백 이미지: 업로드한 배경 이미지의 채도를 제거하여 흑백으로 표현합니다.
  • 배경 이미지 고정: 업로드한 배경 이미지가 스크롤을 하더라도 제자리에 고정된 느낌으로 표현합니다. 모바일 브라우저에서는 지원하지 않습니다.
  • 마우스 포인터 움직임: 업로드한 배경 이미지에 마우스 커서를 이동하면 배경 이미지가 움직이는 효과를 적용합니다.
  • 눈내리기 효과 (PC 전용): 섹션 배경에 눈 내리는 효과를 적용합니다. 눈은 흰색으로 표시되기에 배경색이 흰색이거나 너무 밝은 경우 표시되지 않는 것처럼 보일 수 있습니다. PC에서만 작동됩니다.
  • 모바일에서도 음소거로 자동 재생: 동영상을 삽입할 경우 모바일에서도 자동재생할 수 있습니다. 브라우저 정책상 음소거로만 자동재생이 가능합니다.



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



섹션 안쪽에 여백을 줄 수 있습니다. 디자인 모드에서는 일반적으로 여백 위젯을 사용해 여백을 줍니다. 하지만 섹션 설정 내 여백 옵션을 활용하면 같은 크기의 여백을 빠르게 추가할 수도 있습니다.



설정방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 섹션 내 위젯이 없는 빈 공간에 마우스 오른쪽 버튼을 클릭합니다.
  3. 컨텍스트 메뉴에서 섹션 설정을 클릭합니다.
  4. 간격 항목에서 상하 여백, 좌우 여백을 픽셀 단위로 입력합니다.
  5. 닫기 ✕ 아이콘을 클릭해 섹션 설정 창을 끕니다.
  6. 디자인 모드 오른쪽 상단에 위치한 미리보기 아이콘을 클릭해 확인합니다.
  7. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.



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


섹션의 그리드 간격을 수정해, 위젯 간의 거리를 사용자 임의로 조절할 수 있습니다. 기본 섹션 그리드 간격은 사방 15px 입니다. 

참고: 섹션 그리드 간격은 섹션마다 다르게 설정할 수 있습니다.

설정방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 섹션 내 위젯이 없는 빈 공간에 마우스 오른쪽 버튼을 클릭합니다.
  3. 컨텍스트 메뉴에서 섹션 설정을 클릭합니다.
  4. 간격 항목 오른쪽 끝의 기본 그리드 간격을 선택 해제합니다.

  5. 왼쪽 그리드 상하 간격과 그리드 좌우 간격의 숫자를 수정합니다. 상하, 좌우 간격으로 0으로 입력하는 경우, 해당 섹션에서는 모든 위젯이 서로 붙게 됩니다.


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


섹션을 나누어 사이드 영역을 만들 수 있습니다. 섹션 사이드에는 종종 2차 메뉴를 삽입하곤 하지만, 광고 배너, 페이지 타이틀 등 다양하게 응용해 사용할 수 있습니다.

이 도움말에서는 섹션을 둘로 나누어, 왼쪽 또는 오른쪽에 섹션 사이드 영역을 추가하는 방법을 설명합니다.


설정방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 사이드 영역을 추가하려는 섹션 내, 위젯이 없는 빈 공간에 마우스 오른쪽 버튼을 클릭합니다.
  3. 컨텍스트 메뉴가 나타나면 섹션 설정을 클릭합니다.
  4. 사이드 항목에서 왼쪽 또는 오른쪽을 선택합니다.
  5. 본문과 사이드 간의 간격을 설정합니다.
  6. (선택 사항) 선 스타일 항목에서 섹션 본문과 섹션 사이드 사이에 세로선을 추가합니다.
  • 선두께: 세로선의 두께를 입력합니다.
  • 선모양: 실선, 점선, 긴점선 중 하나를 선택해 세로선 모양을 정합니다.
  • 선색: 컬러픽커를 활용해 세로선의 색상을 지정합니다.

7. (선택 사항) 섹션 사이드 고정 옵션을 선택할 수 있습니다. 해당 옵션을 활성화하면 페이지를 스크롤해도 사이드 섹션이 현재 위치에 고정됩니다. 

8.섹션 설정 창 바깥 영역을 클릭해 설정을 완료합니다.

9.선택한 방향에 사이드 영역이 생긴 걸 확인할 수 있습니다. 이제 사이드 영역에 ⨁를 클릭해 위젯을 추가해 꾸밉니다. (예를 들어, 메뉴 리스트 위젯을 추가해 세로형 사이드 메뉴를 추가할 수도 있습니다.)

참고: 사이드 영역이 정상적으로 표시되지 않는 경우 새로고침(F5)해 주세요.



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


페이지 섹션 배경에 유튜브(YouTube) 또는 비메오(Vimeo) 동영상을 추가할 수 있습니다.

섹션 배경은 요소가 아닌 배경으로 처리되어, 사용자가 원하는 크기 및 비율로 정확하게 표시하기 어렵습니다. 동영상은 특정 요소(제품, 글자 등)를 중심으로 하는 영상은 피하고, 배경으로 사용할 영상을 사용하실 것을 권장합니다.



동영상 추가방법


  1. 디자인 모드에 접속합니다. 접속방법
  2. 위젯이 없는 섹션 배경에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  3. 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
  4. 사진  아이콘에 마우스 포인터를 올립니다.
  5. 동영상을 클릭합니다.

  6. YouTube 또는 Vimeo 동영상 링크(URL)를 입력하고 확인을 클릭합니다.


  7. 섹션 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
  8. 디자인 모드 오른쪽 상단 미리보기  아이콘을 클릭합니다.
  9. 작동여부를 확인합니다.
  10. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.


주의사항


유튜브에 동영상 등록 시 공개설정을 일부 공개( 또는 미등록)로 설정해 주세요. 비공개로 설정하신 경우 동영상이 재생되지 않습니다. 일부 공개로 선택하신 경우 유튜브에서 검색되지 않으며, 동영상 링크가 있는 사람만 볼 수 있습니다.

남들이 퍼갈 수 없고, 특정 사이트에서만 재생되도록 하려면 Vimeo를 사용하실 것을 추천합니다.


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




페이지 섹션 배경에 색상, 이미지, 동영상을 추가할 수 있습니다. 이 도움말에서는 이미지를 추가하는 방법에 관해 설명합니다.

섹션 배경 이미지는 구조 상 요소(텍스트, 버튼, 이미지)가 아닌 배경으로 처리됩니다. 섹션 배경 이미지는 브라우저 크기에 따라 자동으로 늘어나거나 줄어들며, 이에 따라 일부가 잘려 보일 수 있습니다.


추가방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 위젯이 없는 섹션 배경에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  3. 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
  4. 사진  아이콘에 마우스 포인터를 올립니다.
  5. 이미지 찾기 또는 무료 이미지를 클릭합니다.


  • 이미지 찾기: 내 PC에서 직접 이미지를 업로드합니다. 적절한 이미지 해상도
  • 무료 이미지: 아임웹에서 제공하는 무료 이미지를 사용합니다.

6.섹션 배경에 배경 이미지가 추가됩니다. 


배경 이미지 속성

  • 배경 이미지 추가 시 기본적으로 채우기 속성이 적용됩니다. 어떤 크기의 이미지를 올려도 섹션에 꽉 찬 형태로 추가됩니다.
  • 배경은 반복, 가로반복, 세로반복과 같은 옵션을 통해 패턴 이미지를 적용할 수도 있습니다. 패턴 배경 적용하기



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



디자인 모드에서 사이트 제작 중 요소별로 링크를 추가할 수 있습니다. 기본 메뉴 링크 외에도 여러 링크 타입을 제공하고 있기에 다양하게 활용해 보시길 바랍니다. 


링크 타입의 종류

  1. 링크: 내부 메뉴로 링크를 걸거나 외부 사이트로 직접 URL을 입력해 링크걸 수 있습니다.
  2. 전화걸기: 링크 클릭 시 입력하신 연락처로 전화를 겁니다. *PC에서 작동제한
  3. 문자발송 : 링크 클릭 시 문자 작성 앱이 켜지며 문자를 발송할 수 있습니다. *PC에서 작동제한
  4. 이메일: 링크 클릭 시 메일 앱이 켜지며 메일을 발송할 수 있습니다. *PC에서 작동제한
  5. 파일첨부: 링크 클릭 시 첨부한 파일(최대 100Mb)이 다운로드 됩니다.
  6. 동영상: 링크 클릭 시 동영상이 재생됩니다.
  7. 소셜공유: 링크 클릭 시 소셜 공유 창이 켜집니다.
  8. 말풍선: 링크 클릭 시 말풍선이 표시됩니다.
  9. 코드: 입력하신 코드가 작동합니다.
  10. 최신상품: 클릭 시 지정한 카테고리의 최신 상품 상세페이지로 이동합니다.
  11. 모달: 클릭 시 모달 창이 켜집니다. 모달창 띄우기




관련 도움말


메뉴, 위젯 등 요소에 링크를 추가하는 자세한 방법은 요소에 링크 추가하기 도움말에서 확인해 보실 수 있습니다.



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



특정 메뉴(페이지)를 열어 볼 수 있는 권한을 사용자마다 달리 설정할 수 있습니다. 특정 콘텐츠를 회원만 볼 수 있게끔 설정하거나, 지정한 그룹만 볼 수 있도록 설정하려면 다음 절차에 따라 페이지 접근 권한을 설정해 보세요. 


설정방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 접근 권한을 설정할 메뉴명의 오른쪽 끝에 위치한 ⓘ 아이콘을 클릭합니다.
  4. 접근 권한 항목에서 모든 사용자를 클릭합니다. 아래 그림과 설명을 참고해, 해당 메뉴에 접근 가능한 그룹을 선택합니다.
  • 모든 사용자: 모든 사용자가 메뉴를 열어 볼 수 있습니다.
  • 로그인 사용자: 사이트 회원만 메뉴를 열어 볼 수 있습니다.
  • 소유자: 소유자만 메뉴를 열어볼 수 있습니다.
  • 사용자 지정 그룹: 지정된 사용자 그룹만 메뉴를 열어볼 수 있습니다. 사용자 그룹을 추가하는 방법은 사용자 그룹 지정하기 도움말을 참고하세요. 사용자 지정 그룹 선택 시 아래 그림처럼 허용 그룹을 선택할 수 있습니다.

5. (선택 사항) 접근 권한에 대한 옵션을 설정할 수 있습니다. 

  • 로그인창 자동 표시: 접근 시 로그인창을 자동으로 표시할지 선택합니다.
  • 권한이 없을 때 메뉴 숨김: 접근 권한이 없을 경우 메뉴를 숨길지 선택합니다.
  • 비밀번호 입력시 접근 가능: 접근 시 비밀번호 입력 여부를 선택합니다.

6. 닫기 ✕ 아이콘을 클릭해 메뉴 설정 창을 종료합니다.


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





시작이 어려


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