> For the complete documentation index, see [llms.txt](https://help.makeshop.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.makeshop.co.kr/manual/design/builder/undefined-2.md).

# 메인 편집

상단(헤더)·하단(푸터)을 제외한 페이지 중간 영역을 편집하는 메뉴예요.

## 메인 페이지

* 메인에는 이벤트 배너,  메인 진열 상품 등 쇼핑몰의 핵심 정보를 요약해서 보여줘요.

## 섹션

### 섹션 개념 

* 섹션은 메인페이지를 위에서 아래로 나누는 <mark style="color:blue;">**레이아웃 단위예요.**</mark>&#x20;
* 메인 페이지는 여러 개의 섹션으로 구성되며,  각 섹션 안에 하나 이상의 요소를 배치해 디자인해요.&#x20;
* 섹션별로 배경색, 여백, 진열 방식 등을 다르게 설정해 구역별로 메인 화면을 만들 수 있어요.&#x20;

### 섹션 추가 <a href="#undefined-3" id="undefined-3"></a>

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FIMVGeMj7XDxOH8s7MIpf%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EA%B8%B0%EB%B3%B8%20%EC%84%B9%EC%85%98.png?alt=media&amp;token=86d0da70-73cd-422a-9091-d6916595426a" alt="" width="375"><figcaption></figcaption></figure>

1. 메인 편집 화면에서 <mark style="color:blue;">**왼쪽 툴바의 섹션 아이콘 버튼**</mark>을 클릭해요.
2. 오른쪽에 <mark style="color:blue;">**섹션 추가 패널**</mark>이 열리며, 좌측에서 섹션 종류 선택할수있어요.

* <mark style="color:blue;">**기본 섹션 :**</mark> 요소를 자유롭게 추가하고 배치할 수 있는 기본적인 섹션이에요.
* <mark style="color:blue;">**디자인 섹션 :**</mark> 전문가가 미리 디자인해 둔 완성형  섹션을 바로 사용할 수 있어요.
* <mark style="color:blue;">**배너 섹션 :**</mark> 큰 이미지나 홍보 문구가 들어간 배너 영역을 만들어요.
* <mark style="color:blue;">**메인 진열 상품 섹션 :**</mark> 쇼핑몰의 상품 목록을 자동으로 불러와 보여주는 영역이에요.

3. 우측에서 레이아웃을 선택할 수 있어요.

* 선택한 섹션 종류에 따라 여러 개의 섹션 종류가 미리보기로 노출돼요.

{% hint style="info" %}
**추가 방법**

1. 좌측에서 원하는 섹션 종류를 클릭해요.
2. 우측에서 레이아웃 미리보기 카드를 더블클릭 또는 드래그앤 드롭으로 원하는 위치에 배치해요.
3. 더블클릭시 선택된 섹션이 <mark style="color:blue;">**현재 선택한 섹션 아래**</mark>에 추가돼요. (선택된 섹션이 없으면 페이지 맨 아래에 추가돼요.)
   {% endhint %}

***

### 섹션 종류

* 디자인 섹션/배너 섹션 /메인 진열 상품 섹션이있으며, <mark style="color:blue;">**메인 편집에서만 사용할 수 있는 전용 섹션**</mark>이에요.
* **기본 섹션**&#x20;
  * 열이 나뉘어 있는 <mark style="color:blue;">**가장 기본적인 레이아웃 섹션이에요**</mark>
  * 1열, 2열, 3열 등의 구조로 텍스트, 이미지, 버튼 등을 자유롭게 배치할 때 사용해요.&#x20;

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FfdOa2iyA2kAuZ2jYAfFC%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EA%B8%B0%EB%B3%B8%20%EC%84%B9%EC%85%98%20(2).png?alt=media&amp;token=fb0294fb-bdbb-43c0-9d8d-eb3a82983c6a" alt="" width="375"><figcaption></figcaption></figure>

* **디자인 섹션**

  * 미리 <mark style="color:blue;">**디자인된 섹션**</mark>이에에요.&#x20;
  * 텍스트·이미지·버튼등이 함께 배치되어 있어요.&#x20;
  * 텍스트, 이미지, 버튼등의 스타일을 바꿀 수 있지만 이동은 불가해요.&#x20;
  * 일부 2열 디자인 섹션(왼쪽·오른쪽 카드형)은 섹션 전체 설정(배경/여백)과 각 영역(영역 1, 2)의 배경설정이 따로 적용돼요.&#x20;
  * 1열 배너 최상단에는 <mark style="color:$primary;">**\[고정형] 1열 배너**</mark>가 있어요.&#x20;
    * \[고정형] 1열 배너는 PC/모바일 이미지를 각각 등록할 수 있어요. (단, PC 이미지 미등록 시 \[고정형] 1열 배너는 미노출돼요.)&#x20;
    * 이미지 높이에 따라 섹션 높이가 달라질 수 있어 권장 사이즈를 참고해 등록해 주세요.
    * editor\_smartsync 스킨은 1열배너가 고정형이며, 스마트스토어 배너와 연동되어 노출돼요.

  <figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2Fmc9uoLK6IiNCx66fZ1bG%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EB%94%94%EC%9E%90%EC%9D%B8%20%EC%84%B9%EC%85%98.png?alt=media&amp;token=bebcf416-9355-4460-a8f5-dcb6fcbb7198" alt=""><figcaption></figcaption></figure>

* **배너 섹션**

  * 슬라이딩 배너 종류가 노출돼요.&#x20;
  * 여러 장의 배너 이미지를 슬라이딩 형태로 노출할 수 있어요.
  * 배치 후 우측 패널에서 <mark style="color:blue;">**자동 재생, 화살표/페이지 표시, 전환 속도**</mark> 등 슬라이드 옵션을 변경할 수 있어요.
  * 배너 섹션 > 슬라이드배너의 최상단에는 <mark style="color:$primary;">**\[고정형] 슬라이드 배너**</mark>가 있어요.&#x20;
    * **PC/모바일 이미지를 각각 등록할 수 있어요.** (단, PC 이미지 미등록 시 \[고정형] 슬라이드배너는 미노출돼요.)&#x20;
    * 이미지 높이에 따라 섹션 높이가 달라질 수 있어 권장 사이즈를 참고해 등록해 주세요.
    * editor\_smartsync 스킨은 슬라이드 배너가 고정형이며, 스마트스토어 배너와 연동되어 노출돼요.

  <figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FRqqv1q1V8s6EDSRKolLW%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%94%A9%20%EB%B0%B0%EB%84%88.png?alt=media&amp;token=763c9b7a-569a-4785-87c3-c3f02a3a8aa9" alt="" width="563"><figcaption></figcaption></figure>

* **메인 진열 상품 섹션**
  * 쇼핑몰의 상품을 불러와 보여주는 섹션이에요.&#x20;
  * `메이크샵` > `상품` > `진열` > `메인 진열 설정` 에서 지정한 배열/상품 구성이 그대로 적용돼요.
  * 상품 리스트 클릭 시, 제목, 상품정보 노출 여부 등만 설정하고, 실제 어떤 상품이 들어갈지에 대한 설정은 <mark style="color:blue;">**메인 진열 설정 화면에서 관리**</mark>해요.&#x20;

{% hint style="info" %}
각 메인 진열 상품 코너는 1개씩만 추가할 수 있어요.&#x20;
{% endhint %}

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FJl6RyUIbnPb5sORajQmA%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%94%A9%20%EB%B0%B0%EB%84%88%20(1).png?alt=media&amp;token=2c473037-a779-4ff8-939a-b9dbb20e1b30" alt=""><figcaption></figcaption></figure>

<br>

***

### 섹션 편집

* 섹션을 클릭하면 섹션이 잡혀요.&#x20;
* 섹션 영역을 잡아 섹션을  원하는 곳에 이동 시킬수있어요.
* 섹션 영역을 마우스 우클릭 하여 잘라내기/복사하기/삭제할 수 있어요.&#x20;

{% hint style="info" %}
좌측 `레이어 구조` 패널에서 섹션 이름을 클릭해 선택할 수 있어요.
{% endhint %}

## 요소&#x20;

### 요소 개념 <a href="#undefined-7" id="undefined-7"></a>

* 요소는 섹션 안에 들어가는 <mark style="color:blue;">**실제 콘텐츠 단위에요.**</mark>&#x20;
* 메인에서 사용 가능한 요소 예시
  * **텍스트** : 제목/본문/설명 문구
    * 기본 텍스트 : \[기본 디자인 설정]에서 설정된 텍스트가 노출 돼요
      * 기본 텍스트 요소를 우측 "텍스트  설정" 에서 설정값 변경을 할 경우 개별  텍스트(개별 속성)으로 변경 되요
    * 개별 텍스트 : \[기본 디자인 설정]에서 설정된 텍스트와 상관 없이 개별 디자인으로 노출 요
  * **이미지** : 배너 이미지, 아이콘 이미지 등
    * 이미지 등록 : 이미지 라이브러리에 업로드한 이미지를 노출 할 수 있어요
    * 무료 이미지 :  #빌더에서 제공 하는 무료 이미지를 노출 할 수 있어요
  * **버튼** : 링크/이동 버튼, 더보기 버튼 등

***

### 요소 추가 <a href="#undefined-8" id="undefined-8"></a>

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2Fpeiyn12xFFQDU4bO5s0T%2F%EC%9A%94%EC%86%8C%20%EC%B6%94%EA%B0%80%20_%20%ED%85%8D%EC%8A%A4%ED%8A%B8.png?alt=media&amp;token=8a92650c-2fa4-4b44-b55a-07c538e1eb95" alt=""><figcaption></figcaption></figure>

* 요소를 배치하고 싶은 섹션의 <mark style="color:blue;">**셀(열) 영역**</mark>을 클릭해 선택합니다.
* 좌측 요소 패널에서 원하는 요소를 더블클릭하거나, 드래그 앤 드롭으로 셀 안에 끌어다 놓아 배치해요.

***

### 요소 편집

<figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2F8aLIYWaRkyWZBqIMw7OA%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EA%B8%B0%EB%B3%B8%20%EC%84%B9%EC%85%98%20_%20%EC%9A%94%EC%86%8C%20%EC%88%98%EC%A0%95.png?alt=media&amp;token=37f8db23-387e-4444-886f-08740e06d752" alt=""><figcaption></figcaption></figure>

* 메인 페이지에서는 텍스트, 이미지, 버튼 요소를 조합해 섹션을 구성해요.

* 요소를 클릭하면 선택 상태가 되고, 해당 요소에 맞는 <mark style="color:blue;">**속성 패널**</mark>이 열려요.&#x20;

* **텍스트 요소**

  * 텍스트 박스를 더블클릭하여 텍스트 문구를 수정할 수 있어요.&#x20;
  * 링크/글꼴/크기/색상, 정렬, 줄 간격 등을 수정할 수 있어요&#x20;
  * 텍스트 크기는 8px \~ 8px 안에서 입력 할 수 있어요.&#x20;
  * 줄간격은 1 \~ 3범위에서 입력 할 수 있으며, 기본  줄간격 은 1.4에요.&#x20;
  * 글자 간격은 -1 \~ 3 범위에서 입력 할 수 있으며, 기본 글자 간격은 0이에요.&#x20;

  <figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2F4DseCJMRfITlyZTco0nT%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%ED%85%8D%EC%8A%A4%ED%8A%B8%20%EC%9A%94%EC%86%8C%20(1).png?alt=media&amp;token=27792b70-44bf-4e31-98ea-7166c035ceb9" alt=""><figcaption></figcaption></figure>

* **이미지 요소**
  * 이미지 등록 : 이미지 라이브러리에 업로드한 이미지를 노출 할 수 있어요
  * 이미지 요소 추가후 요소를 더블 클릭 하거나, 우측 설정 메뉴에서 \[이미지 관리]버튼 클릭

    * 사용자 폴더 : 업로드 한 이미지

    <figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FEa2K5wD2Wt7tOAkO5tmG%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EC%9A%94%EC%86%8C.png?alt=media&amp;token=92ec8f68-92c0-4f61-a1b9-93343f836ac9" alt=""><figcaption></figcaption></figure>

    * 무료 이미지 : #빌더 제공하는  무료이미지

    <figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2F38ANli8kgMfhqdbeWqHZ%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EB%AC%B4%EB%A3%8C%20%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EC%9A%94%EC%86%8C.png?alt=media&amp;token=720c61a5-ab24-4c3e-ae8a-3085781262d5" alt="" width="375"><figcaption></figcaption></figure>

* **버튼 요소**

  * 버튼 문구, 링크 URL, 정렬, 색상/테두리/모서리 등 스타일을 변경할 수 있어요.&#x20;

  <figure><img src="https://3607863916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOy1iiAFI4nA1SH1UFEa0%2Fuploads%2FX6eGEskzmo6ykNchI1er%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80%20_%20%EB%B2%84%ED%8A%BC%20%EC%9A%94%EC%86%8C.png?alt=media&amp;token=069bcdc0-a971-455f-83ef-59f039020e40" alt=""><figcaption></figcaption></figure>

* 요소는 드래그로 위치를 옮기거나, 마우스 우클릭하여 잘라내기/복사하기/삭제할 수 있어요.&#x20;