페이지 편집기 사용
B1 페이지 편집기는 코드를 작성하지 않고도 교회 웹사이트 페이지를 디자인할 수 있는 시각적 드래그 앤 드롭 빌더입니다. 섹션과 콘텐츠 블록을 추가하고 스타일을 사용자 정의하며 작업을 미리 보고 변경 사항을 실행 취소할 수 있습니다. 모두 브라우저 내에서 가능합니다.
편집기 열기
- B1 Admin에서 왼쪽 메뉴의 Website를 클릭합니다.
- 페이지 테이블에서 편집할 페이지를 찾아 Edit를 클릭합니다.
편집기가 전체 화면 모드로 열립니다. 왼쪽 패널에 페이지 구조와 사용 가능한 콘텐츠 요소가 표시되고, 중앙 영역에 페이지의 라이브 미리 보기가 표시됩니다.
편집기는 B1 Admin 테마 설정과 상관없이 항상 라이트 모드로 표시됩니다. 이렇게 하면 미리 보기가 웹사이트 방문자에게 표시되는 방식과 정확하게 일치합니다.
페이지 구조: 섹션 및 요소
모든 페이지는 두 가지 수준으로 구축됩니다:
- 섹션 -- 페이지를 수평 띠로 나누는 최상위 컨테이너입니다(예: 히어로 섹션, 콘텐츠 블록 또는 바닥글 스트립). 콘텐츠를 추가하기 전에 모든 페이지에는 최소한 하나의 섹션이 있어야 합니다.
- 요소 -- 텍스트, 이미지, 버튼, 카드, 양식 및 캘린더와 같은 섹션 내에 배치된 개별 콘텐츠 조각입니다.
섹션 추가
- Add Section을 클릭합니다(또는 왼쪽 패널 맨 위의 + 버튼).
- 시작 방법을 선택합니다:
- 템플릿에서 — 카테고리별로 구성된 섹션 템플릿 갤러리(Hero, About, Services, Giving 등)를 찾아 하나를 클릭하여 완전히 스타일이 지정되고 사전에 작성된 섹션으로 삽입합니다. 추가된 후 모든 것을 사용자 정의할 수 있습니다.
- 공백 섹션 — 열 레이아웃(단일, 2열, 3열 등)을 선택하고 처음부터 빌드합니다.
- 새 섹션이 미리 보기에 나타납니다. 이를 클릭하여 선택하고 배경색, 패딩 및 기타 스타일 옵션을 구성합니다.
섹션에 요소 추가
- 미리 보기에서 섹션 내부를 클릭하여 선택합니다.
- Add Content를 클릭하고 목록에서 요소 유형을 선택합니다:
- 텍스트 -- 제목, 단락 및 리치 텍스트
- 이미지 -- 사진 업로드 또는 링크
- 버튼 -- 클릭 가능한 CTA 링크
- 카드 -- 제목과 설명이 포함된 이미지
- 양식 -- 페이지에 직접 양식 포함
- 캘린더 -- 이벤트 캘린더 표시
- FAQ -- 아코디언 스타일의 질문 및 답변 블록
- 비디오 -- URL로 비디오 포함
- 그룹 브라우저 -- 선택적 검색, 카테고리 필터 및 레이블 필터를 포함한 모든 교회 그룹의 필터 가능한 디렉토리
- 아이콘 기능 -- 기능 또는 사역 강조를 위한 제목과 짧은 설명이 있는 아이콘
- 갤러리 -- 다중 사진 그리드 또는 석조 레이아웃
- 추천의 말 -- 저자 이름, 역할 및 사진이 있는 하나 이상의 인용문
- 소셜 아이콘 -- 교회의 소셜 미디어 프로필에 대한 연결된 아이콘
- 카운트다운 -- 날짜 또는 주간 예배 시간으로 카운트다운하는 타이머
- 통계 -- 레이블이 있는 큰 숫자 행(멤버, 연도, 캠퍼스)
- 캠페인 진행 상황 -- 기금 목표를 향해 모금된 총액을 표시하는 기부 캠페인의 라이브 진행 표시줄
- 직원 그리드 -- 그룹의 멤버에 대한 사진 카드; 그룹에는 공개 명부 옵션이 활성화되어 있어야 합니다
- 서비스 시간 -- 캠퍼스의 예배 일정이 자동으로 출석 설정에서 가져와집니다
- 설교 -- 설교 라이브러리(전체 브라우저, 그리드, 목록 또는 최신 특징 레이아웃 포함)
- 나타나는 설정 패널을 사용하여 요소를 구성합니다.
콘텐츠 재정렬
각 항목의 왼쪽에 있는 핸들 아이콘(점 6개)을 사용하여 섹션이나 요소를 드래그하여 재정렬합니다. 섹션 내에서 요소를 드래그하거나 섹션 간에 이동할 수 있습니다.
페이지 스타일 지정
섹션 스타일
아무 섹션이나 클릭하여 스타일 패널을 엽니다. 다음을 설정할 수 있습니다:
- 배경 -- 단색, 그라디언트 또는 이미지입니다. 이미지 배경을 사용할 때 초점 픽커를 사용하면 섹션이 확대/축소될 때 이미지의 어느 부분이 중앙에 유지되는지 클릭하여 설정할 수 있으며, 오버레이 색상 옵션을 사용하면 텍스트 가독성을 개선하기 위해 이미지 위에 반투명 색상을 추가할 수 있습니다.
- 패딩 -- 섹션 내부의 위쪽 및 아래쪽 간격
- 너비 -- 전체 너비 또는 중심/포함됨
- 분할선 -- 섹션의 위쪽 또는 아래쪽 모서리에 있는 장식 모양 분할선(물결, 경사, 곡선, 삼각형 등) 및 색상, 높이 및 뒤집기 옵션
요소 스타일
아무 요소나 클릭하여 스타일 패널을 엽니다. 일반적인 옵션에는 글꼴 크기, 색상, 정렬, 여백 및 패딩이 있습니다. 이미지의 경우 대체 텍스트와 링크 대상을 설정할 수 있습니다.
사용자 정의 CSS
고급 스타일 지정을 위해 각 섹션과 요소에는 자신의 CSS 규칙을 작성할 수 있는 사용자 정의 CSS 필드가 있습니다. 이들은 해당 요소로 범위가 지정되므로 의도하지 않게 페이지의 나머지 부분에 영향을 주지 않습니다.
사용자 정의 글꼴이나 글로벌 색상과 같이 전체 사이트에 적용해야 하는 스타일이 필요한 경우 개별 페이지의 사용자 정의 CSS 대신 모양 설정을 사용합니다.
페이지 미리 보기
도구 모음의 미리 보기 컨트롤을 사용하여 다양한 화면 크기에서 페이지의 모양을 확인합니다:
- 데스크탑 -- 전체 너비 브라우저 보기
- 모바일 -- 좁은 휴대폰 크기 보기
Preview를 클릭하여 방문자가 보는 방식과 정확하게 동일한 새 브라우저 탭에서 페이지의 라이브 버전을 엽니다.
변경 사항 실행 취소
편집기는 자동으로 편집 기록을 추적합니다. 도구 모음 버튼이나 키보드 단축키를 사용하여 탐색합니다:
- 실행 취소 (Ctrl+Z / Cmd+Z) -- 마지막 작업을 되돌립니다
- 다시 실행 (Ctrl+Y / Cmd+Y) -- 실행 취소된 작업을 다시 적용합니다
페이지를 이전 스냅샷으로 복원할 수도 있습니다. 도구 모음의 History를 클릭하여 설명이 있는 저장된 스냅샷 목록을 보고 원하는 항목을 클릭하여 해당 지점으로 복원합니다.
스냅샷을 복원하면 현재 페이지 콘텐츠가 스냅샷 버전으로 바뀝니다. 이는 표준 실행 취소 버튼으로 실행 취소할 수 없습니다. 이전 버전을 복원한 후 현재 상태의 스냅샷을 저장하면 반환 옵션이 유지됩니다.
저장 및 게시
변경 사항은 작업할 때 자동으로 저장됩니다. 도구 모음의 상태 표시기는 변경 사항이 저장되었는지 여부를 표시합니다.
초안 및 게시 상태
페이지는 방문자가 변경 사항을 볼 때를 제어하는 게시됨 상태를 가질 수 있습니다. 도구 모음에는 현재 상태를 표시하는 상태 칩이 표시됩니다:
- 저장 시 라이브 -- 페이지는 게시 워크플로우를 사용하지 않습니다. 저장된 모든 변경 사항은 즉시 라이브로 전송됩니다. 이것이 새 페이지의 기본값입니다.
- 게시되지 않은 변경 사항 -- 페이지가 이전에 게시되었지만 마지막 게시 이후로 변경 사항을 작성했습니다. 방문자는 여전히 이전에 게시된 버전을 봅니다.
- 게시됨 -- 페이지가 라이브이고 저장된 콘텐츠는 방문자가 보는 것과 일치합니다.
변경 사항을 게시하려면 도구 모음의 Publish 버튼을 클릭합니다. 페이지는 즉시 라이브가 됩니다.
방문자에게 보이는 것에 영향을 주지 않고 마지막으로 게시된 버전으로 되돌리려면 오버플로우 메뉴(⋮)를 열고 Discard Changes를 클릭합니다.
페이지를 완전히 오프라인으로 전환하려면 오버플로우 메뉴를 열고 Unpublish를 클릭합니다. 다시 게시할 때까지 방문자는 더 이상 해당 페이지를 볼 수 없습니다.
예정된 이벤트를 위해 페이지를 준비하고 적절한 시기에만 라이브로 만들고 싶을 때 초안/게시 워크플로우를 사용합니다. 페이지를 빌드하고 미리 본 다음 준비가 되면 Publish를 클릭합니다.