基礎知識

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

Page-builer-by-Siteoriginの使い方アイキャッチ

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


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

 

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

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

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

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

 

本記事の内容

・PageBuilder by SiteOriginの使い方
・固定ページのカスタマイズ方法
・トップページに設定する方法

 

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

 

本記事の信頼性


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

 

注意ポイント

あくまでも今回はPagebuilder by SiteOriginを使用してカスタマイズしていますが、有料テーマの方が圧倒的に速く美しいレイアウトが出来ます
当サイトではAFFINGERを使用しています。

AFFINGER5レビューのアイキャッチ
【当サイト限定特典あり】AFFINGER5の使い心地を徹底レビュー【2ヶ月目で収益月5桁達成】

続きを見る

 

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

本記事では「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を編集します。

 

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

 

 

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

 

 

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


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

 

 

プレビューで確認

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

 

 

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

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

 


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

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

 

 

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


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

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

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

 

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


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

 

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


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

 

 

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

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

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

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

本文は何も書きません。

できたら「公開」

 

 

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

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

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

 

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

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

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

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

 

 

関連

手っ取り早くブログを育てたいのなら、有料テーマを導入しましょう。
集客や収益化には必要な投資ですし、テーマは一度決めてしまうと変更が大変です。

様々な便利機能や高いSEO効果が得られ、最短でブログを伸ばすことができます

AFFINGER5レビューのアイキャッチ
【当サイト限定特典あり】AFFINGER5の使い心地を徹底レビュー【2ヶ月目で収益月5桁達成】

続きを見る

 

 

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

まとめ


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

 

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

 

関連

ブログの運営になれてきたら、アフィリエイトを始めてみましょう。

超初心者aspアイキャッチ
【アフィリエイトの始め方】無料&審査なしの入門ASP3選【今日から始めましょう】

続きを見る

-基礎知識
-, , , ,

© 2020 はらの自由帳 Powered by AFFINGER5