상단(헤더) 전용 위젯 살펴보기
사이트 상단 영역에는 일반 위젯 대신 상단 전용 위젯을 넣어요. 어떤 위젯이 있고 각각 무엇을 할 수 있는지 아래에서 확인해 주세요.
상단전용 위젯이란? 공통 안내
상단 디자인을 위한 다양한 위젯들이 준비되어 있습니다. 본 도움말에서는 상단 전용 위젯들을 소개합니다.
위젯 목록
| 이미지 | 이름 | 설명 |
 | 로고 | 로고를 추가합니다. 로고는 텍스트와 이미지 모두 사용 가능합니다. |
 | 선 | 상단에 가로 또는 세로 선을 추가할 수 있습니다. |
 | 링크/버튼 | 상단에 기본 메뉴 외 링크 또는 버튼을 추가할 때 사용합니다. |
 | 메뉴 | 메뉴 관리에서 생성한 메뉴들 표시할 때 사용합니다. |
 | 로그인/장바구니 | 회원가입, 로그인, 장바구니, 마이페이지 등을 추가합니다. 로그인 전과 로그인 후 표시되는 메뉴를 다르게 설정할 수 있습니다. |
 | 다국어 | 언어별 사이트로 전환할 수 있는 전환 버튼이 표시됩니다. 글로벌 버전을 사용하면서, 새 언어 사이트를 사용 중인 경우에만 작동합니다. |
 | 메뉴 버튼 | 웹사이트 왼쪽에서 사이드 메뉴가 나타납니다. |
 | 모바일 전용 메뉴 | 모바일 전용 메뉴를 상단 영역 하단에 표시합니다. 모바일 뷰포트에서만 동작합니다. 뷰포트 변경하기 |
로고 위젯
위젯 소개
상단에 로고를 추가합니다. 로고는 텍스트(글꼴 선택 가능)와 이미지 모두 사용 가능합니다.
상단 위젯 추가 및 설정방법
상단 영역에 위젯을 추가하고, 이동하고, 설정을 수정해 상단을 디자인할 수 있습니다.
설정항목
- 로고이미지 선택: 내 PC에서 로고이미지를 선택하고 업로드할 수 있습니다.
- 로고이미지: 로고이미지 사용여부를 선택하고, 이미지 선명하게 옵션을 선택할 수 있습니다.
타이틀명: 로고이미지 오른쪽 또는 아래 타이틀을 입력할 수 있습니다. 사용하기 선택 시 타이틀 텍스트의 스타일 및 위치 추가 옵션을 설정할 수 있습니다.
참고: 위 로고이미지 항목에서 사용하기 옵션 해제 시 타이틀명만 표시됩니다.
- 링크: 로고 클릭 시 이동할 메뉴명을 선택 또는 URL(주소)를 입력합니다. 비워두면 자동으로 메인 페이지로 연결됩니다.
메뉴 위젯
위젯 소개
메뉴 위젯을 삽입해 상단 영역에 메인 메뉴를 추가할 수 있으며, 설정을 통해 하위 메뉴의 디자인 및 스타일을 변경할 수 있습니다.
마우스 포인터를 올렸을 때 전체 메뉴가 나타나는 메가 드롭다운 메뉴로 변경하려는 경우 다음 메가 드롭다운 메뉴 상단 메뉴 만들기 도움말을 참조하세요.
상단 위젯 추가 및 설정방법
상단 영역에 위젯을 추가하고, 이동하고, 설정을 수정해 상단을 디자인할 수 있습니다.
설정 항목
1. 메인 메뉴
상단 메인 메뉴 스타일을 수정합니다.
- 활성 스타일: 메인 메뉴 중 활성화된 메뉴의 스타일을 변경합니다. 활성화된 메뉴의 모양에 따라 일부 옵션들은 달라질 수 있습니다.
공통: 메인 메뉴의 공통 스타일을 설정합니다. 메인 메뉴가 차지하는 영역의 높이, 기본 텍스트 크기/색상, HOVER 텍스트, 자간, 메뉴 간격, 글꼴 등을 수정할 수 있습니다.
2. 서브 메뉴
마우스 포인터를 메인 메뉴에 올렸을 때 나타나는 하위 메뉴의 디자인을 선택하고, 스타일을 수정합니다.
- 디자인: 다른 디자인 버튼을 클릭해 서브 메뉴의 디자인을 변경할 수 있습니다. 선택하신 서브 메뉴 디자인에 따라 일부 옵션들은 달라질 수 있습니다.
- Hover: 활성화 된 서브 메뉴의 텍스트 색상 및 배경색을 수정합니다.
기본: 서브 메뉴의 기본 텍스트 크기 및 색상, 배경색, 상하 간격, 자간 등을 수정합니다. 서브 메뉴에 그림자를 추가하거나, 텍스트를 굵게 만들거나 기울일 수도 있습니다.
메뉴 버튼 위젯
위젯 소개
메뉴 버튼 클릭 시 사이드에서 메뉴가 나타나는 위젯입니다. 상단에 메인 메뉴를 표시하지 않는 경우 사용합니다.
상단 위젯 추가 및 설정방법
상단 영역에 위젯을 추가하고, 이동하고, 설정을 수정해 상단을 디자인할 수 있습니다.
설정항목
1. 메뉴 버튼
메뉴 버튼의 디자인 및 스타일을 수정합니다.
- 디자인 : 메뉴 버튼의 디자인을 변경할 수 있습니다. 다른 디자인 버튼을 클릭해 선택합니다.
- 공통 : 메뉴 버튼의 기본 디자인을 변경합니다. 아이콘을 변경하고, 색상, 테두리, 라운드, 여백을 설정해 보세요.
- Hover : 메뉴 버튼 위에 마우스 포인터를 올렸을 때, 변경되는 메뉴 버튼의 색상, 배경 색상, 테두리를 설정합니다. 아무런 Hover 효과를 주고 싶지 않은 경우 공통 항목에서 설정한 색상 및 테두리를 똑같이 설정합니다.
2. 펼침 메뉴
메뉴 버튼 클릭 시 나타나는 펼침 메뉴의 디자인 및 스타일을 수정합니다.
- 디자인 : 다른 디자인 버튼을 클릭해 펼침 메뉴의 디자인을 변경할 수 있습니다. 펼침 메뉴 디자인에 따라 하기 옵션은 달라집니다.
- 로고 : 펼침 메뉴에 삽입될 로고를 선택합니다. 클릭 시 로고 관련 추가 옵션이 나타납니다.
- 활성 스타일 : 펼침 메뉴에 표시되는 활성 메뉴의 스타일 및 글자색을 수정합니다.
- 공통 : 펼침 메뉴의 공통 항목을 수정합니다. 정렬 방식부터, 배경색, 텍스트 크기와 색상, 줄간격, 글꼴 등을 변경할 수 있습니다.
참고 : 글꼴은 공통 디자인 설정 메뉴에서만 변경을 허용하지만, 상단의 경우 로고 위젯, 메뉴 위젯, 메뉴 버튼 위젯에 한하여 글꼴 선택 옵션을 제공합니다.
모바일 전용 메뉴 위젯
위젯 소개
모바일 전용 메뉴를 상단에 표시합니다. 이 위젯은 모바일 버전 제작 시 사용되며, 앞서 뷰포트를 모바일로 변경해야 합니다.
상단 위젯 추가 및 설정방법
상단 영역에 위젯을 추가하고, 이동하고, 설정을 수정해 상단을 디자인할 수 있습니다.
설정 항목
- 디자인: 다른 디자인 버튼을 클릭해 모바일 전용 메뉴 디자인을 변경할 수 있습니다.
- 노출 기준: 모바일 전용 메뉴에 표시할 메뉴를 설정합니다.
- 디자인: 1번 항목에서 선택한 모바일 전용 메뉴의 디자인을 수정합니다.
- 활성 메뉴: 메뉴를 터치하면 활성화되는 활성 메뉴의 스타일을 변경합니다.
- 비활성 메뉴: 비활성 메뉴의 스타일을 변경합니다.
링크/버튼 위젯
위젯 소개
상단에 기본 메뉴 외 각종 SNS 링크, 문의하기 등 추가적인 링크 또는 버튼을 추가할 때 사용합니다.
상단 위젯 추가 및 설정방법
상단 영역에 위젯을 추가하고, 이동하고, 설정을 수정해 상단을 디자인할 수 있습니다.
설정항목
링크/버튼 추가하기
링크/버튼 설정창 왼쪽 상단 추가 버튼을 클릭해 링크/버튼을 여러 개 추가할 수 있습니다.
링크
링크/버튼의 설정 및 스타일을 변경할 수 있습니다. 링크/버튼을 여러 개 추가하는 경우, 각 요소마다 별도로 설정할 수 있습니다. 반드시 요소 선택 후 설정을 변경해 주세요.
- 형태: 링크의 형태를 선택합니다. 텍스트와 버튼 중 하나를 선택할 수 있습니다.
- 문구: 링크/버튼의 문구를 입력합니다. 아이콘을 추가하고, 문구 툴팁으로 표시를 선택하면 문구는 숨겨집니다.
- 텍스트 크기: 텍스트 크기를 픽셀(px) 단위로 입력합니다.
- 아이콘 크기: 아이콘 버튼을 클릭해 링크/버튼에 아이콘을 추가하는 경우 아이콘의 크기를 수정할 수 있습니다. 아이콘 크기는 픽셀(px) 단위로 입력합니다.
공통 설정
모든 링크/버튼에 공통적으로 적용할 설정을 수정합니다.
- 기본 텍스트: 기본 텍스트의 색상을 수정할 수 있습니다.
- 텍스트 Hover: 마우스 포인터를 올렸을 때 변경되는 텍스트 색상을 수정합니다.
- 객체간 간격: 요소 간의 거리를 수정합니다.
링크
클릭 시 이동할 메뉴 또는 URL(주소)을 입력합니다. 링크/버튼의 링크 방식에 따라 추가 옵션은 달라질 수 있습니다.
- 링크 방식: 링크, 이메일 보내기, 전화걸기, 파일첨부 등 다양한 링크 방식을 제공합니다. 링크 방식의 종류
- 새창: 클릭 시 새 브라우저 탭으로 열립니다. 일부 링크 방식에서는 표시되지 않습니다.
로그인/장바구니 위젯
위젯 소개
상단에 회원가입, 로그인, 장바구니, 마이페이지 버튼을 추가할 수 있습니다. 회원가입 및 쇼핑 기능이 필요한 경우 사용합니다.
상단 위젯 추가 및 설정방법
상단 영역에 위젯을 추가하고, 이동하고, 설정을 수정해 상단을 디자인할 수 있습니다.
설정항목
1. 링크/버튼 추가방법
- 설정창 왼쪽 상단 추가 + 를 클릭합니다.
- 로그인, 회원가입, 장바구니, 마이페이지, 링크, 구분선 중 하나를 선택합니다.
- 선택한 버튼/링크가 추가됩니다. 버튼/링크는 여러 개 추가할 수 있습니다.
2. 링크/버튼 옵션 수정하기
추가한 버튼/링크의 형태, 문구, 크기, 스타일 등을 수정할 수 있습니다. 링크/버튼의 옵션은 추가하신 버튼/링크의 종류에 따라 달라집니다.
3. 버튼/링크의 순서 변경하기
링크/버튼을 두 개 이상 추가하는 경우, 해당 링크/버튼을 클릭하고 마우스로 드래그하여 순서를 변경할 수 있습니다.
4. 로그인 전/로그인 후 메뉴 구성하기
로그인/장바구니 위젯은 로그인 전 표시될 메뉴와 로그인 후 표시될 메뉴를 별도 구성합니다. 설정창 상단 로그인 전, 로그인 후 탭 메뉴를 클릭해 전환할 수 있습니다.
5. 공통 설정
공통 설정을 변경하면 추가한 모든 링크/버튼의 설정(텍스트 색상, 객체간 간격, 배지 표시)이 로그인 전, 로그인 후에 관계없이 모두 변경되니 유의하시길 바랍니다.
다국어 위젯
위젯 소개
언어별 사이트로 전환할 수 있는 언어 전환 위젯이 추가됩니다. 새 언어 사이트 개설 후 이용하실 수 있습니다. 단, Global 버전 사용자가 아닌 경우 관리자만 접속할 수 있습니다.
참고: 아임웹은 총 7개 언어(한국어, 영어, 일본어, 중국어, 중국어 번체, 스페인어, 베트남어)를 지원합니다.
상단 위젯 추가 및 설정방법
상단 영역에 위젯을 추가하고, 이동하고, 설정을 수정해 상단을 디자인할 수 있습니다.
설정항목
구성요소
- 형태: 언어 전환 버튼의 형태를 선택합니다. 총 5가지 형태를 제공합니다.
- 국기: 국기 모양을 사각형, 원형 중 하나로 선택할 수 있습니다.
- 크기: 국기의 크기를 픽셀(px) 단위로 수정합니다.
- 국기 펼침모드 사용: 형태를 국기로 선택한 경우에만 옵션이 나타나며, 옵션 선택 시 생성한 모든 언어의 국기가 펼쳐진 상태로 표시됩니다. (형태: 국기인 경우에만 표시됨)
디자인
- 텍스트 크기: 텍스트의 크기를 변경합니다. 구성요소의 형태를 국기로 선택한 경우 적용되지 않습니다.
- 기본 색상: 텍스트의 기본 색상을 선택합니다.
- Hover 색상: 텍스트 위에 마우스 포인터를 올렸을 때 변경되는 텍스트의 색상을 수정합니다.
- 간격: 국기 간의 간격을 조절합니다. 구성요소의 형태를 국기로 선택한 경우에만 옵션이 나타납니다.
텍스트
- 각 국가별 다국어 텍스트에 표시될 문구를 수정할 수 있습니다.
참고사항
- 공개 상태가 비공개인 사이트는 다른 언어 사이트에서 표시되지 않습니다.
- 다국어 위젯 설정은 다른 언어 사이트에 연동되지 않고 개별 동작합니다.
선 위젯
위젯 소개
상단에 선을 추가할 수 있습니다. 기본 가로선 위젯 대비 세로선도 설정 가능한 것이 특징입니다.
상단 위젯 추가 및 설정방법
상단 영역에 위젯을 추가하고, 이동하고, 설정을 수정해 상단을 디자인할 수 있습니다.
설정항목
- 가로선/세로선: 가로선 또는 세로선 중 하나를 선택합니다.
- 길이: 선의 길이를 픽셀(px) 단위로 입력합니다.
- 상하 여백: 선 위, 아래로 여백을 픽셀(px) 단위로 입력합니다.
- 두께: 선의 두께를 픽셀(px) 단위로 입력합니다.
- 선모양: 선의 모양을 선택합니다.
- 선색: 선의 색을 수정합니다. 컬러 코드를 HEX 또는 RGBA 값으로 직접 입력하거나, 선색 항목 오른쪽 끝 컬러픽커를 클릭해 색상을 선택할 수 있습니다.