フリーランス×WEB

【ワードプレス】初心者におすすめのページ作成プラグイン『ページビルダー』の特徴&使い方

ワードプレスの大きな特徴といえば、プラグインの存在。

プラグインとは基本的なワードプレスのシステムをより使いやすくするための拡張機能で、スマホの便利アプリみたいなものです。

ワードプレスのプラグインは星の数ほどありますが、その中でも個人的にウェブサイト(ホームページ)を作る時に便利な無料プラグインをご紹介したいと思います。

今回紹介するプラグインは『Page Builder by Site Origin(ページビルダーバイサイトオリジン)』と『SiteOrigin Widgets Bundle(サイトオリジンウィジェットバンドル)』です。

特徴と使い方を見ていきましょう。

スポンサーリンク

 

ページビルダーのプラグインとは

まずはじめに、ページビルダーとは、ワードプレスの中でウェブページを作る時に、画像や文章の位置が視覚的にわかり、初心者でもページ全体をデザインしやすくなるツールのことです。

ページビルダープラグインはいくつか種類がありますが、今回は『SiteOrijin』が提供する2つの便利プラグイン『Page Builder by SiteOrigin』『SiteOrigin Widgets Bundle』の使い方を見ていきましょう。

ページビルダーを使ったワードプレスのページ編集画面。

↑ページ内の枠組みを形成しているのが『Page Builder by SiteOrigin』のプラグイン。

↑フレームの中身を形成しているのが『SiteOrigin Widgets Bundle』のプラグイン。2つ両方をインストールすることで使えるようになります。

プレビュー画面でみるとこんな感じ。

1:プラグインのインストール→有効化

ワードプレスのダッシュボードメニューのプラグイン→【新規追加】を選びます。

右上の検索窓にPage Builder by SiteOriginと入力します。スペルミスやスペースが入っていないと正しく検索されない場合があります。

見つかったら【今すぐインストール】をクリックして、インストールが終わったら有効化をクリックして完了です。

同じ手順でSiteOrigin Widgets Bundleも検索してインストール→有効化しましょう。

2:プラグインの設定方法

インストール済みプラグインのページから、SiteOrigin Widgets Bundleを探し、【Manage Widgets】をクリックします。

もしくは、サイドバーの【プラグイン】の中にSiteOrigin Widgets Bundleの項目が入っているので、ここをクリックしてもOKです。

設定画面

SiteOrigin Widgets Bundleでは枠組み(フレーム)の中身を作るのに役立つ機能がたくさん。

初期で設定しておくと使いやすいおすすめをいくつかピックアップして紹介します。【Activate(アクティベート)】ボタンを押すだけで完了です。

  • Image・・・画像を入れる
  • Image Slider・・・画像複数枚のスライダーを作る
  • Editor・・・画像やテキストを入れる
  • Post Carousel・・・ブログ投稿を表示する
  • Contact Form・・・お問い合わせフォームを作る

全て使いこなせるようになるのがベストですが、最初はこの5つの使い方を覚えると便利です。

スポンサーリンク

3:ページの作成方法

設定ができたら早速ページを作成してみましょう。

まず【投稿】もしくは【固定ページ】で記事の新規追加を選びます。新規投稿画面のツールバーの右上にある【ページビルダー】のタブをクリックしましょう。

画面が上記のように切り替わったら「列を追加」を選んでクリックします。

列の分割を決めます。上の例は50%/50%の2分割ですが、列の数を増やすことで好きな分割にできます。

各列の割合も50%/50%だけでなく自由に選ぶことができます。

分割数と割合が決まったら右下の「挿入」をクリック!

フレームが挿入されたら、次は中身となるウィジェットを追加します。

ウィジェットを追加したい方のフレームをクリックで選択したら、ツールバーにある「ウィジェットを追加」ボタンをクリックしましょう。

ウィジェットが中に入ったら「編集」を選んでクリックします。

今回は【Editor】を選んだので、編集画面では画像を入れたり、文字を入力したりします。編集が終わったら、右下の【終了】ボタンをクリックします。

そうすると無事にフレームの中にウィジェットが入ります。

こんな感じで各フレームにウィジェットを入れていきながらページを作成しましょう。ページビルダーを使って作ったページのサンプルは以下。PCで見たサイトです。

スマホ版では自動で1カラムに切り替え

ページビルダーの嬉しいポイントは、PCで見る場合とスマホで見る場合、自動でカラム数が切り替わること。

スマホ版

PC版

まとめ

以上、今回はワードプレスでページを作る時に便利なプラグイン『Page Builder by SiteOrigin』『SiteOrigin Widgets Bundle』についてご紹介しました。

ワードプレスを使い始めてすぐインストールするべきプラグインの1つです。ぜひ参考にしてみてください^^

スポンサーリンク