주 콘텐츠로 건너뛰기

PC와 모바일 상단에 홍보용 배너 노출하는 방법

프로모션이나 기획전 등 눈에 띄는 곳에 배너를 걸어두고 싶을 때, 띠 배너로 홍보하는 경우가 많은데요. 간단하지만 매우 효과적인 상단 문구 노출 방법을 안내해 드릴게요.

자세히 알아보기

PC 적용 방법

  1. [관리자] 디자인 > 디자인 보관함 으로 이동해 주세요.
  2. 대표 디자인으로 사용 중인 디자인의 '편집' 버튼을 클릭해 주세요.
  3. 스마트디자인 편집창 왼쪽에서 '전체화면보기(탭)' 을 클릭해 주세요.
  4. 배너 추가를 원하는 화면에 아래와 같이 HTML 코드를 추가해 주세요.
  5. [참고이미지]
    1_shop1_134212.gif

    [HTML 소스]

    ▼ 아래와 같이 소스를 추가해 주세요.

    <!-- 띠 배너 -->
    <div class="promotionBanner">
    <a href="#none" class="bannerLink">
    <img src="http://sdsupport.cafe24.com/img/guide/tip/img_banner.gif" alt="배너 내용을 적어주세요." /><!-- 원하는 배너 이미지로 변경 -->
    </a>
    <a href="#none" class="btnClose"><img src="http://sdsupport.cafe24.com/img/guide/tip/btn_close.png" alt="배너 닫기" /></a>
    </div>
    <!--// 띠 배너 -->


    ※ '띠 배너' 와 '닫기' 버튼 이미지는 원하는 이미지로 교체해서 사용할 수 있어요.

  6. CSS 파일 수정을 위해 '레이아웃(layout) > 기본 레이아웃(basic) > css > common.css' 파일을 열어 주세요.
  7. ▼ 아래와 같이 소스를 추가해 주세요.

    /* 띠 배너 css */
    .promotionBanner { position:relative; overflow:hidden; text-align:center; background:pink; } .promotionBanner .bannerLink { display:block; } .promotionBanner .btnClose { position:absolute; top:5px; left:50%; margin-left:590px; }

    ※ 닫기 버튼의 위치나 배너 배경 등은 디자인에 맞게 변경해서 사용하세요.
  8. js 파일 수정을 위해 '레이아웃(layout) > 기본 레이아웃(basic) > js > basic.js' 파일을 열어 주세요.
  9. ▼ 아래와 같이 소스를 추가해 주세요.

    /* 띠 배너 js */
    var bannerFunc = function(){ $('.promotionBanner .btnClose').bind("click", function(){ $('.promotionBanner').animate({height: 0}, 500); }); }; $(function($){ bannerFunc(); });
  10. 쇼핑몰에 띠 배너가 추가된 모습을 확인해 주세요.
    2_shop1_134341.gif

 

Info

HTML 코드를 넣는 위치에 따라 화면 중간에도 띠 배너를 적용할 수 있어요.

모바일 적용 방법

  1. 홍보성 텍스트 노출하기
    1) [관리자] 디자인 > 디자인 보관함 으로 이동해 주세요.
    2) 대표 디자인으로 사용 중인 디자인의 '편집' 버튼을 클릭해 주세요.
    3) 스마트디자인 편집창 왼쪽 아래에 있는 검색창에서 'main.html' 파일을 검색해 열어주세요.

    4) ▼ 아래와 같이 소스를 추가해 주세요.

    ##상단 생략##

    <body id="main">

    <div module="Popup_Mobile">{$mobile}</div>

    <div id="wrap">

    <!--@import(/layout/basic/sidebar.html)-->

    <hr class="layout">

    <div id="container">

    <header id="header">

    <div class="header">

     

    <div class="textBanner">

    <style>

    .textBanner { background:#000; text-align:center; }

    .textBanner p { padding:6px 14px 5px; color:#fff; font-size:13px; line-height:18px; font-weight:normal; }

    </style>

    <p>텍스트를 입력해주세요</p>

    </div>

     

    <h1 module="Layout_LogoTop"><a href="/">{$mobile_title}</a></h1>

    <section id="topArea">

    ##하단 생략##

    ※ 디자인 소스는 전체 언어 공통으로 이용할 수 있어요.


  2.  홍보성 텍스트에 이벤트 페이지로 링크 걸기
    1) [관리자] 디자인 > 디자인 보관함 으로 이동해 주세요.
    2) 대표 디자인으로 사용 중인 디자인의 '편집' 버튼을 클릭해 주세요.
    3) 스마트디자인 편집창 왼쪽 아래에 있는 검색창에서 'main.html' 파일을 검색해 열어주세요.
    4) ▼ 아래와 같이 소스를 추가해 주세요.

    ##상단 생략##

    <body id="main">

    <div module="Popup_Mobile">{$mobile}</div>

    <div id="wrap">

    <!--@import(/layout/basic/sidebar.html)-->

    <hr class="layout">

    <div id="container">

    <header id="header">

    <div class="header">

     

    <div class="textBanner">

    <style>

    .textBanner { background:#000; text-align:center; }

    .textBanner p { padding:6px 14px 5px; font-size:13px; line-height:18px; font-weight:normal; }

    .textBanner a { display:block; color:#fff; }

    </style>

    <p><a href="URL을 입력해주세요">텍스트를 입력해주세요</a></p>

    </div>

     

    <h1 module="Layout_LogoTop"><a href="/">{$mobile_title}</a></h1>

    <section id="topArea">

    ##하단 생략##

    ※ 디자인 소스는 전체 언어 공통으로 이용할 수 있어요.

이 페이지가 도움이 되었나요?
현재 콘텐츠