PageBuilderで超簡単Webデザイン! ウィジェット編

Pocket

WordPressにページビルダー機能を無料で追加できるプラグイン、SiteOrigin PageBuilderを使ってサクッとWeb制作。今回はウィジェット編です。

前回はPageBuilderを使ってWebサイトのレイアウトを作ってみました。ここでは作成したレイアウトにウィジェットを配置してみます。

PageBuilderでウィジェットを使う方法

作成したレイアウトにウィジェットを配置

前回作成したレイアウトにウィジェットを配置してみましょう。

ウィジェットを配置するには「Add Widget」ボタンを押してウィジェット選択パネルを開きます。
PageBuilder 作成したレイアウトにウィジェットを配置-01

ウィジェット選択パネルでは配置できるウィジェットが表示されます。この中から配置したウィジェットを選択してください。
PageBuilder 作成したレイアウトにウィジェットを配置-02

ウィジェットは1つの枠(グリッド)に複数配置することができます。1つの枠に複数配置する場合は縦に並んで配置されます。
PageBuilder 作成したレイアウトにウィジェットを配置-03

ウィジェットを横並びにするには、横並びのレイアウトを作成する必要があります。

例えばバナー画像を横並びに3列で表示したい場合は以下のようにレイアウトを作成し、各グリッドに画像ウィジェットを配置してください。
PageBuilder 作成したレイアウトにウィジェットを配置-04

グリッドの中にPageBuilderを設置する

PageBuilderは作成したレイアウト(グリッド)の中にさらにPageBuilderを設置し、入れ子状にすることが可能です。

入れ子状態を作るには「Layout Builder」ウィジェットを設置すればOK。
PageBuilder グリッドの中にPageBuilderを設置する-05

設置したLayoutBuilder(子)でも同様にレイアウトを作成し、ウィジェットを配置することができます。
PageBuilder グリッドの中にPageBuilderを設置する-06

PageBuilderに設置したウィジェットの設定方法

配置したウィジェットをマウスオーバーするとメニューが表示され以下のような操作が可能です。
PageBuilder PageBuilderに設置したウィジェットの設定方法-07

  • Edit: ウィジェットの設定
  • Duplicate: ウィジェットの複製(設定内容を保ったまま)
  • Delete: 配置したウィジェットの削除

設定画面を開くには、表示されたメニューの中から「Edit」をクリックしてください。各ウィジェットに用意された設定項目を個別に設定することができます。設定が完了したら「Done」ボタンを押すことで設定内容が保存されます。
PageBuilder PageBuilderに設置したウィジェットの設定方法-08

ウィジェットエリアにPageBuilderを配置

PageBuilderは投稿ページや固定ページだけでなく、ウィジェットエリアでも使用することができます。

ウィジェットエリアでPageBuilderを使用するには、外観 > ウィジェットでウィジェットページを開き、PageBuilderを設置したいエリアに「Layout Builder」を配置してください。
PageBuilder ウィジェットエリアにPageBuilderを配置-09

「Open Builder」を押してLayoutBuilderを開くと、投稿ページと同じレイアウト作成ページが表示されます。ここでは投稿ページと同じ方法でレイアウトの設定やウィジェットの設置が可能です。
PageBuilder ウィジェットエリアにPageBuilderを配置-10