네비게이션 스타일
교회 웹사이트의 네비게이션 표시줄 색상을 사용자 정의하여 브랜딩과 일치시킵니다. 고정 배경과 투명 오버레이 모두에 대한 색상을 구성할 수 있어 다양한 페이지에서 네비게이션이 어떻게 보이는지 완전히 제어할 수 있습니다.
시작하기 전에
- 교회 웹사이트를 관리할 수 있는 권한이 필요합니다. 자세한 내용은 역할 및 권한을 참조하세요.
- 16진수 색상 코드(예: #03A9F4)를 포함하여 브랜드 색상을 준비하세요.
- 웹사이트의 고정 및 투명 네비게이션 스타일의 차이를 이해합니다.
네비게이션 모드 이해
웹사이트 네비게이션은 페이지에 따라 두 가지 다른 스타일로 나타날 수 있습니다:
- 고정 네비게이션 - 배경색이 있는 네비게이션 표시줄, 일반적으로 콘텐츠 페이지에 사용됨
- 투명 네비게이션 - 페이지 콘텐츠를 오버레이하는 네비게이션, 일반적으로 영웅 이미지 또는 전체 화면 배경이 있는 페이지에 사용됨
두 모드 모두에 대해 독립적으로 색상을 사용자 정의할 수 있습니다.
네비게이션 스타일 액세스
- B1 Admin에서 Jump 메뉴(왼쪽 위의 검색 표시줄)를 열고 웹사이트를 확장합니다
- 외형을 클릭합니다
- 스타일 설정 목록에서 네비게이션을 클릭합니다
네비게이션 스타일링 편집기에는 두 개의 카드가 있습니다: **헤더(고정)**와 히어로 위 헤더(투명).
고정 네비게이션 구성
고정 네비게이션은 네비게이션 표시줄 뒤에 배경색이 있는 상태로 나타납니다. 이 설정은 헤더(고정) 카드에 있습니다. 다음을 사용자 정의할 수 있습니다:
배경색
- 배경색에 대해 재정의 스위치를 전환합니다
- 색상 선택기를 클릭합니다
- 원하는 배경색을 선택합니다
- 기본값은 흰색(#FFFFFF)입니다
링크 색상
- 링크 색상에 대해 재정의 스위치를 전환합니다
- 네비게이션 링크 텍스트의 색상을 선택합니다
- 이것은 기본 상태의 링크에 영향을 미칩니다
- 기본값은 진한 회색(#555555)입니다
링크 호버 색상
- 링크 호버 색상에 대해 재정의 스위치를 전환합니다
- 사용자가 마우스를 올릴 때 링크가 변경되는 색상을 선택합니다
- 이는 클릭 가능한 링크에 대한 시각적 피드백을 제공합니다
- 기본값은 밝은 파란색(#03A9F4)입니다
활성 색상
- 활성 링크 색상에 대해 재정의 스위치를 전환합니다
- 현재 활성 페이지 링크의 색상을 선택합니다
- 이것은 사용자가 어느 페이지에 있는지 알도록 도움을 줍니다
- 기본값은 밝은 파란색(#03A9F4)입니다
투명 네비게이션 구성
투명 네비게이션은 배경 없이 페이지 콘텐츠를 오버레이합니다. 이 설정은 히어로 위 헤더(투명) 카드에 있습니다. 다음을 사용자 정의할 수 있습니다:
링크 색상
- 링크 색상에 대해 재정의 스위치를 전환합니다
- 페이지 배경과 잘 대조되는 색상을 선택합니다
- 종종 흰색 또는 밝은 색상이 어두운 배경 위에 가장 잘 작동합니다
- 기본값은 진한 회색(#555555)입니다
링크 호버 색상
- 링크 호버 색상에 대해 재정의 스위치를 전환합니다
- 호버 상태 색상을 선택합니다
- 페이지 배경에 대해 표시되는지 확인합니다
- 기본값은 밝은 파란색(#03A9F4)입니다
활성 색상
- 활성 링크 색상에 대해 재정의 스위치를 전환합니다
- 활성 페이지 표시기 색상을 선택합니다
- 디자인에 맞으면서도 돋보여야 합니다
- 기본값은 밝은 파란색(#03A9F4)입니다
정보
투명 네비게이션은 페이지 콘텐츠를 직접 오버레이하므로 배경색 설정이 없습니다.
변경사항 저장
- 색상을 구성한 후 네비게이션 저장을 클릭합니다
- 변경사항이 실시간 웹사이트에 즉시 적용됩니다
- 웹사이트를 방문하여 두 모드에서 네비게이션을 확인합니다
기본값으로 재설정
기본 색상으로 돌아가려면:
- 사용자 정의 색상에 대해 재정의 스위치를 끕니다
- 네비게이션 저장을 클릭합니다
- 네비게이션이 기본 색상 체계로 돌아갑니다
또는 취소를 클릭하여 저장하지 않고 모든 변경사항을 버립니다.
모범 사례
색상 대비
- 가독성 - 링크 색상이 배경과 충분한 대비를 이루는지 확인합니다
- WCAG 준수 - 접근성을 위해 최소 4.5:1 대비 비율을 목표로 합니다
- 두 모드 모두 테스트 - 고정 및 투명 네비게이션 모두를 사용하여 사이트를 미리 봅니다
브랜드 일관성
- 브랜드 색상 사용 - 로고 및 웹사이트 테마와 일치시킵니다
- 팔레트 제한 - 통일된 모양을 위해 2-3가지 색상으로 유지합니다
- 이미지 고려 - 투명 네비게이션을 사용하는 경우 일반적인 페이지 배경에 대해 테스트합니다
호버 및 활성 상태
- 명확한 피드백 - 호버 상태를 기본 링크와 명백히 다르게 만듭니다
- 활성 페이지 구분 - 사용자가 자신의 위치를 알 수 있도록 구별되는 색상을 사용합니다
- 부드러운 전환 - 시스템이 색상 변경을 자동으로 애니메이션합니다
문제 해결
색상이 올바르게 표시되지 않음
- 캐시 지우기 - 브라우저 캐싱이 이전 색상을 표시할 수 있습니다
- 16진수 코드 확인 - 유효한 16진수 색상 코드를 입력했는지 확인합니다
- 다양한 배경에서 테스트 - 페이지에 따라 색상이 다르게 보일 수 있습니다
네비게이션이 표시되지 않음
- 투명 모드 - 밝은 이미지 위에 투명 네비게이션을 사용하는 경우 진한 텍스트를 보기 어려울 수 있습니다
- 해결책 - 링크 색상을 조정하거나 더 어두운 페이지 배경을 사용합니다
- 대체 - 네비게이션 영역에 미세한 그림자 또는 배경 오버레이를 추가합니다
기술 세부정보
네비게이션 스타일은 JSON으로 저장되고 CSS 변수를 사용하여 적용됩니다:
- 변경사항은 사이트를 다시 빌드하지 않고 즉시 적용됩니다
- 색상은 모든 네비게이션 요소로 연쇄됩니다
- 재정의는 선택 사항입니다. 설정되지 않은 색상은 테마 기본값을 사용합니다