ワードプレス Pagebuilder by SiteOriginで自由にレイアウトを作成する方法

WordPressプラグイン

【WordPress ページビルダー】Page Builder By SiteOriginの使い方

今回は、WordPressのプラグインPage Builder By SiteOrigin(ページビルダー バイ サイトオリジン)を利用して、ブロック感覚でWebページを作成する方法をご紹介します。
 
WordPress プラグイン Page Builder by SiteOrigin
 

本記事を参照にするにあたっての注意事項

ホームページ Unavaiable

プラグインは便利ですが、古いプラグインや、ご利用のテーマやプラグインの組み合わせによっては競合して、不具合を起こす場合もあります。そのため、WordPressのバックアップを取った上自己責任で実施をお願いいたします。

また最近ではブロックエディターが進化してきたため、本プラグイン「Page Builder」を使う機会は少なくなりました。ですので、本プラグインは必要な場合のみ導入検討するようにしましょう。

 
 

プラグイン「Page Builder by SiteOrigin」とは

レイアウト作成に便利なプラグイン「Page Builder(ページビルダー)」で、HTMLやCSSの知識がなくても、ブロック感覚でページを作成できます。
 


 

ページビルダーの説明図 ブロック感覚でコンテンツを作っていく
 

ページビルダーの特徴

  • 投稿ページや固定ページで、文章・画像および各ウィジェットをドラッグアンドドロップで自由に配置することができるプラグイン

 

ページビルダーの導入

ページビルダーを利用するためには、まず下記の2つのプラグインをインストールします。

  • Page Builder by SiteOrigin
  • SiteOrigin Widgets Bundle

 

管理画面>プラグイン新規追加を選択します。
プラグイン>新規追加
 

「Page Builder by SiteOrigin」で検索後、プラグインをインストール・有効化します。
ページビルダーのインストール
 

同様に管理画面>プラグイン新規追加を選択します。
プラグイン>新規追加
 

下記のオプションプラグイン「SiteOrigin Widgets Bundle」もインストールしておく必要があります。
WordPress プラグイン SiteOrigin Widgets Bundle
 

「SiteOrigin Widgets Bundle」で検索後、プラグインをインストール・有効化します。
ウィジェットバンドルのインストール
 

「SiteOrigin Widgets Bundle」とは

「SiteOrigin Widgets Bundle」は「Page Builder」で、18種類の高機能なウイジェットを使うことができるプラグインです。「Page Builder by SiteOrigin」と一緒に「SiteOrigin Widgets Bundle」もインストールしておきましょう。

ウィジェットバンドルのインストール

 

「Page Builder by SiteOrigin」をインストールすると、投稿画面に「ビジュアル」「テキスト」タブ以外に「ページビルダー」タブが表示されます。

ページ編集画面でページビルダーというタブが追加されています
 

「Page Builder by SiteOrigin」の使い方

では、「Page Builder by SiteOrigin」を使って、レイアウトを工夫した記事を作成してみましょう。
 

ページイビルダーインストール後は、固定ページまたは投稿ページを開くと「ページビルダー」というエディタが新たに追加されていますのでクリックします。
ページ編集画面でページビルダーというタブが追加されています
 

下記はページビルダーのエディター画面です。

 

見慣れないエディターですね、どのように使っていくんでしょうか?

ページビルダー専用のエディターです。基本的に、列(カラム)追加→ウィジェット追加という手順でレイアウトを作っていきます

 

ページビルダーの説明図 ブロック感覚でコンテンツを作っていく
 

ページビルダーの基本的な使い方

  1. 列を追加する(行を追加)
  2. 追加した列のブロック内にウィジェットを追加する

 

列を追加する

それでは、具体的な操作手順を説明して行きます。ページビルダーの編集画面でメニューから「列を追加」をクリックします。
pagebuilder 列を追加
 

行の編集画面が表示されます。列数などを設定することができます。
WordPress 行の編集画面
 

一連の流れを動画でも説明します。ページビルダーで「列を追加」ボタンをクリックして「挿入」をクリックします。行が追加されます。


 

「列を追加」ボタンと書いてあるのに、追加されるのが「行」なので最初はちょっと混乱しますね。

 

そうですね!確かに「行を追加」の表記の方がわかりやすい気もします(苦笑)。ここでは、列数を決めて追加しているので「列を追加」と表示されているとでも思っておきましょう。

 

ウィジェットを追加する

次に、追加した行にウィジェットを追加してみましょう。特定のカラム(列)をクリックするとその列が選択されてカラムの色が変わります。
pagebuilder 左のカラムをクリック
 

メニューの「ウィジェットの追加」をクリックします。追加できるウィジェットの一覧が表示されますので、ここでは、「SiteOrigin Editor」をクリックします。


 

追加したウィジェット付近にカーソルを合わせて編集ボタンを押下します。従来のビジュアル・テキストエディターのように文章や画像を入れることができます。完了したら終了ボタンを押下します。


 

同様にして、右側のカラム(カラム)にもSiteOrigin Editorを挿入して、文章や画像を入れていきます。


 

ここで一旦プレビュー画面を見てみましょう。
WordPress ページビルダー プレビューボタンを押下
 

ページビルダーで作った内容が反映されていることがわかります。
WordPress ページビルダーで作ったページのプレビュー画面
 

スマートフォン表示の際は、カラムが縦に並びます。
WordPress ページビルダーで作ったページのプレビュー画面(スマホ版)
 

さて、エディター画面に戻って引き続き操作を続けて行きましょう。2段目の行を追加する時も、同じ手順で「列を追加」→「ウィジェットを追加」の手順で作成していくことができます。


 

プレビューを確認すると、2段目の行が追加されていることがわかります。
WordPress ページビルダーで作ったページのプレビュー画面2
 

同様にして行とウィジェットを追加していくことができます。区切りのいいところで「下書きとして保存」するか、完成している場合は「公開」ボタンを押して保存しておきましょう。

WordPress ページビルダー 編集状態を保存
 

保存を忘れると、作成した内容が消えてしまうのでご注意ください。

 

行を複製・配置する

行は「重複」を押すことで複製することができます。
 

下記は行を複製する例です。複製した行はドラッグアンドドロップで好きなカラム(列)に配置することができます。


 

行を後から編集する

行を後から編集して、カラム数(列数)をあとから変更することもできます。


 

ウィジェットを複製・配置する

ウィジェットも同様に複製することができます。ウィジェット付近にカーソルを合わせて「重複」をクリックします。複製したウィジェットはドラッグアンドドロップで好きな場所に配置することができます。


 

カラムの幅(列幅)の比率を変更する

一度作った行内の列幅(カラム幅)の比率を変更することもできます。比率の変更は編集画面でも、行の編集画面からでも実施することができます。


 
 

そのほかの色々なページビルダーの使い方

ライブエディター LiveEditorでリアルタイムで編集する

ライブエディターボタンをクリックすると、表示画面を見ながらリアルタイムでページ編集することができます。
WordPress ページビルダー ライブエディター
 


 

もちろんライブエディターで列やウィジェットを追加することもできます。
WordPress  ページビルダー ライブエディター
 

(補足)レイアウトビルダーでほか多彩なレイアウトを作成する

レイアウトビルダーは、ページビルダー機能を兼ね備えた「ウィジェット」です。たとえば、ワードプレスのウィジェットからレイアウトビルダーを利用することで、自由にレイアウトを作ることができます。

下記は、外観>ウィジェットからフッター内にレイアウトビルダーを配置してレイアウトを作った例です。


 

色々なウィジェットを利用する

今回は、ウィジェットの例としてSiteOrigin Editorを中心に説明しましたが、ワードプレスで利用できるウィジェットは大抵利用することができます。
 

下記は、有料テーマ「Lightning Pro」と和風デザインスキン「Jpn Style」+オプションプラグイン「VK All in one Expantion Unit」をベースに「ページビルダー」と組み合わせて1カラム型のホームページを作成した例です。


 

合わせて読みたい記事

上記で取り上げているLightning Pro(和風デザインスキン)やそのほかワードプレスのオススメテーマはこちらをご参照ください。

【2019年度】タイプ別WordPressおすすめ有料テーマ8選をご紹介

 

「SiteOrigin Widgets Bundle」の色々なウィジェット

最初に導入した「Page Builder by SiteOrigin」のオプションプラグイン「SiteOrigin Widgets Bundle」にどのようなウィジェットがあるか見ておきましょう。
SiteOrigin Widget Bundleのウィジェット
 

「SiteOrigin Widgets Bundle」とは

「SiteOrigin Widgets Bundle」は「Page Builder」で、18種類の高機能なウイジェットを使うことができるプラグインです。「Page Builder by SiteOrigin」と一緒に「SiteOrigin Widgets Bundle」もインストールしておくことが推奨されます。

 

「プラグイン」>インストール済みプラグイン>「SiteOrigin Widget Bundle」のmanage widgetをクリックします。
SiteOrigin Widget Bundle 設定変更
 

デフォルトでは、いくつかのウィジェット機能が有効化されていますが、「SiteOrigin Widgets Bundle」には他にもたくさんのウィジェットが用意されています。下記の設定画面から必要なウィジェットを有効化することができます。
Site Origin Widget Bundle のウィジェット有効化設定画面
 

ウィジェット 意味
SiteOrigin Google Map 住所、名称の入力だけでGoogle マップが簡単に作成できるウィジェットです。但しGoogleMapを表示させるためには、Google Map Apiが必要です。
SiteOrigin Contact Form シンプルなお問い合わせフォームを作成することができるウィジェットです。
SiteOrigin Testimonials 製品・サービスのお客様の声を共有するサムネイルとリンクを設置するウィジェットです。
SiteOrigin Icon 各種のアイコンを表示するウィジェットです。
SiteOrigin Editor TinyMCEエディター(HTMLタグを入力することなく、Webサイトのページを作成できるリッチエディタ)を使って記事を作成することができるウィジェットです。
SiteOrigin Simple Masonry 比率を設定し、レンガ造りの壁のように複数の画像をレイアウトし表示することができるウィジェットです。/td>
SiteOrigin Slider 画像や動画をスライダー表示できるウィジェットです。
SiteOrigin Social Media Buttons ソーシャルメディアアイコンを設置できるウィジェットです。
SiteOrigin Hero ヒーローイメージをスライダー形式で表示するウィジェットです。
SiteOrigin Buttons カスタマイズできるボタンを設置できるウィジェットです。
SiteOrigin PriceTable シンプルな価格表を作成できるウィジェットです。
SiteOrigin Video Player 動画を再生するプレーヤーのウィジェットです。
SiteOrigin Post Carousel 1つの画像を表示する場所に複数の画像を置いてスライドショーのように表示することができるウィジェットです
SiteOrigin Images 画像を配置できるウィジェットです。
SiteOrigin Headline 見出しを表示するウィジェットです。
SiteOrigin Call-to-Action(CTA) 行動を促すメッセージとボタンを表示するウィジェットです。
SiteOrigin Features アイコンや画像とテキストを複数配置して特集を表示するウィジェットです。

 

ここでは、細かいウィジェットの説明は割愛しますが、ご自身にとって便利なウィジェットがあるかもしれませんので、ぜひご自身で色々試してみてください。

 

「Page Builder by SiteOrigin」を使う上での注意点

ホームページ Unavaiable
 

「Page Builder by SiteOrigin」のメリットは、HTMLやCSSの知識ない初心者でも自由に様々なページのレイアウトが作成でき非常に便利な反面、注意点もあります。ここでは特に気をつけたい2点をご紹介します。
 

一つ目は、一度ページビルダーで作成したページは「テキストエディター」や「ビジュアルエディター」で触ってはいけない点です。理由としては、独自のHTML・CSSがバックグランドで書き込まれているため、ページビルダーで作ったページを「テキストエディター」や「ビジュアルエディター」で編集すると知らないうちに必要なHTMLタグなどを消してしまいレイアウトが崩れる恐れがあるためです。
 


 

二つ目はページビルダーとほかのプラグイン、テーマの相性など、使い方の組み合わせによっては、まれにうまく表示されない・不具合が起きる可能性がある点です。これに関しては、組み合わせが無限にあるため、実際に試しながら判断するようにしてください。
 

まとめ ページビルダーはホームページ作成の大きな味方

まとめです。今回はPage Builder By Site Originを利用して自由なレイアウト作成をしてページを作る方法をご紹介しました。

ただし、最近ではすでにWordPressのブロックエディターが使い勝手がかなり良くなってきましたのでPage Builderの重要度は下がりました。

必要がある場合のみ、本プラグインを導入検討するようにしましょう。
 
なお、そのほかのよく使うおすすめプラグイン一覧を「WordPressおすすめプラグインを一覧・目的別紹介」でご紹介していますので、プラグインをお探しの方はあわせてご参考いただけると幸いです。

今回は以上になります。最後までご覧いただきありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【おすすめレンタルサーバー比較】WordPress対応5選+14社

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

WordPress(ワードプレス)でブログ・ホームページを始めようと思った時に、レンタルサーバー選びでどれが良いのか迷うことも多いのではないでしょうかこれからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-WordPressプラグイン