메인 편집
상단(헤더)·하단(푸터)을 제외한 페이지 중간 영역을 편집하는 메뉴예요.
메인 페이지
메인에는 이벤트 배너, 메인 진열 상품 등 쇼핑몰의 핵심 정보를 요약해서 보여줘요.
섹션
섹션 개념
섹션은 메인페이지를 위에서 아래로 나누는 레이아웃 단위예요.
메인 페이지는 여러 개의 섹션으로 구성되며, 각 섹션 안에 하나 이상의 요소를 배치해 디자인해요.
섹션별로 배경색, 여백, 진열 방식 등을 다르게 설정해 구역별로 메인 화면을 만들 수 있어요.
섹션 추가
메인 편집 화면에서 왼쪽 툴바의 섹션 아이콘 버튼을 클릭해요.
오른쪽에 섹션 추가 패널이 열리며, 좌측에서 섹션 종류 선택할수있어요.
기본 섹션 : 요소를 자유롭게 추가하고 배치할 수 있는 기본적인 섹션이에요.
디자인 섹션 : 전문가가 미리 디자인해 둔 완성형 섹션을 바로 사용할 수 있어요.
배너 섹션 : 큰 이미지나 홍보 문구가 들어간 배너 영역을 만들어요.
메인 진열 상품 섹션 : 쇼핑몰의 상품 목록을 자동으로 불러와 보여주는 영역이에요.
우측에서 레이아웃을 선택할 수 있어요.
선택한 섹션 종류에 따라 여러 개의 섹션 종류가 미리보기로 노출돼요.
추가 방법
좌측에서 원하는 섹션 종류를 클릭해요.
우측에서 레이아웃 미리보기 카드를 더블클릭 또는 드래그앤 드롭으로 원하는 위치에 배치해요.
더블클릭시 선택된 섹션이 현재 선택한 섹션 아래에 추가돼요. (선택된 섹션이 없으면 페이지 맨 아래에 추가돼요.)
섹션 종류
디자인 섹션/배너 섹션 /메인 진열 상품 섹션이있으며, 메인 편집에서만 사용할 수 있는 전용 섹션이에요.
기본 섹션
열이 나뉘어 있는 가장 기본적인 레이아웃 섹션이에요
1열, 2열, 3열 등의 구조로 텍스트, 이미지, 버튼 등을 자유롭게 배치할 때 사용해요.
디자인 섹션
미리 디자인된 섹션이에에요.
텍스트·이미지·버튼등이 함께 배치되어 있어요.
텍스트, 이미지, 버튼등의 스타일을 바꿀 수 있지만 이동은 불가해요.
일부 2열 디자인 섹션(왼쪽·오른쪽 카드형)은 섹션 전체 설정(배경/여백)과 각 영역(영역 1, 2)의 배경설정이 따로 적용돼요.
1열 배너 최상단에는 [고정형] 1열 배너가 있어요.
[고정형] 1열 배너는 PC/모바일 이미지를 각각 등록할 수 있어요. (단, PC 이미지 미등록 시 [고정형] 1열 배너는 미노출돼요.)
이미지 높이에 따라 섹션 높이가 달라질 수 있어 권장 사이즈를 참고해 등록해 주세요.
editor_smartsync 스킨은 1열배너가 고정형이며, 스마트스토어 배너와 연동되어 노출돼요.
배너 섹션
슬라이딩 배너 종류가 노출돼요.
여러 장의 배너 이미지를 슬라이딩 형태로 노출할 수 있어요.
배치 후 우측 패널에서 자동 재생, 화살표/페이지 표시, 전환 속도 등 슬라이드 옵션을 변경할 수 있어요.
배너 섹션 > 슬라이드배너의 최상단에는 [고정형] 슬라이드 배너가 있어요.
PC/모바일 이미지를 각각 등록할 수 있어요. (단, PC 이미지 미등록 시 [고정형] 슬라이드배너는 미노출돼요.)
이미지 높이에 따라 섹션 높이가 달라질 수 있어 권장 사이즈를 참고해 등록해 주세요.
editor_smartsync 스킨은 슬라이드 배너가 고정형이며, 스마트스토어 배너와 연동되어 노출돼요.
메인 진열 상품 섹션
쇼핑몰의 상품을 불러와 보여주는 섹션이에요.
메이크샵>상품>진열>메인 진열 설정에서 지정한 배열/상품 구성이 그대로 적용돼요.상품 리스트 클릭 시, 제목, 상품정보 노출 여부 등만 설정하고, 실제 어떤 상품이 들어갈지에 대한 설정은 메인 진열 설정 화면에서 관리해요.
각 메인 진열 상품 코너는 1개씩만 추가할 수 있어요.
섹션 편집
섹션을 클릭하면 섹션이 잡혀요.
섹션 영역을 잡아 섹션을 원하는 곳에 이동 시킬수있어요.
섹션 영역을 마우스 우클릭 하여 잘라내기/복사하기/삭제할 수 있어요.
좌측 레이어 구조 패널에서 섹션 이름을 클릭해 선택할 수 있어요.
요소
요소 개념
요소는 섹션 안에 들어가는 실제 콘텐츠 단위에요.
메인에서 사용 가능한 요소 예시
텍스트 : 제목/본문/설명 문구
기본 텍스트 : [기본 디자인 설정]에서 설정된 텍스트가 노출 돼요
기본 텍스트 요소를 우측 "텍스트 설정" 에서 설정값 변경을 할 경우 개별 텍스트(개별 속성)으로 변경 되요
개별 텍스트 : [기본 디자인 설정]에서 설정된 텍스트와 상관 없이 개별 디자인으로 노출 요
이미지 : 배너 이미지, 아이콘 이미지 등
이미지 등록 : 이미지 라이브러리에 업로드한 이미지를 노출 할 수 있어요
무료 이미지 : #빌더에서 제공 하는 무료 이미지를 노출 할 수 있어요
버튼 : 링크/이동 버튼, 더보기 버튼 등
요소 추가
요소를 배치하고 싶은 섹션의 셀(열) 영역을 클릭해 선택합니다.
좌측 요소 패널에서 원하는 요소를 더블클릭하거나, 드래그 앤 드롭으로 셀 안에 끌어다 놓아 배치해요.
요소 편집
메인 페이지에서는 텍스트, 이미지, 버튼 요소를 조합해 섹션을 구성해요.
요소를 클릭하면 선택 상태가 되고, 해당 요소에 맞는 속성 패널이 열려요.
텍스트 요소
텍스트 박스를 더블클릭하여 텍스트 문구를 수정할 수 있어요.
링크/글꼴/크기/색상, 정렬, 줄 간격 등을 수정할 수 있어요
텍스트 크기는 8px ~ 8px 안에서 입력 할 수 있어요.
줄간격은 1 ~ 3범위에서 입력 할 수 있으며, 기본 줄간격 은 1.4에요.
글자 간격은 -1 ~ 3 범위에서 입력 할 수 있으며, 기본 글자 간격은 0이에요.
이미지 요소
이미지 등록 : 이미지 라이브러리에 업로드한 이미지를 노출 할 수 있어요
이미지 요소 추가후 요소를 더블 클릭 하거나, 우측 설정 메뉴에서 [이미지 관리]버튼 클릭
사용자 폴더 : 업로드 한 이미지
무료 이미지 : #빌더 제공하는 무료이미지
버튼 요소
버튼 문구, 링크 URL, 정렬, 색상/테두리/모서리 등 스타일을 변경할 수 있어요.
요소는 드래그로 위치를 옮기거나, 마우스 우클릭하여 잘라내기/복사하기/삭제할 수 있어요.
Last updated