헤더 디자인하기

기본적인 헤더 구성 방법과 헤더를 섹션과 합치고 분류하는 법에 대해 알아볼게요.

헤더 구성 방법

1. 로고 추가하기

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

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

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

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

1

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

2

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

3

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

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

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

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

1

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

2

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

3

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

4

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

2. 페이지메뉴 추가하기

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

3. 공통메뉴 추가하기

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

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

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