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

# 헤더 디자인하기

## 헤더 구성 방법

### 1. 로고 추가하기

로고는 이미지 또는 텍스트 블록을 추가하여 사용할 수 있어요.

#### (1) 이미지 블록으로 로고 추가하기

① 왼쪽 추가 패널에서 `미디어(단축키 M)` > `이미지(단축키 I)`를 클릭하여 원하는 위치에 추가해 주세요.\
② 추가한 이미지 블록의 `상세설정`에서 `파일 선택` 또는 `이미지 라이브러리`를 클릭하여 로고 이미지를 적용해 주세요.

로고 이미지를 클릭하면 메인 홈으로 이동하도록 설정해 볼게요.

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

{% stepper %}
{% step %}
추가한 로고 이미지를 클릭하고, 오른쪽 속성패널에 있는 `고급`을 클릭해 주세요.
{% endstep %}

{% step %}
`클릭이벤트` > `내부 링크 연결` > 홈(메인) 페이지를 선택해 주세요.
{% endstep %}

{% step %}
`저장` 및 `게시하기`를 클릭해 주세요. 설정한 내용은 게시된 사이트에서 확인할 수 있어요.
{% endstep %}
{% endstepper %}

#### **(2) 텍스트 블록으로 로고 추가하기**

① 왼쪽 추가 패널에서 `텍스트(단축키 T)`를 클릭하여 적당한 크기의 텍스트 블록을 추가해 주세요.\
② 추가한 텍스트 블록을 더블 클릭하여 브랜드명을 입력해 주세요.

로고 텍스트를 클릭하면 메인 홈으로 이동하도록 설정해 볼게요.

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

{% stepper %}
{% step %}
드래그 또는 ctrl+a를 눌러 입력한 텍스트 전체를 선택해 주세요.
{% endstep %}

{% step %}
텍스트 에디터 박스에 있는 `링크 삽입` 아이콘을 클릭해 주세요.
{% endstep %}

{% step %}
사이트 URL(예: <https://domain.qshop.ai>) 또는 이동하려는 페이지 URL(예:/home)을 입력 후 `확인`을 클릭해 주세요.
{% endstep %}

{% step %}
`저장` 및 `게시하기`를 클릭해 주세요. 설정한 내용은 게시된 사이트에서 확인할 수 있어요.
{% endstep %}
{% endstepper %}

### 2. 페이지메뉴 추가하기

사이트를 구성하고 있는 페이지메뉴 리스트를 추가할 수 있어요. \
왼쪽 추가 패널에서 `메뉴(단축키 N)` > `페이지메뉴(단축키 P)` 클릭 후 드래그하여 원하는 곳에 위치시켜 주세요.

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

### 3. 공통메뉴 추가하기

쇼핑몰 사이트라면 반드시 필요한 로그인 및 장바구니 메뉴를 추가할 수 있어요.\
왼쪽 추가 패널에서 `메뉴(단축키 N)` > `공통메뉴(단축키 C)` 클릭 후 드래그하여 원하는 곳에 위치시켜 주세요.

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

### 4. 헤더 합치기 및 분리하기

헤더 섹션 클릭 후 합치기 아이콘을 클릭하면, 헤더 바로 아래 있는 섹션과 합쳐져요. \
동일한 아이콘을 한번 더 클릭하면 헤더는 다시 분리돼요.

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