※サイト改装中!不具合あったらごめんなさい

ブログ ツール

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

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

そんな悩みを解決します!
はら

 

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

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

 

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

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

 

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

 

 

本記事の信頼性

当サイトで実際にPageBuilder by SiteOriginを使用して行っていたカスタマイズを掲載しています。
本ブログではこれまで200を超える記事を掲載し、定期的にトップページの変更を行っています。

 

 

 

 

なお、当記事で紹介するトップページは有料テーマ「STORK」の機能を使って作っている部分があります。

無料テーマでも応用できますが、「STORK」を導入しているとより簡単にカスタマイズできます。

有料テーマの「STORK」についてはこちらの記事で紹介していますので、よければ導入を検討してみてください。

有料テーマ「STORK」とは?記事を作る時間を半分にしてオシャレに変えるテーマ

本ブログでは、有料テーマSTORKを導入したことで記事の作成にかかる時間が半分になりました。効率の良いブログ運営を目指しましょう。

続きを見る

 

\究極のモバイルファースト/

WordPressテーマ「STORK19」

買い切り11,000円(税込)

 

 

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

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

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

トップページに掲載する情報

・ヘッダー画像
・オススメ記事10選
 (スライダー画像)
・導入文
・カテゴリ一覧
・各カテゴリの紹介文
・最新記事一覧
・プロフィール

 

スポンサーリンク

「Page Builder by SiteOrigin」の使い方

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

本記事でトップページ作成に使用するプラグインは「Page Builder by SiteOrigin」のみです。

まずは「インストール」して「有効化」しましょう。

 

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

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

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

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

 

列を追加

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

 

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

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

 

ウィジェットを追加

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

 

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

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

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

 

ウィジェットを編集

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

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

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

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

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

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

文字を中央に寄せる方法

ページビルダーの画面では、
「中央よせ」等の高度な設定が
できません。

複雑な設定をしたい場合は、
「テキスト」タブのHTMLを編集します。

 

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

 

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

 

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

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

 

 

プレビューで確認

このような感じで表示されました。
ちなみにこれは中央よせにしています。

 

WordPressテーマ「STORK19」

 

スポンサーリンク

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


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

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

「[画像付き]最新の投稿」
STORKの機能かもしれません。

画像付きのウィジェットを
導入するプラグインは
たくさんあるので、
必要ならインストール
してみてください。

 

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


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

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

上で行った「中央揃え」の方法の応用です。

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

 

 

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


このようなSNSのフォローボタンの設置は「バビ論」さんのサイトを参考にさせてもらっています。

バビ論 「オシャレな丸いSNSフォローボタンを設置する【WordPressカスタマイズ】」

こちらのHTMLを同じように「テキスト」タブに貼り付けて表示しています。

 

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

トップページにサイドバーを表示しない場合は、右側にある「ページ属性」の「テンプレート 」を「サイドバーなし(1カラム)」に設定しておきましょう。

ここまでできたら、出来上がったページを「公開」しましょう。

 

 

スポンサーリンク

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

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

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

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

本文は何も書きません。

できたら「公開」

 

 

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

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

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

 

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

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

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

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

 

 

スポンサーリンク

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

まとめ

・導線を意識したトップページを作成しよう
・回遊率を上げて、閲覧数を伸ばそう
・CSSやHTMLの知識をつけると幅が広がる

 

はら
ウィジェットを変えたり、配置を変えたりして自分なりのカスタマイズを作ってみてください。

わからないことがあったら、気軽に質問してくださいね。

 

 

WordPressテーマ「STORK19」

 

 

 

<こちらもチェック>

テーマの決め方・記事の書き方・アクセスの集め方・収益化の方法までブログの始め方を網羅した1冊です。

 

ブログで稼ぐとはこういうこと。
ブロガー必携の名著です。

 

スポンサーリンク

スポンサーリンク

-ブログ, ツール
-, , , ,

© 2020 はら旅ブログ Powered by AFFINGER5