페이지 편집기 사용
B1 페이지 편집기는 코드를 작성하지 않고도 교회 웹사이트 페이지를 설계할 수 있는 시각적 드래그 앤 드롭 빌더입니다. 섹션과 콘텐츠 블록을 추가하고, 스타일을 사용자 정의하고, 작업을 미리 보고, 변경 사항을 취소할 수 있습니다. 모두 브라우저 내에서 가능합니다.
편집기 열기
- B1 Admin에서 왼쪽 메뉴의 웹사이트를 클릭합니다.
- 페이지 테이블에서 편집할 페이지를 찾아 편집을 클릭합니다.
편집기가 전체 화면 모드로 열립니다. 왼쪽 패널은 페이지 구조 및 사용 가능한 콘텐츠 요소를 표시하고, 중앙 영역은 페이지의 실시간 미리보기를 표시합니다.
편집기는 B1 Admin 테마 설정에 관계없이 항상 밝은 모드로 표시됩니다. 이를 통해 미리보기가 웹사이트 방문자에게 페이지가 어떻게 보일지 정확하게 일치합니다.
페이지 구조: 섹션 및 요소
모든 페이지는 두 가지 수준으로 구축됩니다:
- 섹션 -- 페이지를 수평 띠로 나누는 최상위 컨테이너(예: 영웅 섹션, 콘텐츠 블록 또는 바닥글 스트립). 모든 페이지에는 콘텐츠를 추가할 수 있도록 최소한 하나의 섹션이 필요합니다.
- 요소 -- 텍스트, 이미지, 버튼, 카드, 양식 및 캘린더와 같이 섹션 내에 배치된 개별 콘텐츠 조각입니다.
섹션 추가
- 섹션 추가를 클릭합니다(또는 왼쪽 패널 상단의 + 버튼).
- 섹션에 대한 레이아웃을 선택합니다. 옵션에는 한 열, 두 열, 세 열 등이 있습니다.
- 새 섹션이 미리보기에 나타납니다. 이를 클릭하여 선택하고 배경색, 패딩 및 기타 스타일 옵션을 구성합니다.
섹션에 요소 추가
- 미리보기의 섹션 내부를 클릭하여 선택합니다.
- 콘텐츠 추가를 클릭하고 목록에서 요소 유형을 선택합니다:
- 텍스트 -- 제목, 단락 및 서식 있는 텍스트
- 이미지 -- 사진 업로드 또는 링크
- 버튼 -- 클릭 가능한 행동 유도 링크
- 카드 -- 제목 및 설명이 있는 이미지
- 양식 -- 페이지에 직접 양식 포함
- 캘린더 -- 이벤트 캘린더 표시
- FAQ -- 아코디언 스타일 질문 및 답변 블록
- 비디오 -- URL로 비디오 포함
- 그룹 브라우저 -- 선택적 검색, 카테고리 필터 및 라벨 필터가 있는 모든 교회 그룹의 필터링 가능한 디렉토리
- 나타나는 설정 패널을 사용하여 요소를 구성합니다.
콘텐츠 재정렬
각 항목의 왼쪽에 있는 핸들 아이콘(6개 점)을 사용하여 섹션 또는 요소를 드래그하여 재정렬합니다. 섹션 내에서 요소를 드래그하거나 섹션 간에 이동할 수 있습니다.
페이지 스타일 지정
섹션 스타일
섹션을 클릭하여 스타일 패널을 엽니다. 다음을 설정할 수 있습니다:
- 배경 -- 단색, 그래디언트 또는 이미지
- 패딩 -- 섹션 내의 위 및 아래 간격
- 너비 -- 전체 너비 또는 중앙/포함됨
요소 스타일
요소를 클릭하여 스타일 패널을 엽니다. 일반적인 옵션으로는 글꼴 크기, 색상, 정렬, 여백 및 패딩이 있습니다. 이미지의 경우 대체 텍스트 및 링크 대상을 설정할 수 있습니다.
맞춤 CSS
고급 스타일 지정의 경우 각 섹션 및 요소에는 자신의 CSS 규칙을 작성할 수 있는 맞춤 CSS 필드가 있습니다. 이들은 해당 요소로 범위가 지정되므로 페이지의 나머지 부분에 의도하지 않게 영향을 미치지 않습니다.
사용자 정의 글꼴 또는 전역 색상과 같이 전체 사이트에 스타일을 적용해야 하는 경우 개별 페이지의 맞춤 CSS 대신 모양 설정을 사용하세요.
페이지 미리보기
도구 모음의 미리보기 컨트롤을 사용하여 다양한 화면 크기에서 페이지가 어떻게 보이는지 확인합니다:
- 데스크톱 -- 전체 너비 브라우저 보기
- 모바일 -- 좁은 휴대폰 크기 보기
미리보기를 클릭하여 페이지의 실시간 버전을 새 브라우저 탭에서 엽니다. 방문자가 보는 것과 정확히 같습니다.
변경 사항 취소
편집기는 편집 기록을 자동으로 추적합니다. 도구 모음 버튼 또는 키보드 단축키를 사용하여 탐색합니다:
- 취소(Ctrl+Z / Cmd+Z) -- 마지막 작업을 되돌립니다.
- 다시 실행(Ctrl+Y / Cmd+Y) -- 취소된 작업을 다시 적용합니다.
페이지를 이전 스냅샷으로 복원할 수도 있습니다. 도구 모음에서 기록을 클릭하여 설명이 있는 저장된 스냅샷 목록을 확인하고 항목을 클릭하여 해당 지점으로 복원합니다.
스냅샷을 복원하면 현재 페이지 콘텐츠가 스냅샷 버전으로 바뀝니다. 이는 표준 취소 버튼으로 취소할 수 없습니다. 이전 스냅샷을 복원하기 전에 현재 상태의 스냅샷을 저장하여 돌아갈 수 있는 옵션을 유지하세요.
작업 저장
변경 사항은 작업할 때 자동으로 저장됩니다. 도구 모음의 상태 표시기는 변경 사항이 저장되었는지 보여줍니다. 언제든지 저장을 클릭하여 저장을 강제할 수도 있습니다.