> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/design/editor/contents.md).

# 추가 패널

추가패널 속 블록의 종류와 사용 방법을 안내합니다.

## 추가패널이란?

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F3SyJIf7ub5wqr00Sk1yD%2F1_%EC%B6%94%EA%B0%80%20%ED%8C%A8%EB%84%90.png?alt=media&amp;token=be211e30-ba4c-498a-9ee3-3efc317648b7" alt=""><figcaption></figcaption></figure>

추가 패널은 사이트 제작에 필요한 섹션 또는 블록 등 콘텐츠 추가를 위한 패널입니다.

추가 패널 속 다양한 디자인의 섹션 템플릿을 바탕으로 사이트의 업종, 성격에 맞춰 이미지, 내용등을 수정하여 보다 쉽고 편하게 페이지 디자인을 할 수 있으며 빈 섹션을 생성하여 다양한 종류의 블록들을 사용해 직접 페이지를 만들어 나갈 수 있습니다.

추가 패널 속 다양한 요소들의 자세한 내용 아래 가이드를 참고 부탁드립니다.

## 섹션

섹션은 섹션 빠른 추가와 섹션형 템플릿 으로 구성이 되어 있습니다.

이 중 섹션형 템플릿은 다양한 주제에 맞춰 여러 디자인의 템플릿을 선택하여 페이지에 적용하게 됩니다. \
템플릿을 선택한 후 이미지, 텍스트 등의 내용을 변경하여 보다 쉽고 빠르게 디자인을 할 수 있습니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FZxgm2CgsKicmLy35dNsd%2F2_%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80mk2.png?alt=media&amp;token=e0f9b522-f6d7-499a-89f0-93a84ee6f946" alt=""><figcaption></figcaption></figure>

### 1. 섹션 추가하기

1-1. 추가 패널 가장 위 **\[섹션 아이콘]**&#xC744; 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FeGu98AnLtLKoB2uahFzE%2F3_%EC%B6%94%EA%B0%80%ED%8C%A8%EB%84%90_%EC%84%B9%EC%85%98.png?alt=media&amp;token=41f8a073-376d-4491-8572-44884f1033f5" alt=""><figcaption></figcaption></figure>

1-2. 페이지의 주제에 맞는 카테고리 속 섹션 디자인을 확인한 후 선택합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FZxgm2CgsKicmLy35dNsd%2F2_%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80mk2.png?alt=media&amp;token=e0f9b522-f6d7-499a-89f0-93a84ee6f946" alt=""><figcaption></figcaption></figure>

1-3. 추가한 섹션의 블록들을 수정하여 페이지 디자인을 합니다.

## 블록

블록은 그 용도에 따라 텍스트, 미디어, 아이콘, 상품 등 다양한 블록들이 준비 되어 있습니다.\
섹션에 블록을 추가하고 배치하여 페이지의 주제에 맞는 디자인을 할 수 있습니다.

{% hint style="info" %}
블록의 자세한 사용 방법은 각각의 블록 가이드를 참고 부탁드립니다.
{% endhint %}

### 1. 블록 추가하기

1-1. 추가 패널의 \[Quick] 아이콘 또는 원하는 블록 아이콘을 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fo0opioCQDiwSvds1h8tO%2F5_%EC%B6%94%EA%B0%80%ED%8C%A8%EB%84%90_%EB%B8%94%EB%A1%9D.png?alt=media&amp;token=3a3fc973-223f-4d5f-b807-cac81a88e680" alt=""><figcaption></figcaption></figure>

1-2. 항목 속 원하는 블록을 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FZo9Na2O1zYlGrh16Sqps%2F6_%EB%B8%94%EB%A1%9D%20%EB%B9%A0%EB%A5%B8%20%EC%B6%94%EA%B0%80.png?alt=media&amp;token=8ad480bf-667a-468e-9c1e-e21197436a70" alt=""><figcaption></figcaption></figure>

1-3. 섹션에 추가 된 콘텐츠를 확인합니다.

{% hint style="warning" %}
여러번 추가할 경우 동일한 자리에 계속 생성이 되니 주의해주세요.
{% endhint %}

### 2. 블록 배치하기

추가한 콘텐츠의 크기를 조절하고 이동시켜 원하는 위치로 배치할 수 있습니다. 이러한 과정을 통해 페이지의 레이아웃을 구성할 수 있습니다.

{% hint style="info" %}
콘텐츠는 서로 겹쳐서 배치를 할 수있습니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FBVgpJVhVUu95aUFMJjwH%2F%EB%B8%94%EB%A1%9D%20%EB%B0%B0%EC%B9%98.gif?alt=media&amp;token=812b532e-7d9d-4823-9dd5-155049339280" alt=""><figcaption></figcaption></figure>

#### **2-1. 블록\_크기 조절**

1. 추가한 블록의 대각선을 클릭합니다.
2. 드래그&드랍으로 크기를 조절합니다.
3. 블록 오른쪽 아래 콘텐츠의 비율을 확인합니다.

#### **2-2. 콘텐츠\_이동하기**

1. 이동하려는 블록을 클릭합니다.
2. 드래그&드랍으로 섹션의 원하는 영역으로 이동합니다.

{% hint style="info" %}
빨간 세로선을 통해 섹션의 중앙을 확인할 수 있습니다.
{% endhint %}

### 3. 블록 복사 / 복제

추가한 블록을 반복적으로 사용 될 경우 복사 또는 복제를 할 수 있습니다. 복사 와 복제는 블록을 동일하게 생성한다는 공통점이 있지만, 생성 방식의 차이점이 있습니다.

| 설정 항목                                                                                       |
| ------------------------------------------------------------------------------------------- |
| <p><strong>복제</strong><br>동일한 섹션에 복제한 블록이 생성 됩니다.</p>                                       |
| <p><strong>복사</strong></p><p>블록을 복사한 후 원하는 섹션에 붙여넣습니다.</p><ul><li>Ctrl + V 단축키 사용</li></ul> |

### 4. 블록 설정하기

추가한 블록을 설정할 수 있습니다.

{% hint style="info" %}
블록의 기본 설정은 오른쪽 속성패널을 통해 설정이 가능합니다.
{% endhint %}

#### 4-1. 퀵 메뉴

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fv6tt9qFA1UnFJ6p9h3I9%2F7_%EB%B8%94%EB%A1%9D%20%ED%80%B5%EB%A9%94%EB%89%B4.png?alt=media&amp;token=8a0e8045-4df5-4882-8bb6-8bbdcaf2bbe9" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="94">항목</th><th>설명</th></tr></thead><tbody><tr><td><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FvULmeck03GIWwE1v53a6%2F8_%EB%B3%80%ED%99%98%ED%95%98%EA%B8%B0.png?alt=media&amp;token=af0f0b34-eb0d-40f9-a9ae-985318ea3341" alt=""></td><td><strong>변환하기</strong><br>해당 콘텐츠를 다른 콘텐츠 요소로 변환합니다.</td></tr><tr><td><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FaNdSkHNkB7i2helIC7JY%2F9_%EC%83%81%EC%84%B8%20%EC%84%A4%EC%A0%95.png?alt=media&amp;token=b697301c-c7a1-4f0d-adc5-53a5746c37d2" alt=""></td><td><p><strong>상세설정</strong><br>콘텐츠의 상세 설정을 합니다.</p><ul><li>블록 더블 클릭을 통해 상세 설정 모달 확인 가능</li></ul></td></tr><tr><td><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F7PZqmqGHFvke6uOqFfPQ%2F10_%EC%95%9E%EC%9C%BC%EB%A1%9C%20%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0.png?alt=media&amp;token=000873de-27e8-4a57-b6b8-cba3f4df7270" alt=""></td><td><strong>앞으로 가져오기</strong><br>콘텐츠의 위치를 앞으로 이동합니다.</td></tr><tr><td><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FRHTarurAYp3v5EY370fI%2F11_%EB%92%A4%EB%A1%9C%20%EB%B3%B4%EB%82%B4%EA%B8%B0.png?alt=media&amp;token=7d3e56a5-68ce-4a5a-8d7d-39f65b161291" alt=""></td><td><strong>뒤로 보내기</strong><br>콘텐츠의 위치를 뒤로 이동합니다.</td></tr><tr><td><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FR4FifcSgBtIls4xMEMtt%2F6_%EC%84%B9%EC%85%98%20%EB%B3%B5%EC%A0%9C.png?alt=media&amp;token=0c82f0b3-ed31-4481-b780-b1a92a7c8588" alt=""></td><td><strong>복제</strong><br>콘텐츠를 같은 섹션에 복제합니다.</td></tr><tr><td><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FGYCJqDu96B2mf7MaTXY2%2F%EA%B3%A0%EC%A0%95.png?alt=media&amp;token=ee230786-f118-4c58-b663-b2c0a0832945" alt=""></td><td><p><strong>고정</strong><br>토글을 활성화 하게 되면, 설정에 따라 블록이 고정이 되어 스크롤 시 함께 내려오게 됩니다.</p><ul><li><a href="/customer_support/guide/tip/fixed/block.md">블록 고정하기</a> 가이드 참고</li></ul></td></tr><tr><td><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FGmh71KlEig6apBhRf3JG%2FID%20%EB%B3%B5%EC%82%AC%ED%95%98%EA%B8%B0.png?alt=media&amp;token=21faf8af-2c9b-4a74-a4a7-063de1ab1439" alt=""></td><td><p><strong>ID 복사</strong></p><p>블록 ID를 복사합니다.</p><ul><li>복사하기 단축키(Ctrl + C)통해 블록 ID를 복사 할 수 있습니다.</li></ul></td></tr><tr><td><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F4xaPH17pkTFttBy08V4m%2F7_%EC%82%AD%EC%A0%9C.png?alt=media&amp;token=88f73ad6-7e37-46cd-ad39-9443063a3a3a" alt=""></td><td><strong>삭제</strong><br>해당 콘텐츠를 삭제합니다.</td></tr><tr><td><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FuFW8WeJj0E86i6LHz8eY%2F12_%EB%8D%94%EB%B3%B4%EA%B8%B0.png?alt=media&amp;token=301441e2-4b5d-4c4a-be6c-1e16a1b2698b" alt=""></td><td><p><strong>더보기</strong><br>컨텍스트 메뉴의 설정 항목을 확인하고, 설정을 할 수 있습니다.</p><ul><li>컨텍스트 메뉴 가이드 참고</li></ul></td></tr><tr><td><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FkmARgZtzvwv0kBtZIE7V%2F13_%EC%88%A8%EA%B8%B0%EA%B8%B0.png?alt=media&amp;token=9e77f7a2-d559-41c0-8595-96e67dd13d72" alt=""></td><td><p><strong>숨기기</strong><br>해당 콘텐츠를 숨김처리하여 실제 사이트에 반영이 되지않습니다.</p><ul><li>PC 뷰포트에서 숨기기 설정을 할 경우 PC화면에서 숨김처리가 되며 모바일 뷰포트에서 숨기기 설정을 할 경우 모바일 뷰포트에서 숨김처리가 됩니다.</li></ul></td></tr></tbody></table>

#### 4-2. 컨텍스트 메뉴

설정을 하려는 블록을 우클릭하여 컨텐스트 메뉴를 확인할 수 있습니다.

컨텍스트 메뉴를 통해 블록 복사 숨기기 정렬변경 등의 설정을 할 수 있습니다.

![Untitled](https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FAX4D9x0pi60vFo8jZq0L%2F14_%EB%B8%94%EB%A1%9D_%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8%EB%A9%94%EB%89%B4.png?alt=media\&token=033011b5-8073-41e6-b4c3-60207e4fb396)

<table><thead><tr><th width="149.5555419921875">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>오려두기</strong></td><td><p>콘텐츠를 오려두기 합니다.</p><ul><li><strong>[Ctrl + V]</strong> 를 통해 붙여넣기 가능</li></ul></td></tr><tr><td><strong>복사하기</strong></td><td><p>콘텐츠를 복사 합니다.</p><ul><li><strong>[Ctrl + V]</strong> 를 통해 붙여넣기 가능</li></ul></td></tr><tr><td><strong>디바이스 숨기기</strong></td><td>PC 또는 모바일 뷰포트에서 해당 섹션을 숨기거나, 숨김처리 된 섹션을 다시 보이게 합니다.</td></tr><tr><td><strong>순서 정렬하기</strong></td><td>섹션 내 콘텐츠의 노출 순서를 변경합니다.</td></tr><tr><td><strong>변환하기</strong></td><td>콘텐츠를 다른 콘텐츠로 변환합니다.</td></tr><tr><td><strong>복제하기</strong></td><td>콘텐츠를 같은 섹션에 복제합니다.</td></tr><tr><td><strong>ID 복사하기</strong></td><td><p>블록의 ID를 복사합니다.</p><ul><li><strong>[Ctrl + V]</strong> 를 통해 붙여넣기 가능</li></ul></td></tr><tr><td><strong>삭제하기</strong></td><td><p>해당 콘텐츠를 삭제합니다.</p><ul><li>상단 메뉴바를 통해 실행 취소 및 복구 가능</li></ul></td></tr></tbody></table>