Page Builder by SiteOriginの使い方【画像付徹底解説】回遊率を上げるトップページ作成

ナヤミちゃん

【今回の悩み】
・Page Builder by SiteOriginの使い方が知りたい。
・トップページが新着記事一覧で面白味がない。
・ブログの直帰率を下げたい。

そんな悩みを解決します！

はら

トップページに魅力がないとユーザーの離脱率が上がります。
離脱された時点で新しいページが開かれることもなく、PV数も伸びません。

当サイトを例にすると、PV数に占めるトップページの割合が1割以上あります。
トップページからの導線は極めて重要なのです。

トップページをカスタマイズするには「Page Builder by SiteOrigin」というプラグインが使いやすく、オススメです。

本記事ではPage builder by SiteOriginを使ったトップページをカスタマイズ方法を画像付きで徹底解説します。

PageBuilder by SiteOriginを使うと、トップページに導線を貼ることができ、独自性を持たせることもできます。
トップページが魅力的になることで回遊率が増し、PV数の増加が望めます。

トップページの完成イメージ

本記事では「Page Builder by SiteOrigin」を使って、下記の画像のようなトップページを作成していきます。

これは「固定ページ」を「Page Builder by SiteOrigin」で作り、トップページに設定したものになります。

今回作るトップページに掲載する情報は、以下のようなものになります。

実際に作り方を見ていきましょう。

「Page Builder by SiteOrigin」の使い方

「Page Builder by SiteOrigin」は、ページ内にウィジェットを追加したり自由に配置を入れ替えたりできる便利なプラグインです。

本記事でトップページ作成に使用するプラグインは「Page Builder by SiteOrigin」のみです。
まずは「インストール」して「有効化」しましょう。

「ページビルダー」タブを選択

「Page Builder by SiteOrigin」を有効化すると、「固定ページ」の投稿編集画面に「ページビルダー」のタブが追加されます。
「新規投稿」でも同じです。

この「ページビルダー」タブでページを編集していきます。

※なお「ページビルダー」で一度編集を始めると、その投稿の編集では「ビジュアル」「テキスト」タブは使用できなくなります。

列を追加

まずは「列を追加」をクリック。

続いて、カラム数を選択します。
列をいくつに分けるかですね。

今回は1カラムを選択してみます。

ウィジェットを追加

列ができたら、次は
「ウィジェットを追加」していきます。

このようにたくさんの
ウィジェットが表示されます。

ただし、この画像のウィジェットの中にはプラグインを使用しているものもあるので、これと全く一緒では
ないと思います。

今回はその中から、「テキスト」を選択します。

ウィジェットを編集

「テキスト」ウィジェットを編集する場合の方法を説明します。

まずは、右側にある「編集」をクリックします。

「テキスト」ウィジェットでは下のような画面が表示されます。

試しに文章を打ち込んでみました。

ちなみにただ打ち込んだだけでは、上の画像のような「中央よせに」はなりません。

次でその方法を説明します。

文字を中央に寄せる方法

ページビルダーの画面では、「中央よせ」等の高度な設定ができません。
複雑な設定をしたい場合は、「テキスト」タブのHTMLを編集します。

①別ウィンドウで「新規投稿」を立ち上げ、入力した文章を「中央よせ」する。

②「テキスト」タブに切り替え全文を「コピー」する。

③元のページに戻り、「テキスト」タブを選択し、「貼り付け」する。

これで「ビジュアル」を確認してみると中央揃えになっているはずです。

プレビューで確認

このような感じで表示されました。

「はら旅ブログ」のトップページのカスタマイズ

「Page Builder by SiteOrigin」による当ブログのページの構成は以下のようになります。

使ってる機能はほぼ「テキスト」。

※「[画像付き]最新の投稿」はSTORKの機能かもしれません。
画像付きのウィジェットを導入するプラグインはたくさんあるので、必要ならインストールしてみてください。

ショートコードの挿入方法

このようなボタンは「STORK」に搭載されているショートコードを「テキスト」ウィジェットにHTMLで打ち込んで使っています。

「Page Builder by SiteOrigin」のウィジェット編集画面ではショートコード一覧は表示されないので、別で「新規投稿」のページを立ち上げて、HTMLをコピーして使いました。
上で行った「中央揃え」の方法の応用です。

テーマが「STORK」でない場合は、ショートコードを追加するプラグインを導入すると良いかもしれません。

プロフィール欄にSNSボタンを配置

このようなSNSのフォローボタンの設置は「バビ論」さんのサイトを参考にさせてもらっています。
バビ論 「オシャレな丸いSNSフォローボタンを設置する【WordPressカスタマイズ】」
こちらのHTMLを同じように「テキスト」タブに貼り付けて表示しています。

「固定ページ」を１カラムにする

トップページにサイドバーを表示しない場合は、右側にある「ページ属性」の「テンプレート 」を「サイドバーなし（１カラム）」に設定しておきましょう。
ここまでできたら、出来上がったページを「公開」しましょう。

作成したページをトップページに設定する手順

「空の固定ページ」を作成する

もう一つ固定ページを作りましょう。

名前はなんでもOK.
今回は「ブログ」という名前をつけます。

本文は何も書きません。

できたら「公開」。

固定ページをトップページに設定する

自分の納得のいく固定ページが作成できたらできたページをトップページに設定します。

①設定から表示設定をクリック

②固定ページを選択し、「ホームページ」と「投稿ページ」を設定

「ホームページ」に作成した固定ページを、「投稿ページに」に作成した空の固定ページを設定しましょう。

できたら「変更を保存」をクリックして完了です。
お疲れさまでした。

実際にトップページを開いてみて、反映されているか確認しましょう。

Page Builder by SiteOriginで魅力的なトップページを

はら

ウィジェットを変えたり、配置を変えたりして自分なりのカスタマイズを作ってみてください。
わからないことがあったら、気軽に質問してくださいね。