SiteOrigin Page BuilderはWordpressにページビルダー機能を追加できる無料プラグインです。
前回の記事ではページビルダーでできることやどんな機能があるかを簡単にまとめましたが、ここでは具体的なレイアウトの作成方法を紹介します。
PageBuilderでレイアウトを作る方法
ページビルダーパネルの起動方法
固定ページや投稿ページでPageBuilderを使用するには投稿エリアの上部にあるPageBuilderタブをクリックします。
グリッドレイアウトの作り方
ページビルダーを起動すると上部に画像のようなボタンが並んでいるのがわかると思います。
この中から「Add Row」ボタンを押すとグリッドレイアウト作成画面に移動することができます。レイアウト作成画面では以下の３つの設定が可能です。
- Set row layout: グリッド数の設定
- columns with a ratio of: 幅のパターンを選択
- going from: 幅のパターンを左>右、もしくは右>左に切り替え
グリッドの幅はマウスドラッグや数値を直接入力することで変更することも可能です。グリッドの設定ができたら、右下の「Insert」ボタンで設置完了。
レイアウトの編集・複製・削除
レイアウトを作成するとページビルダーパネルに設置されます。レイアウトをマウスオーバーすると以下のようなメニューが表示されます。
- Edit: レイアウトを編集
- Duplicate: レイアウトを複製（配置したウィジェット含む）
- Delete: レイアウトを削除（配置したウィジェット含む）
矢印アイコンをドラッグするとレイアウトの順序を変更することができます。
レイアウトの編集方法
レイアウト編集画面ではレイアウトパネルが表示されます。
レイアウトパネルでは以下のような操作が可能です。
- Attributes: classの追加やstyleの追加
- Layout: マージンやパディングなどのスペース設定
- Design: 背景画像や背景色の設定
Attributes設定
- Row ID,Class: レイアウト全体のIDとClass属性の設定
- Cell Class: グリッドのClass属性の設定
- CSS Style: 設定中のレイアウトに対するCSSコードを記述
ここではRow（レイアウト全体）やCell（カラム）に対してIDやClassを設定することができます。また、CSSコードを直接記述することも可能です。
Layout設定
- Bottom Margin: レイアウトの下マージン
- Gutter: グリッド（カラム）間のスペース
- Row Layout: レイアウトのタイプ
- Collapse Order: レスポンシブ時に、左側を上にするか、右側を上に表示するかを選択
レイアウト設定ではマージンやパディングの設定が可能です。
スマートフォンでカラムが１列で表示される際に、左を上にするか、右を上にするかを選択できます。例えば、左カラムにサイドメニューを設置している場合、スマートフォンではサイドメニューがメインコンテンツの上に表示されますが、この設定を「Right on Top」にしておくと、メインコンテンツ（右カラム）がサイドメニューの上に表示されるようになります。
Design設定
- Background Color: 背景色の設定
- Background Image: 背景画像の設定
- Background Image Display: 背景画像の表示タイプを設定
- Border Color: ボーダー色を設定
デザイン設定では背景色や背景画像の設定が可能です。表示タイプの設定では、パララックスエフェクトを使用することもできます。
