> 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/undefined-1/builder/undefined-2.md).

# 메인 편집

## 메인 페이지

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

## 섹션

### 섹션 개념 

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

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

<figure><img src="/files/xPF9GbxnStMYyDnADj8q" 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="/files/05jneV78dQbsw7w8bLu8" 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="/files/QX7wtMtqNHlspmMKz6zJ" alt=""><figcaption></figcaption></figure>

* **배너 섹션**

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

  <figure><img src="/files/t2GbYTpnXfkVJb8SKjWS" alt="" width="563"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/Sx8xssZhXMqAaxXso729" 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="/files/o7pCN3LusBLgkCo78PrL" alt=""><figcaption></figcaption></figure>

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

***

### 요소 편집

<figure><img src="/files/jT2EpFufo94W6wktQzKB" 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="/files/VDw5gY5t8eIP8nEaOnK2" alt=""><figcaption></figcaption></figure>

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

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

    <figure><img src="/files/GwQTumKrHrXbcc1sooV8" alt=""><figcaption></figcaption></figure>

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

    <figure><img src="/files/0hEfVfmrJrTxK53DM5vd" alt="" width="375"><figcaption></figcaption></figure>

* **버튼 요소**

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

  <figure><img src="/files/TEmpVFszFPGWCei3HN4i" alt=""><figcaption></figcaption></figure>

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