PressBuilder グリッドレイアウトの作り方

Pocket

pressbuilder-520-01

ドラッグ&ドロップでページ作成ができる、WordpressのレスポンシブテンプレートのPressBuilder。レイアウトテンプレートが用意されているため、簡単な設定だけでもすぐにサイト構築が可能です。

ここでは、PressBuilderが対応しているSiteOrigin Page Builderのレイアウトカスタマイズ方法を紹介します。

SiteOrigin Page Builderでグリッドレイアウトをカスタマイズする方法

レイアウトの追加

ページビルダーでのレイアウト作成はものすごく簡単。

レイアウト画面上部にある「Add Row」ボタンを押すとレイアウト作成画面が表示されます。レイアウト作成画面では、カラム数やカラムの幅の変更が可能です。
PressBuilder グリッドレイアウトのカスタマイズ-01

レイアウト作成画面では、カラム数や幅を変更できます。こちらのような複雑な形状でも自由に設置可能。
PressBuilder グリッドレイアウトのカスタマイズ-02

右下にある「Insert」ボタンを押せば作成したレイアウトを設置完了。

設置済みレイアウトをカスタマイズする方法

レイアウトは新しく作成するだけでなく、設置済みのレイアウトに対して変更を加えることもできます。

設置済みのレイアウトでスパナのアイコンをマウスオーバーすると以下のようなメニューが表示されます。
PressBuilder グリッドレイアウトのカスタマイズ-03

ここでは、編集(Edit)、複製(Duplicate)、削除(Delete)の操作が可能。
編集する場合は「Edit」をクリックすることでレイアウト作成画面を表示できます。

編集画面では右側にある設定パネルからはレイアウトのmarginpadding、背景画像などのカスタマイズが可能。

背景画像では「parallax」を選ぶことで簡単にパララックス効果を実装できます。
PressBuilder グリッドレイアウトのカスタマイズ-04

設定を変更したら、右下にある「Done」ボタンを押し、投稿ページに右側にある「更新」ボタンを押すことで保存できます。

複製を押すと、作成したレイアウトが設置したウィジェットと一緒に複製されます。
また、スパナの横にある矢印アイコンをドラッグ&ドロップすることでレイアウトの順序を入れ替えることも可能です。
PressBuilder グリッドレイアウトのカスタマイズ-05

レイアウトに2階層目を作る

ここまではページビルダーの1階層目にレイアウトを作成してきました。ページビルダーでは作成したレイアウトに対して更にページビルダーを設置することも可能です。

この仕組みを利用することで、Bootstrapの.containerを作り、その中にグリッドレイアウトを配置していく、といった裏技を使うことが可能。

以下では1カラムのレイアウトを作成し、その上にウィジェットから選んだ「Layout Builder」を設置しています。
PressBuilder グリッドレイアウトのカスタマイズ-06

この場合、1階層目のレイアウト設定を以下のように変更しておきます。

  • Attributes: 「Cell Class」にcontainerを記入
  • Layout: 「Gutter」に0を記入

PressBuilder グリッドレイアウトのカスタマイズ-07
PressBuilder グリッドレイアウトのカスタマイズ-08

PressBuilderに同梱されているレイアウトテンプレートも多くはこの方法で.containerを設置し、Bootstrapのような使い方をしています。

この方法は.containerのような全体のレイアウトだけでなく、部分的に複雑なレイアウトを作成する際にも有効。

例えば、1カラムのメインエリアの一部だけレイアウトを変更したい場合に使います。
PressBuilder グリッドレイアウトのカスタマイズ-09

レスポンシブレイアウト時の表示順序を変更

例えば2カラムのうち左側をサイドバーとして利用するようなレイアウトを作成した場合、スマートフォンで表示する際は左から順に表示されます。
PressBuilder グリッドレイアウトのカスタマイズ-10

右側のメインエリアをトップに表示し、サイドをメインの後に表示したい場合は、
レイアウトの編集画面(Edit Rowをクリック)を開き、右側の設定パネルにある「Layout」の「Collapse Order」で「Right on Top」を選択します。
PressBuilder グリッドレイアウトのカスタマイズ-11

こうしておくことでスマホ時に右側から表示されるようになり、メインエリアがトップになります。

PressBuilder好評発売中!

コーディング不要でサクッとWebサイト制作が可能なPressBuilderはTetraThemesで好評発売中。

商用利用可能・複数サイト利用可能。1度の購入で開発環境も含めて複数サイトの利用ができるため、ものすごくお得!もちろん、更新費用や月額利用料などはありませんので安心して使用することができます。

購入はこちら