본문으로 건너뛰기

외관

외관 페이지에서는 교회 웹사이트의 전체적인 모양과 느낌을 사용자 정의할 수 있습니다. 색상과 글꼴부터 간격과 사용자 정의 CSS까지 한 곳에서 사이트의 모든 시각적 측면을 제어할 수 있습니다.

시작하기 전에

  • 웹사이트의 초기 설정을 완료하세요
  • 투명한 배경과 4:1 가로세로 비율의 PNG 형식 교회 로고를 준비하세요
  • 기존 스타일 가이드가 있는 경우 교회의 브랜드 색상(16진수 값)을 알아두세요

외관 설정 액세스하기​

  1. B1 Admin에서 왼쪽 메뉴의 Website를 클릭합니다.
  2. Website Pages 보기 상단의 Appearance 탭을 클릭합니다.
  3. Site Styles 페이지가 왼쪽에 웹사이트의 실시간 미리보기와 오른쪽에 Style Settings 옵션이 표시됩니다.

색상 팔레트​

  1. Style Settings 패널에서 Color Palette를 클릭합니다.
  2. Base Colors(밝은색, 강조색 및 어두운 음영)와 Semantic Colors(Primary, Secondary, Success, Warning 및 Error)가 표시됩니다.
  3. 색상 견본을 클릭하여 색상 선택기를 엽니다. 선택기를 드래그하거나 16진수 값을 입력하여 색상을 선택합니다.
  4. Color Combinations Preview는 선택한 색상이 어떻게 함께 작동하는지 보여줍니다.
  5. Suggested Palettes를 사용하여 미리 디자인된 색상 구성표를 빠르게 적용합니다.
  6. 만족스러우면 Save를 클릭합니다.

타이포그래피​

  1. Style Settings 패널에서 Typography Settings를 클릭합니다.
  2. Select a Font를 클릭하여 글꼴 브라우저를 엽니다. 이름으로 검색하거나 Serif, Sans Serif, Display, Handwriting, Monospace와 같은 카테고리를 탐색할 수 있습니다.
  3. 제목과 본문 텍스트 모두에 대한 글꼴을 설정합니다.
  4. Typography Scale을 클릭하여 Heading 1부터 Heading 4까지의 크기 계층을 조정합니다. 스케일 배율과 기본 크기 필드를 사용하여 미세 조정합니다.
  5. Save를 클릭하여 글꼴 선택을 적용합니다.

간격​

  1. Style Settings 패널에서 Spacing Scale을 클릭합니다.
  2. Extra Small부터 Extra Large까지의 간격 값을 조정합니다. 실용적인 예제는 각 값이 레이아웃에 미치는 영향을 보여줍니다.
  3. Save Spacing을 클릭하여 전체 사이트에 값을 적용합니다.

로고 및 브랜딩​

  1. Style Settings 패널에서 Logo를 클릭합니다.
  2. Light Background Logo와 Dark Background Logo를 업로드합니다. 최상의 결과를 얻으려면 투명한 배경과 4:1 가로세로 비율의 이미지를 사용하세요.
  3. 링크 미리보기용 Social Media Image와 브라우저 탭 아이콘용 Favicon을 업로드합니다.
팁

최상의 결과를 얻으려면 PNG 형식의 투명한 배경이 있는 로고를 사용하세요. 이렇게 하면 웹사이트와 모바일 앱 전체에서 밝은 배경과 어두운 배경 모두에서 멋지게 보입니다.

내비게이션 스타일​

솔리드 모드와 투명 모드 모두에 대한 웹사이트 내비게이션 바 색상을 사용자 정의합니다:

  1. Navigation Styles 섹션으로 스크롤합니다
  2. Edit Navigation Styles를 클릭합니다
  3. 솔리드 내비게이션(배경 포함)과 투명 내비게이션(오버레이 모드)에 대한 색상을 구성합니다
  4. Save를 클릭하여 내비게이션 색상을 적용합니다

자세한 지침은 내비게이션 스타일을 참조하세요.

사용자 정의 CSS 및 JavaScript​

  1. Style Settings 패널에서 CSS and Javascript를 클릭합니다.
  2. 고급 사용자 정의를 위해 기본 스타일을 재정의하는 Custom CSS를 추가합니다.
  3. 추적 코드 또는 기타 스크립트를 위한 Custom HTML을 추가합니다.
  4. Google Analytics 통합과 같은 스니펫을 위해 Common Javascript Examples 섹션을 사용합니다.
경고

사용자 정의 CSS는 강력하지만 잘못 사용하면 사이트 레이아웃을 망칠 수 있습니다. 대부분의 교회는 기본 제공 색상, 글꼴 및 간격 컨트롤을 사용하여 원하는 모양을 얻을 수 있습니다. 웹 개발에 익숙한 경우에만 사용자 정의 CSS를 사용하세요.

스타일 테마​

빠른 시작점을 원하는 경우 Color Palette 섹션의 Suggested Palettes는 한 번의 클릭으로 조정된 색상을 설정하는 미리 구축된 테마를 제공합니다. 테마를 적용한 후 언제든지 개별 설정을 미세 조정할 수 있습니다.

다음 단계​

  • 페이지 관리 -- 웹사이트 페이지 구축 및 조직하기
  • 파일 -- 사이트용 미디어 자산 업로드