바 콘텐츠 및 요소
바에 넣을 수 있는 여섯 가지 요소, 순서 정하는 방법, 그룹으로 한 배너에 두 가지 메시지를 담는 방법을 알아보세요.
Content 패널은 빌더 레일의 첫 번째 아이콘입니다. 바에 표시되는 모든 내용을 이곳에서 관리해요.
요소는 이 목록에 있는 순서대로 바에서 왼쪽에서 오른쪽으로 배치됩니다.
추가 및 순서 정하기
섹션 제목: “추가 및 순서 정하기”- Add element를 클릭하면 여섯 가지 종류의 메뉴가 열립니다. 새 요소는 목록 맨 끝에 추가됩니다.
- 행 왼쪽의 핸들을 드래그하여 이동하세요. 바는 여기에 있는 순서를 따릅니다.
- 행 위에 마우스를 올리면 복제 및 삭제 버튼이 나타납니다.
- 행을 클릭하면 오른쪽 열에 해당 요소의 설정이 열립니다.
여섯 가지 요소
섹션 제목: “여섯 가지 요소”Text
섹션 제목: “Text”메시지입니다. 문구, 크기, 굵게, 기울임, 밑줄, 고유한 색상을 설정할 수 있어요.
색상을 비워 두면 텍스트가 바 자체의 텍스트 색상을 따르므로, 바의 스타일을 바꾸면 메시지도 함께 바뀝니다.
Countdown
섹션 제목: “Countdown”바 안에 표시되는 실시간 타이머입니다. 세 가지 모드가 있습니다.
| 모드 | 고객에게 보이는 내용 |
|---|---|
| Count down to a date | 모든 고객에게 같은 남은 시간이 표시됩니다 |
| Fixed minutes per visitor | 고객마다 방문한 시점부터 각자의 타이머가 시작됩니다 |
| Daily recurring | 선택한 요일의 두 시간대 사이에 작동합니다 |
표시할 단위(일, 시간, 분, 초), 숫자 아래에 단위 캡션을 표시할지 여부, 캡션 문구도 선택할 수 있습니다. 캡션을 비워 두면 영어 기본값이 사용됩니다.
When the timer ends는 0이 되었을 때의 동작을 정합니다. 배너 숨기기, 0으로 유지하기, 다시 시작하기 중에서 선택할 수 있어요.
Button
섹션 제목: “Button”레이블과 동작으로 구성됩니다.
| 클릭 시 | 동작 |
|---|---|
| Open a link | 고객을 URL로 이동시킵니다 |
| Scroll to a section | CSS 선택자로 현재 페이지의 특정 부분으로 이동합니다 |
| Apply a discount code | 고객의 장바구니에 코드를 적용합니다 |
링크의 경우 Open in a new tab을 켤 수도 있으며, 이렇게 하면 스토어가 뒤쪽에 열린 채로 유지됩니다.
나머지는 스타일 설정입니다. 모양(사각형, 둥근 모서리, 알약형), 글꼴 크기, 크기 프리셋, 굵게/기울임/밑줄, 배경, 레이블 색상, 테두리를 설정할 수 있어요.
Discount code
섹션 제목: “Discount code”점선 테두리 안에 표시되는 코드 자체입니다. Copy on click을 켜면 고객이 코드를 클릭하는 것만으로 복사할 수 있어요. 선택하거나 입력할 필요가 없습니다.
테두리 스타일, 모서리 반경, 고유한 색상으로 스타일을 지정하세요.
Image
섹션 제목: “Image”로고나 배지입니다. URL을 붙여넣거나 파일을 업로드하면 필드가 자동으로 채워집니다. 높이와 대체 텍스트를 설정하세요.
대체 텍스트는 스크린 리더가 읽어 주는 내용이며, 이미지가 로드되지 않을 때 표시되는 내용이기도 합니다.
Line break
섹션 제목: “Line break”눈에 보이는 것은 없습니다. 이 요소 뒤의 모든 내용이 새 줄에서 시작되므로, 긴 바를 한 줄에 억지로 넣지 않고 두 줄로 표시할 수 있습니다.
두 요소 사이로 드래그하여 원하는 위치에서 바를 나누세요.
하나의 요소, 두 가지 화면
섹션 제목: “하나의 요소, 두 가지 화면”줄바꿈을 제외한 요소를 열면 Style 섹션이 Device settings로 시작합니다. 눈, 데스크톱, 휴대폰 아이콘 세 개가 있어요.
Device settings는 Style 맨 위에 있으며, 그 아래의 모든 설정은 선택한 아이콘을 따릅니다.
눈 아이콘은 기본 상태입니다. 설정한 내용이 두 화면 모두에 적용됩니다.
데스크톱 및 휴대폰 아이콘을 선택하면 아래 설정이 해당 화면에만 적용됩니다. 휴대폰을 선택하고 글꼴 크기를 12로 낮추면 휴대폰에만 12가 적용되고, 데스크톱은 눈 아이콘으로 설정한 값을 유지합니다. Style의 모든 항목이 이렇게 나뉩니다. 글꼴 크기, 카운트다운의 숫자와 레이블 크기, 색상과 표시할 단위, 이미지 높이, 버튼의 모양과 크기, 할인 코드의 테두리와 색상이 해당됩니다.
화면을 선택하면 Hide on desktop 또는 Hide on mobile 토글도 나타납니다. 휴대폰에 맞지 않는 요소(긴 문장, 이미지 등)를 배너를 따로 만들지 않고도 숨길 수 있는 방법입니다. 요소는 다른 화면에서는 그대로 표시됩니다.
줄바꿈에는 Style 섹션이 없으므로 대신 기본 Show on 컨트롤이 있습니다. Both screens, Desktop only, Mobile only 중에서 선택할 수 있어요.
그룹: 하나의 배너, 두 가지 메시지
섹션 제목: “그룹: 하나의 배너, 두 가지 메시지”요소 목록 아래에 Add group이 있습니다.
그룹 하나가 기본 상태입니다. 두 번째 그룹을 추가하면 바가 첫 번째 그룹, 두 번째 그룹, 다시 첫 번째 그룹 순서로 번갈아 표시됩니다. 각 그룹은 자기만의 요소를 가지므로, 한 배너가 “Free shipping over $50”와 “Sale ends tonight”를 번갈아 보여줄 수 있어요.
전환 속도와 크로스 페이드 또는 슬라이드 여부는 애니메이션 및 그룹에서 설정합니다.