前回、WordPressの記事編集エディタ「WPBakery Page Builder」プラグインの簡単な使い方を行ってきました。

今回は２段組、３段組や見出しと本文の先頭位置ずらしを行ってみたいと思います。

WPBakery Page Builderで「見出し」より「本文」開始位置を右にずらす

前回の記事をそのまま利用していきます。

今回は、記事は通常「見出し」＞「本文」と続くことが多いと思います。そのときに「見出し」より「本文」をインデントしてずらしたいというケースがあるかと思います。

これをインデントで行ってもよいのですが、WPBakery Page Builderの設定で調整することも可能です。

では、具体的にWordPressのWPBakery Page Builderプラグインを利用してレイアウトを構成していきたいと思います。

追加ボタンをクリックして、「行」を選択します。

追加した行の編集ボタンをクリックし、「Inner Row 設定」「デザインオプション」で「CSS box」の「margin」の左側に「16px」と入力します。

実際に設定した内容をプレビューで見ています。

以下にマージンなしとありの場合を比較しました。このようにマージンを利用すると先頭位置をずらすことが可能です。

行で入れているで、その中に入る内容全てに適用されるので設定忘れがなくて便利です

WPBakery Page Builderで段組みを構成してみる

今度は、左側の分割の設定を変更してみます。

下記の画像の赤枠の箇所をクリックすると「2割」「3割」・・・と表示されます。

考え方としては「6」分割が最大となり、それをどのように分割するのかの設定を行います。
ここはいくつか例を上げるので実際に試していただければと思います。

２割：1/2 + 1/2

2分割だけど１つめのサイズを大きくしたい：2/3 + 1/3
2分割だけど１つめのサイズを大きくしたい：4/5 + 1/5
2分割だけど１つめのサイズを大きくしたい：5/6 + 1/6

上記のようにレイアウトを分割することができるので、CSS等を考えずに配置することができます。

「WPBakery Page Builder」は行の中に行を入れられるのが特徴で、日本のレイアウトを構成するのに便利です。