프로모션이나 기획전 등 눈에 띄는 곳에 배너를 걸어두고 싶을 때, 띠 배너로 홍보하는 경우가 많은데요. 간단하지만 매우 효과적인 상단 문구 노출 방법을 안내해 드릴게요.
자세히 알아보기
PC 적용 방법
- 으로 이동해 주세요.
- 대표 디자인으로 사용 중인 디자인의 '편집' 버튼을 클릭해 주세요.
- 스마트디자인 편집창 왼쪽에서 '전체화면보기(탭)' 을 클릭해 주세요.
- 배너 추가를 원하는 화면에 아래와 같이 HTML 코드를 추가해 주세요.
- [참고이미지]
[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>
<!--// 띠 배너 -->
※ '띠 배너' 와 '닫기' 버튼 이미지는 원하는 이미지로 교체해서 사용할 수 있어요. - CSS 파일 수정을 위해 '레이아웃(layout) > 기본 레이아웃(basic) > css > common.css' 파일을 열어 주세요.
-
▼ 아래와 같이 소스를 추가해 주세요.
/* 띠 배너 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; }
※ 닫기 버튼의 위치나 배너 배경 등은 디자인에 맞게 변경해서 사용하세요. - js 파일 수정을 위해 '레이아웃(layout) > 기본 레이아웃(basic) > js > basic.js' 파일을 열어 주세요.
-
▼ 아래와 같이 소스를 추가해 주세요.
/* 띠 배너 js */var bannerFunc = function(){ $('.promotionBanner .btnClose').bind("click", function(){ $('.promotionBanner').animate({height: 0}, 500); }); }; $(function($){ bannerFunc(); }); - 쇼핑몰에 띠 배너가 추가된 모습을 확인해 주세요.
Info
HTML 코드를 넣는 위치에 따라 화면 중간에도 띠 배너를 적용할 수 있어요.
모바일 적용 방법
- 홍보성 텍스트 노출하기
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">
##하단 생략##
- 홍보성 텍스트에 이벤트 페이지로 링크 걸기
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">
##하단 생략##