모양
모양 페이지를 통해 교회 웹사이트의 전반적인 모양과 느낌을 사용자 정의할 수 있습니다. 색상과 글꼴에서 간격 및 맞춤 CSS에 이르기까지 한 곳에서 사이트의 모든 시각적 측면을 제어할 수 있습니다.
시작하기 전에
- 웹사이트의 초기 설정을 완료합니다.
- 교회 로고가 투명 배경과 4:1 종횡비의 PNG 형식으로 준비되어 있습니다.
- 기존 스타일 가이드가 있는 경우 교회의 브랜드 색상(16진수 값)을 알고 있습니다.
모양 설정 액세스
- B1 Admin에서 왼쪽 메뉴의 웹사이트를 클릭합니다.
- 웹사이트 페이지 보기 상단의 모양 탭을 클릭합니다.
- 사이트 스타일 페이지가 로드되고 왼쪽에 웹사이트의 실시간 미리보기와 오른쪽에 스타일 설정 옵션이 표시됩니다.
색상 팔레트
- 스타일 설정 패널에서 색상 팔레트를 클릭합니다.
- 기본 색상(밝음, 강조 및 어두운 음영) 및 의미론적 색상(기본, 보조, 성공, 경고 및 오류)이 표시됩니다.
- 색상 선택기를 열려면 색상 견본을 클릭합니다. 선택기를 드래그하거나 16진수 값을 입력하여 색상을 선택합니다.
- 색상 조합 미리보기는 선택한 색상이 함께 어떻게 작동하는지 보여줍니다.
- 제안된 팔레트를 사용하여 미리 설계된 색상 구성표를 빠르게 적용합니다.
- 만족하면 저장을 클릭합니다.
타이포그래피
- 스타일 설정 패널에서 타이포그래피 설정을 클릭합니다.
- 글꼴 선택을 클릭하여 글꼴 브라우저를 엽니다. 이름으로 검색하거나 Serif, Sans Serif, Display, Handwriting 및 Monospace와 같은 카테고리별로 탐색할 수 있습니다.
- 제목과 본문 텍스트 모두에 글꼴을 설정합니다.
- 타이포그래피 크기를 클릭하여 제목 1부터 제목 4까지의 크기 계층 구조를 조정합니다. 배율 승수 및 기본 크기 필드를 사용하여 미세 조정합니다.
- 저장을 클릭하여 글꼴 선택 사항을 적용합니다.
간격
- 스타일 설정 패널에서 간격 크기를 클릭합니다.
- 초소형에서 초대형까지의 간격 값을 조정합니다. 실용적인 예제는 각 값이 레이아웃에 어떻게 영향을 미치는지 보여줍니다.
- 간격 저장을 클릭하여 전체 사이트에 값을 적용합니다.
로고 및 브랜딩
- 스타일 설정 패널에서 로고를 클릭합니다.
- 밝은 배경 로고 및 어두운 배경 로고를 업로드합니다. 최고의 결과를 위해 투명 배경과 4:1 종횡비가 있는 이미지를 사용합니다.
- 링크 미리보기를 위한 소셜 미디어 이미지 및 브라우저 탭 아이콘을 위한 파비콘을 업로드합니다.
팁
최고의 결과를 위해 PNG 형식의 투명 배경이 있는 로고를 사용하세요. 이렇게 하면 웹사이트 및 모바일 앱 전체의 밝음 및 어두운 배경에서 멋지게 보입니다.
탐색 스타일
웹사이트의 탐색 모음 색상을 단색 및 투명 모드 모두에 대해 사용자 정의합니다:
- 탐색 스타일 섹션으로 스크롤합니다.
- 탐색 스타일 편집을 클릭합니다.
- 단색 탐색(배경 포함) 및 투명 탐색(오버레이 모드)에 대한 색상을 구성합니다.
- 저장을 클릭하여 탐색 색상을 적용합니다.
자세한 지침은 탐색 스타일을 참조하세요.
맞춤 CSS 및 JavaScript
- 스타일 설정 패널에서 CSS 및 Javascript를 클릭합니다.
- 맞춤 CSS를 추가하여 고급 사용자 정의를 위해 기본 스타일을 재정의합니다.
- 추적 코드 또는 기타 스크립트에 대해 맞춤 HTML을 추가합니다.
- 일반적인 Javascript 예제 섹션에서 Google Analytics 통합과 같은 스니펫을 사용합니다.
경고
맞춤 CSS는 강력하지만 잘못 사용하면 사이트 레이아웃을 깨뜨릴 수 있습니다. 대부분의 교회는 기본 제공 색상, 글꼴 및 간격 제어를 사용하여 원하는 모양을 달성할 수 있습니다. 웹 개발에 익숙한 경우에만 맞춤 CSS를 사용하세요.
스타일 테마
빠른 시작 지점을 원하면 색상 팔레트 섹션의 제안된 팔레트는 한 번 클릭으로 조정된 색상을 설정하는 미리 만든 테마를 제공합니다. 테마를 적용한 후 항상 개별 설정을 미세 조정할 수 있습니다.