배너 디자인하기

배경, 색상, 간격, 닫기 버튼, 바 전체를 링크로 만드는 방법을 알아보세요.

Design 패널은 빌더 레일의 브러시 아이콘입니다. 요소 자체를 제외하고 바의 모양에 관한 모든 것을 이곳에서 설정해요.

Design 설정은 요소 하나가 아니라 바 전체에 적용됩니다.

모양 및 배경

배경 스타일은 세 가지입니다.

설정	적용 대상
Font	글꼴입니다. 바에 별도 글꼴이 필요하지 않다면 테마 글꼴로 두세요.
Text	바의 텍스트 색상
Accent	버튼, 할인 코드, 카운트다운 (개별 색상을 지정하지 않은 경우)

이해해 둘 만한 항목은 Accent입니다. 한 번 설정하면 버튼, 코드 테두리, 타이머가 모두 따라갑니다. 요소에 고유한 색상을 지정하면 그 요소는 더 이상 따라가지 않습니다.

고객이 바와 상호작용할 때 일어나는 일에 관한 두 가지 별개의 설정입니다.

켜면 바 끝에 **×**가 나타납니다. 색상과 마우스를 올렸을 때의 색상을 설정하세요.

고객이 배너를 닫으면 해당 고객에게는 계속 닫힌 상태로 유지됩니다. 앱이 고객의 브라우저에 이를 기억해 두므로 다음 페이지에서 다시 나타나지 않습니다.

이 옵션을 켜면 바의 어느 곳을 클릭하든 아래에서 설정한 링크가 열립니다. Open in a new tab을 켜면 스토어가 뒤쪽에 열린 채로 유지됩니다.

바 안의 버튼이나 할인 코드를 클릭하면 여전히 각자의 동작이 실행됩니다. 바 링크가 이를 가로채지 않습니다.

바 안에서 요소가 정렬되는 방식입니다.

설정	기능
Alignment	왼쪽, 가운데, 오른쪽 또는 균등 배치
Gap between elements	요소 사이의 간격
Wrap on small screens	켜면 공간이 부족할 때 행이 다음 줄로 줄바꿈됩니다. 끄면 행이 압축되며, 긴 메시지가 잘릴 수 있습니다.

Vertical padding은 바의 높이입니다. Horizontal padding은 양 끝의 여백입니다.

얇은 바는 공지처럼 보이고, 높은 바는 페이지의 한 섹션처럼 보입니다. 대부분의 공지 바는 얇은 쪽이 어울립니다.

패널 맨 아래의 **Custom CSS (Developer Zone)**에는 이 배너 안에서만 적용되는 규칙을 입력할 수 있습니다. 나머지 테마에는 영향을 주지 않습니다.

텍스트 그림자, 자간, 특정 요소의 다른 테두리처럼 패널에서 다루지 않는 항목에 사용하세요.

도움이 되었나요?