Page Builder Sandwich は一般的なページビルダーとは異なり、複雑さがなくシンプルに使用できます。

概要を手短に確認するには、以下の動画をご覧ください。

エディターはどこにありますか？

まず、新しい固定ページ、投稿、またはカスタム投稿タイプ（CPT）を作成します。次に、フロントエンドで新しく作成した投稿または既存の投稿にアクセスします。PBS は100%フロントエンドで動作するため、バックエンドであれこれ操作する必要はありません。

ページ上部（管理バー）に「Page Builder Sandwich」ボタンが表示されているはずですので、それをクリックして編集を開始します。上部からテキスト書式設定エリアがポップアップし、側面から要素追加パネルがポップアップします。お使いのテーマのコンテンツエリアが、そのままエディターになります！

PBS で編集できるのは単一ページのみです。ブログ記事一覧や404ページはテーマによって生成されるため編集できません。投稿、固定ページ、カスタム投稿タイプは編集可能です。

コンテンツの編集

ここからが素晴らしいところです。フロントエンドでエディターを開いたら、コンテンツ内のテキストをクリックするか、コンテンツエリア内をクリックして入力を開始するだけです！他のページビルダーとは異なり、PBS ならポップアップダイアログを介することなく、直接コンテンツを編集できます。

コンテンツの書式設定 / 見た目を整える

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

要素の追加

画面左上にある「Add Elements（要素を追加）」ボタンにマウスを合わせると、要素追加パネルが表示されます。また、マウスを画面の左端に移動するだけでも表示させることができます。

要素を挿入するには、いずれかの要素をマウスで押し続け、コンテンツエリアまでドラッグします。要素が配置されるエリアがハイライトされます。マウスボタンを離すと、要素が配置されます。

要素のスタイル設定と変更

コンテンツ内の任意の要素にマウスを合わせると、要素の周囲に枠線とツールバーが表示されます。

枠線の端にマウスを合わせると、要素間のマージンを拡大/縮小できます。

また、ツールバーのボタンをクリックして、要素に対してクイックアクションを実行することもできます。ツールバーの歯車アイコンをクリックすると、さらに多くのオプションが含まれるプロパティインスペクターが表示されます。

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

プロパティインスペクターを使用すると、要素の外観をさらに細かくコントロールできます。シャドウやアニメーションの追加、マップの色の変更、境界線の角丸（border radius）など、さまざまな設定が可能です。

また、要素の親要素のプロパティにアクセスすることもできます。たとえば、カラム内に画像を配置してプロパティインスペクターを開くと、画像、それが含まれるカラム、およびそのカラムが含まれる行のプロパティにアクセスできます。

プロパティインスペクターには要素ごとに異なる設定が多数用意されているため、ぜひすべて確認してみてください。

ショートコードの使用

Page Builder Sandwich では、フロントエンドに実際のショートコードが表示され、簡単に編集することもできます！

ショートコードを覚えている場合は、コンテンツに直接入力して挿入できます。しかし、すべてを暗記していない場合（覚えている人などいるでしょうか？）、インスペクターにサイトで利用可能なすべてのショートコードが一覧表示されます。インスペクターから Shortcode ボタンをコンテンツエリアにドラッグし、挿入したいショートコードを見つけてクリックすると挿入されます。

ショートコードはフロントエンドで実際のコンテンツとしてレンダリングされます。編集するには、選択してインスペクターで属性を確認できます。あるいは、より細かくコントロールしたい場合は、ショートコードをダブルクリックしてraw形式（元のコードのまま）で編集することもできます。編集を行うと、変更内容を反映してショートコードが更新されます。

コンテンツの並べ替え

PBS では、あらゆるものをクリック＆ドラッグしてどこにでも移動できます。ドラッグする際、ページ内の他の要素の上に移動させることで、他のコンテンツの上または下に配置できます。

作業内容の保存

デザインに納得したら、ページ左上の保存ボタンをクリックするだけです。完了です！