WordPressのレイアウト用プラグインPage Builder by SiteOriginの感想

WordPressのレイアウトはテーマでほぼ決まってしまうが、レイアウト用のプラグインを使用すると多彩なレイアウトが可能となる。レイアウト用のプラグインには「Page Builder by SiteOrigin」、「Elementor」、「Visual Composer」などいろいろあるが、それぞれ特徴があり、面白い。
今回、一番一般的な「Page Builder by SiteOrigin」をテスト的に使用したので感想をレポートする。

スポンサーリンク
スポンサーサイト

レイアウトプラグインで出来ること

レイアウト用のプラグインを使用するといろいろなことが出来るようになる。代表的な機能としては以下の通りである。

  • かなり自由なレイアウトか可能となる。
  • テキストや写真、アイコンなどWordpressの要素を自由に割り付けられる。
  • テキストの背景に写真や背景色が指定できるようになる。
  • アイコンや写真などと他のページ(商品などの説明ページなど)がリンクできるようになる。
  • 文字の大きさやフォントも指定できるようになる。
  • WordPressのカテゴリ、タグクラウド、最近の投稿などを好きな場所に表示できるようになる。
  • 店舗などに有用な管理機能が備わっている(有料版になることが多い)ものもある。

Page Builder by SiteOriginの操作方法

ボックスレイアウトの作成

プラグインをインストールして環境設定したあと、以下の操作でレイアウトを作成して行く。
1)投稿ページや固定ページの新規作成を開くと、投稿画面にPage Builder 用のタグが出来ている。クリックすると作業画面に切り変わる。
2)表示画面全体を分割するためのボックスをレイアウトして行く。
先ずは画面の上部から「行のボックス」を作成し、そのボックスを列に何分割するかを決定する。分割する比率は自由に調整できる。また、デザイン的に美しいとされる比率データが設定されており自由に選ぶことができる。
3)その下に次の「行のボックス」を作成し、同じように列をどのように分割するかを決定して行く。
4)分割した一つにボックスを一つの画面と考え、更に分割することも可能である。
5)ボックスの複製や削除機能もある。
このようにして、画面全体をボックスでレイアウトする。レイアウトしながら各ボックスに次に述べる機能ウインジェットを割り付けて行くことも可能である。

以下の画像はサンプルレイアウトで使用されているボックス構造である。サンプルのため次に説明する機能ウインジェットが既に割り付けられている。

ボックス構造

ボックス構造

ボックスに機能の割当

ボックス型のレイアウトが出来ると、そのボックス毎にウインジェットを割当て、具体的な内容を作成して行く。ウインジェットは数十あるが、代表的なものはテキスト、画像、動画、アイコン、タイトル、マップなどである。また、カテゴリー、タグ、最新の投稿などWordpressと関連したウインジェットもある。この作業はテーマの編集でサイドバーの割付とよく似た作業である。
一つのボックスにウインジェットを重ねることもできる。スペースを開けるウインジェットもある。
また、このウインジェットをクリックして他のボックスに移動することも簡単にできる。
この簡単なボックスの段階で自由にレイアウトできる機能がPage Builder by SiteOriginの最大の特徴であると思う。

ウインジェットの編集

ボックスに割り当てたウインジェットにはそれぞれ編集機能が付いており、内容を更に詳細に編集する。代表的なウインジェットの編集機能では以下のようなことが可能である。

テキスト(SiteOrigin Editor)

テキストの編集機能を開くとWordPressのTinyMCE Advancedと同じ画面が開くので、機能的にはTinyMCE Advancedと同じことができる。
異なる点は右のサイドにウィジェットのスタイルを決定する項目として属性、レイアウト、デザインを指定できるようになっていることである。この機能は他のウィジェットでも付いており共通機能と思われる。
属性の指定はCSSの知識が必要であり、難しい。
レイアウトではボックスとテキストとの位置関係、前後左右の余白の割合を調整できる。
デザインでは背景写真や背景色が設定できる。

イメージ(SiteOrigin Image)

ボックスに割当てる写真を指定することができる。写真の指定方法は3種類ある。
・Choose MediaでクリックするとWordpressのライブラリ画面が開く。
・サーチをクリックして、キーワードを入力して最大のフリーの写真サイトPixabayから該当する写真を探すことができる。この機能は非常に便利である。他のプラグインでもPixabayを利用できるが、WordPressを離れて予め写真をダウンロードしてからの作業となるので、手間がかかる。
・写真のURLを直接入力する。
次に、写真のタイトルや大きさやボックス内の位置関係などを指定する。
また、写真をクリックしたときに移動するURLも指定できる。
テキストと同じようにモバイル時の位置関係や背景色や背景写真も指定できるが、写真の背景写真とは使い方のイメージが湧かない。

アイコン

登録されている500以上のアイコンが使用できる。イメージもアイコンとしても使用できる。このアイコンにタイトルや関連URLも指定できるようになっている。
テキストなどと同様に背景写真や背景色も指定できる。

SiteOrigin Hero

写真やテキストなどを複雑に表示できるPage Builder by SiteOriginで一番高機能なウィジェットである。大きな写真をスライド形式で表示ができるし、その上にテキストやアイコンを自由に表示できる。背景に動画も使用できる。機能を組み合わせれば面白いことが出来そうである。

サンプルレイアウトが使用できる

レイアウトブラグインを使用しても一から気の利いたレイアウトするのはなかなか大変であるが、Page Builder by SiteOriginには予め代表的なレイアウトが20近く作成されており、そのレイアウトの各ボックスのテキストや写真を入れ替えて自由に使用することができる。必要ないボックスを削除できるし、ボックスを追加して使用することもできる。また、プレレイアウトを積み重ねることもできる。

サンプルレイアウト

サンプルレイアウト

自分の作成したページをサンプルレイアウトとして使用もできる。この機能を使用すれば各ページを同じファーマットで作成する時は便利だろう。

なお、SiteOrigin Heroを使用して写真を画面全体に引き延ばすサンプルレイアウトがあるが、これを初めからSiteOrigin Heroウインジェットを使用して作成しようとしたが、出来なかった。割り付けるボックスによって、写真の大きさは変化した。

テーマを変更すると機能しなくなることがあり、非常に不安定な機能である。

同じように見えるボックスもどこかで、指定する機能があるのであろうか、まだ解明していない。このため、写真を画面全体に表示したいときはこのプレレイアウトを使用している。それ以外のボックスはすべて削除している。
この写真を全面に表示する機能を使ってサンプルページ三浦海岸駅の河津桜を作成した。
このサンプルページには画面全体の写真ボックスが4つあるが、最初の写真はテーマに関連した写真で、下の3つの写真がこのPage Builder by SiteOriginの機能を使用したものである。

テーマを変更したので、現在は上手く表示されていない。

この機能は「Elementor」ではテンプレートに「Elementor Canvas」を使用すると可能であることが判明した。

WordPressのテーマと相性がある

レイアウト用プラグインを使用する場合は選択するテーマも重要であると感じる。レイアウトはあくまでもテーマの基本レイアウトの上に実施されるので、自由度の少ないテーマではあまり自由なレイアウトは出来ない。基本的にはどのテーマでも出来るが、サイドバーがない1カラムテーマが自由度が高く、お薦めである。2カラムテーマなどではレイアウトできるエリアが限定されし、テーマを入れ替えたりするとサイドバーが表示されないことがあり、テーマを変える毎にカスタマイズ機能で調整す必要がある。それでも何処か壊れてしまうのか元に戻らないこともある。
「Visual Composer」などでは、基本的なレイアウトしかないブランクテーマも用意されている。

Page Builder by SiteOriginの感想

Page Builder by SiteOriginはレイアウトボックスを配置してレイアウトを考えるが基本と思う。ウインジェットの移動は簡単であるが、完成した画面を確認するためにはライブ画面やプレビュー画面に変更する必要があり、少し煩わしいことである。Page Builder by SiteOriginにもライブ画面に切り替えられるが、機能的に少し劣るように感じた。
他に「Elementor」、「Visual Composer」を試したが、それらのソフトはプレビュー画面に近い形で編集するようになっている。この方式は出来上がりの画面を確認しやすいが、ウインジェットを移動するのが少し手間である。

スポンサーリンク
スポンサーサイト

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーサイト