リファレンス

ページビルダーの使い方(Page Builder by SiteOrigin)・2

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と決めたため)
・行のレイアウトを全幅とします
③セクション全体の背景色を薄いグレーにしたいため、デザイン項目で背景色を指定します

①最初のページでROWを追加し、レイアウトビルダーウィジェットを追加する
②行の編集で、レイアウト上下の余白を指定し、行のレイアウトを全幅にする
③行の編集のデザイン項目で背景色を指定
1-2.レイアウトビルダーを編集して複数のROWを追加する

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

 

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

①レイアウトビルダーの「編集」リンクをクリック
②レイアウトビルダー内を編集する画面が開きます
③タイトル用にROWを追加し、1カラムとして、上下の余白をゼロに
④タイトル用にSiteOrigin Editorを追加
⑤タイトルを記入
⑥中身用にROWを追加し、2カラムとし、上下の余白をゼロに
⑦-1 ウィジェットを追加したいところをクリックしてアクティブにしておく
⑦-2 それぞれにSiteOrigin Image、SiteOrigin Editorを指定する

めんどうくさいです

2.簡単な方法を探す

2-1.タイトルなし

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

こういう指定でOKです。

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

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

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

②SiteOrigin Editorを追加
③タイトルを指定、本文を指定 (i)画像は左寄せ (ii)編集をクリックしてサイズを適宜リサイズ

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

 

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

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

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

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