본문으로 건너뛰기

탐색 스타일

교회 웹사이트의 탐색 모음 색상을 사용자 정의하여 브랜드와 일치하도록 합니다. 단색 배경과 투명 오버레이 모두에 대해 색상을 구성할 수 있어 웹사이트 전체에서 탐색이 어떻게 보이는지 완벽하게 제어할 수 있습니다.

시작하기 전에

  • 교회 웹사이트를 관리할 수 있는 권한이 필요합니다. 역할 및 권한을 참조하세요.
  • 16진수 색상 코드(예: #03A9F4)를 포함한 브랜드 색상이 준비되어 있습니다.
  • 웹사이트의 단색 및 투명 탐색 스타일의 차이를 이해합니다.

탐색 모드 이해​

웹사이트 탐색은 페이지에 따라 두 가지 다른 스타일로 나타날 수 있습니다:

  • 단색 탐색 -- 배경색이 있는 탐색 모음, 일반적으로 콘텐츠 페이지에서 사용됨
  • 투명 탐색 -- 페이지 콘텐츠를 오버레이하는 탐색, 일반적으로 영웅 이미지 또는 전체 화면 배경이 있는 페이지에서 사용됨

두 모드에 대해 색상을 독립적으로 사용자 정의할 수 있습니다.

탐색 스타일 액세스​

  1. B1 Admin의 웹사이트로 이동합니다.
  2. 사이드바의 모양을 클릭합니다.
  3. 탐색 스타일 섹션으로 스크롤합니다.
  4. 탐색 스타일 편집을 클릭합니다.

단색 탐색 구성​

단색 탐색은 탐색 모음 뒤에 배경색으로 나타납니다. 다음을 사용자 정의할 수 있습니다:

배경색​

  1. 배경색에 대해 재정의 스위치를 토글합니다.
  2. 색상 선택기를 클릭합니다.
  3. 원하는 배경색을 선택합니다.
  4. 기본값은 흰색(#FFFFFF)입니다.

링크 색상​

  1. 링크 색상에 대해 재정의 스위치를 토글합니다.
  2. 탐색 링크 텍스트의 색상을 선택합니다.
  3. 이는 기본 상태의 링크에 영향을 줍니다.
  4. 기본값은 짙은 회색(#555555)입니다.

링크 호버 색상​

  1. 링크 호버 색상에 대해 재정의 스위치를 토글합니다.
  2. 사용자가 위에 마우스를 올릴 때 링크가 변경되는 색상을 선택합니다.
  3. 이는 클릭 가능한 링크에 대한 시각적 피드백을 제공합니다.
  4. 기본값은 밝은 파란색(#03A9F4)입니다.

활성 색상​

  1. 활성 색상에 대해 재정의 스위치를 토글합니다.
  2. 현재 활성 페이지 링크의 색상을 선택합니다.
  3. 이는 사용자가 어느 페이지에 있는지 알 수 있도록 도와줍니다.
  4. 기본값은 밝은 파란색(#03A9F4)입니다.

투명 탐색 구성​

투명 탐색은 배경 없이 페이지 콘텐츠를 오버레이합니다. 다음을 사용자 정의할 수 있습니다:

링크 색상​

  1. 링크 색상에 대해 재정의 스위치를 토글합니다.
  2. 페이지 배경과 잘 대비되는 색상을 선택합니다.
  3. 종종 어두운 배경 위에 흰색 또는 밝은 색상이 최적입니다.
  4. 기본값은 짙은 회색(#555555)입니다.

링크 호버 색상​

  1. 링크 호버 색상에 대해 재정의 스위치를 토글합니다.
  2. 호버 상태 색상을 선택합니다.
  3. 페이지 배경에 대해 표시되는지 확인하세요.
  4. 기본값은 밝은 파란색(#03A9F4)입니다.

활성 색상​

  1. 활성 색상에 대해 재정의 스위치를 토글합니다.
  2. 활성 페이지 표시기 색상을 선택합니다.
  3. 디자인에 맞게 눈에 띄어야 합니다.
  4. 기본값은 밝은 파란색(#03A9F4)입니다.
정보

투명 탐색은 페이지 콘텐츠를 직접 오버레이하므로 배경색 설정이 없습니다.

변경 사항 저장​

  1. 색상 구성를 마친 후 탐색 스타일 저장을 클릭합니다.
  2. 변경 사항이 실시간 웹사이트에 즉시 적용됩니다.
  3. 웹사이트를 방문하여 두 모드의 탐색을 확인합니다.

기본값으로 재설정​

기본 색상으로 돌아가려면:

  1. 맞춤 색상에 대해 재정의 스위치를 토글합니다.
  2. 탐색 스타일 저장을 클릭합니다.
  3. 탐색이 기본 색상 구성표로 돌아갑니다.

또는 취소를 클릭하여 저장하지 않고 모든 변경 사항을 버립니다.

모범 사례​

색상 대비​

  • 가독성 -- 링크 색상과 배경 간에 충분한 대비가 있는지 확인합니다.
  • WCAG 준수 -- 접근성을 위해 최소 4.5:1 대비 비율을 목표로 합니다.
  • 두 모드 모두 테스트 -- 단색 및 투명 탐색 모두로 사이트를 미리 봅니다.

브랜드 일관성​

  • 브랜드 색상 사용 -- 로고 및 웹사이트 테마와 일치합니다.
  • 팔레트 제한 -- 응집력 있는 모양을 위해 2-3가지 색상으로 유지합니다.
  • 이미지 고려 -- 투명 탐색을 사용하는 경우 일반적인 페이지 배경에 대해 테스트합니다.

호버 및 활성 상태​

  • 명확한 피드백 -- 호버 상태가 기본 링크와 명백히 다르도록 합니다.
  • 활성 페이지 구별 -- 사용자가 어디에 있는지 알 수 있도록 별개의 색상을 사용합니다.
  • 부드러운 전환 -- 시스템이 자동으로 색상 변경에 애니메이션을 적용합니다.

문제 해결​

색상이 올바르게 보이지 않음​

  • 캐시 지우기 -- 브라우저 캐싱이 이전 색상을 표시할 수 있습니다.
  • 16진수 코드 확인 -- 유효한 16진수 색상 코드를 입력했는지 확인합니다.
  • 다양한 배경에서 테스트 -- 페이지에 따라 색상이 다르게 보일 수 있습니다.

탐색이 표시되지 않음​

  • 투명 모드 -- 밝은 이미지 위에 투명 탐색을 사용하는 경우 어두운 텍스트가 보기 어려울 수 있습니다.
  • 해결책 -- 링크 색상을 조정하거나 더 어두운 페이지 배경을 사용합니다.
  • 대안 -- 탐색 영역에 미묘한 그림자 또는 배경 오버레이를 추가합니다.

기술 세부 사항​

탐색 스타일은 JSON으로 저장되고 CSS 변수를 사용하여 적용됩니다:

  • 사이트를 다시 빌드할 필요 없이 변경 사항이 즉시 적용됩니다.
  • 색상이 모든 탐색 요소로 계단식합니다.
  • 재정의는 선택적입니다. 설정되지 않은 색상은 테마 기본값을 사용합니다.

관련 문서​

  • 모양 -- 웹사이트의 전반적인 모양과 느낌을 사용자 정의합니다.
  • 페이지 관리 -- 웹사이트 페이지를 만들고 구성합니다.
  • 페이지 편집기 -- 페이지 레이아웃 및 콘텐츠를 설계합니다.