헤더 디자인하기

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

헤더 구성 방법

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Last updated 7 months ago

Was this helpful?