VisualComposerとBeaverBuilder

すべての主要なWordPressドラッグアンドドロップページビルダーの比較は非常に人気がありました。 この記事では、無料およびプレミアムのドラッグアンドドロップページ構築ソリューションの最高の機能に焦点を当てました。

比較記事がお役に立てば幸いですが、WordPressコミュニティで人気のある2つのページビルダーを真っ向から比較し、それぞれの長所と短所を詳しく調べてみようと思いました。

Visual Composerは、ドラッグアンドドロップページビルダーとは何かを実際に定義したWordPressプラグインであり、WordPressのベストセラーのドラッグアンドドロップページビルダーであり続けています。 Beaver Builderは、2014年の発売以来、ますます強力になっている新しいソリューションであり、今年はその名を知られています。

これらの優れたソリューションはどのように比較されますか？ よく見てみましょう。

Visual Composer

Visual Composerは、CodeCanyonで最も売れているWordPressプラグインであるだけでなく、ThemeForestの膨大な数のWordPressテーマにも含まれています。 これは、プラグインが500,000を超えるWebサイトで使用されている理由を説明するのに役立ちます。

Visual Composerは、ユーザーフレンドリーなインターフェイスを使用して、レスポンシブレイアウトを数分で構築するのに役立ちます。 それはあなたがあなたのウェブサイトのバックエンドまたはフロントエンドでレイアウトを作成することを可能にします。 すべてのWordPressテーマで動作し、WordPressMultisiteとWooCommerceをサポートしています。

プラグインには10以上の言語パックが含まれており、WordPress多言語プラグインをサポートしています。 膨大な数のコンテンツ要素と事前定義されたレイアウトもプラグインにパッケージ化されています。

Visual Composerは、利用可能なすべてのカスタム投稿タイプと互換性があります。 つまり、WordPressのテーマやプラグインを介して追加されたブログ投稿、ページ、カスタム投稿タイプを変更するために使用できます。

Visual Composerの最も優れた機能の1つは、その柔軟性です。 プラグイン内には多くの開発者向けオプションがあり、CodeCanyonでは100を超えるアドオンを利用できます。

私はVisualComposerをテストしてレビューした最初の人の一人であり、その発売以来、毎年より多くの機能を追加してきました。

VisualComposerの使用

Visual Composerをインストールすると、編集画面に新しいVisualComposerバーが表示されます。 1つはバックエンドエディターをロードし、もう1つはフロントエンドエディターをロードします（このバーは、WordPressビジュアルエディターを無効にしている場合でも表示されます）。

バックエンドエディタをロードすると、コンテンツ領域がページを構築するためのキャンバスに変換されます。 「クラシックモード」というタイトルのボタンは、以前にクリックしたバックエンドエディタボタンに置​​き換わるもので、デフォルトのWordPress編集モードに戻るのに役立ちます。

インターフェイスの上部には5つのボタンがあります。左側に3つ、右側に2つです。

左側のVisualComposerアイコンを使用すると、プラグインの公式Webサイトに移動できます。プラス記号を使用すると、ページに要素を追加できます。Tアイコンを使用すると、テンプレートボックスが開きます。 右側には、カスタムCSSコードを追加するためのボックスとフロントエンドエディターに切り替えるためのボタンを開く構成アイコンがあります。

コンテンツをまだ追加していない場合は、コンテンツをすばやく追加する方法の説明が表示されます。 要素を追加するか、テキストブロックを追加するか、事前定義されたレイアウトの1つを選択するかを選択できます。 たとえば、ボタンをクリックするだけでランディングページや商品ページを追加できます。

私のWordPressドラッグアンドドロップページビルダーの比較記事で、コンテンツモジュールには多くの名前が付いていることに気づきました。 一部の開発者はそれらをモジュールと呼び、一部はそれらをブロックと呼び、他はそれらをウィジェットと呼びます。 VisualComposerはそれらを要素と呼びます。 これらはすべて、レイアウトの作成に役立つコンテンツの小さなブロックを指します。

利用可能な要素の数は印象的です。 合計で、現在のバージョンのVisual Composerは48のコンテンツ要素を提供します（この数にはデフォルトのWordPressウィジェットが含まれます）。 7つの古い非推奨のコンテンツ要素も利用可能であり、プラグイン拡張機能を使用して追加のコンテンツ要素を追加できます。

これらの要素を使用して複雑なページを作成できます。 チャート、画像ギャラリー、ビデオ、マップ、投稿グリッド、アイコン、ソーシャルメディア共有ボタンなどを追加できます。

コンテンツ要素を追加し、それらを行と列に配置するのは簡単です。 行と要素は、配置したい場所にドラッグできます。 行に表示される列の数は、11個の列構造の1つ（2/3 + 1/3など）を選択することで決定できます。 または、独自のカスタム構造を作成することもできます。

要素、列、および行を削除するオプションがあります。 プラス記号を選択すると、新しい要素を列と行に追加できます。 コンテンツの行全体を複製することもできます。

列と行の両方で多数の設定を使用できます。

[一般]タブには、ビデオの背景を使用したり、行/列を拡大したり、カスタムCSSを追加したりするオプションがあります。 [デザイン]タブでは、列または行のスタイルを自由に設定できます。 余白、境界線、パディング、および色を定義できます。

個々の要素に使用できる設定は、変更する要素によって異なります。 Facebookのようなボタンなどの基本的な要素では、ボタンの種類のみを選択できますが、より複雑な要素には、数十の異なるオプションがあります。

作成したレイアウトはすべてテンプレートとして保存し、Webサイトの他のページに適用できます。 開始に役立つように、44個のデフォルトの既成のレイアウトが用意されています。 これには、FAQテンプレート、ヘルプテンプレート、サービステンプレート、および概要ページ用の複数のテンプレートが含まれます。

投稿/ページエディタのフロントエンドボタンをクリックすると、フロントエンドエディタをアクティブ化できます。 Webサイトにログインしている場合は、各ページの上部にあるWordPress管理バーに[VisualComposerで編集]リンクも表示されます。 このリンクをクリックすると、そのページを編集するためのフロントエンドエディタが読み込まれます。

バックエンドとフロントエンドのエディターは同じように機能します。 ページの上部に同じボタンが表示され、要素を追加してテンプレートボックスを開きます。 右側には、バックエンドエディタに戻るボタンと、行った変更を保存するための更新ボタンが表示されます。

ガイドボタンを使用すると、ページを変更できます。 要素の編集や列と行の移動など、バックエンドエディタで実行できるすべてのことを実行できます。

画面アイコンをクリックすると、ビューをデスクトップモードからタブレットやスマートフォンの横向きおよび縦向きモードに変更できます。 これは、モバイルデバイスでページがどのように表示されるかを確認するのに役立ちます。

Visual Composerのバックエンドエディタは、フロントエンドエディタよりもはるかに使いやすいといつも思っています。 バックエンドエディタを使用して数分でプロのデザインを作成できますが、フロントエンドエディタを使用すると、物事を移動するのがより不格好で流動性が低くなると感じます。 それでも正常に機能しますが、私にとっては使い勝手が悪いと感じています。

ただし、他のVisual Composerユーザーのコメントを読んだことで、多くの人がバックエンドエディターよりもフロントエンドエディターの使用を好むことがわかっているため、使用に慣れているインターフェイスの問題である可能性があります（フロントエンドエディターはVisualComposerでかなり後に導入されました）だから私はバックエンドエディタでより多くの経験を持っています）。

VisualComposerの設定

Visual Composerの設定領域では、さまざまな機能やオプションを変更できます。

一般設定ページでは、VisualComposerがアクティブになる投稿タイプのタイプを定義できます。 テーマまたはプラグインを介して追加された追加のカスタム投稿タイプがここに一覧表示されます。 レスポンシブコンテンツ要素を無効にし、Googleフォントのサブセットを有効にすることもできます。

このページの中央部分では、WordPressユーザーグループごとにVisualComposerへのアクセスを制御できます。 ユーザーグループにVisualComposerが表示されるかどうか、Visual Composerとデフォルトのエディターが表示されるかどうか、およびVisual Composerのみが表示されるかどうか（つまり、デフォルトのエディターを無効にするか）を定義できます。

デザインオプションページで、コンテンツ要素のデフォルトの色を変更できます。 要素の下部の余白、列間の間隔、およびモバイル画面の幅を変更することもできます。

コアプラグインファイルを変更することなく、カスタムCSSコードを追加できます。

Visual Composerを購入すると、製品ライセンスが提供されます。 これは1つのWebサイトで有効であり、管理領域を通じて継続的なサポートと自動更新を保証します。

サードパーティのプラグインによって提供されるショートコードは、VisualComposerのコンテンツ要素にマッピングできます。

アバウトページには、プラグインへの最新の追加を通知するウェルカムページがあります。 多くの優れたチュートリアルへのリンクがあるよくある質問ページと、ナレッジベース、ビデオアカデミー、および開発者のソーシャルメディアアカウントへのリンクがあるリソースページもあります。

高度なグリッドビルダー

Visual Composerを使用すると、次のコンテンツ要素に新しいグリッド要素を追加できます：ポストグリッド、ポスト組積造グリッド、メディアグリッド、および組積造メディアグリッド。 これらは、ブログの投稿、ギャラリー、およびその他のコンテンツをWebサイトに表示するために使用できるコンテンツ要素です。

以下のビデオでは、グリッドビルダーがどのように機能するかを正確に説明しています。 グリッドビルダーページに最初にアクセスしたとき、それがどのように役立つかは明確ではないため、すべてがどのように組み合わされているかをよりよく理解するために、それを見ることをお勧めします。

VisualComposerの価格

VisualComposerの小売価格はわずか34ドルです。 年間更新料はありません。 プラグインを購入すると、サポートとアップデートを無期限に受けることができます。

サポートと自動更新の資格を得るには、設定領域にライセンスキーを入力する必要があることに注意してください。

技術的には、VisualComposerはGPLに対応していません。 WordPressでは使用を制限できないという事実にもかかわらず、開発者はすべての顧客に、VisualComposerを使用する各Webサイトの通常のライセンスを購入するように求めています。

ありがたいことに、プラグインはライセンスキーを入力しなくても正しく機能します。 したがって、所有するすべてのWebサイトでプラグインを使用することを妨げるものは何もありません。

ビーバービルダードラッグアンドドロップページビルダー

Visual Composerと同様に、Beaver Builderを使用すると、ドラッグアンドドロップインターフェイスを使用してプロフェッショナルなページを簡単に作成できます。 2つのソリューションの最大の違いの1つは、BeaverBuilderを使用したすべての編集がWebサイトのフロントエンドで行われることです。

すべてのレイアウトは応答性が高く、ビジュアルエディターはブログ投稿、ページ、およびその他すべてのカスタム投稿タイプと互換性があります。 ショートコードとウィジェットをサポートしているため、BeaverBuilderは他のほとんどのWordPressプラグインとうまく連携します。 たとえば、他のプラグインのアイテムをフォーム、テーブル、ギャラリーなどのレイアウトに簡単に統合できます。

BeaverはWooCommerceとWordPressMultilingual Pluginを適切にサポートしており、ほぼすべてのWordPressテーマで動作するはずです。 WordPressマルチサイトもサポートしていますが、残念ながらこの機能はBeaver Builderの標準ライセンスには含まれていません（価格設定オプションについては後で詳しく説明します）。

私にとって本当に際立っているビーバービルダーの特徴は、そのページテンプレートシステムです。 それはあなたが数秒で大きな詳細なページを作成することを可能にします。 あなたがしなければならないのはあなたが望むページテンプレートを選択することです。 たとえば、ボタンをクリックするだけでビジネスの連絡先ページを作成できます。

Beaver Builderの高価格ライセンスには、Beaver BuilderWordPressテーマも同梱されています。

BeaverBuilderの使用

Beaver Builderは、VisualComposerとほぼ同じ方法でWordPressと統合されます。 プラグインがアクティブ化されたら、投稿エディタの「ページビルダー」タブをクリックしてエディタをロードできます。

または、ログインしている場合は、すべてのページの上部にあるWordPress管理バーの[ページビルダー]リンクをクリックできます。

ページビルダーが最初にアクティブ化されると、レイアウトテンプレートを表示するオーバーレイが表示されます。 名前が示すように、ホームテンプレートは、Webサイトのホームページで使用するように設計されています。

14のユニークなホームページレイアウトテンプレートが利用可能です。 または、空白のページを使用することもできます。

コンテンツレイアウトテンプレートは、一般的なページをすばやく作成するのに役立ちます。 たとえば、概要ページ、連絡先ページ、ブログページのレイアウトがあります。

合計で13のコンテンツテンプレートから選択できます。 もちろん、手動で作成したページをテンプレートとして保存し、Webサイトの他の場所で使用することもできます。

Beaver Builderは、理解するのに時間がかからないユーザーフレンドリーなインターフェースを備えています。

管理バーの右上には、テンプレート、ツール、完了、ヘルプアイコンのリンクがあります。 右側には、行レイアウト、基本モジュール、高度なモジュール、およびWordPressウィジェットのドロップダウンメニューがあります。

テンプレートボタンは、前に強調表示したレイアウトテンプレートボックスをロードします。

ツールボックスをクリックすると、いくつかのオプションが表示されます。 ページを複製すると、同じレイアウトの投稿/ページ/投稿タイプのコピーが生成されます。 レイアウトをテンプレートとして保存するオプションもあります。

「グローバル設定の編集」を選択すると、「ページビルダー設定」ボックスが読み込まれます。 ここから、デフォルトのページ見出し、行、モジュール、およびレスポンシブレイアウトの設定を変更できます。

[完了]ボタンをクリックすると、行った変更を公開したり、下書きとして保存したりできます。 変更を破棄することを選択した場合、行った変更はすべて失われ、ページは最後に保存されたバージョンに戻ります。

ヘルプアイコンは、インタラクティブツアーに参加したり、7分間のチュートリアルビデオを視聴したり、BeaverBuilderナレッジベースまたはフォーラムにジャンプしたりするためのオプションを表示します。

Beaver Builderを初めてロードするときに、ツアーに参加することをお勧めします。 それはあなたにすべてがどのように機能するかについての良い概観を与えるでしょう。

右側のメニューの最初のオプションは行レイアウトです。 1〜6列のコンテンツを選択できます。 左右のサイドバーも追加できます。

必要な列またはサイドバーを選択して、コンテンツ領域にドラッグするだけです。 それは本当にうまくいきます。

行を削除、複製、または移動できます。 行設定を変更することもできます。

列を削除すると、その特定の行の行数が自動的に減ります。 たとえば、3列から2列に減らします。

行と列にも同じ設定を使用できます。 幅、テキストの調整、背景色から背景写真への変更、背景設定の変更、境界線の定義を行うことができます。 [詳細設定]タブでは、余白とパディング、レスポンシブレイアウト、CSSセレクターを変更できます。

保存ボタンをクリックするとすぐに変更が保存されます。 すべてが完璧に機能していることがわかりました。 たとえば、デフォルトでは2列の行の幅はそれぞれ50％ですが、1つを70％に調整すると、もう1つの列の幅は自動的に30％に変更されます。

5つの基本的なコンテンツモジュールがあります：見出し、写真、セパレーター、テキストエディター、およびビデオ。

ご想像のとおり、コンテンツモジュールをページの目的の列と行にドラッグアンドドロップするだけです。 これを行うと、そのコンテンツモジュールの設定を変更できます。 Visual Composerと同様に、表示される設定は、変更するコンテンツモジュールによって異なります。

ページの右側にあるメニューが表示されなくなるため、最初のコンテンツモジュールを追加した後、少し混乱する可能性があります。 メニューを元に戻すには、ページ上部の[コンテンツの追加]ボタンをクリックする必要があります。

22の高度なモジュールが利用可能です。 これには、ポストアコーディオン、スライダー、価格表、およびサブスクリプションフォームが含まれます。

12個のデフォルトのWordPressウィジェットも利用できます。 これにより、コンテンツモジュールの総数は39になります。

ページを作成したら、下書きを保存するか、ページを公開する必要があります。 また、レイアウトをテンプレートとして保存することをお勧めします。

ビーバービルダーのテーマ

Beaver Builderテーマは、Beaver Builderのプロバージョンとエージェンシーバージョンに含まれています（価格プランについては後で詳しく説明します）。 テーマは基本的に、必要なWebサイトを作成できる空白のキャンバスです。

過去数年間、WordPressはテーマ開発者にWordPressテーマカスタマイザーをデザインに統合することを奨励してきました。 採用率は低く、ほとんどのテーマ開発者はまだ独自のテーマ設定ページを使用しています。

ただし、Beaver Builderテーマの開発者は、テーマカスタマイザーを採用しています。 すべてのテーマオプションと設定がそこにあります。 これは、Webサイトに加えたすべての変更をリアルタイムでプレビューできることを意味するため、Beaver BuilderWordPressプラグインとうまく連携しています。

利用可能な構成オプションは膨大な量になります。 ヘッダー、フッター、ウィジェット、色などを変更できます。 インポートおよびエクスポートツールも含まれています。

提供されているオプションの数に満足しており、色、背景、フォントを非常に簡単に変更できることがわかりました。

テーマ自体は非常に基本的であるため、BeaverBuilderテーマがプラグインのユーザー向けに作成されたことは明らかです。 それはあなたがあなたのデザインの膨大な量の設定をカスタマイズすることを可能にします、しかしあなたのウェブサイトの構造を変えるためのいくつかのオプションがあります。 その点で、テーマは私にとって時代遅れだと感じています。

ただし、10種類のテーマプリセットを利用できます。 これらのプリセットは、Webサイトの配色を変更します。

Beaver Builderテーマは素晴らしい追加機能ですが、最新のWordPressテーマが提供する機能や追加機能が不足しています。 Beaver Builderがこのテーマに必要とする追加のお金のために、DiviなどのオールインワンのWordPressテーマを購入する方がはるかに多くのことを提供するので、購入したほうがよいでしょう。

ページビルダーの設定

BeaverBuilderプラグインの設定エリアが1ページに表示されます。 メニューには10個のセクションが表示されます。

最初のセクションは、リモートアップデートとサポートを受けるためにライセンスキーを入力するオプションです。 キーを入力しなくても、プラグインは正しく機能します。

モジュールセクションから、すべての基本モジュールと高度なモジュールを無効にすることができます。

選択のためにWordPressウィジェットを無効にすることもできますが、ウィジェットを個別に無効にするオプションはありません。

テンプレートセクションでは、すべてのテンプレートを有効にし、コアテンプレートのみを有効にし、ユーザーテンプレート（つまり、保存したテンプレート）を有効にし、すべてのテンプレートを無効にすることができます。

管理領域でページビルダーテンプレートを編集したり、コアテンプレートを上書きしたりするオプションもあります。

WordPress Webサイトで利用可能なすべての投稿タイプは、投稿タイプセクションに表示されます。 BeaverBuilderをアクティブにしたくない投稿タイプを無効にすることができます。

プラグインには3つの異なるアイコンセットが含まれています。 これらはアイコンセクションで無効にすることができます。 独自のアイコンセットをアップロードするオプションもあります。

編集セクションでは、BeaverBuilderを編集するために必要なWordPressの機能レベルを定義できます。

ビーバービルダーの代理店ライセンスを購入した方は、ホワイトラベリングをご利用いただけます。 独自のブランドを入力して、独自の会社アイコンを定義できます。

ページビルダーのヘルプアイコンをクリックするとどうなるかについては、前に説明しました。 必要に応じて、このアイコンを無効にすることができます。 または、個々のアイテムを無効にすることもできます。 ヘルプビデオ、ナレッジベース、およびフォーラムのURLも定義できます。

ウェブサイトを新しいホスティングプランに移行した場合は、プラグインのキャッシュをクリアする必要がある場合があります。

BeaverBuilderにアンインストールオプションが含まれているのを見てうれしかったです。 アンインストールボタンをクリックすると、プラグインとそれに関連するすべてのデータが削除されます。

ご覧のとおり、Beaver Builderには、設定ページで構成するための便利なオプションがたくさんあります。 本当に必要だと思うのは、ユーザーの役割に基づいてアクセス許可を変更する機能です（これは、Visual Composerにあるものです）。

ビーバービルダーの価格

Beaver Builderの開発者は、3つの異なるライセンスオプションという一般的な価格戦略を採用しています。 オプションは、標準、プロ、および代理店です。

すべてのライセンスでは、BeaverBuilderを無制限の数のWebサイトで好きなだけ使用できます。 サポートとアップデートは1年間提供され、その後は元の価格の40％の割引料金で利用できます（ただし、更新しない場合はプラグインを引き続き使用できます）。

サポートチームは、Webサイトのカスタムモジュールの作成も支援します。

BeaverBuilderの標準ライセンスは99ドルで販売されています。 このライセンスは、Beaver Builderプラグインの完全なコピーを提供しますが、Beaver BuilderWordPressテーマまたはWordPressマルチサイトのサポートは含まれていません。 これらの2つの追加を受け取るには、199ドルのプロライセンスにアップグレードする必要があります。

最も高価なライセンスは代理店です。 それは399ドルで小売りされます。 プロライセンスが行うすべての機能を提供しますが、ホワイトラベル機能も提供します。 Beaver Builderへのすべての参照を、独自の会社名およびBeaverBuilderのコアページテンプレートを変更する機能に置き換えることができます。

WordPress Multisiteのサポートが必要でない限り、Beaver Builderテーマは100ドル以上支払う価値がないため、99ドルの標準ライセンスで必要なものがすべて提供されると思います。

VisualComposerとBeaverBuilder：まとめ

ご覧のとおり、VisualComposerとBeaverBuilderにはそれぞれ長所と短所があります。 個人的には、レイアウトの作成に関しては、両方を使用して見栄えの良いWebサイトを作成できるため、2つのソリューションの間に多くのことはないと感じています。

Webサイトのフロントエンドでレイアウトを作成したい場合は、インターフェイスがより流動的であるため、Beaver Builderはそれをわずかに縁取っていると思います（ただし、それらの間に大きな量はありません）。

Webサイトのバックエンドでレイアウトを作成する場合は、Beaver Builderがこの機能を提供していないため、VisualComposerが最適です。

両方のソリューションでレイアウトを作成した後、VisualComposerを使用してバックエンドでレイアウトを作成することを好むという結論に達しました。 これは、プラグインの経験が豊富なことが一因かもしれませんが、VisualComposerを使用して必要なページをより速く作成できると感じました。 ただし、Beaver Builderはプロフェッショナルに見えないかもしれませんが、どちらのインターフェイスを好むかは、実際にはあなた自身の好みにかかっていると思います。そのシンプルなインターフェイスを使用するのは楽しいと思いました。

決定を助けるために、両方のプラグインの長所と短所を簡単に要約しましょう。

VisualComposerの長所

• BeaverBuilderよりも大幅に安い
• Webサイトのバックエンドとフロントエンドにレイアウトを作成できます
• 幅広いコンテンツモジュールを提供しています
• 多くの開発者オプションを提供し、追加機能を追加する利用可能なWordPressプラグインの膨大な配列があります

VisualComposerの短所

• プラグインはGPLに対応しておらず、開発者は、所有するWebサイトごとにVisual Composerのライセンスを購入することを期待しています（ただし、技術的には、プラグインは複数のWebサイトで使用できます）。
• フロントエンドエディタはもう少し洗練されている可能性があります

ビーバービルダーの長所

• 非常に理解しやすいユーザーフレンドリーなインターフェースを備えています
• 無制限の数のウェブサイトで使用できます
• 多種多様なコンテンツモジュールとウィジェットがあります

ビーバービルダーの短所

• VisualComposerよりも高価
• ウェブサイトのフロントエンドでのみレイアウトを編集できます
• 高価格のプロおよびエージェンシーライセンスは、追加コストを正当化するものではありません（特に、マルチサイトサポートがVisual Composerに標準装備されているため）

この比較記事がお役に立てば幸いです。 これらのWordPressプラグインの詳細については、VisualComposerおよびBeaverBuilderの情報ページにアクセスしてください。

読んでくれてありがとう。

ケビン