콘텐츠 블록 안내
제목과 이미지부터 후기, FAQ, 폼까지 에디터의 모든 콘텐츠 블록을 용도와 주요 설정과 함께 소개하는 안내서입니다.
스토어의 모든 페이지는 블록으로 만들어집니다. 이 문서에서는 에디터 왼쪽 패널에 있는 콘텐츠 블록의 용도와 주요 설정을 정리했습니다. 상품을 보여 주고 장바구니와 결제를 처리하는 블록은 스토어 블록: 상품 그리드, 상품, 장바구니, 결제에 있습니다.
모든 블록에 있는 설정
페이지에서 블록을 클릭하면 설정이 열립니다. 대부분의 블록은 설정을 일반, 모양, 타이포그래피로 나누어 보여 줍니다. 모든 블록에는 그리드 안의 위치를 정하고 태블릿이나 휴대폰에서 숨길 수 있는 크기와 위치, 그리고 복제와 삭제가 있는 관리도 있습니다. 블록 추가, 이동, 크기 조정하기과 휴대폰과 태블릿에서 사이트가 올바르게 보이게 하기를 참고하세요.
블록에 타이포그래피 설정이 있다면 항상 같은 항목으로 구성됩니다. 서체, 글자 크기, 굵기, 색상, 기울임체, 대소문자, 자간, 줄 간격입니다. 아래 표에서는 이를 "타이포그래피"로만 표기합니다.
기본
| 블록 | 용도 | 주요 설정 |
|---|---|---|
| 제목 | 페이지 제목이나 섹션 제목입니다. | 텍스트, 크기(제목 1~제목 6), 정렬, 타이포그래피. |
| 텍스트 | 본문 단락입니다. | 텍스트, 정렬, 타이포그래피. |
| 목록 | 포함 내용처럼 짧은 항목을 나열합니다. | 항목(한 줄에 하나), 표시 기호(체크 표시, 글머리 기호, 대시, 번호 매기기, 없음), 항목 간격, 타이포그래피. |
| 버튼 | 페이지나 주소로 이동하는 버튼입니다. | 라벨, 링크, 스타일(단색, 윤곽선, 은은하게), 정렬, 색상, 모서리 둥글기, 글자 크기, 여백, 전체 너비. |
| 이모지 | 단순한 장식으로 쓰는 큰 이모지 하나입니다. | 이모지(고르거나 직접 입력), 글자 크기, 정렬. |
텍스트와 버튼에 대한 자세한 내용은 텍스트, 제목, 버튼 편집하기를 참고하세요. 버튼의 링크는 메뉴 링크와 같은 방식으로 작동합니다. 메뉴 링크 편집을 참고하세요.
미디어
| 블록 | 용도 | 주요 설정 |
|---|---|---|
| 이미지 | 사진이나 그래픽 한 장입니다. | 이미지, 대체 텍스트(그림을 볼 수 없는 사람을 위한 짧은 설명), 모양(와이드 16:9, 표준 4:3, 정사각형, 원본 비율), 이미지 맞춤(프레임 채우기, 프레임 안에 맞추기), 모서리 둥글기. |
| 갤러리 | 클릭하면 원본 크기로 열 수 있는 사진 그리드입니다. | 사진, 열 개수(1~6), 그리드 간격, 모양, 모서리 둥글기, 클릭하면 원본 크기로 열기. |
| 동영상 | YouTube 동영상을 페이지에서 재생합니다. | YouTube 링크. Payly는 동영상 파일을 직접 호스팅하지 않습니다. |
| 지도 | 작업실, 매장, 픽업 장소를 보여 주는 Google 지도입니다. | 주소 또는 장소, 확대/축소, 모양, 모서리 둥글기. 검색할 때처럼 주소를 입력하세요. |
갤러리에서는 사진마다 웹 주소, 설명, 선택 사항인 링크를 입력해 추가합니다. 직접 업로드한 사진을 쓰려면 미디어 화면에서 사진의 주소를 복사하세요. 이미지 추가 및 미디어 라이브러리 사용을 참고하세요.
레이아웃
| 블록 | 용도 | 주요 설정 |
|---|---|---|
| 컨테이너 | 다른 블록을 담는 상자로, 하나의 덩어리로 꾸미고 옮길 수 있습니다. | 내부 레이아웃(자유 그리드, 세로 쌓기, 가로 나열), 그리드 간격, 항목 정렬, 배경색, 테두리 색상, 모서리 둥글기, 여백, 최소 높이. |
| 그리드 | 셀마다 블록을 넣는 행과 열의 표입니다. 휴대폰에서는 한 열이 됩니다. | 열 개수와 행 개수(각각 1~8), 그리드 간격, 항목 정렬, 셀 테두리, 색상, 여백. |
| 구분선 | 페이지의 두 부분 사이에 넣는 얇은 선입니다. | 색상, 두께. |
| 여백 | 블록 사이의 빈 공간입니다. | 높이. |
컨테이너와 그리드로 레이아웃 만들기를 참고하세요.
마케팅
| 블록 | 용도 | 주요 설정 |
|---|---|---|
| 공지 바 | 배송 혜택 같은 짧은 메시지를 보여 주는 얇은 색상 바입니다. 링크를 넣을 수도 있습니다. | 텍스트, 링크 텍스트, 링크, 정렬, 배경색, 텍스트 색상, 글자 크기. |
| 후기 | 이름, 짧은 설명, 사진, 별점이 함께 들어가는 고객 후기입니다. | 후기 내용, 이름, 설명, 사진, 별점(0~5), 정렬, 색상, 타이포그래피. |
| 로고 스트립 | 내 제품을 판매하는 매장이나 언론 보도처럼 로고를 한 줄로 보여 줍니다. | 로고, 열 개수, 그리드 간격, 로고 높이, 마우스를 올리기 전까지 흑백으로 표시. |
| 카운트다운 | 세일이나 출시 같은 특정 날짜까지 남은 시간을 보여 주는 타이머입니다. | 카운트다운 종료 시각, 시간 종료 시 메시지, 일/시간 라벨 표시, 정렬, 숫자 크기, 색상. |
| 소셜 링크 | 소셜 미디어 계정으로 연결되는 아이콘입니다. | 계정(네트워크와 주소 각각), 스타일(채워진 원, 윤곽선 원, 아이콘만), 아이콘 크기, 그리드 간격, 정렬, 원 색상, 아이콘 색상. |
모든 페이지에 공지 바를 보이게 하려면 헤더에 넣으세요. 카운트다운은 방문자 각자의 시간대에 맞춰 날짜를 읽으므로, 자정은 방문자의 자정을 뜻합니다. 소셜 링크로는 Instagram, Facebook, TikTok, X, YouTube, LinkedIn, Pinterest, WhatsApp, 이메일, 웹사이트를 사용할 수 있습니다.
메뉴 및 폼
| 블록 | 용도 | 주요 설정 |
|---|---|---|
| 폼 | 받은 메시지가 이메일로 전달되는 문의 폼입니다. | 폼 제목, 설명, 필드, 제출 버튼 텍스트, 제출 후 메시지, 색상. |
| FAQ | 누르면 답변이 펼쳐지는 질문 목록입니다. | 제목, 질문(질문과 답변 각각), 첫 번째 답변 펼치기, 한 번에 하나만 펼치기, 배경색, 타이포그래피. |
| 메뉴 | 로고와 메뉴입니다. 이미 헤더에 들어 있습니다. | 사이트 로고, 워드마크, 로고 높이, 레이아웃, 장바구니 버튼 표시, 링크, 색상. |
| 링크 목록 | 푸터에서처럼 제목이 있는 링크 열입니다. | 열 제목, 링크, 배경색, 서체, 색상, 글자 크기. |
문의 폼 추가하기, 메뉴 링크 편집, 헤더와 푸터 맞춤 설정을 참고하세요.