ページビルダーの準備

ページビルダープラグインのインストール

ページビルダーはプラグインをインストールすることで使用可能になります。
管理画面メニューのプラグイン>新規追加から「Page Builder by SiteOrigin」を検索し、インストールしてください。
詳細については初期設定ページをご覧ください。

ページビルダープラグインのウィジェットを有効化

ページビルダーにはレイアウトを作る機能の他に、コンテンツを表示するためのウィジェットが用意されています。

これらのウィジェットを使用するにはウィジェット用のプラグインが必要になります。プラグインの新規追加ページで「SiteOrigin Widgets Bundle」を検索し、インストールしてください。

これでページビルダーの準備は完了です。

ページビルダーの使い方

ページビルダーウィジェットの設置

管理画面メニューの外観>ウィジェットからウィジェットページに移動してください。利用できるウィジェットに「Layout Builder」があるのでこれを任意のウィジェットエリアに配置しください（ウィジェットエリアについてはこちらを参照）。

設置したウィジェットエリアにある「Open Builder」ボタンをクリックして、レイアウト設定画面を開いてください。

レイアウトの設定

レイアウト設定画面が開くと以下のようなページが表示されます。まずは「Add Row」ボタンを押してカラムを作成します。

「Add Row」ボタンを押すとカラム設定画面が表示されます。設定できる項目は以下のようになっています。

• Set row layout: カラム数の変更
• columns with a ratio of: カラム幅の比率を変更
• going from: 比率の方向（左>右、右>左）の選択

カラム幅はカラムの間にマウスを置いてドラッグで自由に変更することもできます。
レイアウトを作成できたら、「Insert」ボタンを押して設定を完了してください。

レイアウトのカスタマイズ

作成したレイアウトはさらに詳細なカスタマイズが可能です。レイアウトを作成した後に表示されるスパナのアイコンにマウスポインターを移動すると、３つの項目が表示されます。

• Edit Row: カラムのカスタマイズ
• Duplicate Row: カラムの複製
• Delete Row: カラムの削除

カラムのカスタマイズをクリックすると、作成したカラムの詳細なカスタマイズ画面が表示されます。設定できる項目は以下のようになっています。

• Attributes: カラムにID名やClass名をつけたり、CSSスタイルを記述
• Layout: カラムのマージンやパディングの設定
• Design: 背景色や背景画像の設定

ウィジェットの設置

カラム作成が完了したらウィジェットを設置します。ウィジェットを設置するには設定ページの上部にある「Add Widget」ボタンを押してください。その際、カラムをクリックしてアクティブにしておくことで、設置したいカラムを選ぶことができます（ウィジェットは配置した後にドラッグで移動することも可能です）。

「Add Widget」ボタンを押すと画像のようなウィジェット選択画面が表示されます。この中から設置したいウィジェットをクリックすることで、カラムに設置することができます。

設置したウィジェットは通常のウィジェットと同じように設定の変更が可能です。ウィジェットにマウスポインタを移動すると以下のようなメニューが出るので、「Edit」をクリックして、ウィジェットの設定を行ってください。

• Edit: ウィジェットの設定
• Duplicate: ウィジェットの複製
• Delete: ウィジェットの削除

ウィジェットは１つのカラムに複数配置することができます。また配置したウィジェットはドラッグすることで順序を入れ替えたり、別のカラムへ移動することもできます。

ウィジェットのレイアウトが完了したら、右下の「Done」ボタンを押して、設定を完了してください。ウィジェット画面に戻ったら「保存」ボタンを押して設定を保存してください（ここで保存ボタンを押さないと設定が反映されない場合があります）。

基本的な使い方の説明は以上です。ページビルダーの使い方は公式ドキュメント（英語）でも見ることができます。こちらも合わせてご覧ください。
ページビルダー公式ドキュメント

ウィジェットを配置できるエリアについて

ウィジェットエリアはフロントページ（トップページ）用と下層ページ用に分かれています（ヘッダー、フッターは共通）。

ウィジェットエリアのレイアウト、配置できるエリアについてはウィジェットエリアについてをご覧ください。

投稿ページでページビルダーを使用する方法

投稿ページでも基本的な使い方と同じ方法でページビルダーを使用できます。まずは投稿画面の上にあるビルダーボタンをクリックしてください。クリックすると「このエディタの既存のコンテンツをコピーしますか？」という質問パネルが出てくるので、コピーする場合は「はい」を選択してください。

レイアウトの作成やウィジェットの配置などは、ウィジェット画面から行う方法と同じです。ページビルダーの編集を終了する際は「Revert to Editor」をクリックしてください。カスタマイズした投稿は通常の投稿と同じように「公開」ボタンもしくは「更新」ボタンで保存できます。

レイアウトの異なる固定ページを作る際などに活用することができます。