【WordPress ページビルダー】Page Builder By SiteOriginの使い方を徹底解説

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

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

 

プラグイン「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(和風デザインスキン)」+ プラグイン「VK All in one Expantion Unit」+「ページビルダー」の組み合わせで作ったサンプルです。

 

合わせて読みたい記事

上記で取り上げている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 EditorTinyMCEエディター(HTMLタグを入力することなく、Webサイトのページを作成できるリッチエディタ)を使って記事を作成することができるウィジェットです。
SiteOrigin Simple Masonry比率を設定し、レンガ造りの壁のように複数の画像をレイアウトし表示することができるウィジェットです。/td>
SiteOrigin Slider画像や動画をスライダー表示できるウィジェットです。
SiteOrigin Social Media Buttonsソーシャルメディアアイコンを設置できるウィジェットです。
SiteOrigin Heroヒーローイメージをスライダー形式で表示するウィジェットです。
SiteOrigin Buttonsカスタマイズできるボタンを設置できるウィジェットです。
SiteOrigin PriceTableシンプルな価格表を作成できるウィジェットです。
SiteOrigin Video Player動画を再生するプレーヤーのウィジェットです。
SiteOrigin Post Carousel1つの画像を表示する場所に複数の画像を置いてスライドショーのように表示することができるウィジェットです
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を利用して自由なレイアウト作成をしてページを作る方法をご紹介しました。
 

ホームページタイプのサイトを作成するときに特に便利で、下記のようにランディングページ(LP)のようなサイトも簡単に作ることができます。便利な機能ですのでぜひ活用してみてください。
 

 

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

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

 

 

PICK UP みんなの仕事インタビュー

WEBST8では、サロン・整骨院・整体・農業・ピアノ・ネイル・ライター・デザイナー・ネイル・美術品・不動産・士業などなど、個人でビジネスを持ち仕事をされている方がたくさんおられます。

ユニークで面白い仕事をされている方も多いので、実際に独立・起業・仕事 Web活用について実体験をインタビューいたしました。

インタビュー一覧

大阪の個別指導Webスクール
「WEBST8」

個人事業主様・経営者様・起業副業など
自分のビジネスのために
ホームページの作り方を
習得するスクール

\ 自分で作る選択を! /

詳しくはこちら

ABOUTこの記事をかいた人

松本慶

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ