콘텐츠로 이동
앱 설치
한국어

메뉴 색상 조정

메뉴 바, 하위 메뉴, 탭, 제품 라벨, 장바구니 담기 버튼의 색상을 설정합니다.

사용 가이드 모든 요금제 2 분 소요

색상 탭의 색상은 메뉴의 모든 항목에 적용되므로 한곳에서 브랜드에 맞출 수 있습니다.

색상 변경하기

  1. 색상 탭 열기

    메뉴 편집기에서 왼쪽 사이드바의 페인트 통 아이콘을 클릭합니다 (1).

    색상 탭(1)을 연 다음 색상 필드(2)를 클릭합니다.
  2. 색상 선택하기

    색상 옆의 필드를 클릭합니다 (2). 색상을 고르거나 #FFFFFF 같은 16진수 코드를 입력합니다.

  3. 미리 보기 확인하기

    미리 보기에서 항목에 마우스를 올려 호버 색상을 확인합니다.

  4. 저장 및 게시하기

    저장을 클릭한 다음 게시를 클릭합니다.

색상 설정

메인 메뉴

배경색
메뉴 바의 배경입니다.
Hover background color
호버하거나 하위 메뉴가 열려 있을 때 최상위 항목의 배경입니다.
Separator color
항목 사이의 구분선으로, 메뉴 설정에서 데스크톱에서 구분선 표시 또는 모바일에서 구분선 표시를 켜면 표시됩니다.
텍스트 색상
최상위 항목의 텍스트와 아이콘입니다.
Hover text color
호버 시 최상위 항목의 텍스트와 아이콘입니다.

하위 메뉴

드롭다운, 메가 메뉴와 그 콘텐츠입니다.

배경색
하위 메뉴의 배경입니다.
Border color
하위 메뉴 테두리로, 메뉴 설정에서 테두리 표시를 켜면 표시됩니다.
Heading color
링크 목록 제목 같은 하위 메뉴 안의 제목입니다.
텍스트 색상
하위 메뉴 안의 링크와 텍스트입니다.
Hover text color
호버 시 하위 메뉴 링크입니다.
Description color
항목 아래의 설명 텍스트입니다.
Hover description color
호버 시 설명 텍스트입니다.

탭 메뉴

Heading color
탭 이름입니다.
Active heading color
선택한 탭의 이름입니다.
Active background color
선택한 탭의 배경입니다.

라벨

메뉴에 표시되는 제품의 라벨입니다.

Sale text color · Sale background color
할인된 제품의 세일 라벨입니다.
Sold out text color · 매진 배경색
품절 라벨입니다.

장바구니 담기 버튼

메뉴 설정 > 고급에서 장바구니 담기 버튼 표시를 켜면 표시됩니다.

텍스트 색상 · Hover text color
평소와 호버 시의 버튼 텍스트입니다.
배경색 · Hover background color
평소와 호버 시의 버튼 배경입니다.

문제 해결

항목이 잘 안 보이거나 호버 시 사라져요

텍스트 색상이 배경색과, Hover text color(호버 시 텍스트 색상)가 Hover background color(호버 시 배경색)와 대비되는지 확인하세요. 흰색 호버 배경에 흰색 호버 텍스트를 쓰면 호버 시 항목이 사라집니다.

항목 하나만 다른 색상으로 바꾸고 싶어요

빨간색 “Sale” 항목처럼 항목 자체의 색상 설정(Pro Navigation 요금제)을 사용하세요. 메뉴 항목 편집을 참고하세요.

도움이 되었나요?

문제 신고