카테고리 메뉴

  • 종합몰,멀티샵
  • 여성패션,잡화
  • 남성패션,잡화
  • 화장품,향수,세안품
  • 건강,식품,약품
  • 유아,아동용품
  • 팬시,문구
  • 컴퓨터,가전제품
  • 인테리어,가구,소품

온라인 설문조사

온라인 설문조사

디자인 구매시 가장 고려하는 점?

설문조사 항목

투표하기 결과보기

현재 위치
  1. 게시판
  2. FAQ

FAQ

고객님들이 자주 궁금해하시는 내용들입니다.

게시판 상세
제목 PC디자인에 팝업창 띄우기
작성자 별모아디자인 (ip:)
  • 작성일 2019-10-16
  • 추천 추천하기
  • 조회수 14
평점 0점


< PC디자인에 팝업창 띄우기 >

    

별모아에서는 팝업 이미지 psd 파일을 10개 제공해드리는 것 외에는 팝업 이미지 작업을 하지않습니다.

팝업창 디자인을 구매하시려면 카페24 디자인센터 http://d.cafe24.com 에 접속 후

상단 메뉴 중 부분디자인 > 팝업에서 원하시는 디자인 구매해주시면 됩니다.



아래는 쇼핑몰에 팝업창을 띄우는 방법입니다.


    

디자인관리 > 디자인 기능설정 > 팝업 설정에서 팝업등록 버튼을 누르면 팝업창 내용을 설정할 수 있는 항목들이 나옵니다. 각 항목들을 설정 및 입력해주시면 됩니다.

 

* 진행여부 : 진행으로 선택하셔야 쇼핑몰에 팝업창이 노출됩니다.

* 쇼핑몰 디자인 선택 : 보유하고 계신 쇼핑몰 스킨 중 팝업 노출을 원하시는 디자인 스킨을 선택해주세요.

* 기간설정 : 팝업창이 노출될 기간을 설정합니다. 설정하신 기간이 지나면 팝업창은 자동으로 쇼핑몰에 나타나지않습니다.

* 팝업 표시 위치 : 쇼핑몰 화면에서 팝업창이 나타날 위치를 픽셀값을 입력하여 설정합니다.

* 팝업 표시 위치 설정 : 팝업창이 노출된 페이지를 선택합니다. 서브 페이지에도 노출을 원하시면 추가 버튼을 눌러 원하시는 페이지들을 선택해주시면 됩니다. 메인 페이지에 팝업을 노출시키시려면 index.html 에 체크해주시기 바랍니다. 체크하지않으면 팝업창이 뜨지않습니다.

나중에 팝업창을 수정할 때도 이 부분의 체크가 풀리기 때문에 반드시 다시 체크해주시기 바랍니다.

* 팝업종류 : 레이어 형식 혹은 팝업창 형식으로 선택 가능합니다. 요즘은 레이어 팝업 형식으로 많이 설정합니다.

* 팝업크기 : 가로크기는 업로드 하실 팝업 이미지 가로크기와 동일하게 입력해주시고, 세로길이는 팝업 이미지에서 25픽셀 더한 값을 입력해주시기 바랍니다. 25픽셀을 더하는 이유는 팝업창 아래에 오늘 하루 열지않음메시지가 나타나야하기 때문입니다. 25픽셀을 더하여도 팝업창 아래에 오늘 하루 열지않음이 나타나지않을 경우에는 훨씬 더 큰 값을 입력한 후 쇼핑몰에 뜬 팝업창을 확인해가며 세로길이를 조정해주시기 바랍니다.

* 창 닫기 방법 : 오늘 하루만 열지않게 하거나 다시는 열지 않는 방식 중 선택합니다.

* 팝업창 내용 등록 방법 : 샘플팝업 이용하여 만들기를 선택합니다.

* 팝업제목 : 팝업창 제목을 입력합니다.

* 팝업내용 : 내용 입력하는 창에 커서를 놓은 후 바로 윗부분의 나무그림 모양 아이콘 그림입니다.

원본 그림의 이름: tree.jpg

원본 그림의 크기: 가로 19pixel, 세로 19pixel 을 클릭하면 조그만 대화상자가 나타납니다. 대화상자의 찾아보기버튼을 눌러 업로드 하실 팝업 이미지를 선택한 후, 바로 아래의 파일업로드 하기버튼을 클릭하여 업로드한 후 업로드 확인버튼 클릭 후 적용 버튼을 클릭하면 내용 입력 창에 업로드한 이미지가 삽입됩니다. 이미지가 삽입된 후 커서가 이미지 아래로 내려가지않도록 해주세요. 커서가 이미지 아래로 내려가면 팝업창 아래에 여백이 생기게 됩니다.

* 팝업창 이미지에 링크걸기 : 팝업내용 칸에 삽입된 팝업 이미지를 선택한 상태에서 바로 위에 작은 아이콘들 중에서 쇠사슬 모양의 아이콘 그림입니다.

원본 그림의 이름: link.jpg

원본 그림의 크기: 가로 19pixel, 세로 19pixel (링크 아이콘)을 클릭하면 해당 이미지에 링크 걸 수 있는 URL입력창이 뜹니다. URL 항목에 링크를 걸 주소를 입력해주세요. (쇼핑몰 내의 페이지를 링크시키시려면 원하시는 페이지나 게시판 내용에 들어가면 주소창에 주소가 나타납니다. 그 주소를 복사하여 붙여넣어주시면 됩니다. 주소 젤 앞의 http://가 중복되어 붙여지지않도록 유의바랍니다. ) 그 아래 Target 은 쇼핑몰 내의 페이지로 링크시킬 때에는 반드시 _parent를 선택하시고, 타 사이트로 링크시킬 때는 _blank 를 선택해주시기 바랍니다.

설정이 모두 완료되면 제일 아래 적용 버튼을 클릭하시면 됩니다.

 

* 팝업창 이미지에 링크 수정하기 : 팝업창 이미지에 링크걸기 설명과 동일한 방식으로 링크 수정 가능합니다.

팝업 설정이 완료된 후 페이지 제일 아래의 저장버튼을 클릭하면 팝업이 등록됩니다.

    

 

(반드시 필독해주세요!!! 팝업창 등록시 주의사항)


1. 디자인관리 > 디자인 기능설정 > 팝업 설정에서 팝업창 등록하실 때

팝업 내용 칸에 팝업 이미지 삽입하신 후, 바로 윗부분의 HTML소스 라는 글자를 클릭하셔서 소스를 살펴보시기 바랍니다.


이미지 태그 <img>나 링크태그 <a href> 외의 불필요한 태그들이 생성되어있을 경우 삭제해주시기 바랍니다.
특히 <img>태그 앞 뒤에 <p>태그나 </p>같은 태그가 들어가있으면 삭제해주시기 바랍니다.
<p> 혹은 </p>태그가 있을 경우, 쇼핑몰에서 팝업창을 확인해보면
팝업 이미지와 오늘하루열지않기 바 사이에 공백이 생길 수 있으므로 반드시 삭제바랍니다.






2. 팝업창을 메인에 띄웠는데 하단의 오늘 하루 열지 않음의 검정색 바가 팝업 이미지 보다 양 옆으로 튀어나와있을 경우는 디자인 관리 > 디자인 기능설정 > 팝업 설정에서 등록한 팝업창 제목을 클릭하여 수정모드로 들어가면 팝업 내용 입력하는 부분의 'HTML소스' 라는 글자를 클릭하여 html 소스 중에서 hspace="5" 로 되어있는 것을 hspace="0"으로 수정합니다.




   


첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
관리자게시 게시안함 스팸신고 스팸해제
목록 삭제 수정 답변
댓글 수정

비밀번호 :

수정 취소

/ byte

비밀번호 : 확인 취소

댓글 입력

댓글달기이름 :비밀번호 : 관리자답변보기

확인

/ byte

왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

관리자에게만 댓글 작성 권한이 있습니다.

왼쪽 스크롤 배너

오른쪽 스크롤 배너

위로이동 아래로이동