Page Builder Sandwich는 일반적인 페이지 빌더와 달리 복잡하지 않고 사용하기 간단합니다.
빠른 둘러보기를 위해 아래 비디오를 확인해 보세요.
편집기는 어디에 있나요?
먼저 새 페이지, 글 또는 CPT(사용자 정의 글 유형)를 만듭니다. 그런 다음 프런트엔드에서 새 글이나 기존 글을 방문하세요. PBS는 100% 프런트엔드 기반이므로 백엔드에서 번거롭게 작업할 필요가 없습니다.
페이지 상단(관리자 표시줄)에 “Page Builder Sandwich” 버튼이 표시되어야 하며, 편집을 시작하려면 해당 버튼을 클릭하세요. 상단에서 텍스트 서식 영역이 나타나고, 측면에서 요소 추가 패널이 나타납니다. 이제 테마의 콘텐츠 영역이 바로 편집기가 됩니다!
PBS로는 단일 페이지만 편집할 수 있습니다. 블로그 글 목록이나 404 페이지는 테마에 의해 생성되므로 편집할 수 없습니다. 글, 페이지 및 사용자 정의 글 유형은 편집 가능합니다.
콘텐츠 편집하기
이제 멋진 부분이 나옵니다. 프런트엔드와 편집기 내부에 들어가면 콘텐츠의 아무 텍스트나 클릭하거나 콘텐츠 영역 내부를 클릭하고 입력을 시작하기만 하면 됩니다! 다른 페이지 빌더와 달리 PBS를 사용하면 팝업 대화 상자를 거칠 필요 없이 콘텐츠를 직접 편집할 수 있습니다.
콘텐츠 서식 지정 / 멋지게 꾸미기
편집하는 동안 상단 영역을 텍스트 서식 표시줄(Text Formatting Bar)이라고 부릅니다. 이 표시줄에는 색상, 굵게, 기울임꼴, 정렬, 링크 추가, 글머리 기호 등 텍스트 스타일 지정에 사용할 모든 서식 도구가 포함되어 있습니다. 각 버튼 위에 마우스를 올리면 해당 도구의 기능을 확인할 수 있습니다.
요소 추가하기
화면 왼쪽 상단의 요소 추가 버튼 위로 마우스를 올리면 요소 추가 패널(Add Element Panel)이 나타납니다. 마우스를 화면 왼쪽으로 이동하기만 해도 표시됩니다.
요소를 삽입하려면 요소를 마우스로 누른 상태에서 콘텐츠 영역으로 드래그하세요. 요소가 배치될 영역이 강조 표시됩니다. 마우스 버튼을 놓으면 요소가 배치됩니다.
요소 스타일 지정 및 수정
콘텐츠에 있는 요소 위로 마우스를 올리면 윤곽선과 도구 모음이 표시됩니다.
윤곽선 가장자리에 마우스를 올려 요소 간의 여백(마진)을 늘리거나 줄일 수 있습니다.
또한 도구 모음의 버튼을 클릭하여 요소에 대한 빠른 작업을 수행할 수도 있습니다. 도구 모음에서 기어 아이콘을 클릭하면 더 많은 옵션이 포함된 속성 검사기(Properties Inspector)가 열립니다.
속성 검사기(The Properties Inspector)
속성 검사기를 사용하면 요소의 모양을 더욱 세밀하게 제어할 수 있습니다. 그림자, 애니메이션, 지도 색상 변경, 모서리 곡률(border radius) 등 다양한 기능을 추가할 수 있습니다.
또한 요소의 상위 요소 속성에도 접근할 수 있습니다. 예를 들어 열(column) 안에 이미지를 배치하고 속성 검사기를 열면 이미지의 속성, 이미지가 포함된 열, 그리고 해당 열이 포함된 행(row)의 속성에 접근할 수 있습니다.
속성 검사기에는 요소마다 다양한 설정이 포함되어 있으므로 모두 확인해 보세요.
숏코드 사용하기
Page Builder Sandwich는 프런트엔드에서 실제 숏코드를 보여주며, 쉽게 편집할 수도 있습니다!
숏코드를 외우고 있다면 콘텐츠에 직접 입력하여 숏코드를 삽입할 수 있습니다. 하지만 모두 외우지 못했더라도(누가 다 외우겠어요?) 검사기에서 사이트에 사용 가능한 모든 숏코드를 나열해 줍니다. 검사기에서 숏코드(Shortcode) 버튼을 콘텐츠 영역으로 드래그하고 삽입하려는 숏코드를 찾아 클릭하여 삽입하세요.
숏코드는 프런트엔드에서 실제 콘텐츠로 렌더링되며, 이를 편집하려면 선택한 후 검사기에서 해당 속성을 확인할 수 있습니다. 또는 더 정밀하게 제어하기 위해 숏코드를 두 번 클릭하여 원시(raw) 형태로 편집할 수도 있습니다. 편집을 수행한 후 숏코드가 업데이트되어 변경 사항이 반영됩니다.
콘텐츠 재정렬하기
PBS를 사용하면 무엇이든 클릭하고 드래그하여 어디로든 이동할 수 있습니다. 요소를 드래그하여 페이지의 다른 요소 위로 이동하면 다른 콘텐츠의 위나 아래로 배치할 수 있습니다.
작업 내용 저장하기
디자인이 마음에 들면 페이지 왼쪽 상단에 있는 저장 버튼을 클릭하기만 하면 됩니다. 정말 간단하죠!