> 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/qshoplink/editor.md).

# 큐샵링크 에디터 기본정보

<figure><img src="/files/4AGQgyGYIZMWJiXBsVq7" alt=""><figcaption></figcaption></figure>

큐샵링크의 에디터는 왼쪽의 뷰포트와 오른쪽에 속성영역으로 나뉘게 됩니다.\
속성영역을 통해 콘텐츠를 추가 및 설정할 수 있으며, 추가 된 콘텐츠는 뷰포트를 통해 배치하여 디자인을 하게 됩니다.

## 1. 뷰포트

뷰포트는 속성패널을 통해 선택한 콘텐츠가 보여지는 영역으로 콘텐츠를 이동하고 배치하여 디자인을 \
완성하게 됩니다.

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

### 1-1. GNB

GNB 영역을 통해 에디터를 통해 작업한 내용을 저장 및 실제 사이트를 게시할 수 있습니다.

{% hint style="danger" %}
큐샵 링크의 에디터는 자동 저장 및 되돌리기 기능이 제공되지 않습니다.&#x20;

\- **뒤로가기(←) 버튼** 클릭 시  작업한 내용은 자동저장 되지 않으며 마지막 저장 상태 기준으로 남게 됩니다.&#x20;

\- 디자인 과정 중 **\[저장하기]**&#xBC84;튼을 클릭하여 작업 내용을 저장해 주세요.&#x20;
{% endhint %}

<table data-header-hidden><thead><tr><th width="128">버리는 항목</th><th></th></tr></thead><tbody><tr><td>항목</td><td>설명</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></tbody></table>

### 1-2. 에디터

에디터는 실제 사이트 디자인을 하는 영역입니다. \
이곳을 통해 콘텐츠를 배치하여, 여러분들만의 개성있는 프로필 링크를 개설 할 수 있습니다.

에디터의 콘텐츠를 클릭하게 되면, 설정을 위해 해당 콘텐츠의 섹션 패널위치로 이동이 됩니다.\
이외에도 에디터의 상단과 하단에는 사용에 편의를 위한 기능이 존재합니다.

<table data-header-hidden><thead><tr><th width="165">버리는 항목</th><th></th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>URL</strong></td><td><p>사이트의 URL을 확인합니다.</p><ul><li>클릭 시 사이트로 이동</li></ul></td></tr><tr><td><strong>섹션 추가/제거</strong></td><td><strong>• 섹션 제거 (-1 -5)</strong><br>섹션 영역을 한칸, 다섯칸 줄입니다.<br>• <strong>fit</strong><br>섹션의 크기를 콘텐츠에 맞게 조절합니다.<br>• <strong>섹션 추가 (+1 +5)</strong><br>섹션 영역을 한칸, 다섯칸 추가합니다.</td></tr></tbody></table>

## 2. 속성패널

속성 패널은 콘텐츠 영역과 디자인 영역으로 나뉘어져 있습니다.

### 2-1. 콘텐츠

다양한 콘텐츠를 추가하고 링크를 연결 할 수 있습니다.

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

추가한 콘텐츠를 클릭하면 뷰포트 내에 해당 콘텐츠가 선으로 연결되어 보다 쉽게 위치를 확인할 수 있습니다. 각각의 콘텐츠에 대한 자세한 내용은 [콘텐츠 가이드](/customer_support/qshoplink/editor/contents.md)를 참고 부탁드립니다.

### 2-2. 디자인

디자인 영역은 에디터에 적용이 되는 공통 사항으로 큐샵 에디터의 LNB영역과 같은 역할을 하게 됩니다.&#x20;

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

그리드 간격 폰트 등을 선택하여 디자인을 할 수 있으며 폰트의 크기, 굵기 등은 각각의 콘텐츠 요소를 통해 설정 할 수 있습니다.