Page Builder by SiteOrigin使い方

 

Page Builder by SiteOriginは、ドラッグ&ドロップで直感的にページのレイアウトを作成できたり、様々なウイジェットを組み込むことでプロフェッショナルな見た目のページを簡単に作成することのできる無料プラグインです。(レスポンシブ対応)

テーマをインストールした時点で推奨プラグインを一括でインストールされている場合には、既に有効化されていますので、それを前提に解説していきます。
もし、個別にインストールされたい場合は、こちらの公式ページからダウンロードするか、プラグインのインストール画面から「Page Builder by SiteOrigin」で検索してインストールしてください。

※追記:2015/06/19現在、バージョンアップにより若干インターフェースの画面が下記の画像と違っていますが、基本的な操作方法に変更はありません。

※追記:2016/07/10「SiteOrigin Widgets Bundle」プラグインについて

 

bandicam 2014-09-20 22-54-22-347

プラグインを有効化すると、記事投稿用のエディタの右上に「Page Builder」のタブが追加されます。

 

bandicam 2014-09-20 22-54-46-704

タブをクリックすると、「Page Builder」専用のエディタに切り替わります。 既に1カラムの行が追加された状態になっています。

 

bandicam 2014-09-20 22-55-19-644

まずレイアウトを作るために「列」のある行を追加します。 左上の真ん中にあるボタンをクリックします。

 

bandicam 2014-09-20 22-56-02-451

列数を指定するウインドウが起ち上がるので、「Columns」に列数を半角数字で記入し「Add」をクリックします。 例では2列にしました。

 

bandicam 2014-09-20 22-56-24-266

2列の行が追加されました。 この時、上にある既存の行を削除したいときは右上にあるマイナス記号のボタンをクリックすると削除されます。

 

bandicam 2014-09-20 22-56-52-032

カラムのサイドをドラッグすることで、行内のカラム幅の割合を変更することができます。 下にカラム幅の割合の数字がパーセント表示されますので目安にします。

 

bandicam 2014-09-20 22-57-49-424

次にコンテンツを表示するためのウイジェットを追加します。 追加したいカラムをクリックすると濃い水色に変化します。 その後左上にあるプラス記号のボタンをクリック。

 

bandicam 2014-09-20 22-58-09-100

ウイジェットの一覧が表示されるので、使いたいウイジェットを選択してクリックします。 今回は「テキストウイジェット」を選択しました。

 

bandicam 2014-09-20 22-59-57-226

ウイジェットの設定画面が自動的に開くので、設定項目を入力して右下にある「Done」をクリックします。

 

bandicam 2014-09-20 23-03-05-565

それぞれにウイジェットを配置した例です。 1行目には「image」ウイジェット、2行目左には「テキスト」、右には「最近の投稿」ウイジェットを追加しました。

 

bandicam 2014-09-20 23-05-04-564

この設定でプレビューした画面です。 ウイジェットの配置通りに表示されているのが確認できます。

 

bandicam 2014-09-21 00-13-22-854

ウイジェットの編集や削除を行いたい時は、ウイジェットの右上にカーソルを合わせるとリンクが出現しますので、それぞれ必要に応じてクリックします。「Edit」は編集、「Duplicate」はコピーして追加、「Delete」は削除です。 またドラッグアンドドロップすることでウイジェットの位置を自由に移動させることもできます。

 

上記の作業を繰り返してコンテンツを構築していきます。 あなたのアイディアで表現力豊かなコンテンツを作成してください。

 

この記事を書いた人

Graziosoサポート

Graziosoのカスタマー担当。