애니빌드.LAB
매뉴얼
마케팅 배너 이벤트관리 (버튼)
- Anybuild
- 2022-08-30 11:38:00
- hit4721
- http://wdev.anybuild.co.kr/bbs/faq/7316
배너 이벤트 관리 버튼 형식에 대해 안내드리겠습니다.
조금 복잡해 보일수도 있지만 이해만 하신다면 편리하게 사용이 가능합니다. 꼭 메뉴얼을 읽어보시고 해보시기를 권장합니다.
보통 모바일 홈페이지에서 따라다니는 버튼을 많이 보셨을 텐데요.
배너이벤트 관리에서는 간편하게 설정 후 이미지와 링크만 등록하면 컨텐츠가 자동으로 생성되며 PC, MOBILE, APP 모두 노출이 가능합니다.
(위치는 화면 위 / 아래 또는 특정 콘텐츠의 위 / 아래만 지원이 가능합니다.)
)
※ 배너 이벤트 관리는 [마케팅 지원] 내에 있으며 메뉴가 확인되지 않으신다면 마스터 계정에서 해당 메뉴 권한을 부여해 주세요.
※ 기본 주의사항은 아래와 같습니다. 그리고 그룹 설정 페이지 곳곳에 있는 주의사항을 꼭 확인하시기 바랍니다.
)
* jQuery 기반으로 동작이 되기때문에 jQuery가 활성화 되지 않을 경우 배너가 실행되지 않습니다.
디자인관리 > 고급디자인관리 > 전체 화면구성 <head> 란에 <load target="/img_up/_addon/jquery/1.11.3/jquery.min.js"> 를 작성하시면 jQuery가 연동됩니다.
* 디자인팜 2.0의 경우 스킨에 따른 제약이 발생할 수 있습니다.
이제 본격적으로 버튼 타입을 만들어 보겠습니다.
먼저 그룹을 생성합니다. 그룹은 버튼을 감싸고 있는 레이아웃을 설정한다고 생각하시면 될듯합니다.
(그룹 생성 후에 버튼 이미지를 등록할 수 있습니다. 중간에 그룹 생성을 멈추지 마시고 계속 진행해 주세요.)
기본설정)
)
1) 노출 디바이스
- 노출하고자 하는 디바이스에서만 노출이 가능합니다. 모두 노출하고 싶다면 모두 선택해 주세요.
2) 노출 페이지
- 배너 이벤트의 경우 메인과 서브로만 구분되어 집니다.
- 인트로 페이지 또는 특정 페이지만 노출 / 비노출 설정은 별도로 지원하지 않습니다.
3) 노출 시작일, 노출 만료일
- 그룹 자체를 해당기간에만 노출 할 수 있습니다.
- 예를 들면 특정 기간 이벤트 페이지 링크를 걸고 싶을 때 1월 ~ 9월 사이에만 버튼을 노출시켜 해당 페이지 이동을 유도할 수 있습니다.
4) 그룹명
- 별도로 노출되는 내용은 아니며 관리자가 관리할 수 있도록 그룹명을 입력해 주세요.
5) 그룹배너타입
- 3가지의 타입이 있으며 이번 게시글에서는 버튼 타입을 안내드리고 있습니다.
6) 콘텐츠 최대 넓이 (미입력시 1000px)
- 홈페이지의 콘텐츠 레이아웃에 따른 최대 넓이를 지정할 수 있습니다.
- 예를 들면 홈페이지 레이아웃이 1000px인데 '500' 으로 설정을 했다면 아래와 같습니다.
)
- 최대 넓이 500px인 경우 위의 이미지와 같이 2개의 버튼을 넣었다면 각각 절반씩 넓이가 250px로 자동지정 됩니다.
- 최대 넓이를 기준으로 버튼 개수에 따라 자동으로 비율이 조정됩니다.
- 만약 최대넓이보다 작은 화면이라면 자동으로 비율이 조정되며 아래와 같이 조정됩니다.
)
7) 위치
- 상/하단 둘중 한개만 선택이 가능하며 body 또는 '8. 삽입 대상' 에 따른 위치가 지정이 됩니다.
8) 삽입대상
- 삽입대상은 아래에 있는 고급설정란에서 고정여부를 '사용안함' 일때만 사용이 가능합니다.
- 만약 id="header" 콘텐츠 내에 넣고 싶다면 입력란에 '#header'를 넣으면 자동으로 해당 콘텐츠에 상/하단에 삽입이 됩니다. (CSS 작성하실때 사용하는 ID값 또는 class 값을 작성해주세요.)
- 삽입대상의 콘텐츠가 2개 이상일 경우 배너가 활성화 되지 않습니다. (삽입 대상에 '.list' 라고 지정을 했을 경우 class="list"를 가진 콘텐츠가 1개일 때만 활성화 됩니다.)
)
(위 이미지는 위치는 상단, 삽입대상은 '#header' 로 지정한 상태입니다.)
9) 여백
- 각각 위치별 여백을 줄 수 있습니다.
- 좌 / 우 여백은 디바이스 크기가 최대 사이즈보다 작을 때만 여백이 지정됩니다.
)
(위 이미지는 상/하 여백, 좌/우 여백 각각 30씩 값을 주었습니다. - 녹색부분이 여백으로 적용된 부분입니다.)
10) 배경색상
- 배너 콘텐츠 영역을 제외한 배경색상입니다.
)
(위 이미지는 배경 검은색, 투명도 50%를 설정하였습니다.)
11) z-index
- 다른 콘텐츠에 가려 배너가 보이지 않을 경우 값을 올려 콘텐츠가 위로 올라오게끔 설정해주세요. (최대 9999)
고급설정)
)
1) 고정여부
'사용함' 으로 설정시 위에서 안내드린 '8) 삽입대상' 은 무시가 되며 <body> 를 기준으로 삽입이 됩니다.
'사용함'으로 설정시 스크롤을 하더라도 버튼이 화면을 따라다닙니다.
스크롤을 올리더라도 다른 콘텐츠에 영향을 주지 않기 위해 body에 배너의 높이 만큼의 padding-top / padding-bottom 값이 지정됩니다.
(토글 버튼을 사용하실 경우 열고 닫을 수 있기 때문에 body에 padding 값은 적용되지 않습니다.)
)
(위 이미지는 위치 - 상단, 고정사용 설정으로 된 이미지입니다.)
- CSS - Top / Bottom 속성 자동 조정 대상
)
위의 이미지에 보시면 현재 로고와 햄버거 버튼, 검색버튼을 감싸고 있는 태그에 css position:fixed; top:0; 이 적용되어 있습니다. 콘텐츠가 상단에 고정되다 보니 배너 그룹에 가려졌습니다.
이런 콘텐츠를 위해 "CSS - Top / Bottom 속성 자동 조정 대상" 입력을 지원합니다.
우선 가려진 콘텐츠가 #header (ID="header") 라고 가정했을때
"CSS - Top / Bottom 속성" 자동 조정 대상에 #header 라고 입력을 하시면 아래와 같이 배너의 높이만큼 css top / bottom 값을 조정합니다.
)
(위 이미지는 고정 여부 - '사용함' 으로 설정, CSS - Top / Bottom 속성 - '#header' 를 입력했습니다.)
고정여부 참고사항)
고정여부 사용의 경우 같은 방향으로 1개의 배너그룹만 사용이 가능합니다.
(사용중인 배너그룹 중 이미 같은 방향으로 고정되어 있는 배너그룹이 있을 경우 설정이 불가능합니다.)
2) 랜더링시 노출여부
홈페이지 처음 접속했을때 노출하고 있을지 아니면 숨겨놓을지 설정이 가능합니다.
'숨김' 으로 설정할 경우 토글버튼이 자동 활성화 됩니다.
3) 토글버튼
토글버튼을 통해 배너를 숨기기 / 노출하기 기능을 사용할 수 있습니다.
버튼을 등록하지 않았을 경우 버튼 위치에 기본 텍스트만 출력됩니다.
열기 버튼, 닫기 버튼 둘다 등록시에 각 상황에 맞게끔 버튼이미지가 출력됩니다.
토글 버튼 위치는 배너 최대사이즈에 따른 우측 또는 좌측으로 설정이 됩니다.
토글 버튼 사용시 "CSS - Top / Bottom 속성" 기능은 무시됩니다.
)
(위 이미지는 고정 여부 '사용함', 토글 버튼 '사용함', 토글버튼 이미지 등록 안함 으로 설정 후 열려있을 때 화면입니다.)
)
(위 이미지는 고정 여부 '사용함', 토글 버튼 '사용함', 토글 버튼 이미지 등록 안함으로 설정 후 닫혀있을 때 화면입니다.)
많이 길었지만 여기까지가 배너 그룹의 설정이였습니다.
이제 이미지와 링크만 지정하면 되니 닫지 마시고 끝까지 확인해 주세요.
버튼 이미지 & 링크설정)
배너그룹을 생성하면 리스트 페이지에 아래와 같이 생성되며 우측에 '버튼관리' 를 클릭하시면 팝업창이 나옵니다.
)
아래의 팝업창에서 순서, 링크, hover 기능까지 모두 관리가 가능합니다.
(hover 이미지는 마우스를 올렸을 때 변동될 이미지를 말합니다. 기본 이미지와 비율, 사이즈가 동일하게 등록해야 별도의 흔들림 없이 교체됩니다.)
)
우측 '버튼 추가'를 통해 새로 추가가 가능하며 이미 등록된 이미지의 경우 좌측 등록된 이미지를 누르면 설정을 변경할 수 있습니다.
)
버튼 이미지와 링크등록이 끝났다면 홈페이지에서 확인해 주세요.
열기 닫기