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