Page Builder Sandwichは一般的なページビルダーとは異なり、複雑さがなくシンプルに使えます。
簡単な概要については、以下の動画をご覧ください。
エディターはどこにありますか?
まず、新しい固定ページ、投稿、またはCPT(カスタム投稿タイプ)を作成します。その後、フロントエンドで新しく作成した投稿、または既存の投稿を表示します。PBSは100%フロントエンドで動作するため、バックエンドで細々とした作業をする必要はありません。
ページ上部(管理バー)に「Page Builder Sandwich」ボタンがあるはずですので、それをクリックして編集を開始します。上部からテキスト書式設定エリアが、サイドから要素追加パネルがポップアップ表示されます。お使いのテーマのコンテンツエリアが、そのままエディターになります!
PBSで編集できるのは個別ページのみです。ブログ投稿一覧や404ページはテーマによって生成されるため、編集できません。投稿、固定ページ、カスタム投稿タイプは編集可能です。
コンテンツの編集
ここからが素晴らしいところです。フロントエンドのエディターに入ったら、コンテンツ内の任意のテキストをクリックするか、コンテンツエリア内をクリックして入力を開始するだけです!他のページビルダーとは異なり、PBSではポップアップダイアログボックスを開くことなく、直接コンテンツを編集できます。
コンテンツの書式設定 / 見た目を整える

編集中、上部のエリアはテキスト書式設定バーと呼ばれます。このバーには、色、太字、斜体、配置、リンクの追加、箇条書きなど、テキストのスタイル設定に使用するすべての書式設定ツールが含まれています。各ボタンにカーソルを合わせると、そのツールの機能を確認できます。
要素の追加

画面左上の「要素を追加」ボタンにマウスカーソルを合わせると、要素追加パネルが表示されます。また、マウスを画面の左端に移動するだけでも表示させることができます。
要素を挿入するには、要素をマウスで長押ししたまま、コンテンツエリアにドラッグします。要素が配置されるエリアがハイライトされます。マウスボタンを離すと要素が配置されます。
要素のスタイル設定と変更
コンテンツ内の任意の要素にマウスカーソルを合わせると、その要素の上にアウトラインとツールバーが表示されます。
アウトラインの端にマウスカーソルを合わせることで、要素間のマージン(余白)を増減できます。
また、ツールバーのボタンをクリックして、要素に対してクイックアクションを実行することもできます。ツールバーの歯車アイコンをクリックすると、さらに多くのオプションを含むプロパティインスペクターが表示されます。

プロパティインスペクター

プロパティインスペクターを使用すると、要素の外観をより詳細に制御できます。シャドウやアニメーションの追加、マップの色の変更、ボーダーの角丸(border-radius)など、さまざまな設定を行うことができます。
また、要素の親要素のプロパティにアクセスすることも可能です。たとえば、カラム内に画像を配置してプロパティインスペクターを開いた場合、その画像、画像が含まれるカラム、そしてカラムが含まれる行のプロパティにアクセスできます。
プロパティインスペクターには要素ごとに異なる多くの設定項目が含まれていますので、ぜひすべて確認してみてください。
ショートコードの使用
Page Builder Sandwichはフロントエンドで実際のショートコードを表示し、簡単に編集することもできます!

ショートコードを覚えている場合は、コンテンツに直接入力して挿入することができます。しかし、すべてを覚えていなくても(普通は覚えていませんよね)、インスペクターにサイトで利用可能なすべてのショートコードが一覧表示されます。インスペクターからショートコードボタンをコンテンツエリアにドラッグし、挿入したいショートコードを見つけてクリックすると挿入されます。
フロントエンドではショートコードが実際のコンテンツとしてレンダリングされます。編集するには、対象を選択してインスペクターで属性を確認します。より細かく制御したい場合は、ショートコードをダブルクリックしてraw形式(そのままのコード)で編集できます。編集を適用すると、変更を反映してショートコードが更新されます。
コンテンツの並べ替え
PBSでは、何でもクリック&ドラッグして好きな場所に移動できます。ドラッグしたものをページ内の別の要素の上に移動させることで、他のコンテンツの上または下に移動できます。
作業内容の保存

デザインに満足したら、ページ左上の保存ボタンをクリックするだけです。これで完了です!