ビーバービルダーvsディビ2022

あなたが見るものはあなたが得るもの（WYSIWYG）エディターは、1970年代からコンピューティングソフトウェアの定番でしたが、WordPressの世界では、スタイリッシュな作成を支援するためにドラッグアンドドロップページビルダーに切り替えるWebサイト所有者が増えています。ブログ投稿とプロのページ。

この採用は、WordPressが2018年にWordPress 5.0でGutenbergと呼ばれる新しいブロックエディターを導入して以来、強化されています。もちろん、クラシックエディターは、古いビジュアルエディターを好む人にも引き続き利用できます。

新しいブロックエディタは無料で使用でき、ユーザーフレンドリーなインターフェイスを誇り、選択可能な多くの便利なコンテンツブロックがあります。

私はWordPressブロックエディターのシンプルさが大好きですが、それが基本的なソリューションであることは否定できません。 そのコンテンツブロックにはカスタマイズオプションがほとんどなく、組み込みのテンプレートシステムもありません。 これにより、作成できるものが大幅に制限されます。

Webサイトを次のレベルに引き上げたい場合は、BeaverBuilderやDiviなどの高度なドラッグアンドドロップページ構築ソリューションを使用することをお勧めします。

これらのレスポンシブWordPressプラグインを使用すると、ブログ投稿、ページ、カスタム投稿タイプのスタイルをより細かく制御できます。

この記事では、これらのページ構築プラグインを比較して、自分とプロジェクトに最適なプラグインを見つけるのに役立てたいと思います。

ライトバージョンのビーバービルダーはWordPress.orgで入手できますが、無料バージョンには多くの機能が欠けているため、この記事では代わりにビーバービルダーの完全バージョンに焦点を当てます。

BeaverBuilderインターフェース

Beaver Builderは、WordPressのいくつかの異なる領域から起動できるフロントエンドエディターです。

WordPressブロックエディター内で新しいブログ投稿、ページ、またはカスタム投稿タイプを作成すると、「BeaverBuilderを起動する」または「標準エディターを使用する」オプションが表示されます。

「ビーバービルダーの起動」ボタンは、グーテンベルクエディターに自動的に表示されません。 ビーバービルダーブロックをページに追加した場合にのみ表示されます。

Beaver Builderブロックが使用できない場合は、Beaver Builder設定ページをチェックして、対応する投稿タイプが有効になっていることを確認してください。

Beaver Builderは、Classic Editorおよび投稿、ページ、カスタム投稿タイプのメインリストページから起動することもできます。

ログインすると、WordPress管理バーにもページを変更するオプションが表示されます。

Beaver Builderがロードされると、右側に使用可能なモジュールを表示するメニューが表示されます。 行、テンプレート、および保存されたレイアウトのタブもここに表示されます。

上のX記号をクリックするとメニューが閉じますが、現在表示されている+記号をクリックするとメニューを再ロードできます。

ページの右上に、ページが編集され、未公開の変更があったことを示すリマインダーが表示されます。 [完了]ボタンをクリックすると、レイアウトを破棄したり、下書きを保存したり、レイアウトを公開したりするためのオプションが表示されます。

ページの左上には、編集している投稿、ページ、またはカスタム投稿の種類が表示されます。 それをクリックすると、BeaverBuilderツールメニューがロードされます。

このメニューにはたくさんの設定や機能が組み込まれています。

ここから、レイアウトの公開、レイアウトのテンプレートとしての保存、レイアウトの複製、すべてのリビジョンの表示、編集履歴の確認などを行うことができます。

このメニューからもグローバル設定とJavascriptおよびCSS設定にアクセスでき、メニューの下部にはWordPress管理領域とサポートページへのショートカットが表示されます。

ツールメニューの右側には、プラグインの更新とBeaverBuilderブログからの最新の投稿を表示する通知ベルがあります。

新しいモジュールまたは行をレイアウトに追加するには、メインのキャンバス領域にドラッグアンドドロップするだけです。

保存された列レイアウト、保存された行、および事前に作成された行とともに、いくつかの事前構成された列設定を行に使用できます。

新しい行を追加すると、構造の概要がページに表示されます。 コンテンツモジュールをこれらのボックスのいずれかにドラッグアンドドロップできます。

行とモジュールの左上に、要素をレイアウトの別の部分に移動するためのオプションが表示されます。 問題の行またはモジュールは、ここから複製または削除することもできます。

行と列には、行と列の幅をリセットできる設定ボタンとアクションボタンがあります。

幅、色、背景、境界線などは、設定ボックスの[スタイル]タブで調整できます。 余白とパディングに加えて、[詳細設定]タブでは、ログインしているユーザーの表示を制限したり、モバイルユーザーのブレークポイントを調整したりできます。

WordPressページビルダーに慣れるには少し時間がかかりますが、BeaverBuilderは間違いなく最も簡単なソリューションの1つです。 また、これは最速の1つであり、変更を加えるとほぼ瞬時に読み込まれます。

Beaver Builderを使用すると、レイアウトのあらゆる側面をスタイル設定できますが、ご覧のとおり、Diviはレイアウトを作成するときにさらに多くのカスタマイズオプションを提供します。

DiviBuilderインターフェース

エレガントなテーマでは、Diviという単語を使用して、人気のあるWordPressテーマとドラッグアンドドロップページビルダーの両方を説明しています。

これは、エレガントなテーマに不慣れな人の間で少し混乱を引き起こします。そのため、デザインを「Diviテーマ」と呼び、ページビルダーを「Diviビルダー」と呼ぶことで製品を区別することがあります。

今のところ、DiviBuilderに焦点を当てたいと思います。 このページビルダーはDiviテーマに組み込まれていますが、他のWordPressテーマで使用したい人のためにスタンドアロンのWordPressプラグインとしても利用できます。

Divi Builderをアクティブにすると、新しい投稿、ページ、またはカスタム投稿タイプを追加するときに「DiviBuilderを使用する」オプションが表示されます。

これにより、フロントエンドビジュアルビルダーが起動しますが、レガシービルダーと呼ばれるバックエンドエディターも利用できるようになります。

デフォルトのWordPressブロックエディターからいつでもDiviBuilderに切り替えることができます。

Divi Builderは、投稿、ページ、およびカスタム投稿タイプのメインリストページから起動することもできます。

Beaver Builderと同様に、ログインしている場合は、WordPress管理バーからDiviBuilderを有効にするオプションが表示されます。

エレガントなテーマには、Diviレイアウトブロックもあります。

このブロックを使用すると、デフォルトのWordPressブロックエディターで作成したレイアウトにDiviレイアウトを直接挿入できます。

Divi Builderを最初に起動すると、レイアウトを最初から作成するか、作成済みのレイアウトを選択するか、作成済みの別のページのクローンを作成するかを尋ねられます。

ゼロから始める場合、Divi Builderは空白のキャンバスをロードし、新しい行を挿入するためのボックスを表示します。

選択可能な行は20行あり、それぞれに異なる列構造があります。

行を挿入すると、DiviBuilderはページに追加するモジュールを選択するように求めます。

次に、Divi Builderは、選択したモジュールの設定ボックスをロードします。

Divi Builderを初めて使用する場合は、事前に作成されたレイアウトを選択してエディターの動作を理解することをお勧めします。これにより、さまざまな操作が可能になります。

経験豊富なユーザーは、空白のキャンバスから始めることを好むかもしれませんが、このオプションを選択したときにメインメニューが自動的に読み込まれないことに注意してください。

メインメニューをロードするには、ページの下部にある3つの水平方向のドットが付いたボタンをクリックします。

メインメニューオプションは3つの列に分かれています。

メニューの左側にある3つの縦のドットアイコンを使用して、ビルダー設定をロードできます。

ここから、ホバーモード、クリックモード、グリッドモードの3つの異なる表示モードをメニューに追加できます。 これらのモードは、レイアウトの操作方法と変更方法を変更します。 たとえば、ホバーモードでは、ページの一部にカーソルを合わせるだけで、モジュール、列、行、セクションが強調表示され、変更を加えることができます。

Builder設定ボックスのその他の設定には、デフォルトの表示モード、履歴状態の間隔、およびページ作成フローが含まれます。

複雑なレイアウトを作成した場合、ページの間違った部分が強調表示される場合があります。 たとえば、列を移動したいのに、その列が属する行を誤って選択したとします。

これを解決する1つの方法は、ワイヤーフレームビューモードを使用することです。 これにより、ビューから不要なデザイン要素が削除され、ページの構造をより簡単に確認できるようになります。 複雑なレイアウト内で物事を移動する場合に非常に便利です。

メニューの左側には、デスクトップ、タブレット、およびモバイルビューでデザインを表示するためのオプションもあります。

中央のメニューには7つのオプションがあります。 中央のXボタンはメニューを閉じます。

左側では、ライブラリからレイアウトをロードし、現在のレイアウトを保存して、レイアウトをクリアできます。 右側には、ページ設定、編集履歴、および移植性が表示されます。

投稿/ページ設定ボックスでは、タイトル、抜粋、注目の画像、カテゴリを変更できます。 ここでも、間隔、カラーパレット、カスタムCSS、可視性など、さまざまなデザイン設定を利用できます。

編集履歴ボックスを使用すると、最近の変更を簡単に元に戻したりやり直したり、行ったすべての変更の完全な履歴を表示したりできます。

レイアウトは、移植性設定ボックスを介してJSON形式でエクスポートおよびインポートできます。 これは、レイアウトを他のWebサイトに転送する場合に便利です。

レイアウトは、ページの右側に保存して公開できます。

ビデオチュートリアルとキーボードショートカットは、この領域のDiviHelperボックスからも表示できます。 機能やドキュメントを見つけるのに役立つ検索機能もあります。

BeaverBuilderとDiviBuilderのユーザーインターフェイスの動作は異なりますが、行と列の調整に関しては、実際には同じように動作します。

どちらのソリューションでも、左上隅に設定が表示され、行と列を移動、複製、および調整できます。 ただし、Diviにはさらに多くのカスタマイズオプションがあります。

Divi Builderには、セクションと呼ばれる行の上に要素があります。

セクションには複数の行を含めることができ、各行には複数の列を含めることができます。 これにより、ページの作成方法に少し柔軟性が加わります。

以前のバージョンのDiviBuilderでは、レイアウトはWordPressエディターから直接作成されていましたが、フロントエンドのビジュアルビルダーがDiviでレイアウトを作成する標準的な方法になりました。

ありがたいことに、古いエディターはDiviBuilderで引き続き使用できます。

Legacy Builderをアクティブにするには、最初にDiviプラグインオプション領域の詳細セクションに移動し、最新のDivi Builderエクスペリエンスを無効にして、ClassicEditorを有効にする必要があります。

Legacy Builderのユーザーインターフェイスは、ビジュアルエディターで使用できるワイヤーフレームビューモードに似ています。

リアルタイムで行った変更をプレビューすることはできませんが、私はそれがいかに高速で効率的であるかが大好きです。 すべてがフロントエンドエディタよりも少し速く読み込まれ、ページの構造を確認しやすくなります。

Beaver Builderは、Divi Builderよりも少し速くすべてをロードし、そのユーザーインターフェイスは簡単に取得できますが、Divi Builderは、BeaverBuilderにはない多くのカスタマイズ設定と追加機能を提供します。

ワイヤーフレームモードとLegacyBuilderを含めることで、DiviBuilderもより柔軟なソリューションになることは間違いありません。

Divi Builderがどのように機能するかをより包括的に確認するには、DiviBuilderの完全なレビューを確認してください。

ビーバービルダーの既成のレイアウト

スタイリッシュなコンテンツの作成にかかる時間を大幅に短縮できるので、私は既成のレイアウトの大ファンです。 また、高度なレイアウトを作成する方法を理解するのにも役立ちます。

Beaver Builderは、Diviほど多くの既成のレイアウトを提供していませんが、各テンプレートの品質は同じくらい高いです。

ランディングページテンプレートとコンテンツページテンプレートは、保存されているテンプレートと一緒にメインコンテンツメニューの[テンプレート]タブで利用できます。

ランディングページテンプレートは、完全なフルページテンプレートです。 合計15のランディングページテンプレートが、空白のキャンバスページテンプレートと一緒に使用できます。

中小企業、ジム、弁護士、ミュージシャン、写真家、レストラン、電子書籍などのテンプレートがあります。

ランディングページテンプレートを選択すると、既存のレイアウトを置き換えるか、既存のレイアウトに追加するかを尋ねられます。

事前に作成されたレイアウトが数秒でレイアウトに挿入されます。

追加したら、必要に応じて調整し、カスタムテンプレートとして保存できます。

コンテンツページテンプレートは、あらゆるタイプのWebサイトに適したページの一部のユニバーサルテンプレートです。

25のコンテンツページテンプレートが利用可能です。 アバウトエリア、チーム情報、サービス、お問い合わせフォーム、価格表、サインアップフォームなどを挿入するのに役立つレイアウトがあります。

Beaver Builderは、数十のビルド済み行も提供します。 これらのレイアウトは、ページの任意の部分に簡単に挿入できます。

それらはメインコンテンツメニューの行タブの下にあります。

Beaver Builderのテンプレートシステムを利用すると、新しいレイアウトの作成にかかる時間を大幅に短縮できます。

レイアウトはいつでも保存して、何度でも再利用できます。

保存されたすべてのテンプレートは、メインのBeaver Builder管理メニューから管理でき、必要に応じて後で編集できます。

テンプレート、行、列、およびモジュールを保存でき、保存されたすべてのレイアウトをカテゴリに割り当てることができます。

Beaver Builderは、事前に作成されたレイアウトをユーザーインターフェイスに統合するという素晴らしい仕事をしました。 レイアウトは数秒で挿入でき、カスタマイズを保存して何度も使用できます。

Diviの既製のレイアウト

Beaver Builderと同様に、Diviはユーザーにさまざまな既成のレイアウトを提供します。

1,100以上のレイアウトパックを選択できます。

これらのレイアウトのうち150は、アバウトページ、ブログ、ランディングページ、ギャラリーなど、Webサイトのさまざまな領域のデザインを含むレイアウトパックです。

前述のように、新しいページでDivi Builderを起動する場合、使用可能なオプションの1つは、事前に作成されたレイアウトを選択することです。

Diviライブラリはメインメニューからロードすることもできます。

Divi Libraryを使用すると、事前に作成されたレイアウト、保存されたレイアウト、およびページ全体を挿入できます。

検索ボックスを使用するか、レイアウトが割り当てられている13のカテゴリのいずれかを選択することにより、適切なレイアウトの検索を絞り込むことができます。

Divi Builderが上書きするため、事前に作成されたレイアウトを挿入する前に、必ず現在のレイアウトを保存してください。

レイアウトパックは、パックに含まれるすべてのレイアウトを強調表示しますが、[ライブデモを表示]ボタンをクリックして、デザインを選択した場合にWebサイトがどのように表示されるかを正確に確認することを強くお勧めします。

この点を説明するために、下のスクリーンショットに示されているDivi WebFreelancerデザインのデモ領域を見てください。

ホスティング設定によっては、DiviBuilderがすべてのレイアウトをレイアウトパックにインポートするのに最大1分かかる場合があります。

ページにレイアウトを挿入したら、色を変更したり、モジュールを追加したり、自分に関係のないセクションを削除したりして、レイアウトをカスタマイズして独自のレイアウトにすることができます。

レイアウトは、DiviのメインメニューからいつでもDiviライブラリに保存できます。

各レイアウトに名前を付けて、カテゴリにグループ化できます。

Divi管理メニューは、メインプラグインオプションページ、Diviテーマビルダー、Diviライブラリ、およびその他のいくつかの設定ページ（後で説明します）にリンクしています。

Divi Theme Builderは、カスタムページテンプレートを作成できる素晴らしいツールです。 次に、テンプレートを投稿、ページ、およびカスタム投稿タイプに割り当てることができます。

テンプレートごとに、ヘッダー、本文、およびフッターにレイアウトを割り当てることができます。 次に、これらのテンプレートを使用するWebサイトの領域を正確に指定できます。

たとえば、ブログに独自のデザインを作成して、特定の投稿カテゴリから除外することができます。 検索結果ページ、404ページ、アーカイブ、ホームページなどに固有のテンプレートを作成することもできます。

保存されたすべてのレイアウトは、メインのDivi管理メニューにリンクされている「Diviライブラリ」ページから表示できます。

このページからレイアウトをインポートおよびエクスポートできます。 ここからレイアウトカテゴリを管理することもできます。

Divi Libraryのメインページからクリックしてレイアウトを編集すると、ワイヤーフレームビューモードでのデザインの概要が表示されます。

このモードは、レイアウトの構造を調整するのに役立ちますが、より具体的な変更を行う場合は、デスクトップビュー、タブレットビュー、または電話ビューに切り替えることができます。 これを行うと、ビジュアルエディタを使用して保存したレイアウトを変更できます。

必要に応じて、通常のフロントエンドビジュアルエディターを起動し、ページ自体をカスタマイズできます。

並んで、Divi Builderの事前に作成されたレイアウトの品質が、Beaver Builderで使用可能なデザインよりも優れているとは思いませんが、DiviBuilderでのセットアップ全体は大幅に優れています。

Divi Builderのレイアウトパックは、完全なWebサイトの構築に役立つ最大12のテンプレートを提供しますが、Beaver Builderは、単一ページのレイアウトとページの特定のセクションのレイアウトのみを提供します。

Divi Builderにも、Beaver Builderの15に対して950のランディングページテンプレートを提供するプラグインを備えた、はるかに多くの選択肢があります。Diviでも、サードパーティのレイアウトの幅広い選択肢を利用できます。

ただし、Beaver Builderは、DiviBuilderよりも少し速くレイアウトをページに挿入する傾向があることに注意してください。

Diviレイアウトページをチェックして、DiviBuilderで使用できる既成のレイアウトを確認してください。

ビーバービルダーコンテンツモジュール

BeaverBuilderでは合計29のモジュールを使用できます。 モジュールは、基本、メディア、アクション、レイアウト、情報、投稿の6つのカテゴリに分類されます。

リッチコンテンツの追加、レイアウトの調整、ブログからのコンテンツの取得には、さまざまなモジュールがあります。

レイアウトカテゴリのモジュールの1つは、WordPressウィジェットを挿入できるサイドバーモジュールです。 これにより、他のWordPressプラグインからレイアウトに機能を統合する多くの可能性が開かれます。

モジュールをキャンバス領域にドラッグアンドドロップすると、その設定ボックスが表示されます。

スタイリング、間隔、可視性、アニメーションなどのすべてのモジュールに共通の設定がありますが、各モジュールには、表示内容を変更できるようにするための固有の設定があります。

たとえば、マップモジュールには、マップアドレス、マップの高さ、およびマップのタイトル属性を入力するためのフィールドがあります。

Beaver Builderには、コンテンツモジュールの最大のコレクションがなく、Diviほど多くのカスタマイズオプションを提供していません。

ただし、不足している機能はWordPressウィジェットを介してレイアウトに挿入できるため、BeaverBuilderには美しいレイアウトを作成するために必要なすべてのものがあると思います。

DiviBuilderコンテンツモジュール

DiviBuilderでは38のコンテンツモジュールを選択できます。

画像、動画、ポートフォリオ、紹介文などの重要なモジュールに加えて、バーカウンター、宣伝文句、スライダー、召喚状を追加するための便利なモジュールがあります。

Divi Builderは、プロジェクト用の新しいカスタム投稿タイプも追加します。

Beaver Builderと同様に、Diviにはサイドバーモジュールがあり、WordPressウィジェットをレイアウトに統合できます。

Divi Builderは、色分けされたシステムを使用して、スタイリッシュなレイアウトを作成します。

セクションは青、行は緑、モジュールは濃い灰色（ほぼ黒）です。

列にカーソルを合わせて[新しいモジュールの追加]ボタンをクリックすると、新しいモジュールを追加できます。

前に示したように、モジュールを選択すると、モジュール設定ボックスが自動的に表示され、値を入力してスタイルを調整できます。

行ったカスタマイズはすべてDiviライブラリに保存できます。 これにより、ページを作成する際の時間を大幅に節約できます。

たとえば、会社の住所の地図が表示されるように地図モジュールを変更できます。 その後、地図を簡単に保存して、概要ページ、お問い合わせフォーム、ブログ投稿などに挿入できます。

Divi Builderは、Beaver Builderよりも多くのスタイリングとカスタマイズのオプションを提供し、9つの追加コンテンツモジュールがありますが、特にWordPressウィジェットはサイドバーモジュールを使用してレイアウトに挿入できるため、どちらのWordPressプラグインでも利用できるものに制限を感じる人はいないと思います。

BeaverBuilderの構成

グローバル設定ボックスは、BeaverBuilderユーザーインターフェイス内のツールメニューからロードできます。

これにより、ページ見出し、行、列、およびモジュールのマージンとパディングを有効または無効にできます。 レスポンシブレイアウトもこの領域から調整でき、CSSおよびJavascriptコードを挿入するためのボックスがあります。

Beaver Builderのメイン設定ページは、いくつかのセクションに分かれています。

プラグインの自動更新を受信するには、ライセンスセクションにライセンスキーを入力する必要があります。 モジュールと投稿タイプは、次のセクションで有効または無効にできます。

テンプレートシステムへのアクセスは、次のセクションで調整できます。 コアテンプレート、ユーザーテンプレート、またはすべてのテンプレートを有効にできます。 テンプレートを無効にすることもできます。

ユーザーアクセス設定領域では、WordPressユーザーグループがBeaverBuilderを使用できるものを定義できます。 権限は、ビルダーへのアクセスやビーバービルダーの管理メニューへのアクセスなど、5つの異なる領域に分割されています。

一般設定ページでは、アイコンセット、プラグインブランディング、テーマブランディング、およびヘルプ設定を有効または無効にすることもできます。 キャッシュとデバッグはツールセクションで利用できます。

Beaver Builderをインストールした後、Beaver Builder設定ページを確認することをお勧めしますが、行うカスタマイズのほとんどは、メインのBeaverBuilderインターフェース内で行われます。

DiviBuilderの構成

Beaver Builderと同様に、ほとんどの時間はDivi Builderエディター自体のレイアウトのカスタマイズに費やされますが、メインのDivi管理メニューから見つけることができるいくつかの重要な設定があります。

メインのプラグインオプションページには、エレガントテーマのユーザー名とAPIキーを入力するためのタブがあります。 プラグインの自動更新を受け取るには、これを完了する必要があります。

次のタブで、GoogleAPIキーを入力できます。 これは、マップモジュールを使用する場合に必要です。 このページからもGoogleFontsを無効にすることができます。

次のタブでは、特定のWordPress投稿タイプに対してDiviBuilderを有効または無効にできます。 これは、ギャラリーなどの特定の投稿タイプでDiviBuilderへのアクセスを制限する場合に役立ちます。

[詳細設定]タブでは、CSSとJavascriptの縮小を有効または無効にできます。 ここで、LegacyBuilderエディターを有効にできます。

Divi Builderを使用すると、Webサイトのすべてのユーザーグループが実行できることと実行できないことを完全に制御できます。

Beaver Builderではいくつかの重要な領域へのアクセスを制限できますが、Divi Builderでは、ユーザーがアクセスできる機能を正確に定義できます。

たとえば、ユーザーがDiviBuilder内でレイアウトをロードしたり機能を無効にしたりするのを防ぐことができます。

Diviのサポートセンターは、システムに関するレポートを提供します。 これは、ホスティング設定の問題を診断するのに役立ちます。

たとえば、私のテスト用WordPress Webサイトの場合、レポートには、私のWordPressインストールのリソースが限られていることが示されていました。

このページでは、リモートアクセスも利用できます。 これは、ElegantThemesサポートチームがDiviBuilderで発生した問題を解決するのに役立ちます。

サポートセンターには、便利なビデオチュートリアルへのリンクもあり、他のWordPressプラグインやテーマで問題を引き起こす可能性のある機能を無効にするセーフモードがあります。

WP_DEBUG_LOGが有効になっている場合、このページにもエラーが表示されます。

Divi Builderは、セットアップが簡単なWordPressプラグインであり、インストール後に確認する設定はわずかです。

設定領域の傑出した機能は、Diviロールエディタです。 これは、複数のスタッフがいる大規模なWordPressWebサイトの所有者が高く評価するものです。

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

Beaver Builderテーマは、Beaver BuilderProおよびAgencyプランに含まれているHTML5およびBootstrapWordPressフレームワークです。

これは、BeaverBuilderでデザインを作成するための空白のキャンバスとして機能する最小限のWordPressデザインです。 テーマ内でフックとフィルターを使用して、開発者がWebサイトのデザインを変更できるようにし、WooCommerceを強力にサポートします。

Beaver Builderテーマのすべての設定は、WordPressカスタマイザーに含まれています。

スタイリングと位置は、ページの数十の領域に合わせて調整できます。 ヘッダー、ナビゲーションメニュー、ブログ、アーカイブ、ブログ投稿、WooCommerceページ、およびフッターのレイアウトもあります。

Beaver Builderは基本的に最小限のWordPressテーマのままですが、開発者はさらに多くのカスタマイズオプションを追加するためにさらに努力しました。

たとえば、Webサイトのロゴを考えてみましょう。 通常のロゴ画像をアップロードできます。1つは網膜デバイス用、フェードインロゴは通常のデバイスと網膜デバイス用、もう1つはモバイルデバイス用です。

他の多くのWordPressテーマでは、ヘッダー、サイドバー、フッターなどのデザインのさまざまな部分が、BeaverBuilderがレイアウトを正しく表示できないようにする可能性があります。 これが、多くのBeaverBuilderユーザーがBeaverBuilderテーマに切り替えた理由です。

WebサイトでBeaverBuilderレイアウトを使用する場合に最適です。

ディビのテーマ

Beaver Builderは、Beaver Builderのフレームワークテーマとしてデザインを販売し、ElegantThemesは汎用性の高いオールインワンWordPressテーマとしてDiviThemeを販売しています。

これは、ビーバービルダーのテーマとディビのテーマの間に人々が考えるよりも多くの類似点があるため、マーケティングがいかに影響力を持つかを浮き彫りにします。

当初、DiviはオールインワンのWordPressテーマでしたが、Diviテーマに関連するすべての人が後でDiviBuilderに移行した汎用性のほとんどがありました。 これは間違いなく正しいことでした。

したがって、ほとんどの機能がDivi Builderに組み込まれているため、DiviThemeはBeaverBuilderThemeのようなフレームワークと見なすことができます。 したがって、両方の製品を所有している場合は、ビーバービルダーでDiviテーマを使用するか、Diviビルダーでビーバービルダーテーマを使用できます。

Diviテーマがアクティブ化されると、Divi管理メニューにいくつかの微妙な変更が表示されます。

これには、プラグインオプションページがテーマオプションページに置き換えられ、WordPressカスタマイザーへのリンクが含まれます。

設定領域が拡張されていることを除けば、他のすべては同じままです。

興味深いことに、Diviテーマがアクティブ化されると、DiviBuilderプラグインは自動的に非アクティブ化されます。 これが必要なのは、Divi Builderの機能がDiviテーマ（およびElegantThemesのExtraWordPressテーマ）に直接組み込まれているためです。

WordPressカスタマイザーには、数十のセクションにまたがる何百もの便利なオプションがあります。 これらは、ヘッダー、フッター、サイドバーなどの領域を制御するために使用できます。

投稿、ページ、カスタム投稿タイプのメインコンテンツ領域は、引き続きDiviBuilderによって制御されます。

あなたのウェブサイトのデザインをカスタマイズすることになると、私はDiviテーマがビーバービルダーテーマよりも良いか悪いかはないと思います。 Diviテーマがより多くのオプションを提供するいくつかの領域と、BeaverBuilderテーマがより多くを提供するいくつかの領域があります。

Divi Builderのプラグインオプションはすべて、DiviThemeのより広範なオプション領域に統合されています。

たとえば、投稿タイプの設定が[ビルダー]タブで利用できるようになり、[詳細設定]ページのオプションが[一般オプション]ページに表示されるようになりました。

一般設定ページには、ソーシャルメディアアイコン、スクロール、カスタムCSSコードなどのフィールドもあります。

Diviテーマのユーザーは、追加のオプションも利用できます。

Webサイトのナビゲーションメニュー専用のオプション領域と、投稿やページで有効にする必要がある機能を指定できるレイアウトページがあります。

468×60ピクセルのバナーとWebサイトに関する一般的なSEOの詳細を追加するためのページもあります。

Beaver Builderテーマと同様に、DiviテーマはDiviBuilderで使用するために最適化された最小限のWordPressテーマです。

Diviの膨大な範囲の既成のレイアウトを利用したい場合は、このデザインを使用することを強くお勧めします。

ビーバービルダーのコスト

機能と機能は、Beaver BuilderとDiviを確認するときに考慮する必要がある2つの要素ですが、これらの製品のコストとプロジェクトに利用できる予算も考慮する必要があります。

多くのプレミアムWordPress企業は、追加のWebサイトで自社製品を使用するためにより多くの料金を請求します。 たとえば、初級プランは1つのWebサイトをサポートし、中級プランは3つのWebサイトをサポートし、上級プランは10のWebサイトをサポートする場合があります。

BeaverBuilderとElegantThemesはより寛大で、無制限の数のWebサイトのサポートと更新を提供します。

この記事は主にプレミアムバージョンのBeaverBuilderに焦点を当てていますが、それでもBeaver BuilderLiteをチェックすることをお勧めします。

これは単純なWebサイトに適したソリューションであり、BeaverBuilderインターフェイスがどのように機能するかを確認するのにも役立ちます。

ただし、無料版のBeaver Builderには、お問い合わせフォーム、価格表、地図などの便利なモジュールがないことに注意してください。 BeaverBuilderテンプレートシステムや事前に作成されたレイアウトにもアクセスできません。

For the vast majority of projects, the full version of Beaver Builder is a better fit than the lite version.

Three different premium plans are available: Standard, Pro, and Agency. All plans come with one year of premium support and access to premium modules and templates.

The standard plan retails at $99 per year. To get WordPress multisite support and access to the Beaver Builder Theme, you need to upgrade to the $199 per year Pro plan.

The $399 per year Agency plan adds white labeling. Web design companies may be interested in this plan as it allows you to rebrand the plugin as your own and change all references to Beaver Builder in templates and the admin area.

Beaver Builderは、30日間の返金保証を提供します。

Beaver Builderのすべてのメンバーは、1年後に40％の割引も受けられます。 これにより、その後の数年間のBeaver Builderのプランの価格は、年間59.40ドル、年間119.40ドル、および年間239.40ドルに下がります。

Beaver Builderの使用について不明な点がある場合は、詳細なナレッジベースを確認することを強くお勧めします。 チケットサポート、Beaver Builderコミュニティフォーラム、Beaver Builder Facebookグループ、Beaver BuilderSlackルームでサポートを依頼することもできます。

ディビのコスト

エレガントテーマメンバーシップの価格設定ポリシーはより簡単です。

利用可能なプランは2つあり、どちらのプランでもすべてのエレガントテーマ製品に完全にアクセスできます。

エレガントテーマの年間メンバーシップは、年間89ドルです。

Beaver Builderと同様に、メンバーシップの有効期限が切れた後もDivi Builderなどの製品を引き続き使用できますが、更新しないとサポートや更新は受けられません。

数年間メンバーシップを更新すると思われる場合は、生涯アクセスプランの取得を検討することをお勧めします。 1回限りの249ドルの料金で、すべてのエレガントテーマ製品の生涯アクセス、サポート、および更新を受け取ることができます。

エレガントなテーマはまた、すべての新規顧客に30日間の返金保証を提供します。

彼らの製品をよりよく理解するのを助けるために、Elegant Themesは、私が今まで見た中で最も広範なドキュメント領域の1つを作成しました。 エレガントなテーマのWordPressテーマとプラグインがどのように機能するかを説明する何百もの書かれたチュートリアルとビデオチュートリアルがあります。

メンバーはチケットサポートを介してヘルプをリクエストすることもできます。また、大規模なコミュニティフォーラム、Meetupネットワーク、人気のFacebookグループもあります。

Beaver BuilderとDiviの価格モデルはわずかに異なるため、コストを比較することは困難です。

制限はありますが、基本的なブログや単純なWebサイトプロジェクトにはBeaver Builder Liteで十分なので、BeaverBuilderの無料バージョンが利用できるという事実に感謝しています。

ただし、Beaver Builderのフルバージョンは、WordPressユーザーの大多数にとって最良のオプションであると私は信じています。

Beaver Builderの標準ライセンスは99ドルで、Elegant Themesよりも10ドル高くなりますが、その後の更新には年間59.40ドルしかかかりません。

これは忠実なメンバーにとっては寛大な割引ですが、エレガントなテーマのライフタイムプランは、多くのWebサイト所有者にとってはそれでも安くなる可能性があります。

エレガントテーマのメンバーシップにはDiviテーマも含まれています。ビーバービルダーテーマにアクセスするには、199ドルを支払う必要があります。

さらに重要なことに、Elegant Themesメンバーシップには、Divi Theme、Divi Builder、WordPressマガジンテーマExtra、メールオプトインWordPressプラグインBloom、ソーシャルメディアWordPressプラグインMonarchの5つの高品質製品が含まれています。

このため、Elegant Themesメンバーシップは、ほとんどのWordPressユーザーにとってより良い価値を提供すると思います。

最終的な考え

ドラッグアンドドロップページビルダーは、WordPressユーザーがユーザーフレンドリーなインターフェイスを介して数分で美しいウェブサイトレイアウトを作成するのに役立ちます。

このような比較記事では、Beaver BuilderとDiviの両方の長所と短所を示すのが私の責任ですが、これらのソリューションは両方とも洗練された製品であり、それらの間には多くの類似点があることを覚えておくことが重要です。

新しい行と列を作成するプロセスはどちらの製品でも似ていますが、Beaver Builderのインターフェースは習得が容易で、少し高速でもあると思います。

Diviは、より多くのカスタマイズオプションと、より多くの既成のレイアウトを提供します。 エレガントテーマのメンバーシップには5つの製品が含まれているので、コストパフォーマンスにも優れていると思います。

BeaverBuilderとDiviの詳細をお楽しみいただけたでしょうか。

Beaver Builderの詳細については、公式販売ページを確認するか、BeaverBuilderのレビュー全文をお読みください。 Beaver Builderのデモページにアクセスするか、プラグインの無料バージョンをテストすることで、BeaverBuilderがどのように機能するかをよりよく理解することもできます。

エレガントなテーマのWebサイトとDiviBuilderの完全なレビューで、Diviの方法について学ぶことができます。 無料版のDiviBuilderはありませんが、DiviBuilderのデモページでプラグインをテストできます。 これは、DiviBuilderで何ができるかを確認するのに役立ちます。

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