BeaverBuilderとElementorPro:どちらが最高のWordPressページビルダーですか?
公開: 2021-09-02視覚的なドラッグアンドドロップビルダーを使用してカスタムWordPressサイトを構築するためのツールとして、BeaverBuilderとElementorProのどちらかを決定しようとしていますか?
これらは最高のWordPressページビルダープラグインの2つです。 どちらも単なるページビルダーではありません。完全なテーマの作成にも使用できます。
では、どのようにしてそれらから選択できますか? まあ、それはこの投稿についてです。
これらのプラグインはどちらも優れたツールだと思うので、勝者を1人だけ宣言することはしません。 代わりに、私はあなたがあなたのニーズと予算に最適なプラグインを選ぶのを手伝うつもりです。
掘り下げましょう!
特徴
BeaverBuilderとElementorProの比較を開始するために、これらのツールの両方が提供する機能の概要を見てみましょう。
以下の比較表のアイコンの意味は次のとおりです。
- ️–この機能はプラグインで利用できます。
- ️️–この機能は両方のプラグインで利用できますが、一方のプラグインの実装はより柔軟で強力です。
- –この機能はプラグインでは使用できません。
特徴 | ビーバービルダー | Elementor Pro |
ビジュアル、フロントエンドエディタ | ️ | ️ |
ドラッグアンドドロップ | ️ | ️ |
インラインテキスト編集 | ️ | ️ |
専用のレスポンシブ編集 | ️ | ️ |
コンテンツウィジェット | ️ | ️️ |
事前に作成されたテンプレート | ️ | ️️ |
再利用可能なテンプレート(独自のデザイン) | ️ | ️ |
テーマビルダー | ️* | ️ |
動的コンテンツの挿入(カスタムフィールドを含む) | ️* | ️ |
ポップアップビルダー | ️ | |
フォームビルダー | ️ | ️️ |
WooCommerceのサポート | ️ | ️️ |
専用テーマ | ️ | ️ |
ホワイトラベリング | ️ | |
マルチサイトサポート | ️ | ️** |
スタイルのコピー/貼り付け | ️ | ️ |
右クリックサポート | ️ | |
ダークモード(インターフェース) | ️ | ️ |
*公式の(ただし個別の)BeaverThemerアドオンが必要です。
** Elementor Proには、マルチサイトネットワークのネットワークサイトごとにアクティブなライセンスキーが必要です。
BeaverBuilderとElementorProの機能のまとめ
機能に関しては、ElementorProには明らかな利点があります。 …
- ポップアップビルダー。これは、個別のポップアップ/オプトインプラグインの必要性を置き換えることができる非常に強力な機能です。
- 支払いを受け入れるPayPalボタンなどの独自のオプションを含む、より多くのウィジェットから選択できます。
- 選択できるその他のテンプレート。
- より強力なフォームビルダー。
- その他の設計オプション(これらについては表で説明しませんでしたが、後で詳しく説明します)。
- WooCommerceのサポートが向上しました。 Beaver ThemerはWooCommerceをサポートしていますが、ElementorProを使用するとWooCommerceをより柔軟に操作できます。
ただし、上記の比較表で把握するのが難しいことの1つは、機能と安定性の間のトレードオフです。 ツールに機能を追加する場合は、開発サイクルを高速化する必要があります。これにより、バグや問題が発生する可能性が高くなります。
Beaver Builderの開発サイクルは遅いため、機能がそれほど多くありません。 しかし、この遅い開発サイクルは、Beaver Builderが本当に堅実であり、更新によって問題が発生しないことを確信できることを意味します。
ElementorProが不安定だと言っているのではありません。 これは最も人気のあるページビルダープラグインであり、何百万ものサイトが問題なく使用しています。
私は、安定性がBeaver Builderがうまく機能し、称賛に値するものであることを強調しようとしています。 あなたがより多くの機能を取得することよりも安定性を重視するタイプの人なら、それはあなたにとって重要かもしれません。
一方、ほとんどの機能が必要で、定期的に新しい機能にアクセスしたい場合は、ElementorProが間違いなく優位に立っています。
インターフェース
次に、インターフェイスが各ツールでどのように機能するかを詳しく見ていきましょう。
インターフェイスの品質は主観的なものなので、ここでは「勝者」を宣言しません。 どちらのツールも優れたインターフェースを備えており、どちらも一般的に高速でグリッチがありません。
ただし、Beaver Builderの利点の1つは、好みに応じてインターフェイスをカスタマイズできることですが、Elementorのインターフェイスはほとんど固定されています。
一方、Elementorには、右クリックのサポートやデザインを整理するためのナビゲーターツールなど、BeaverBuilderにはない便利なツールがいくつか用意されているという利点があります。
ビーバービルダー
上で述べたように、BeaverBuilderのインターフェースは非常に柔軟です。 Beaver Builderを最初に起動すると、上部にツールバーが表示されたデザインの全画面プレビューが表示されます。

モジュールまたはテンプレートを挿入するには、「プラス」アイコンをクリックしてパネルを開きます。

同様に、行、列、またはモジュールの設定を開くには、その上にカーソルを置き、レンチをクリックしてポップアップを開きます(必要に応じてサイズを変更したり移動したりできます)。

フローティングオプションの代わりに固定パネルを使用したい場合は、パネルをインターフェイスのいずれかの側にドラッグできます。 これにより、新しいモジュールを追加したり、既存の要素の設定を構成したりできる固定サイドバーが作成されます。

テキストを編集する場合は、ページをクリックして入力するか、設定領域のテキストエディタを使用できます。
レスポンシブデザインの場合、レスポンシブ編集モードを開くと、ライブのレスポンシブプレビューを表示し、デバイスに基づいてデザインをカスタマイズできます。

Beaver Builderで私が気に入っている機能の1つは、あるモジュールを別のモジュールの隣にドラッグするだけで複数列のデザインを作成できることです。

ほとんどのページビルダーでは、要素を追加する前に列構造を設定する必要があります。これにより、時間が余分に追加されます( Beaver Builderでは、その方法が必要な場合にも設定できます)。
上で示したものに加えて、Beaver Builderには、デザイン間をすばやく移動するのに役立つ独自のアシスタントプラグインも用意されています( Beaver Builderは必要ありません)。
Elementor Pro
ElementorとElementorProを使用すると、インターフェイスの左側に固定サイドバーが表示され、右側にデザインのライブプレビューが表示されます。

デザインの全幅プレビューを表示したい場合は、サイドバーを折りたたんでElementorインターフェースを非表示にすることができます。


サイドバーでは、新しいモジュールを追加したり、要素の設定を構成したりできます。

テキストを編集するには、ページをクリックして入力するか、サイドバーのテキストエディタを使用します。
Elementorには、より効率的に作業するのに役立ついくつかの便利なオプションも付属しています。 たとえば、Elementorは右クリックをサポートしており、コピー/貼り付け(要素またはスタイル)、要素の複製などの主要なオプションにアクセスできます。
また、ページのレイアウトを確認できるナビゲーターツールも用意されています。ページ内のセクションや要素の名前を変更して、覚えやすく、適切な要素をすばやく選択することもできます。

Elementor Proには、レスポンシブプレビューを表示し、特定のデバイスのデザインをカスタマイズできるレスポンシブ編集モードも含まれています。

Beaver Builderで許可されているようなElementorインターフェースをより細かく制御したい場合は、FlexibleElementorPanelなどのサードパーティプラグインを使用できます。
デザインオプション
ビジュアルビルダーに興味がある場合は、カスタムCSSを必要とせずにデザインをセットアップするのに役立つツールが必要になるでしょう。 そのためには、さまざまな組み込みの設計オプションが必要です。
基本的には、どちらのツールも非常に柔軟です。 あなたは簡単に制御することができます:
- 色
- タイポグラフィ
- マージン/パディングによる間隔
- 背景
- レスポンシブデザイン
- 等。
ただし、Elementor Proは基本的な機能よりも優れているため、設計の柔軟性に関してはかなり明確な勝者だと思います。
基本的に、デザインに関しては、ElementorはBeaverBuilderが実行するほとんどすべてのことと「それ以上」を実行できます。 たとえば、ElementorProのユニークなデザイン機能のいくつかを次に示します。
- モーションエフェクト–スクロールエフェクト、3Dチルト、マウストラッキングなどのクールなエフェクトを追加します。 詳細については、こちらの例をご覧ください。
- カスタムポジショニング–絶対および相対ポジショニングを使用して、ウィジェットをデザインに完全に配置します。
- CSSを要素に直接追加する– CSSをウィジェット/列/セクションに直接追加できますが、BeaverBuilderではCSSクラスまたはIDのみを追加できます。
もちろん、プラグイン間には他にも小さなオプションや違いがたくさんあります。 全体として、ElementorProには間違いなくより多くのデザインオプションがあることを強調しようとしています。
組み込みの設計オプションの点でElementorProに匹敵すると思う唯一のビルダーは、Divi Builderプラグインです(詳細については、Diviレビューを参照してください)。
パフォーマンス
ページビルダーを使用する場合、パフォーマンスに関しては常にいくつかのトレードオフが発生します。 どのページビルダーを選択しても、ネイティブのWordPressエディターほど軽量なデザインを作成することはできません。
そうは言っても、一部のプラグインは他のプラグインよりも優れています。
Beaver Builderは常に(ページビルダーにとって)より軽量なオプションの1つであり、Elementorチームは最近、DOMの簡素化や、必要な場合にのみスクリプトをロードするようにアセットのロードを最適化するなど、パフォーマンスの向上に重点を置いています。
これら2つのツールのパフォーマンスを評価するために、それぞれで同じデザインを作成しました。 デザインは非常にシンプルです。私は、各ツールの基本的な「重量」を把握しようとしています。 テキストウィジェット、ボタンウィジェット、および連絡フォーム(ページビルダーから)が含まれているだけです。 両方のツールでデフォルト設定を使用しています。
ページサイズ | HTTPリクエスト | |
ビーバービルダー | 71 KB | 11 |
Elementor | 315 KB | 32 |
*これらの数値には、GeneratePressという私のテーマが含まれています。
全体として、少なくともこのテストでは、BeaverBuilderはもう少し軽量です。 Elementor Proはより多くの機能とデザイン効果を提供するため、それを実現するにはより多くのアセットをロードする必要があるのは当然です。 たとえば、Elementorはモーションエフェクトのスクリプトを読み込んでいます。これはBeaverBuilderにはない機能です。
Elementorの新しい改善されたアセット読み込み機能(まだアルファテスト中です)を有効にすると、Elementorは必要な場所にのみ特定のアセットを読み込むことができるため、違いは小さくなります。
ページサイズ | HTTPリクエスト | |
ビーバービルダー | 71 KB | 11 |
Elementor | 239 KB | 30 |
そして、これはすべてパフォーマンス最適化プラグインなしです。 WP Rocketのようなものを使用すると、それらの数値をさらに下げることができます。
私は次のようにパフォーマンスを要約すると思います:
- Beaver Builderは、Elementor Proよりも少し軽量です。これは、ロードする機能と効果が少ないため、理にかなっています。
- Elementorは、私がこれを書いている時点でまだテスト中の新しいパフォーマンス機能を有効にすると、より良くなります。
- 最も重要なこと–最適な方法でデザインを作成し、WordPressのパフォーマンスのベストプラクティスを実装する限り、両方のツールを使用して高速読み込みサイトを作成できます。
価格設定
価格設定に関しては、両方のツールにいくつかの利点があります。 Elementor Proは、単一のサイトまたは少数のサイト用のツールのみが必要な場合は安価ですが、Beaver Builderは、多数のWebサイト(25以上のサイト)用のツールが必要な場合は安価です。
ただし、価格を比較する前に、ニーズを検討する必要があります。
Elementor Proには、すべての機能が1つのプラグインに含まれています。 したがって、Elementor Proを購入すると、テーマビルダー、ポップアップビルダーなど、すべてにアクセスできます。
一方、Beaver Builderは、ページビルダーとテーマ構築機能を分離しています。
- Core Beaver Builder Proプラグイン–ページ作成のみをサポートします。
- 公式BeaverThemerアドオン–完全なテーマ構築のサポートを追加します(機能するにはプレミアムページビルダープラグインが必要です)。
したがって、Beaver Builderを使用すると、ページ作成だけが必要な場合は1つの価格を支払い、テーマ作成を追加したい場合は別の価格を支払うことになります。
もう1つの重要な違いは、Beaver Builderはすべてのプランで無制限のサイトをサポートしますが、ElementorProのすべてのプランにはサイト制限があることです。
それぞれの価格を調べてから、それらを比較して、各ツールがいつ安いかを示します。
ElementorProの価格
Elementor Proの価格は次のとおりです。これらの価格はすべて、1年間のライセンスに対するものです。

ビーバービルダーの価格
コアプラグインのBeaverBuilderの価格は次のとおりです。 マルチサイトサポートまたはホワイトラベリングが必要でない限り、99ドルの最も安い標準プランで問題ないと思います。

Beaver Themerを追加するには、さらに$ 147(合計$ 246)を支払います。
BeaverBuilderとBeaverThemerの両方で、ライセンスを更新して1年目以降もサポートと更新を継続して受けると、40%の割引が受けられます。
ElementorProとBeaverBuilderを購入する方が安いのはいつですか?
上記のすべての情報を要約すると、各ツールの方が安い場合のさまざまな状況を見ていきましょう。
- Elementor Proは、単一のWebサイト用のツール($ 49)のみが必要な場合は、はるかに安価です。
- ページビルダーのみが必要な場合、損益分岐点は3つのWebサイトです。 3つのWebサイト用のツールのみが必要な場合、ツールは同じ価格($ 99)です。 ただし、3つ以上のWebサイトが必要な場合は、BeaverBuilderの方が安価です。
- ページ作成とテーマ作成が必要な場合、損益分岐点は25のWebサイトです。 25未満のサイトがある場合は、ElementorProの方が安価です。 ただし、25を超えるWebサイトがある場合は、BeaverBuilderの方が安価です。
これらはすべて初年度の価格です。 1年目以降に更新すると、Beaver Builderは40%の更新割引を提供しますが、Elementor Proは提供しないため、BeaverBuilderは安くなります。
BeaverBuilderまたはElementorProを使用する必要がありますか?
BeaverBuilderとElementorProは(2つではないにしても)最高のWordPressページビルダーの2つだと思うので、BeaverBuilderとElementorProに関して「間違った」決定を下すことはないと思います。
代わりに、状況に最適なツールを選択するだけだと思います。
- ほとんどの機能とデザインオプションが必要な場合は、ElementorProがおそらくニーズに最適です。 ポップアップビルダーなどの独自の機能、モーションエフェクトやカスタムポジショニングなどの独自のデザインオプションなどを利用できます。 簡単に言えば、Elementor Proは最も機能豊富なWordPressデザインツールの1つであり、それが最も人気のあるビルダープラグインである理由です。
- もう少し軽量で、すべてのコアページ構築とテーマ構築オプションを備えた堅実なビルダーが必要な場合は、ビーバービルダーも最適です。
いずれにせよ、あなたはあなたがいくつかの素晴らしいデザインを構築するのを助けるための素晴らしいツールを手に入れるでしょう。
もちろん、あなたの決定に重要な役割を果たすかもしれない別の区別もあります–価格。 覚えて:
- Elementor Proは、1つのサイトの方が安く、3つのサイトの価格も同じです。
- ビーバービルダーは、ページビルダーが必要な場合は3つ以上のサイトで、ページ作成とテーマ作成が必要な場合は25以上のサイトで安価です。 それ以外の場合、ElementorProはさらに安価です。
- Beaver Builderは40%の更新割引を提供しますが、ElementorProは提供しません。
両方のプラグインの詳細については、レビュー全文をご覧ください。
- Elementorレビュー
- ビーバービルダーレビュー
BeaverBuilderとElementorProについてまだ質問がありますか? コメントで教えてください!