페이지 편집기 사용하기
B1 페이지 편집기는 코드를 작성하지 않고도 교회 웹사이트 페이지를 디자인할 수 있는 시각적 드래그 앤 드롭 빌더입니다. 섹션과 콘텐츠 블록을 추가하고, 스타일을 사용자 지정하고, 작업물을 미리 보고, 변경 사항을 실행 취소하는 모든 작업을 브라우저 안에서 할 수 있습니다.
편집기 열기
- B1 Admin에서 왼쪽 메뉴의 **웹사이트(Website)**를 클릭합니다.
- 페이지 표에서 편집하려는 페이지를 찾아 **편집(Edit)**을 클릭합니다.
편집기가 전체 화면 모드로 열립니다. 왼쪽 패널에는 페이지 구조와 사용 가능한 콘텐츠 요소가 표시되고, 가운데 영역에는 페이지의 실시간 미리보기가 표시됩니다.
편집기는 B1 Admin의 테마 설정과 무관하게 항상 라이트 모드로 표시됩니다. 이는 미리보기가 웹사이트 방문자에게 보이는 실제 모습과 정확히 일치하도록 하기 위함입니다.
페이지 구조: 섹션과 요소
모든 페이지는 두 단계로 구성됩니다.
- 섹션(Sections) -- 페이지를 가로 띠 모양으로 나누는 최상위 컨테이너입니다(예: 히어로 섹션, 콘텐츠 블록, 푸터 영역). 콘텐츠를 추가하려면 모든 페이지에 최소 하나의 섹션이 있어야 합니다.
- 요소(Elements) -- 섹션 안에 배치되는 개별 콘텐츠 조각으로, 텍스트, 이미지, 버튼, 카드, 양식, 캘린더 등이 있습니다.
섹션 추가하기
- 섹션 추가(Add Section)(또는 왼쪽 패널 상단의 + 버튼)를 클릭합니다.
- 시작 방법을 선택합니다.
- 템플릿에서 시작 — 카테고리(Hero, About, Services, Giving 등)별로 정리된 섹션 템플릿 갤러리를 둘러보고, 하나를 클릭해 완전히 스타일이 적용되고 콘텐츠가 미리 채워진 섹션으로 삽입합니다. 추가된 후에는 모든 것을 사용자 지정할 수 있습니다.
- 빈 섹션 — 열 레이아웃(단일 열, 2열, 3열 등)을 선택하고 처음부터 구성합니다.
- 새 섹션이 미리보기에 나타납니다. 클릭해서 선택한 다음 배경색, 여백 및 기타 스타일 옵션을 구성합니다.
섹션 레이아웃 전환하기
이미 구성한 섹션을 다른 구조로 바꾸고 싶으신가요? 해당 섹션의 레이아웃 전환기를 사용하면 기존 콘텐츠와 요소는 그대로 둔 채 갤러리의 다른 열 배열로 바꿀 수 있습니다.
섹션에 요소 추가하기
- 미리보기에서 섹션 안쪽을 클릭해 선택합니다.
- **콘텐츠 추가(Add Content)**를 클릭하고 목록에서 요소 유형을 선택합니다.
- 텍스트(Text) -- 제목, 단락, 서식 있는 텍스트
- 이미지(Image) -- 사진 업로드 또는 링크
- 버튼(Button) -- 클릭 가능한 행동 유도 링크
- 카드(Card) -- 제목과 설명이 있는 이미지
- 양식(Form) -- 페이지에 양식을 직접 삽입
- 캘린더(Calendar) -- 행사 캘린더 표시
- FAQ -- 아코디언 형식의 질문과 답변 블록
- 비디오(Video) -- URL로 비디오 삽입
- 그룹 브라우저(Groups Browser) -- 검색, 카테고리 필터, 레이블 필터를 선택적으로 포함한, 필터링 가능한 교회 전체 그룹 디렉터리
- 아이콘 특성(Icon Feature) -- 기능이나 사역을 강조하기 위한 아이콘과 제목, 짧은 설명
- 갤러리(Gallery) -- 여러 사진을 격자형 또는 매이슨리 레이아웃으로 배치
- 추천사(Testimonial) -- 작성자 이름, 역할, 사진이 포함된 하나 이상의 인용문
- 소셜 아이콘(Social Icons) -- 교회의 소셜 미디어 프로필에 연결된 아이콘
- 카운트다운(Countdown) -- 특정 날짜나 주간 예배 시간까지 카운트다운하는 타이머
- 통계(Stats) -- 레이블이 달린 큰 숫자들의 행(교인 수, 연차, 캠퍼스 수)
- 캠페인 진행 상황(Campaign Progress) -- 헌금 캠페인의 목표 대비 모금액을 보여주는 실시간 진행 막대
- 스태프 그리드(Staff Grid) -- 그룹 구성원의 사진 카드입니다. 해당 그룹은 공개 명단(public roster) 옵션이 켜져 있어야 합니다
- 예배 시간(Service Times) -- 출석 설정에서 자동으로 가져온 캠퍼스별 예배 일정
- 설교(Sermons) -- 전체 브라우저, 또는 그리드/목록/최신 강조 레이아웃으로 표시되는 설교 라이브러리
- 지도(Map) -- 교회 주소를 중심으로 표시되는 삽입 지도
- 표(Table) -- 표 형식 콘텐츠를 위한 단순한 행과 열의 그리드
- 사진 포함 텍스트(Text with Photo) -- 텍스트와 이미지가 나란히 배치
- 로고(Logo) -- 외관에서 가져온 교회 로고
- 라이브 스트림(Live Stream) -- 페이지에 직접 삽입되는 라이브 스트림 플레이어
- 헌금(Donation) -- 헌금 버튼 또는 삽입된 헌금 양식
- 원본 HTML(Raw HTML) -- 고급 용도를 위한 사용자 지정 HTML 마크업
- iFrame -- URL로 외부 콘텐츠 삽입
- 나타나는 설정 패널을 사용해 요소를 구성합니다.
콘텐츠 순서 바꾸기
각 항목 왼쪽에 있는 핸들 아이콘(점 여섯 개)을 사용해 섹션이나 요소를 드래그하여 순서를 바꿉니다. 섹션 안에서 요소를 드래그하거나, 섹션 간에 이동시킬 수도 있습니다.
페이지 스타일 지정하기
섹션 스타일
아무 섹션이나 클릭하면 스타일 패널이 열립니다. 다음을 설정할 수 있습니다.
- 배경(Background) -- 단색, 그라디언트, 또는 이미지입니다. 이미지 배경을 사용할 때는 초점(Focal Point) 선택기로 섹션 크기가 조정되어도 이미지의 어느 부분이 중앙에 유지될지 클릭해서 지정할 수 있고, 오버레이(Overlay) 색상 옵션으로 텍스트 가독성을 높이기 위해 이미지 위에 반투명 색조를 추가할 수 있습니다.
- 여백(Padding) -- 섹션 안쪽의 위아래 간격
- 너비(Width) -- 전체 너비 또는 가운데 정렬/제한된 너비
- 구분선(Dividers) -- 섹션의 위쪽이나 아래쪽 가장자리에 넣는 장식용 도형 구분선(물결, 사선, 곡선, 삼각형 등)으로, 색상, 높이, 반전 옵션을 지정할 수 있습니다
요소 스타일
아무 요소나 클릭하면 스타일 패널이 열립니다. 일반적인 옵션으로 글꼴 크기, 색상, 정렬, 마진, 여백이 있습니다. 이미지의 경우 대체 텍스트와 링크 대상을 설정할 수 있습니다.
사용자 지정 CSS
고급 스타일링을 위해 각 섹션과 요소에는 자체 CSS 규칙을 작성할 수 있는 사용자 지정 CSS 필드가 있습니다. 이 규칙들은 해당 요소로 범위가 한정되므로, 페이지의 다른 부분에 의도치 않게 영향을 주지 않습니다.
사용자 지정 글꼴이나 전역 색상처럼 사이트 전체에 스타일을 적용해야 한다면, 개별 페이지의 사용자 지정 CSS 대신 외관 설정을 사용하세요.
페이지 미리보기
도구 모음의 미리보기 컨트롤을 사용해 다양한 화면 크기에서 페이지가 어떻게 보이는지 확인하세요.
- 데스크톱(Desktop) -- 전체 너비 브라우저 화면
- 모바일(Mobile) -- 좁은 휴대폰 크기 화면
**미리보기(Preview)**를 클릭하면 방문자가 보는 것과 정확히 동일한 페이지의 실시간 버전이 새 브라우저 탭에서 열립니다.
접근성 확인하기
도구 모음의 접근성(Accessibility) 아이콘을 클릭하면 대체 텍스트 누락, 낮은 색상 대비, 순서가 어긋난 제목 같은 일반적인 문제를 빠르게 검사할 수 있습니다. 각 문제는 해당 요소로 바로 연결되므로 그 자리에서 수정할 수 있습니다.
변경 사항 실행 취소하기
편집기는 편집 기록을 자동으로 추적합니다. 도구 모음 버튼이나 키보드 단축키로 탐색할 수 있습니다.
- 실행 취소(Undo)(Ctrl+Z / Cmd+Z) -- 마지막 작업을 되돌립니다
- 다시 실행(Redo)(Ctrl+Y / Cmd+Y) -- 실행 취소한 작업을 다시 적용합니다
이전 스냅샷으로 페이지를 복원할 수도 있습니다. 도구 모음의 **기록(History)**을 클릭하면 설명이 달린 저장된 스냅샷 목록이 표시되며, 원하는 항목을 클릭해 해당 시점으로 복원할 수 있습니다.
스냅샷을 복원하면 현재 페이지 콘텐츠가 스냅샷 버전으로 대체됩니다. 이 작업은 일반 실행 취소 버튼으로 되돌릴 수 없습니다. 이전 상태로 돌아갈 수 있는 선택지를 남겨두고 싶다면, 이전 스냅샷을 복원하기 전에 현재 상태의 스냅샷을 먼저 저장해 두세요.
저장 및 게시하기
작업하는 동안 변경 사항은 자동으로 저장됩니다. 도구 모음의 상태 표시기가 변경 사항이 저장되었는지 보여줍니다.
초안과 게시 상태
페이지는 방문자가 언제 변경 사항을 보게 될지를 제어하는 게시(published) 상태를 가질 수 있습니다. 도구 모음에는 현재 상태를 보여주는 상태 칩이 표시됩니다.
- 저장 즉시 게시(Live on Save) -- 이 페이지는 게시 워크플로우를 사용하지 않습니다. 저장하는 모든 변경 사항이 즉시 반영됩니다. 새 페이지의 기본값입니다.
- 미게시 변경 사항(Unpublished Changes) -- 이전에 게시된 적이 있지만, 마지막 게시 이후 변경 사항이 있습니다. 방문자에게는 여전히 이전에 게시된 버전이 보입니다.
- 게시됨(Published) -- 페이지가 공개되어 있고, 저장된 콘텐츠가 방문자가 보는 내용과 일치합니다.
변경 사항을 게시하려면 도구 모음의 게시(Publish) 버튼을 클릭하세요. 페이지가 즉시 공개됩니다.
방문자에게 보이는 화면에 영향을 주지 않고 마지막으로 게시된 버전으로 되돌리려면, 오버플로 메뉴(⋮)를 열고 **변경 사항 취소(Discard Changes)**를 클릭하세요.
페이지를 완전히 비공개로 전환하려면 오버플로 메뉴를 열고 **게시 취소(Unpublish)**를 클릭하세요. 다시 게시할 때까지 방문자는 해당 페이지를 볼 수 없습니다.
다가오는 행사처럼 페이지를 미리 준비해 두었다가 원하는 시점에만 공개하고 싶을 때는 초안/게시 워크플로우를 사용하세요. 페이지를 구성하고 미리 본 다음, 준비가 되면 게시를 클릭하면 됩니다.