Page Builder Sandwich는 일반적인 페이지 빌더와 달리 복잡하지 않고 사용하기 간단합니다.

아래 비디오를 통해 간단한 둘러보기를 확인하실 수 있습니다.

편집기는 어디에 있나요?

먼저 새 페이지, 글 또는 CPT(커스텀 포스트 타입)를 생성하세요. 그런 다음 프런트엔드에서 새 글이나 기존 글을 방문하세요. PBS는 100% 프런트엔드 방식으로 작동하므로 백엔드에서 번거롭게 작업할 필요가 없습니다.

페이지 상단(관리자 표시줄)에 “Page Builder Sandwich” 버튼이 표시되며, 해당 버튼을 클릭하여 편집을 시작할 수 있습니다. 상단에서 텍스트 서식 영역이 나타나고 측면에서 요소 추가 패널이 나타납니다. 이제 테마의 콘텐츠 영역이 편집기가 됩니다!

PBS로는 개별 페이지만 편집할 수 있습니다. 블로그 글 목록이나 404 페이지는 테마에서 생성되므로 편집할 수 없습니다. 글, 페이지 및 커스텀 포스트 타입은 편집할 수 있습니다.

콘텐츠 편집하기

이제 가장 멋진 부분입니다.. 프런트엔드에서 편집기 내부로 들어오면 콘텐츠의 아무 텍스트나 클릭하거나 콘텐츠 영역 내부를 클릭하고 바로 입력을 시작하세요! 다른 페이지 빌더와 달리 PBS를 사용하면 팝업 대화 상자를 거칠 필요 없이 콘텐츠를 직접 편집할 수 있습니다.

콘텐츠 서식 지정 / 보기 좋게 꾸미기

편집하는 동안 상단 영역은 텍스트 서식 표시줄(Text Formatting Bar)이라고 부릅니다. 이 표시줄에는 색상, 굵게, 기울임꼴, 정렬, 링크 추가, 글머리 기호 등 텍스트 스타일을 지정하는 데 사용할 모든 서식 도구가 포함되어 있습니다. 각 버튼 위에 마우스를 올려 해당 도구의 기능을 확인해 보세요.

요소 추가하기

화면 왼쪽 상단의 요소 추가 버튼 위로 마우스를 올리면 요소 추가 패널(Add Element Panel)이 나타납니다. 화면 왼쪽으로 마우스를 이동하기만 해도 표시됩니다.

요소를 삽입하려면 요소를 마우스로 누른 상태에서 콘텐츠 영역으로 드래그하세요. 요소가 배치될 영역이 강조 표시됩니다. 마우스 버튼을 놓으면 요소가 배치됩니다.

요소 스타일 지정 및 수정

콘텐츠에 있는 요소 위에 마우스를 올리면 요소 주위에 윤곽선과 툴바가 나타납니다.

윤곽선 가장자리에 마우스를 올려 요소 간의 여백(마진)을 늘리거나 줄일 수 있습니다.

또한 툴바의 버튼을 클릭하여 요소에 대한 빠른 작업을 수행할 수도 있습니다. 툴바의 톱니바퀴 아이콘을 클릭하면 더 많은 옵션이 포함된 속성 검사기(Properties Inspector)가 표시됩니다.

속성 검사기

속성 검사기를 사용하면 요소의 모양을 더욱 세밀하게 제어할 수 있습니다. 그림자, 애니메이션 추가, 지도 색상 변경, 테두리 반경(border radius) 등 다양한 효과를 적용할 수 있습니다.

또한 요소의 상위 요소 속성에도 접근할 수 있습니다. 예를 들어, 열(컬럼) 안에 이미지를 배치하고 속성 검사기를 열면 이미지의 속성, 이미지가 포함된 열의 속성, 그리고 해당 열이 포함된 행의 속성에 모두 접근할 수 있습니다.

속성 검사기에는 요소마다 다양한 설정이 포함되어 있으므로 모두 확인해 보세요.

숏코드 사용하기

Page Builder Sandwich는 프런트엔드에서 실제 숏코드를 보여주며, 손쉽게 편집할 수도 있습니다!

숏코드를 외우고 있다면 콘텐츠에 직접 입력하여 숏코드를 삽입할 수 있습니다. 하지만 전부 외우지 못했더라도(누가 다 외우겠어요?) 검사기에 사이트에서 사용할 수 있는 모든 숏코드가 나열되어 있습니다. 검사기에서 숏코드(Shortcode) 버튼을 콘텐츠 영역으로 드래그한 다음, 삽입하려는 코드를 찾아 클릭하여 삽입하세요.

숏코드는 프런트엔드에서 실제 콘텐츠로 렌더링되며, 편집하려면 숏코드를 선택하고 검사기에서 해당 속성을 확인할 수 있습니다. 또는 더 정밀하게 제어하기 위해 숏코드를 더블 클릭하여 원본(raw) 형태로 편집할 수도 있습니다. 편집을 수행한 후에는 변경 사항이 반영되도록 숏코드가 업데이트됩니다.

콘텐츠 재정렬하기

PBS를 사용하면 무엇이든 클릭하고 드래그하여 어디로든 이동할 수 있습니다. 항목을 드래그하여 페이지의 다른 요소 위로 이동시키면 다른 콘텐츠의 위나 아래로 이동할 수 있습니다.

작업 내용 저장하기

디자인이 마음에 들면 페이지 왼쪽 상단의 저장 버튼을 클릭하기만 하면 됩니다. 정말 간단하죠!