WordPressのテーマSydneyで使用を推奨されているページビルダー、Page Builder by SiteOriginの使い方です。以前書いた記事「ページビルダーの使い方・1」があまりにもざっくりすぎたので、もう少し詳しく書きます。以下「ページビルダー」の記載は、Page Builder by SiteOriginのことを表します。

0.記事「ページビルダーの使い方・1」の概要

• 基本的な使い方（列（ROW）とウィジェットの追加、列追加時の上下余白、ライブエディタ）
• 既存のページを読み込んでクローンを作れる
• ページに列を追加、削除、移動する方法

1.複雑な構成のセクションの場合

1つのROWに対して何カラムにするかを指定するのですが、例えば本文は複数カラムにしたいけど、その前にタイトルをつけたい場合にちょっと迷います（以下の写真のような場合）。そんな場合の対応です。上には「複雑」と書きましたが、ぱっと見は複雑ではないですが、やり方が複雑になってしまいます（Page Builder by SiteOriginが使いにくいとも言えますが）。

このページ（本づくりプロジェクトのmy #cat mar on my knees）を例に対応したことをまとめます。
ちなみに、このページは各セクションの余白を50、レイアウトは全幅を利用しています（下記にも記載）。

1-1.最初のROWに対しては、レイアウトビルダーウィジェットを追加する

レイアウトビルダーについては、フォトショップのレイヤーみたいな感じに捉えました。レイヤーにレイヤーを重ねていくみたいな。最初のレイヤーで背景をつくり、その中に指定するのが上に乗っかってるものという感じに。

ここでは、「最背面のレイヤー」に当たるものを作ります。

①ROWを追加してレイアウトビルダーウィジェットを追加します
その後、行の編集（スパナアイコンにマウスをかざすと表示）をクリックして、詳細を設定します。
②行の編集画面で、レイアウト項目の以下を指定します。
・上下の余白は50（このページの場合に、他の各セクションの余白を50と決めたため）
・行のレイアウトを全幅とします
③セクション全体の背景色を薄いグレーにしたいため、デザイン項目で背景色を指定します

1-2.レイアウトビルダーを編集して複数のROWを追加する

上位レイヤーの指定になります。
なお、1-1では背景にあたる行のレイアウトを全幅にしましたが、その上の中身は標準的に収まって欲しいので、行のレイアウトは標準のままとします。出来上がりイメージは以下の感じです。

①レイアウトビルダーの編集リンクをクリックします
②クリック後に表示される別画面で、該当するレイアウトビルダーの中を指定します
③タイトル用に1カラムのROWを1つ追加します
レイアウトビルダー内のROWについては上下の余白ゼロにします（ここを指定するとさらに余白が多くなるため）
④タイトル用にSiteOrigin Editorウィジェットを追加します
⑤SiteOrigin Editorの編集をクリックして表示された画面でタイトルに記入します
⑥中身用（左に写真、右にテキストを入れたい）に2カラムのROWを1つ追加します
ここのROWについても上下の余白ゼロにします
⑦ROWの左側に写真用にSiteOrigin Image、右側にテキスト用にSiteOrigin Editorを追加します
その際に、追加したい部分をクリックしてアクティブにしておきます。
画像やテキストの指定は割愛します。

めんどうくさいです

2.簡単な方法を探す

2-1.タイトルなし

こういう見た目であれば、

こういう指定でOKです。

説明は不要と思いますが、
①ROWを追加し、2カラムとし、上下の余白を50、行のレイアウトを全幅、デザインで背景を薄いグレーにする（細かい設定は１と同様）
②左側にSiteOrigin Imageウィジェットを指定し画像を設定
③右側にSiteOrigin Editorウィジェットを指定しテキストを設定
なお、左右のウィジェットの行のレイアウトは標準でOK

2-2.タイトルありで画像をfloatにする

①ROWを追加し、1カラムとし、上下の余白を50、行のレイアウトを全幅、デザインで背景を薄いグレーにする（上記同様）
②ROWにSiteOrigin Editorウィジェットを指定します
③タイトルにタイトル、本文に画像とテキストを設定。(i)画像は左寄せ、(ii)画像サイズは鉛筆アイコンをクリックして適宜リサイズします（これは600にリサイズ）

複雑な方法と変わらないですね。。。

2-3.画像をフロートにした場合の欠点

タブレットでみたときに、複雑な方法（ROWを2カラムにする）だと上下に表示されますが（A）、1カラムで画像をフロートにしたのはテキストの回り込みが微妙に気持ちが悪いです（B）。好みの問題だとは思いますが。

(A)上記1の複雑な方法にした場合のタブレットの見た目

(B)上記2-2の画像をフロートにした場合のタブレットの見た目