페이지 편집기 사용하기
B1 페이지 편집기는 코드를 작성하지 않고도 교회 웹사이트 페이지를 디자인할 수 있는 시각적 드래그 앤 드롭 빌더입니다. 섹션과 콘텐츠 블록을 추가하고, 스타일을 맞춤 설정하고, 작업 내용을 미리 보고, 변경 사항을 되돌릴 수 있습니다. 모든 작업은 브라우저 안에서 할 수 있습니다.
편집기 열기
- B1 Admin에서 점프 메뉴(왼쪽 상단의 검색창)를 열고 Website를 펼친 다음 Pages를 클릭합니다.
- 페이지 표에서 편집할 페이지를 찾아 Edit Content를 클릭합니다.
편집기는 전체 화면으로 열립니다. 왼쪽 패널에는 페이지 구조와 사용할 수 있는 콘텐츠 요소가 표시되고, 가운데 영역에는 페이지의 실시간 미리 보기가 표시됩니다.
편집기는 B1 Admin의 테마 설정과 관계없이 항상 밝은 모드로 표시되며, 외관에서 선택한 제목 글꼴과 본문 글꼴을 사용합니다. 그래야 미리 보기가 방문자에게 보이는 실제 페이지와 정확히 일치합니다.
페이지 구조: 섹션과 요소
모든 페이지는 두 단계로 구성됩니다.
- 섹션(Sections) -- 페이지를 가로 띠 모양으로 나누는 최상위 컨테이너입니다(예: 히어로 섹션, 콘텐츠 블록, 바닥글 띠). 콘텐츠를 추가하기 전에 모든 페이지에는 섹션이 하나 이상 있어야 합니다.
- 요소(Elements) -- 섹션 안에 배치되는 개별 콘텐츠로, 텍스트, 이미지, 버튼, 카드, 양식, 캘린더 등이 있습니다.
섹션 추가하기
- Add Section을 클릭합니다(또는 왼쪽 패널 상단의 + 버튼).
- 시작 방식을 선택합니다.
- 템플릿에서 시작 -- 카테고리(Hero, About, Services, Giving 등)별로 구성된 섹션 템플릿 갤러리를 둘러보고 하나를 클릭하면, 스타일이 완성되고 내용이 미리 채워진 섹션이 삽입됩니다. 추가한 뒤에는 무엇이든 맞춤 설정할 수 있습니다.
- 빈 섹션 -- 열 배치(한 열, 두 열, 세 열 등)를 선택한 다음 처음부터 직접 구성합니다.
- 새 섹션이 미리 보기에 나타납니다. 섹션을 클릭하여 선택한 다음, 배경 색상, 안쪽 여백 등 스타일 옵션을 설정합니다.
섹션 레이아웃 바꾸기
이미 구성한 섹션의 구조를 바꾸고 싶다면, 그 섹션의 레이아웃 전환기를 사용하세요. 기존 콘텐츠와 요소는 그대로 유지한 채 갤러리의 다른 열 배치로 바꿀 수 있습니다.
섹션에 요소 추가하기
- 미리 보기에서 섹션 안을 클릭하여 선택합니다.
- Add Content를 클릭하고 목록에서 요소 유형을 고릅니다.
- Text -- 제목, 단락, 서식 있는 텍스트
- Image -- 사진을 업로드하거나 사진에 연결
- Button -- 클릭할 수 있는 행동 유도 링크(CTA)
- Card -- 제목과 설명이 있는 이미지
- Form -- 페이지에 양식을 직접 삽입합니다. 양식에 헤더 사진이 있으면 질문 위에 표시됩니다.
- Calendar -- 행사 캘린더를 표시
- FAQ -- 아코디언 형식의 질문과 답변 블록
- Video -- URL로 동영상을 삽입
- Groups Browser -- 검색, 범주 필터, 레이블 필터를 선택적으로 사용할 수 있는 교회 그룹 전체 디렉터리
- Icon Feature -- 기능이나 사역을 강조하는 아이콘, 제목, 짧은 설명
- Gallery -- 여러 장의 사진을 격자 또는 매소너리(masonry) 레이아웃으로 표시
- Testimonial -- 작성자 이름, 역할, 사진과 함께 하나 이상의 인용문 표시
- Social Icons -- 교회의 소셜 미디어 프로필로 연결되는 아이콘: Facebook, Instagram, WhatsApp, YouTube, X, TikTok, Vimeo, Podcast. 표시할 각 항목에 링크를 입력하세요. WhatsApp은 전화번호가 포함된
https://wa.me/링크 또는 그룹 초대 링크를 사용합니다. - Countdown -- 특정 날짜나 주간 예배 시간까지 카운트다운하는 타이머
- Stats -- 레이블과 함께 큰 숫자를 한 줄로 표시(교인 수, 설립 연수, 캠퍼스 수)
- Campaign Progress -- 헌금 캠페인의 실시간 진행 막대로, 기금 목표에 대해 모금된 총액을 보여 줍니다.
- Staff Grid -- 그룹 구성원의 사진 카드. 그룹의 public roster 옵션이 켜져 있어야 합니다.
- Service Times -- 출석 설정에서 자동으로 가져온 캠퍼스별 예배 일정
- Sermons -- 설교 라이브러리를 전체 브라우저로, 또는 격자, 목록, 최신 설교 강조 레이아웃으로 표시
- Map -- 교회 주소를 중심으로 한 지도 삽입
- Table -- 표 형식의 콘텐츠를 위한 행과 열의 단순한 격자
- Text with Photo -- 텍스트와 이미지를 나란히 배치
- Logo -- 외관에서 가져온 교회 로고
- Live Stream -- 페이지에 직접 삽입되는 라이브 스트림 플레이어
- Podcast -- 입력한 외부 팟캐스트 RSS 피드 URL에서 가져온 에피소드 목록. 표시할 에피소드 수와 날짜 및 설명 표시 여부를 설정할 수 있습니다. 실제 사이트에서 각 에피소드에는 오디오 플레이어와 Download 링크가 있으며, 에피소드 제목으로 된 오디오 파일을 저장할 수 있습니다. 이는 외부 팟캐스트 피드를 사이트에 소개하기 위한 기능입니다. 교회 설교를 팟캐스트로 직접 발행하려면 대신 설교 관리를 참고하세요.
- Donation -- 헌금 버튼 또는 삽입형 헌금 양식
- HTML -- 직접 작성한 원시 HTML. 타사 위젯을 삽입하는 등 고급 용도로 사용합니다(HTML 요소 사용하기 참고).
- iFrame -- URL로 외부 콘텐츠를 삽입
- 나타나는 설정 패널에서 요소를 구성합니다.
HTML 요소 사용하기
HTML 요소에는 두 개의 입력란이 있습니다.
- HTML Content -- 페이지에 표시할 마크업입니다. 여기에 포함한
<script>태그는 실제 사이트에서 실행됩니다. - JavaScript (exclude script tag) -- 페이지가 로드될 때 실행되는 스크립트 코드입니다. 여기에
<script>태그를 포함한 업체의 삽입 코드를 붙여 넣을 수도 있으며, 실제 사이트에서 실행됩니다.
JavaScript 입력란에 웹 주소만 붙여 넣으면(예: 이미지 링크) 입력란이 빨간색으로 바뀌고 "This is a web address, not JavaScript." 경고가 표시됩니다. 이 입력란에 주소만 넣으면 아무 일도 일어나지 않습니다. 사진을 표시하려면 Image 요소를 사용하거나 HTML Content에 <img src="...">를 입력하세요.
캘린더 요소 사용하기
Calendar 요소는 캘린더 중 하나의 행사를 보여 줍니다.
- Select에서 Group Calendar(한 그룹의 행사이며, 목록에는 내가 속한 그룹이 표시됨) 또는 Curated Calendar(Calendars에서 만든 캘린더, 큐레이션 캘린더 참고)를 선택합니다.
- Select Calendar에서 그룹이나 캘린더를 고릅니다.
- Display에서 표시 방식을 고릅니다.
- Month calendar -- 방문자가 넘겨 볼 수 있는 월간 격자
- Upcoming events -- 다가오는 행사 12개를 타일 격자로 표시합니다. 반복되는 행사는 다음 날짜에 한 번만 표시됩니다. 각 타일에는 행사 사진(사진이 없으면 테마의 어두운 색 위에 제목), 날짜 배지, 요일과 시간, 설명의 첫 줄이 표시됩니다. 타일 위의 Subscribe 버튼을 누르면 방문자가 캘린더의 ICS 링크를 복사하거나 다운로드할 수 있습니다.
- 일부 행사만 보여 주려면 Only events tagged 칸에 태그를 입력합니다(예:
youth). Tags에 해당 단어가 포함된 행사만 표시됩니다. 비워 두면 모든 행사가 표시됩니다. 태그는 행사마다 설정합니다. 행사 추가 및 편집을 참고하세요.
두 표시 방식 모두에서 행사를 클릭하면 교회 웹사이트의 해당 행사 페이지가 열립니다. 행사 페이지에는 행사 사진, 제목, 날짜와 시간, 설명이 있으며, When(반복 행사의 경우 반복 패턴 포함)과 Where(행사를 위해 예약된 방) 정보 상자가 있습니다. 등록 기능이 켜져 있으면 Register for this Event 버튼이 표시되고, Add to my calendar 링크를 누르면 행사를 캘린더 파일로 내려받을 수 있습니다. 이 페이지는 검색 엔진이 검색 결과에 행사 날짜와 세부 정보를 표시할 수 있도록 구성되어 있습니다. 페이지에 표시되는 큐레이션 캘린더의 행사 페이지(향후 6개월 이내 행사)는 사이트맵에도 포함되어 검색 엔진이 찾을 수 있습니다.
콘텐츠 순서 바꾸기
각 항목 왼쪽의 손잡이 아이콘(점 여섯 개)을 드래그하여 섹션이나 요소의 순서를 바꿀 수 있습니다. 섹션 안에서 요소를 끌거나 다른 섹션으로 옮길 수 있습니다.
페이지 스타일 지정
섹션 스타일
섹션을 클릭하면 스타일 패널이 열립니다. 다음을 설정할 수 있습니다.
- Background -- 단색, 그라데이션, 또는 이미지. 이미지 배경을 사용할 때 Focal Point 선택기를 클릭하면 섹션 크기가 조정될 때 가운데에 유지될 이미지 부분을 정할 수 있습니다. Overlay 색상 옵션을 사용하면 이미지 위에 반투명한 색을 덧입혀 글자를 더 잘 읽히게 할 수 있습니다.
- Padding -- 섹션 안쪽의 위아래 간격
- Width -- 전체 너비 또는 가운데 정렬/폭 제한
- Dividers -- 섹션의 위쪽 또는 아래쪽 가장자리에 놓는 장식용 모양 구분선(물결, 기울기, 곡선, 삼각형 등). 색상, 높이, 뒤집기 옵션이 있습니다.
요소 스타일
요소를 클릭하면 스타일 패널이 열립니다. 글꼴 크기, 색상, 정렬, 바깥쪽 여백, 안쪽 여백 등 일반적인 옵션이 있습니다. 이미지의 경우 대체 텍스트(alt text)와 링크 대상을 설정할 수 있습니다.
사용자 지정 CSS
고급 스타일링을 위해 각 섹션과 요소에는 Custom CSS 입력란이 있으며, 여기에 직접 CSS 규칙을 작성할 수 있습니다. 이 규칙은 해당 요소에만 적용되므로 페이지의 다른 부분에 의도치 않게 영향을 주지 않습니다.
사이트 전체에 적용되는 스타일(예: 사용자 지정 글꼴이나 전역 색상)이 필요하면, 개별 페이지의 사용자 지정 CSS 대신 외관 설정을 사용하세요.
페이지 미리 보기
도구 모음의 미리 보기 컨트롤을 사용하면 다양한 화면 크기에서 페이지가 어떻게 보이는지 확인할 수 있습니다.
- Desktop -- 전체 너비 브라우저 보기
- Mobile -- 좁은 휴대폰 크기 보기
방문자가 보는 그대로 실제 페이지를 확인하려면 페이지 목록으로 돌아가 페이지의 경로를 클릭하세요. 새 브라우저 탭에서 열립니다.
접근성 확인하기
도구 모음의 Accessibility 아이콘을 클릭하면 흔한 문제를 빠르게 점검할 수 있습니다. 예를 들어 대체 텍스트가 없는 이미지, 낮은 색상 대비, 순서가 맞지 않는 제목 등을 확인합니다. 각 문제는 수정이 필요한 요소로 바로 연결되므로 그 자리에서 고칠 수 있습니다.
변경 사항 되돌리기
편집기는 편집 기록을 자동으로 저장합니다. 도구 모음 버튼이나 단축키를 사용하여 이동하세요.
- Undo (Ctrl+Z / Cmd+Z) -- 마지막 작업을 되돌립니다.
- Redo (Ctrl+Shift+Z 또는 Ctrl+Y / Cmd+Shift+Z) -- 되돌린 작업을 다시 적용합니다.
페이지를 이전 스냅샷으로 복원할 수도 있습니다. 도구 모음의 View history를 클릭하면 설명이 붙은 저장된 스냅샷 목록이 나타나며, 항목을 클릭하면 그 시점으로 복원됩니다.
스냅샷을 복원하면 현재 페이지 내용이 스냅샷 버전으로 바뀝니다. 이는 일반 실행 취소 버튼으로 되돌릴 수 없습니다. 이전 스냅샷을 복원하기 전에 현재 상태의 스냅샷을 먼저 저장해 두면 원래 상태로 돌아갈 수 있습니다.
저장과 발행
작업하는 동안 변경 사항은 자동으로 저장됩니다. 도구 모음의 상태 표시기에서 변경 사항이 저장되었는지 확인할 수 있습니다.
임시 저장과 발행 상태
페이지에는 발행(published) 상태가 있으며, 이는 방문자가 변경 사항을 언제 보게 될지를 정합니다. 도구 모음에는 현재 상태를 보여 주는 상태 칩이 표시됩니다.
- Live on save -- 페이지가 발행 절차를 사용하지 않습니다. 저장할 때마다 변경 사항이 즉시 실제 사이트에 반영됩니다. 새 페이지의 기본값입니다.
- Unpublished changes -- 페이지가 이전에 발행된 적이 있지만, 마지막 발행 이후 변경 사항이 있습니다. 방문자에게는 이전에 발행된 버전이 계속 보입니다.
- Published -- 페이지가 실제 사이트에 있으며, 저장된 내용과 방문자가 보는 내용이 일치합니다.
변경 사항을 발행하려면 도구 모음의 Publish 버튼을 클릭하세요. 페이지는 즉시 실제 사이트에 공개됩니다.
방문자가 보는 내용에 영향을 주지 않고 마지막으로 발행된 버전으로 되돌리려면, 더보기 메뉴(⋮)를 열고 Discard unpublished changes를 클릭하세요.
발행 절차를 사용하지 않으려면 더보기 메뉴를 열고 Turn off publishing을 클릭하세요. 이후에는 편집 내용이 다시 즉시 공개됩니다.
행사 준비처럼 페이지를 미리 준비해 두고 적절한 시점에만 공개하고 싶을 때 임시 저장/발행 절차를 사용하세요. 페이지를 만들고 미리 본 다음, 준비가 되면 Publish를 클릭하세요.