前回簡単に概要の説明をさせていただきましたが、「Page Builder by SiteOrigin」操作のデモ動画があったのでこちらも参考として紹介させていただきます。（※説明の為に画面をいったりきたりしているところがあるので若干ややこしく見えるかもしれませんが、触ってみるとそんなに難しいことはありません）

まずは、おさらい

だいたいこんな感じなんだなー・・ということが分かったら、実際に使っていってみましょう。 まずはおさらいとして、投稿（ページ）エディタの「Page Builder」エディタに切り替えます。

ウィジェットを利用するにはエディタ左上のボタンでしたね。まずは「＋」のボタンをクリックしてウィジェット一覧を出しましょう。

• 「＋」のボタンをクリックすると使用できるウィジェット一覧がモーダルウィンドウで表示されます。
• 「|||」のボタンをクリックするとウィジェットを配置できるエリアを追加できます。

まず最初から配置されているエリア上に、ウィジェットを置いてみましょう。「＋」のボタンを押してウィジェット一覧を開きます。

利用できるウィジェットの内容は下記の通りになっています。（※ここで説明していないものはサイドバーウィジェットと内容が同じです。）

ウィジェット名	説明
テキスト	プレーンテキストやHtmlを記述できます
Gallery	メディアファイル内から任意の枚数を選び画像ギャラリーを表示できます。基本的にはWordPressデフォルトのギャラリーと同じですが、視覚的に若干使いやすくなっています。
Post Content	最新の投稿を「タイトルのみ」「アイキャッチ画像」を選んで表示させられます。
Image	画像を配置できますが、メディアから直接配置した場合もこちらのウィジェットが使われます。
Post Loop	「content-xx.php」形式のテンプレートファイルを読み込みます。（※ただしquery_postsが使われます＋テーマによっては使用できません）
Embedded Video	<embed>形式のファイル埋め込みに使います（※それ以外の形式はエラーになる）
Self Hosted Video	メディアやサーバーにアップロードした動画を表示する際に使います。
Animated Image	予め用意されているアニメーションパターンの中から画像にアニメーションを付加できます。（※アニメーション開始地点などは選べず精度はイマイチ・・）
Button	リンクなどを設置できるボタンを設置できます。
Call to Action	何かしらの行動を呼びかける際のウィジェットです。一行ほどのキャチコピーなどで、ボタンへのアクションを促すように使います。（寄付など）
List	改行が反映されるテキストウィジェットのようなもの。あまり使い道がないかも・・
Price Box	読んで字の如し、商品を表示するのに使えるバナー的ウィジェット。
Testimonial	プロフィール表示を想定されたものと思われる。サムネイルとリンクを設置できるウィジェット

※仕様を把握したい方用（JavaScriptの用語が入ります）
アニメーション開始地点がオブジェクト（配置した画像）のoffsetTop（画像の上辺が画面上部にきたら）かつ受付終了地点がoffetBottom（画像の下辺が画面上部にきたら）っぽいです。また、受付終了地点を過ぎた場合、何らかのかたちでこのアニメーションが開始されていなかったとするとイベントが起動しません（つまり非表示のまま）。この開始･終了地点をずらせないので反応がすこぶる悪く感じます。
※普通はoffsetTopより上でイベントを開始させ、終了地点を過ぎると強制的にイベント完了時の状態（表示状態）にする

文字だけだとややこしいかもしれませんので、実際にこれらのウィジェットを利用したサンプルも用意しました。
各ウィジェットには編集できる項目そのままの名称を書きこみましたので、この項目に記述するとどのように反映されるのかもご覧いただけます。

Sample

全部を一度に使うことはおそらくないと思います。上記の各ウィジェットの特徴を参考に作成したいページや記事の内容に応じて、効率よく作成できるウィジェットを選んでいけばよいでしょう。
実際、「テキスト」「Image」の二つのウィジェットだけでも十分作成可能ですので。

とはいえ、何気に便利なウィジェットも揃っているので、ぜひ色々触っていってみて下さい。

ビルダーを実際に使ってみよう

では、ちょっと実演として、3つのエリアを配置し、真ん中のエリアを2カラムにした、「1カラム、2カラム、１カラム」のページ（記事）をつくってみましょう。

右上の「||」ボタンでエリアを追加する際にカラム数を選べます。入力した数字そのままのカラム数のエリアがエディタ上に配置されるので、2カラムのエリアと1カラムのエリアを追加しましょう。

また、画像を配置する際はいちいち「Imageウィジェット」を選択する必要はなく、通常と同様メディアから直接選択しても自動的に「Imageウィジェット」として配置されます。

まずは練習ということで、ウィジェットは何を配置しても構いません。お好きなものを使えば良いでしょう。
本番時はあらかじめページの内容を決めておいて、ノートパッドなどに下書きしておくと良いと思います。その内容を各ウィジェットへ分割していくといった流れで作成するとうまく作成できると思います。

• 画像を配置したい際は、配置したいカラムを選択して、メディアファイルから挿入できます。
• 動画や地図を表示させたい際は、「テキストウィジェット」にHtmlタグを貼り付けましょう。

だいたいこんな感じになったかと思います。
一通り作成したら「プレビュー」で実際の表示を確認してみましょう。

うまくいきましたでしょうか？

サンプルとしてこんな感じのものも用意してみました。
構成としては

• 1段目：　「Imageウィジェット」
• 2段目：　左「テキストウィジェット」　右「Imageウィジェット」
• 3段目：　「テキストウィジェット」、「ギャラリーウィジェット」、「テキストウィジェット」
• （おまけ）4段目：　2カラムに、左25%幅「テキストウィジェット」、「ボタンウィジェット」　右75％幅「テキストウィジェット」

レイアウトや構成などは色々と試していってみて下さい。

慣れたらぜひこんな感じも・・

レイアウトやページ構成は様々にできます。操作に慣れてきたら様々なパターンを試してみて下さい。

「おまけ」

※このDEMOは「Page Builder by SiteOrigin」を使って作成したものではありませんが、こんな感じの構成のページなどにも是非チャレンジしてみて下さい！
ちなみに、ちゃんとレスポンシブしてます。