Search

커스텀 섹션 활용하기

커스텀 섹션 살펴보기

커스텀 섹션은 하나의 섹션 내에 다양한 블록을 추가하고, 색상, 크기, 여백 등 여러 디자인 요소를 자유롭게 설정할 수 있는 섹션이에요.
원하는 블록들을 그룹 블록으로 묶어서 디자인을 더욱 효율적이고 일관성 있게 관리할 수 있어요.
커스텀 섹션, 이래서 좋아요! - 일반 섹션보다 더 많은 커스텀 옵션과 고급 기능을 제공해요. - 편집의 자유도가 높고, 데스크톱/모바일 기기별 설정을 지원해요. 제공 예정 - 나만의 요소와 레이아웃으로 다른 쇼핑몰과 차별화된 디자인을 할 수 있어요.

섹션 추가하기

섹션은 여러 블록을 담아내는 컨테이너의 역할을 해요. 색상 크기 레이아웃 여백을 설정할 수 있고, 특히 섹션의 레이아웃은 내부 블록의 정렬 방식을 결정해요.
왼쪽 메인 패널의 [섹션] 영역 중 콘텐츠를 추가하고 싶은 영역(헤더 영역, 본문 영역, 푸터 영역) 옆 + 아이콘을 클릭 후, 나타나는 창에서 커스텀 섹션을 추가하기 해 주세요.

커스텀 섹션 디자인 구성하기

추가된 커스텀 섹션을 선택하면 오른쪽 패널에서 섹션에 적용될 디자인을 수정할 수 있습니다.
섹션의 모든 속성에 대해 데스크톱/모바일 개별 설정이 지원될 예정입니다.
스타일
색상 구성 : 섹션과 내부 블록에 공통으로 적용할 색상 구성을 선택할 수 있습니다. 자세한 방법은 색상 구성하기 가이드를 참고해 주세요.
크기 (Grid 테마는 가득 채우기로 고정)
너비 : 섹션의 너비를 가득 채우기, 그리드 맞추기 중에 선택할 수 있습니다.
레이아웃
정렬 방향 : 섹션 내부 블록의 정렬 방향을 가로, 세로 중에 선택할 수 있습니다.
모바일/데스크톱 줄바꿈 : 모바일 기기와 데스크톱에서의 줄바꿈 여부를 각각 사용, 사용 안 함 중에 선택할 수 있습니다.
메인 축 정렬
정렬 방향이 가로일 때 : 블록의 정렬 방식을 왼쪽, 가운데, 오른쪽 중에 선택할 수 있습니다.
정렬 방향이 세로일 때 : 블록의 정렬 방식을 위, 가운데, 아래 중에 선택할 수 있습니다.
서브 축 정렬
정렬 방향이 가로일 때 : 블록의 정렬 방식을 위, 가운데, 아래 중에 선택할 수 있습니다.
정렬 방향이 세로일 때 : 블록의 정렬 방식을 왼쪽, 가운데, 오른쪽 중에 선택할 수 있습니다.
메인 축서브 축 개념이 혼동되신다면 FAQ 1번을 참고해 주세요.
가로/세로 간격 : 섹션 내부 블록의 가로/세로 간격최소 0px~최대 400px 중에 설정할 수 있습니다.
모바일/데스크톱 여백
모바일 기기와 데스크톱에서의 섹션 상하좌우 여백을 각각 최소 0px~최대 400px 중에 설정할 수 있습니다.

블록 추가하기

블록은 섹션 안에서 콘텐츠를 구성하는 각각의 요소 단위를 의미해요. 제공 중 그룹, 이미지, 텍스트, 버튼, 동영상, 선, html 제공 예정 상품, 슬라이드, 앱 …
블록 사용 전에 확인해 주세요! - 섹션 안에 블록은 최대 50개까지 추가되고, 블록 하단의 블록 추가(+)를 통해 최대 8개까지 중첩될 수 있어요. (아래 이미지 참고)
- 블록은 크기 여백 을 설정할 수 있고 각 블록 특성에 맞는 개별 속성이 제공될 수 있어요. - 블록의 색상은 상위 컨테이너인 섹션 또는 그룹 블록의 색상 구성을 따릅니다.
블록 기능이 더 좋아질 예정이에요! - 블록의 모든 속성에 대해 데스크톱/모바일 개별 설정이 지원될 예정입니다. - 블록 특성에 맞는 개별 속성이 제공될 예정입니다.
왼쪽 메인 패널의 [섹션] 영역에 추가된 커스텀 섹션을 펼친 상태로 +블록 추가 해 주세요. 원하는 콘텐츠를 블록 단위로 추가할 수 있습니다.

그룹 블록

그룹 블록은 하위 블록을 그룹으로 묶는 역할을 해요. - 다양한 블록을 그룹 블록으로 묶어서 레이아웃을 자유롭게 구현할 수 있어요. - 그룹 블록은 하위에 포함된 요소들의 색상 구성과 레이아웃을 설정하는 속성이 제공되어요.
스타일
색상 구성 : 섹션과 내부 블록에 공통으로 적용할 색상 구성을 선택할 수 있습니다. 자세한 방법은 색상 구성하기 가이드를 참고해 주세요.
크기
너비 : 섹션에서 블록이 차지할 공간의 너비를 비율 설정, 콘텐츠 크기에 맞춤 중에 선택할 수 있습니다.
레이아웃
정렬 방향 : 섹션 내부 블록의 정렬 방향을 가로, 세로 중에 선택할 수 있습니다.
모바일/데스크톱 줄바꿈 : 모바일 기기와 데스크톱에서의 줄바꿈 여부를 각각 사용, 사용 안 함 중에 선택할 수 있습니다.
메인 축 정렬
정렬 방향이 가로일 때 : 블록의 정렬 방식을 왼쪽, 가운데, 오른쪽 중에 선택할 수 있습니다.
정렬 방향이 세로일 때 : 블록의 정렬 방식을 위, 가운데, 아래 중에 선택할 수 있습니다.
서브 축 정렬
정렬 방향이 가로일 때 : 블록의 정렬 방식을 위, 가운데, 아래 중에 선택할 수 있습니다.
정렬 방향이 세로일 때 : 블록의 정렬 방식을 왼쪽, 가운데, 오른쪽 중에 선택할 수 있습니다.
메인 축서브 축 개념이 혼동되신다면 FAQ 1번을 참고해 주세요.
가로/세로 간격 : 섹션 내부 블록의 가로/세로 간격최소 0px~최대 400px 중에 설정할 수 있습니다.
모바일/데스크톱 여백
모바일 기기와 데스크톱에서의 섹션 상하좌우 여백을 각각 최소 0px~최대 400px 중에 설정할 수 있습니다.

이미지 블록

추가된 이미지 블록을 선택하면 오른쪽 패널에서 이미지를 업로드하고, 디자인을 수정할 수 있습니다.
데이터
모바일, 데스크톱에 각각 다른 이미지를 업로드할 수 있습니다. 5mb 이하의 png, jpg, jpeg, webp, gif 파일만 업로드 가능합니다.
디자인
크기
너비 : 섹션에서 블록이 차지할 공간의 너비를 비율 설정, 콘텐츠 크기에 맞춤 중에 선택할 수 있습니다.
비율
비율 설정 선택 시 : 블록의 비율을 최소 1%~최대 100% 중에 설정할 수 있습니다.
모바일/데스크톱 여백 : 모바일 기기와 데스크톱에서의 블록 상하좌우 여백을 각각 최소 0px~최대 400px 중에 설정할 수 있습니다.

텍스트 블록

추가된 텍스트 블록을 선택하면 오른쪽 패널에서 텍스트를 입력하고, 디자인을 수정할 수 있습니다.
데이터
블록에 노출될 텍스트를 입력해 주세요. 정렬, 볼드, 기울임, 링크 등 원하는 기능을 적용할 수 있습니다.
디자인
크기
너비 : 섹션에서 블록이 차지할 공간의 너비를 비율 설정, 콘텐츠 크기에 맞춤 중에 선택할 수 있습니다.
비율
비율 설정 선택 시 : 블록의 비율을 최소 1%~최대 100% 중에 설정할 수 있습니다.
모바일/데스크톱 여백 : 모바일 기기와 데스크톱에서의 블록 상하좌우 여백을 각각 최소 0px~최대 400px 중에 설정할 수 있습니다.

버튼 블록

추가된 버튼 블록을 선택하면 오른쪽 패널에서 버튼 텍스트와 링크를 설정하고, 디자인을 수정할 수 있습니다.
데이터
버튼 글자 : 버튼으로 설정할 텍스트를 입력해 주세요.
링크 : 버튼을 클릭했을 때 이동할 페이지/상품/카테고리/게시판/게시글/리뷰/문의를 선택하거나 외부 링크 주소를 직접 입력해 주세요.
디자인
크기
너비 : 섹션에서 블록이 차지할 공간의 너비를 비율 설정, 콘텐츠 크기에 맞춤 중에 선택할 수 있습니다.
비율
비율 설정 선택 시 : 블록의 비율을 최소 1%~최대 100% 중에 설정할 수 있습니다.
모바일/데스크톱 여백 : 모바일 기기와 데스크톱에서의 블록 상하좌우 여백을 각각 최소 0px~최대 400px 중에 설정할 수 있습니다.

동영상 블록

추가된 동영상 블록을 선택하면 오른쪽 패널에서 동영상을 업로드하고, 디자인을 수정할 수 있습니다.
데이터
모바일, 데스크톱에 각각 다른 동영상을 업로드할 수 있습니다. 10mb 이하의 mp4 파일만 업로드 가능합니다.
자동 재생 사용 : 동영상의 자동 재생 여부를 선택할 수 있습니다. 설정 시 음 소거는 기본으로 적용됩니다.
음 소거 적용 : 자동 재생 미사용 시 동영상의 음 소거 여부를 선택할 수 있습니다.
동영상 썸네일 : 자동 재생 미사용 시 동영상의 썸네일을 모바일/데스크톱 각각 설정할 수 있습니다. 미설정 시 영상의 첫 이미지가 노출됩니다.
디자인
크기
너비 : 섹션에서 블록이 차지할 공간의 너비를 비율 설정, 콘텐츠 크기에 맞춤 중에 선택할 수 있습니다.
비율
비율 설정 선택 시 : 블록의 비율을 최소 1%~최대 100% 중에 설정할 수 있습니다.
모바일/데스크톱 여백 : 모바일 기기와 데스크톱에서의 블록 상하좌우 여백을 각각 최소 0px~최대 400px 중에 설정할 수 있습니다.

선 블록

추가된 블록을 선택하면 오른쪽 패널에서 너비와 여백을 수정할 수 있습니다.
크기
너비 : 섹션에서 블록이 차지할 공간의 너비를 비율 설정, 콘텐츠 크기에 맞춤 중에 선택할 수 있습니다.
모바일/데스크톱 여백 : 모바일 기기와 데스크톱에서의 블록 상하좌우 여백을 각각 최소 0px~최대 400px 중에 설정할 수 있습니다.

html 블록

추가된 html 블록을 선택하면 오른쪽 패널에서 html 코드를 입력할 수 있습니다.
데이터
공통 코드 및 모바일/데스크톱 기기별 코드를 입력할 수 있습니다. 활용할 수 있는 기능은 HTML 섹션 가이드를 참고해 보세요.
디자인
크기
너비 : 섹션에서 블록이 차지할 공간의 너비를 비율 설정, 콘텐츠 크기에 맞춤 중에 선택할 수 있습니다.
비율
비율 설정 선택 시 : 블록의 비율을 최소 1%~최대 100% 중에 설정할 수 있습니다.
모바일/데스크톱 여백 : 모바일 기기와 데스크톱에서의 블록 상하좌우 여백을 각각 최소 0px~최대 400px 중에 설정할 수 있습니다.
외에도, 더 많은 블록들을 준비하고 있으니 잠시만 기다려 주세요!
Q1. 메인 축과 서브 축이 무엇인가요?
Q2. 줄바꿈을 ‘사용’ 설정해도 여전히 블록들이 한 줄로 나열돼요.