이런 상황에 필요합니다
카페24로 홈페이지를 운영하면서 이런 불편함을 느껴본 적 있지 않으신가요? "히어로 스플릿 섹션, 텍스트·이미지 자동 전환 랜딩페이지을 적용하고 싶은데 어떻게 구현해야 할지 모르겠다." "개발자 없이 히어로 섹션, 랜딩 페이지을(를) 관리할 방법이 없을까?" "디자인은 완성됐는데 기능만 없어서 아쉽다." 카페24의 기본 에디터만으로는 이런 기능을 직접 구현하기 어렵습니다. 보통은 개발자에게 맡기거나, 복잡한 코드를 직접 수정해야 하는 상황이 생깁니다.
디보로 이렇게 해결합니다
디보는 히어로 스플릿 섹션, 텍스트·이미지 자동 전환 랜딩페이지 무료코드를 제공합니다. 코드를 복사해 카페24 스마트디자인 에디터에서 HTML 파일을 열고 원하는 위치에 붙여넣은 뒤 값을 수정하면 바로 적용됩니다. 좌측 텍스트·CTA 버튼과 우측 이미지를 나란히 배치하는 Apple 스타일 히어로 섹션입니다. 복수의 콘텐츠를 등록하면 5초마다 자동 전환되며 dot 내비게이션으로 직접 선택도 가능합니다. 서비스 소개, 브랜드 랜딩, 이벤트 메인 비주얼에 적합합니다. 콘텐츠를 자주 변경해야 하거나 코드 수정이 부담된다면, 디보 관리자페이지와 연동하는 방법을 선택할 수 있습니다. 관리자페이지에서 설정값을 입력하면 코드를 건드리지 않아도 내용이 자동으로 반영됩니다.
무료코드로 바로 적용하기
카페24 코드위젯에 붙여넣고 날짜만 수정하면 바로 적용됩니다.
- 1
디보 익스텐션 페이지에서 '히어로 스플릿 섹션, 텍스트·이미지 자동 전환 랜딩페이지'의 무료코드를 복사합니다.
- 2
카페24 쇼핑몰 관리자 → 디자인 관리 → 디자인 보관함에서 사용 중인 디자인의 [편집]을 클릭합니다.
- 3
스마트디자인 에디터에서 코드를 삽입할 HTML 파일을 열고 원하는 위치에 코드를 붙여넣습니다.
- 4
코드 내 설정값(텍스트, 색상 등)을 원하는 값으로 수정한 뒤 저장합니다.
- 5
미리보기에서 정상 작동하는지 확인합니다.
디보 관리자페이지로 더 쉽게 관리하기
코드를 수정하지 않고 관리자페이지에서 날짜와 문구를 바꿀 수 있습니다.
- 1
디보 관리자페이지에서 '히어로 스플릿 섹션, 텍스트·이미지 자동 전환 랜딩페이지' 익스텐션을 설치합니다.
- 2
관리자 설정 패널에서 필요한 정보(텍스트, 날짜, 이미지 등)를 입력합니다.
- 3
디보가 제공하는 연동 스크립트를 복사합니다. (스크립트 내에 API 토큰이 포함되어 있습니다.)
- 4
카페24 쇼핑몰 관리자 → 디자인 관리 → 공통 레이아웃 파일(layout.html)의 </head> 태그 바로 위에 스크립트를 붙여넣고 저장합니다.
- 5
이후 내용 변경은 디보 관리자페이지에서만 수정하면 사이트에 자동으로 반영됩니다.
