Page Builder by SiteOrigin の基本的な使い方

どうも、スマコマのコマ太郎です。元気もりもり

今日はプラグイン「page builder by siteorigin」を使ってトップページをカスタマイズする方法をご紹介します。

「page builder by siteorigin」を使えば、ページをブロック化し、まるでサイドバーにウィジェットを配置するような操作でカスタマイズが行えるのです。

Page Builderの編集画面

page builder by siteoriginを使ってページを作る

直感的に使えるので、トップページを作り込みたいという人にピッタリのプラグインです。

「Page Builder by SiteOrigin」のインストールと初期設定については、↓↓ こちらをご覧ください。

あわせて読みたい記事
WordPress で作ったホームページのトップページをカスタマイズするなら、どのプラグインがいいのか?いくつか試してみて、ぼくはPa...

Page Builder by SiteOrigin を使ってトップページを自作してみよう

トップページのカスタマイズは、使っているテンプレート(テーマ)に依存する部分があります。

多くのテンプレートは、固定ページを使ってトップページを作り込むので、ここでは固定ページでトップページを作る方法をご紹介します。

ページビルダーのエディタの説明

では、まず固定ページを作ります。固定ページを作成するには、WordPress の管理画面にある [固定ページ]-[新規追加] をクリックします。

タイトル欄にタイトルを入力します。なおテンプレートによってタイトルが使われないことがあります。その場合は、タイトルをトップページとしておくと分かりやすいです。

ページビルダーに切り替える

エディタ画面の右上にある [ページビルダー]タブをクリックします。

ページビルダーのツールセット

エディタの上部にあるツールエリアに [ウィジェットを追加] [列を追加] [Layouts] などが並んでいます。

[Layouts] を使えば、テンプレートから選んでカスタマイズすることができます。ここでは機能の説明をしたいので、[Layouts] ではなく [ウィジェットを追加] をクリックしてみてください。

ウィジェットの追加

このように多数のウィジェットが表示されます。青いアイコンのものが「SiteOrigin Widgets Bundle」プラグインで追加されたウィジェットです。もし表示されていなければ、「SiteOrigin Widgets Bundle」プラグインをインストールしてください。

さらに追加できるSiteOriginウィジェット

なお、[プラグイン]-[SiteOrigin Widgets] にて、さらにウィジェットを追加することもできます。

列を作成する

では、固定ページの画面に戻りましょう。まず最初にやるのは、列を作ることです。なお1列のみであれば、列は作らなくてもいいです。

一応、列の作り方を説明するため、まずは列を作ってみましょう。

列を追加する

[列を追加] をクリックします。

すると列の作成画面になります。試しに3カラムの列を作ってみましょう。1を3に変更して [設定] をクリック。最後に [挿入] をクリックします。

列を追加した画面

これで3列の行を1つ作ることができました。同様に操作を行い、必要な行を追加していきます。

さらに列を追加した画面

↑ こちらは、3列、1列、2列の行を作った例です。なお、右側にある上下の矢印アイコンをドラッグすると、順番を入れ替えることもできます。

ウィジェットを配置する

では、ウィジェットを追加してみましょう。ウィジェットを配置したいブロックをクリックして選択します。

ウィジェットを配置する場所の選択

ブロックをクリックすると、色が濃くなり選択状態になります。この状態で [ウィジェットを追加] をクリックし、追加したいウィジェットをクリックします。

ウィジェットを追加した画面

配置できました。配置したウィジェットは、ドラッグして別のブロックへ移動させることができます。

配置したウィジェットにマウスカーソルを当てると、[編集]、[重複]、[削除] というメニューが表示されます。[重複] は日本語がおかしいのですが、コピーを作るという意味です。

以上が基本操作です。長くなったので、各ウィジェットの使い方は別の記事で説明することにしますね。

あわせて読みたい記事
トップページにカルーセルを配置する
この記事では Page Builder by SiteOriginを使って、カテゴリー単位のカルーセルを作る手順を説明しています。Po...

トップページを公開する

ここからの操作は、ページが完成してから行ってください。完成までは [下書きとして保存] しておきましょう。

トップページが完成したら、[公開] をクリックしてください。

WordPressのホームページ設定

次に WordPress の [設定]-[表示] をクリックします。

[ホームページの表示] で、[固定ページ] を選択し、[ホームページ] は上記で作成した固定ページを選びます。

[変更を保存] をクリックすれば完了です。これでカスタマイズしたトップページが表示されているはずです。

※使っているテンプレート(テーマ)によっては、独自の設定があることがあります。

この記事について、分かりにくい点、ご質問があればコメント欄よりお寄せください。

 コメント/質問、お気軽にどうぞ。

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

サイドバーをカスタマイズする

トップページ、カテゴリー、投稿(記事)ページでサイドバーを変えたい

WordPressのエディタだけバージョンアップ前に戻し、以前のビジュアルエディ...

同じカテゴリーで使われているタグを表示させるプラグイン

同じカテゴリーで使われているタグをサイドバーに表示させるプラグイン

All In One WP Security

Securityプラグインを入れてセキュリティ対策(初心者向け)

画像をクリックしても Easy FancyBox が機能しない!

見ている記事と同じカテゴリーの記事一覧をサイドバーに表示できるプラグイン