• 가이드

플로팅 배너 만들기 (코드, 고급)

주의: 이 도움말에서 제공하는 플로팅 배너 코드를 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 불가하오니 양해 부탁드립니다.

아임웹은 코드를 쓰지 않아도 다양한 웹사이트, 쇼핑몰을 제작할 수 있도록 고안된 웹 제작 도구입니다. 그렇다고 코드를 완전히 사용하지 못하는 건 아닙니다. 코드를 사용하면 더 다양한 디자인이 가능하며, 아래 그림과 같은 플로팅 배너를 추가할 수도 있습니다.

본 튜토리얼에서는 코드를 활용해 PC/모바일 플로팅 배너 2장을 만드는 방법을 알아봅니다.

교육자료

샘플 이미지에 사용된 배너 이미지를 사용할 수 있습니다. 있는 그대로 사용하셔도 되며 필요에 따라 수정해 사용하세요.

  • 파일 형식: 62.9KB, ZIP 압축파일 (다운로드)
  • 파일 구성: PNG, PSD

1단계: 배너 이미지 주소(URL) 획득하기

게시판에 배너 이미지를 올리고, 업로드한 배너 이미지의 주소(URL)를 복사해 활용할 수 있습니다. (사용 중인 자료실 게시판이 있는 경우 이 단계는 건너 뛸 수 있습니다.)

  1. 자료실 게시판에 이미지를 추가하고, 이미지 주소를 획득합니다. 게시판 활용방법
  2. 복사한 이미지 주소를 메모장에 보관해 둡니다.

2단계: 코드 복사 및 붙여넣기

  1. 내 사이트 관리자 페이지에 접속합니다. 접속방법
  2. 왼쪽 메뉴에서 [환경설정 > SEO, 헤더설정]을 클릭합니다.
  3. 마우스 휠 스크롤을 내려, 페이지 하단 Footer Code로 이동합니다.
  4. 아래의 소스 코드 전체를 복사하여, Footer Code 작성 칸에 붙여넣습니다.

    <!-- 플로팅 배너 CSS -->
    <style>
    /* PC 배너1 스타일 */
    .floBanPc1 {
      position: fixed;
      top: 128px; /* 윗쪽 끝에서부터의 거리 */
      right: 0;
      z-index: 99;
    }
    /* PC 배너2 스타일 */
    .floBanPc2 {
      position: fixed;
      top: 204px; /* 윗쪽 끝에서부터의 거리 */
      right: 0;
      z-index: 99;
    }
    /* 모바일 배너1 스타일 */
    .floBanMob1 {
      position: fixed;
      bottom: 130px; /* 아래 끝에서부터의 거리 */
      right: 0; /* 오른쪽 끝에서부터의 거리 */
      z-index: 99;
    }
    /* 모바일 배너2 스타일 */
    .floBanMob2 {
      position: fixed;
      bottom: 80px; /* 아래 끝에서부터의 거리 */
      right: 0; /* 오른쪽 끝에서부터의 거리 */
      z-index: 99;
    }
    </style>
    
    <!-- 플로팅 배너 HTML -->
    <!-- PC 배너1 -->
    <div class="floBanPc1 hidden-md hidden-sm hidden-xs">
      <a href="링크주소" target="_blank">
        <img src="배너이미지주소" width="가로길이px" height="세로길이px">
      </a>
    </div>
    <!-- PC 배너2 -->
    <div class="floBanPc2 hidden-md hidden-sm hidden-xs">
      <a href="링크주소" target="_blank">
        <img src="배너이미지주소" width="가로길이px" height="세로길이px">
      </a>
    </div>
    <!-- 모바일 배너1 -->
    <div class="floBanMob1 hidden-lg">
      <a href="링크주소" target="_blank">
        <img src="배너이미지주소" width="가로길이px" height="세로길이px">
      </a>
    </div>
    <!-- 모바일 배너2 -->
    <div class="floBanMob2 hidden-lg">
      <a href="링크주소" target="_blank">
        <img src="배너이미지주소" width="가로길이px" height="세로길이px">
      </a>
    </div>
    

3단계: 코드 수정하기

아래의 설명과 코드 내 주석을 참조하여 각 배너에 맞게 코드를 수정합니다.

1) PC 배너 스타일 수정하기

붙여넣은 코드의 PC 배너 위치를 수정합니다. 작성된 주석을 읽어 보고, 숫자를 변경해 위치를 잡아주세요.

/* PC 배너1 스타일 */
.floBanPc1 {
  position: fixed;
  top: 128px; /* 윗쪽 끝에서부터의 거리 */
  right: 0;
  z-index: 99;
}
/* PC 배너2 스타일 */
.floBanPc2 {
  position: fixed;
  top: 204px; /* 윗쪽 끝에서부터의 거리 */
  right: 0;
  z-index: 99;
}
2) 모바일 배너 스타일 수정하기

붙여넣은 코드의 모바일 배너 위치를 수정합니다. 작성된 주석을 읽어 보고, 숫자를 변경해 위치를 잡아주세요.

/* 모바일 배너1 스타일 */
.floBanMob1 {
  position: fixed;
  bottom: 130px; /* 아래 끝에서부터의 거리 */
  right: 0; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
/* 모바일 배너2 스타일 */
.floBanMob2 {
  position: fixed;
  bottom: 80px; /* 아래 끝에서부터의 거리 */
  right: 0; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
3) PC 배너 HTML 수정하기

PC 배너를 페이지에 표시하고, 배너 클릭 시 이동할 링크, 배너 이미지의 주소, 크기를 수정합니다.

참고: 배너이미지주소에는 위 1단계에서 메모한 배너 이미지 링크를 추가해 주세요.
<!-- PC 배너1 -->
<div class="floBanPc1 hidden-md hidden-sm hidden-xs">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>
<!-- PC 배너2 -->
<div class="floBanPc2 hidden-md hidden-sm hidden-xs">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>
4) 모바일 배너 HTML 수정하기

모바일 배너를 페이지에 표시하고, 배너 클릭 시 이동할 링크, 배너 이미지의 주소, 크기를 수정합니다.

참고: 배너이미지주소에는 위 1단계에서 메모한 배너 이미지 링크를 추가해 주세요.
<!-- 모바일 배너1 -->
<div class="floBanMob1 hidden-lg">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>
<!-- 모바일 배너2 -->
<div class="floBanMob2 hidden-lg">
  <a href="링크주소" target="_blank">
    <img src="배너이미지주소" width="가로길이px" height="세로길이px">
  </a>
</div>

(선택 사항) 4단계: 상품 상세페이지 메뉴 예외처리

모바일 상품 상세페이지에서 하단 구매하기 버튼과 플로팅 배너 이미지가 겹칠 수 있습니다. 이에 따라 아래의 도움말을 참고해 상품 상세페이지 메뉴에서 플로팅 배너의 위치가 변경되도록 예외처리합니다. 이 작업은 디자인 모드에서 처리 할 수 있습니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 메뉴 관리 ≡ 를 클릭합니다.
  3. 글로벌 메뉴에서 상품 상세페이지 메뉴를 클릭합니다.
  4. 왼쪽 상단의 위젯 추가 + 버튼을 클릭합니다.
  5. 코드 위젯을 클릭합니다.
  6. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  7. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.
  8. 아래의 코드를 복사해, 코드 설정에 붙여넣습니다.

    참고: 아래 코드는 모든 배너를 숨기는 코드입니다. 특정 배너는 표시하려는 경우, 해당 배너의 클래스를 삭제합니다. 예를 들어, PC 배너1만 표시하려면 .floBanPc1 줄 전체를 삭제합니다.
     <style>
     /* 모바일 버전 플로팅 배너를 위로 50px 올림 */
     .floBanMob1 {bottom: 130px!important;}
     .floBanMob2 {bottom: 80px!important;}
     </style>
    
  9. 저장 버튼을 클릭합니다.

(선택 사항) 5단계: 통합검색 메뉴 예외처리

필요하신 경우 통합검색 메뉴에서 플로팅 배너가 표시되지 않도록 예외처리합니다. 이 작업은 디자인 모드에서 처리할 수 있습니다.

  1. 디자인 모드 왼쪽 상단의 메뉴 관리 ≡ 를 클릭합니다.
  2. 글로벌 메뉴에서 통합검색 메뉴를 클릭합니다.
  3. 왼쪽 상단의 위젯 추가 + 버튼을 클릭합니다.
  4. 코드 위젯을 클릭합니다.
  5. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  6. 컨텍스트 메뉴가 나오면 코드 설정을 엽니다.
  7. 아래의 코드를 복사하고 붙여넣습니다.

    참고: 아래 코드는 모든 배너를 숨기는 코드입니다. 특정 배너는 표시하려는 경우, 해당 배너의 클래스는 삭제합니다. 예를 들어, PC 배너1을 표시하려면 floBanPc1 줄 전체를 삭제할 수 있습니다.
     <style>
     /* 플로팅 배너 숨김 */
     .floBanPc1 {display: none!important;}
     .floBanPc2 {display: none!important;}
     .floBanMob1 {display: none!important;}
     .floBanMob2 {display: none!important;}
     </style>
    
  8. 저장 버튼을 클릭해 적용합니다.

(선택 사항) 6단계: 장바구니, 마이페이지, 로그인/가입하기 메뉴 예외처리

필요하신 경우 장바구니 메뉴, 마이페이지 메뉴, 로그인/가입하기 메뉴에도 플로팅 배너가 표시되지 않도록 예외 처리할 수 있습니다.

위 통합검색 메뉴에 사용된 코드를 복사해, 같은 방법으로 나머지 메뉴들도 예외 처리합니다.

참고: 위젯 복사 기능을 활용하시면 더욱 빠르고 간편하게 작업하실 수 있습니다. 위젯 복제방법

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

  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. PC 및 모바일 브라우저에서 플로팅 배너가 작동하는지 확인합니다.
  3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.



(선택 사항) 상단/하단 이동 스크롤 버튼이 필요하세요?

코드를 사용해 버튼 클릭 시 페이지의 상단 또는 하단으로 스크롤 이동하도록 만들 수 있습니다.

상단/하단 이동 스크롤 버튼 만들기

목록으로

시작이 어려우신가요?

교육 받아보시면 쉽습니다.

온라인 교육 바로가기

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.
727.4K
누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.
315
일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.
3.4K
전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 나이스페이, 이지페이, 엑심베이 공식파트너입니다.