내비게이션 스타일
교회 웹사이트의 내비게이션 바 색상을 브랜딩에 맞게 사용자 정의합니다. 솔리드 배경과 투명 오버레이 모두에 대한 색상을 구성하여 다양한 페이지에서 내비게이션이 어떻게 보이는지 완전히 제어할 수 있습니다.
시작하기 전에
- 교회 웹사이트를 관리할 수 있는 권한이 필요합니다. 자세한 내용은 역할 및 권한을 참조하세요.
- 16진수 색상 코드(예: #03A9F4)를 포함한 브랜드 색상을 준비하세요.
- 웹사이트에서 솔리드와 투명 내비게이션 스타일의 차이를 이해하세요.
내비게이션 모드 이해하기
웹사이트 내비게이션은 페이지에 따라 두 가지 다른 스타일로 나타날 수 있습니다:
- 솔리드 내비게이션 -- 배경 색상이 있는 내비게이션 바로, 일반적으로 콘텐츠 페이지에 사용됩니다
- 투명 내비게이션 -- 페이지 콘텐츠를 오버레이하는 내비게이션으로, 일반적으로 히어로 이미지 또는 전체 화면 배경이 있는 페이지에 사용됩니다
두 모드에 대해 독립적으로 색상을 사용자 정의할 수 있습니다.
내비게이션 스타일 액세스하기
- B1 Admin에서 Website로 이동합니다
- 사이드바에서 Appearance를 클릭합니다
- Navigation Styles 섹션으로 스크롤합니다
- Edit Navigation Styles를 클릭합니다
솔리드 내비게이션 구성하기
솔리드 내비게이션은 내비게이션 바 뒤에 배경 색상과 함께 나타납니다. 사용자 정의할 수 있습니다:
배경 색상
- Background Color에 대한 Override 스위치를 토글합니다
- 색상 선택기를 클릭합니다
- 원하는 배경 색상을 선택합니다
- 기본값은 흰색(#FFFFFF)입니다
링크 색상
- Link Color에 대한 Override 스위치를 토글합니다
- 내비게이션 링크 텍스트의 색상을 선택합니다
- 기본 상태의 링크에 영향을 줍니다
- 기본값은 진한 회색(#555555)입니다
링크 호버 색상
- Link Hover Color에 대한 Override 스위치를 토글합니다
- 사용자가 링크 위에 마우스를 올릴 때 변경되는 색상을 선택합니다
- 클릭 가능한 링크에 대한 시각적 피드백을 제공합니다
- 기본값은 밝은 파란색(#03A9F4)입니다
활성 색상
- Active Color에 대한 Override 스위치를 토글합니다
- 현재 활성 페이지 링크의 색상을 선택합니다
- 사용자가 어느 페이지에 있는지 알 수 있도록 도와줍니다
- 기본값은 밝은 파란색(#03A9F4)입니다
투명 내비게이션 구성하기
투명 내비게이션은 배경 없이 페이지 콘텐츠를 오버레이합니다. 사용자 정의할 수 있습니다:
링크 색상
- Link Color에 대한 Override 스위치를 토글합니다
- 페이지 배경과 잘 대비되는 색상을 선택합니다
- 종종 어두운 배경 위에는 흰색이나 밝은 색상이 가장 잘 작동합니다
- 기본값은 진한 회색(#555555)입니다
링크 호버 색상
- Link Hover Color에 대한 Override 스위치를 토글합니다
- 호버 상태 색상을 선택합니다
- 페이지 배경에 대해 보이는지 확인하세요
- 기본값은 밝은 파란색(#03A9F4)입니다
활성 색상
- Active Color에 대한 Override 스위치를 토글합니다
- 활성 페이지 표시기 색상을 선택합니다
- 디자인에 맞으면서도 눈에 띄어야 합니다
- 기본값은 밝은 파란색(#03A9F4)입니다
정보
투명 내비게이션은 페이지 콘텐츠를 직접 오버레이하므로 배경 색상 설정이 없습니다.
변경 사항 저장하기
- 색상을 구성한 후 Save Navigation Styles를 클릭합니다
- 변경 사항이 즉시 라이브 웹사이트에 적용됩니다
- 웹사이트를 방문하여 두 모드의 내비게이션을 확인하세요
기본값으로 재설정하기
기본 색상으로 돌아가려면:
- 사용자 정의 색상에 대한 Override 스위치를 끕니다
- Save Navigation Styles를 클릭합니다
- 내비게이션이 기본 색상 구성표로 돌아갑니다
또는 Cancel을 클릭하여 저장하지 않고 모든 변경 사항을 폐기합니다.
모범 사례
색상 대비
- 가독성 -- 링크 색상이 배경과 충분한 대비를 가지도록 하세요
- WCAG 준수 -- 접근성을 위해 최소 4.5:1 대비율을 목표로 하세요
- 두 모드 모두 테스트 -- 솔리드와 투명 내비게이션 모두로 사이트를 미리 봅니다
브랜드 일관성
- 브랜드 색상 사용 -- 로고 및 웹사이트 테마와 일치시킵니다
- 팔레트 제한 -- 응집력 있는 모양을 위해 2-3가지 색상을 고수하세요
- 이미지 고려 -- 투명 내비게이션을 사용하는 경우 일반적인 페이지 배경에 대해 테스트하세요
호버 및 활성 상태
- 명확한 피드백 -- 호버 상태가 기본 링크와 확실히 다르게 만드세요
- 활성 페이지 구분 -- 사용자가 어디에 있는지 알 수 있도록 뚜렷한 색상을 사용하세요
- 부드러운 전환 -- 시스템이 자동으로 색상 변경을 애니메이션합니다
문제 해결
색상이 제대로 보이지 않음
- 캐시 지우기 -- 브라우저 캐싱으로 인해 이전 색상이 표시될 수 있습니다
- 16진수 코드 확인 -- 유효한 16진수 색상 코드를 입력했는지 확인하세요
- 다른 배경에서 테스트 -- 색상은 페이지에 따라 다르게 보일 수 있습니다
내비게이션이 보이지 않음
- 투명 모드 -- 밝은 이미지 위에 투명 내비게이션을 사용하는 경우 어두운 텍스트가 보기 어려울 수 있습니다
- 솔루션 -- 링크 색상을 조정하거나 더 어두운 페이지 배경을 사용하세요
- 대안 -- 내비게이션 영역에 미묘한 그림자 또는 배경 오버레이를 추가하세요
기술 세부 사항
내비게이션 스타일은 JSON으로 저장되고 CSS 변수를 사용하여 적용됩니다:
- 변경 사항은 사이트를 다시 빌드하지 않고도 즉시 적용됩니다
- 색상은 모든 내비게이션 요소로 캐스케이드됩니다
- 재정의는 선택 사항입니다. 설정되지 않은 색상은 테마 기본값을 사용합니다