외관
외관 페이지에서는 교회 웹사이트의 전체적인 디자인과 느낌을 맞춤 설정할 수 있습니다. 색상과 폰트부터 간격과 맞춤 CSS까지, 한 곳에서 사이트의 모든 시각적 요소를 제어할 수 있습니다.
시작하기 전에
- 웹사이트의 초기 설정을 완료하십시오
- 투명 배경과 4:1 비율의 PNG 형식으로 교회 로고를 준비하십시오
- 기존 스타일 가이드가 있는 경우, 교회의 브랜드 색상(16진수 값)을 확인하십시오
외관 설정 접근
- B1 Admin에서 왼쪽 메뉴의 웹사이트를 클릭합니다.
- 웹사이트 페이지 보기 상단의 외관 탭을 클릭합니다.
- 사이트 스타일 페이지가 로드되며, 왼쪽에 웹사이트의 실시간 미리 보기가, 오른쪽에 스타일 설정 옵션이 표시됩니다.
색상 팔레트
- 스타일 설정 패널에서 색상 팔레트를 클릭합니다.
- 기본 색상(밝은, 강조, 어두운 색조)과 의미 색상(기본, 보조, 성공, 경고, 오류)이 표시됩니다.
- 색상 견본을 클릭하여 색상 선택기를 엽니다. 선택기를 드래그하거나 16진수 값을 입력하여 색상을 선택합니다.
- 색상 조합 미리 보기에서 선택한 색상이 어떻게 어울리는지 확인할 수 있습니다.
- 추천 팔레트를 사용하여 미리 디자인된 색상 구성표를 빠르게 적용합니다.
- 만족스러우면 저장을 클릭합니다.
타이포그래피
- 스타일 설정 패널에서 타이포그래피 설정을 클릭합니다.
- 폰트 선택을 클릭하여 폰트 브라우저를 엽니다. 이름으로 검색하거나 세리프, 산세리프, 디스플레이, 손글씨, 모노스페이스 등의 카테고리를 탐색할 수 있습니다.
- 제목과 본문 텍스트 모두에 폰트를 설정합니다.
- 타이포그래피 스케일을 클릭하여 제목 1부터 제목 4까지의 크기 계층을 조정합니다. 스케일 배율과 기본 크기 필드를 사용하여 미세 조정합니다.
- 저장을 클릭하여 폰트 선택을 적용합니다.
간격
- 스타일 설정 패널에서 간격 스케일을 클릭합니다.
- 매우 작음부터 매우 큼까지의 간격 값을 조정합니다. 실용 예시로 각 값이 레이아웃에 어떤 영향을 미치는지 확인할 수 있습니다.
- 간격 저장을 클릭하여 전체 사이트에 값을 적용합니다.
로고 및 브랜딩
- 스타일 설정 패널에서 로고를 클릭합니다.
- 밝은 배경 로고와 어두운 배경 로고를 업로드합니다. 최상의 결과를 위해 투명 배경과 4:1 비율의 이미지를 사용하십시오.
- 링크 미리 보기용 소셜 미디어 이미지와 브라우저 탭 아이콘용 파비콘을 업로드합니다.
팁
최상의 결과를 위해 투명 배경의 PNG 형식 로고를 사용하십시오. 이렇게 하면 웹사이트와 모바일 앱 전반에서 밝은 배경과 어두운 배경 모두에 로고가 멋지게 보입니다.
맞춤 CSS 및 JavaScript
- 스타일 설정 패널에서 CSS 및 Javascript를 클릭합니다.
- 고급 맞춤 설정을 위해 맞춤 CSS를 추가하여 기본 스타일을 재정의합니다.
- 추적 코드나 기타 스크립트를 위해 맞춤 HTML을 추가합니다.
- Google Analytics 통합 등의 코드 조각을 위해 일반 Javascript 예시 섹션을 활용합니다.
경고
맞춤 CSS는 강력하지만 잘못 사용하면 사이트 레이아웃이 깨질 수 있습니다. 대부분의 교회는 기본 제공되는 색상, 폰트, 간격 컨트롤로 원하는 디자인을 구현할 수 있습니다. 웹 개발에 익숙한 경우에만 맞춤 CSS를 사용하십시오.
스타일 테마
빠른 시작점을 원하는 경우, 색상 팔레트 섹션의 추천 팔레트에서 한 번의 클릭으로 조화로운 색상을 설정하는 미리 구축된 테마를 제공합니다. 테마를 적용한 후에도 개별 설정을 언제든지 미세 조정할 수 있습니다.