WordPreesのレイアウト用プラグインElementorの感想

WordPressの基本的なレイアウトはテーマでほぼ決まってしまうが、レイアウト用のプラグインを使用すると多彩なレイアウトが簡単に作成できる。
レイアウト用のプラグインには「Page Builder by SiteOrigin」、「Elementor」、「Visual Composer」などいろいろあるが、今回は比較的に人気のある「Elementor」をテスト的に使用したので「Page Builder by SiteOrigin」と比較しながら感想を述べる。

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

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

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

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

Elementorの操作方法

セクションの追加

プラグインをインストールして環境設定したあと、以下の操作でレイアウトを作成して行く。
投稿ページや固定ページの新規作成を開くと、投稿画面にElementor 用のタグが出来ている。

E新規画面

E新規画面

タグをクリックすると作業画面に切り変わる。使用しないのなら、この画面でそのままWordPressのエディターで編集すれこともできる。また、途中からElementorに切り替えることもできる。反対にElementor からWordPressのエディターに戻ることもできる。いずれの場合も多少は修正する必要がある。

E編集画面

E編集画面

Elementorが Page Builder by SiteOriginと大きく異なるのは、実際の表示画面で効果を見ながら編集するライプ形式となっていることである。Page Builder by SiteOriginでもライブ形式の編集は可能であるが、Elementorの方が馴染みやすかった。
使用しているテーマでは、最初にキャッチアップ画像が表示され、その上に表題が表示されるが、今回は何もインプットしていないので、Elementor の仮の表題が表示されているだけである。画面の左サイドにウインジェットボックスリストが表示されているので、若干小さくなったライブ画面となる。
編集画面の一番下に破線で囲まれた枠が作られている。その中に「新しいセクションの追加」、「テンプレートを追加の」を選択するタグが作られている。
「新しいセクションの追加」をクリックすると図のようにその上に破線の枠が作られる。その中に縦をどの様に分割するかを選択する画面となる。

構造の選択

構造の選択

「テンプレートを追加の」をクリックすると登録されているテンプレートリストが表示される。

テンプレートの例示

テンプレートの例示

一つ選択して取り込むと、そのテンプレートの構造と写真やテキストが取り込まれる。これに自分に合ったテキストや写真に変更すれば出来上がりである。必要のない構造ボックスは削除すればよい。
なお、例示では全面画像になっているが、実際には使用しているテーマの枠組みは維持されるので、Elementorでレイアウトできる部分は成約されたものになる。この点では枠組みが簡単なテーマがElementorの編集には向いている。
なお、新規作成の画面で投稿の属性テンプレートElementor Canvasのテンプレートが選択できるようになっているが、それを選択すると現在のテーマに関係なくブランクの画面が使用でき、ヘッダーやフッターもないテンプレートの内容と同じ画面で編集できるようになる。
更に必要であれば、「新しいセクションの追加」、「テンプレートを追加の」を選択して、以下同様に編集することになる。

セクションの編集

作成された破線で囲まれたセクション(ボックス)の上の辺りをマウスで探すとカラムとセクションという項目がポップアップする。そのセクションをクリックすると左サイドがセクションの編集画面に変わる。
この編集画面でセクション(ボックス)をいろいろと編集できるようになる。例えばセクションの伸縮機能をオンにするとコンテンツの幅のスライドを動かすことができるようになり、セクションの幅を自由に変更できるようになる。このセクションに画像を割り当てた場合、テーマに制限されていた枠が大きくなり、大きな写真を貼り付けられるようになる。以下はテストサイトでセクションを大きくした例である。この例ではセクションの幅を1200に設定した。
日産の歴史的オープンカー
その他、カラムの幅、高さ、背景、ボックスの形状など多くのことが編集できるようになる。

ボックスに機能の割当

破線のボックスに左側のウインジェットを割当て、具体的な内容を作成して行く。ウインジェットは数十あるが、代表的なものはテキスト、画像、動画、アイコン、タイトル、マップなどである。また、カテゴリー、タグ、最新の投稿などWordpressと関連したウインジェットもある。この作業はテーマの編集でサイドバーの割付とよく似たものである。

ウインジェットの編集

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

テキストエディター

テキストエディターウィンジェットを破線ボックスに割り付けると以下のようになる。
左サイドにWordPressのTinyMCE Advancedと同じような画面のテキストエディターが開く。
このテキストを修正すると、右側のライブ画面に反映される。機能的にはTinyMCE Advancedとほぼ同様のことができる。上の方に、コンテンツスタイル詳細に切り替えることができる。文字入力はコンテンツ画面で行う。
別のボックスのテキストを編集するときは、ボックスの右上に表示されている編集アイコンをクリックすると左側に編集画面が切り替わる。

テキストウィンジェット

テキストウィンジェット

スタイルに切り替えると文字の大きさや文字の間隔が調整できる。これ機能は「Page Builder by SiteOrigin」より簡単にできる。テキストの占める割合をライブ画面を見ながら調整できるので、非常に便利である。
詳細に切り替えると背景写真や背景色が設定できる。この機能は「Page Builder by SiteOrigin」とよく似ている。

画像

ボックスに割当てる写真を指定することができる。
コンテンツ画像の選択をクリックするとWordpressのライブラリ画面が開くので、そこで使用する画像を選択する。
スタイルでは下の写真のようにサイズなどの指定ができる。よく理解していない機能も多い。
詳細画面ではテキストと同じように背景色や背景画像などが指定できるが、画像での利用方法がよく分からない。写真を重ねるのであろうか。

画像エディター

画像エディター

その他にも画像カルーセル(複数の画像がスライドする)、画像ギャラリー、画像ボックスなどウィンジェットがあり、各種の画像割付が可能である。

アイコン

代表的なアイコンが使用できる。アイコンにタイトルや関連URLも指定できるようになっている。
スタイルでアイコンの色や大きさを修正できる。
テキストなどと同様に背景写真や背景色も指定できる。

その他の興味あるウィンジェット

ウィンジェットにはJetpackやElementor Addonなど他のプラグインをインストールしなければ表示されないものもある。サイドバーなどの割り付けるWordpressのウィンジェットはほぼ使用できるようである。
その他にもPriceTable FlipBox AnimatedText お客様の声など販売に有用と思われるウィンジェットやショートコードやサイドバー、HTMLなど編集に使用するウィンジェットなどがある。このらを使用して気の利いた画面を作ることができるのであろう。

WordPressのテーマと相性がある

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

なお、新規作成の画面で投稿の属性テンプレートElementor Canvasのテンプレートを選択するとテーマとレイアウトと全く関係のないブランクの画面が使用できるようになる。ヘッダーもフッターもなくなるので、他のページとの兼ね合いが難しくなり、悩ましいところである。固定ページは有用かもしれない。

実験サイトで使用してみた。ヘッダーもフッターがなくなった。フッター機能はElementorの機能でカバーしたが、そのページと表示形式が異なる結果になった。

日産ギャラリーのレーシングカー

「Visual Composer」もブランクテーマも利用できるようになっている。

Elementorの感想

Elementaryは簡単にライブ画面で確認しながら作業できるので、非常に使い易い感じである。また、WordPressのエディターとの相性もよく、最初はWordPressで編集していて、気が向いたら途中からElementorで編集することもできるので便利である。
ElementaryとPage Builder by SiteOriginの両方ともWordPressエディターとの親和性が高いので、併用して使用することも可能である。
ただ、あまり複雑な使用を行うとテーマのレイアウトが崩れることも覚悟しておく必要があるだろう。その意味で私は使用しているのは実験サイトでこのサイトではまだ使用していない。

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

シェアする

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

フォローする

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