> 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/tip/modoo.md).

# 큐샵 빠르게 시작하기\_에디터 사용법

## 1. 에디터 접속 방법

생성된 사이트의 이미지, 텍스트 등의 수정을 위해서는 큐샵 에디터에 접속해야해요.

\[[상점 디자인하기](/customer_support/guide/design.md)] 가이드를 통해 에디터 접속 방법을 확인하실 수 있어요.

## 2. 에디터 알아보기

![image.png](/files/C4MQVzL0DkaxPvGM5jIm)

에디터는 디자인을 위한 도구인 상단 메뉴바, 구조패널, 속성패널, 추가패널과, 디자인 내용을 볼 수 있는 뷰포트로 나뉘어져 있어요

\[[에디터 기본정보](https://help.qshop.ai/customer_support/guide/design/editor)] 가이드를 참고하여 각 패널의 명칭과 사용법을 확인 하실 수 있으며, 각 패널에 대한 자세한 내용은 각 항목의 세부 가이드를 통해 확인을 할 수 있어요.

<table><thead><tr><th width="140">항목</th><th>설명</th><th width="100">가이드</th></tr></thead><tbody><tr><td>상단 메뉴바</td><td>에디터 위쪽에 위치한 상단 메뉴바는 페이지를 디자인 하는 과정에 필요한 실행 취소, 미리보기, 페이지 저장 등을 통해 보다 편하게 디자인을 해 나갈 수 있습니다.</td><td>[<a href="/pages/EbE92gID2HMePEYikyd7">바로가기</a>]</td></tr><tr><td>구조패널</td><td>에디터 왼쪽에 위치한 구조패널을 활용하여 사이트의 기본 정보를 설정하고 페이지를 생성,이동, 그룹을 지을 수 있습니다.</td><td>[<a href="/pages/FCgDn589Rqnx6STLCEym">바로가기</a>]</td></tr><tr><td>속성패널</td><td>에디터 오른쪽에 위치한 속성패널을 활용하여 섹션 및 콘텐츠의 기본 디자인 속성을 설정할 수 있습니다.</td><td>[<a href="/pages/k1zuLJRt2MhoDMdthB4l">바로가기</a>]</td></tr><tr><td>추가패널</td><td>추가 패널을 통해 섹션 단위 또는 블록 단위의 콘텐츠를 추가하여 사용할 수 있습니다.</td><td>[<a href="/pages/VAF1CLymvclriroxuerg">바로가기</a>]</td></tr></tbody></table>

## 3. 메뉴 추가하기

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

메뉴는 사이트 구성에 가장 기본이 되는 요소로 페이지,폴더,링크 의 형태로 생성을 할 수 있어요.

\[[페이지](https://help.qshop.ai/customer_support/guide/design/editor/lnb#id-2)] 가이드를 참고하여 용도에 맞게 다양한 메뉴를 추가해보세요

## 4. 디자인 수정하기

에디터를 통해 기존 디자인을 수정하는 것 뿐 아니라 새롭게 섹션, 블록을 사용하여 디자인을 해나갈 수 있어요.

{% embed url="<https://youtu.be/tYicr4cllJ8?feature=shared>" %}

사이트의 디자인은 페이지를 만들고 그 안에 섹션을 구성하고 섹션 위에 이미지/텍스트 등의 블록을 추가하는 방법으로 디자인을 하게 됩니다.

자세한 내용 \[[에디터 사용하기](https://www.youtube.com/@%ED%81%90%EC%83%B5Qshop/videos)] 동영상 가이드를 참고 해주세요.

### 4-1. 섹션 알아보기

섹션은 디자인의 밑바탕이 되는 요소로, 용도에 따라 빈 섹션, 탭 섹션 등 다양한 섹션이 준비되어있어요.

아래 가이드를 참고하여 여러 종류의 섹션을 확인하고, 섹션을 설정하는 방법을 확인 할 수 있어요.

{% hint style="info" %}
\[[섹션 이해하기](https://help.qshop.ai/customer_support/guide/design/editor/section)] / \[[섹션이 종류](https://help.qshop.ai/customer_support/guide/design/editor/contents/section)] / \[[섹션 추가하기](https://help.qshop.ai/customer_support/guide/design/editor/contents#id-1)]
{% endhint %}

### 4-2. 블록 추가하기

사이트 디자인에 사용이 되는 이미지,텍스트,게시판 등 다양한 요소들을 블록이라고 불러요.

\[[블록 추가](https://help.qshop.ai/customer_support/guide/design/editor/contents#id-1-1)] 가이드를 참고하여 블록을 추가 할 수 있어요.

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

모든 블록은  **①더블클릭** 또는 **②퀵 메뉴**의 상세 설정 아이콘을 통해 수정이 가능해요.

사이트 구성에 가장 많이 사용이 되는 블록들은 아래 표를 확인 해주세요.

<table><thead><tr><th width="100">블록</th><th width="557">설명</th><th>가이드</th></tr></thead><tbody><tr><td><strong>텍스트</strong></td><td>텍스트를 입력하기 위해 사용이 됩니다.<br>제목1 ~ 제목4, 본문에 사용이 되는 설정을 개별적으로 할 수 있습니다.</td><td>[<a href="https://help.qshop.ai/customer_support/guide/design/editor/contents/text">바로가기</a>]</td></tr><tr><td><strong>이미지</strong></td><td>페이지에 이미지를 적용할 수 있습니다.</td><td>[<a href="https://help.qshop.ai/customer_support/guide/design/editor/contents/media#id-1">바로가기</a>]</td></tr><tr><td><strong>버튼</strong></td><td>링크, 앵커 설정 및 전화걸기 등 다양한 클릭이벤트 설정이 가능합니다.</td><td>[<a href="https://help.qshop.ai/customer_support/guide/design/editor/contents/button#id-1">바로가기</a>]</td></tr><tr><td><strong>입력폼</strong></td><td>상담신청, 설문조사 등 사용자의 정보를 수집하는 목적으로 사용이 됩니다.</td><td>[<a href="https://help.qshop.ai/customer_support/guide/design/editor/contents/button#id-2">바로가기</a>]</td></tr><tr><td><strong>페이지 메뉴</strong></td><td>생성한 페이지가 모여있는 메뉴로 페이지 이동을 위해 사용합니다.</td><td>[<a href="https://help.qshop.ai/customer_support/guide/design/editor/contents/munu#id-2">바로가기</a>]</td></tr><tr><td><strong>게시판</strong></td><td>자유게시판, 고객 후기 등 다양한 용도로 사용이 가능합니다.</td><td>[<a href="https://help.qshop.ai/customer_support/guide/design/editor/contents/advanced/board">바로가기</a>]</td></tr></tbody></table>

### 4-3. 모바일 디자인하기

큐샵에서 작업한 PC 디자인은 기본적으로 모바일에 최적화된 화면 디자인이 제공되지만, 자동으로 변환이 이루어지기 때문에 의도하지 않은 디자인으로 보일 수 있어요.\
모바일 뷰포트를 통해 따로 수정을 할 수 도 있고, pc와 모바일 각각의 디자이스 별 전용 페이지를 만들어 서로 다른 디자인을 구성할 수도 있어요.

자세한 내용은 \[[**PC↔︎모바일 전용 페이지 만들기**](/customer_support/guide/tip/device_page.md)]를 확인해주세요.

### 4-4. 고정콘텐츠 설정하기

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

섹션과 블록을 추가하여 디자인을 하는 것 이외에도, 고정 콘텐츠 기능을 사용하여 디자인을 더욱 다체롭게 할 수 있습니다.

아래 가이드를 참고하여 섹션/블록 고정을 할 수 있습니다.

\[[텍스트 가이드](/customer_support/guide/tip/fixed.md)]  \[[동영상 가이드](https://www.youtube.com/watch?v=c2pcIW0w2q4)]

## 5. SEO 설정하기

이렇게 완성을 한 사이트가 Google, 네이버 등의 포털사이트에 잘 검색이 되기 위해서는 사이트정보/페이지 정보와 같은 기본정보를 설정해줘야해요.

\[[사이트 정보](/customer_support/guide/setting/default/site.md)] / \[[페이지 SEO 설정](https://help.qshop.ai/customer_support/guide/design/editor/lnb#id-2-4)] 가이드를 참고하여 기본 정보를 추가해보세요!

{% hint style="info" %}
포털 사이트 검색 노출을 위해서는 \[[SEO설정](https://help.qshop.ai/customer_support/guide/setting/manage/seo)]가이드를 참고하여 각 포털 사이트의 웹 마스터 도구 등록이 선행 되어야합니다.
{% endhint %}

## 6. 쇼핑 설정하기

큐샵에는 자사몰 운영을 위한 커머스 기능도 준비가 되어있어요.

상품 등록부터 결제 수단 연동까지 \[[쇼핑몰 운영을 위한 기본설정](/customer_support/guide/tip/defalut.md)] 가이드를 통해 확인해보세요!

{% hint style="info" %}
❓궁금한 점이 있으신가요? 큐샵 매니저🧚🏻에게 물어보세요.

채팅 [상담하기](https://qshop.channel.io/)
{% endhint %}