Divi Builderレビュー：最新のWordPressページビルダー

Divi Builderは、市場で最高のドラッグアンドドロップページビルダーの1つと当然見なされています。 この人気のあるWordPressプラグインを使用すると、コードを使用せずに、複雑でレスポンシブなWebサイトのレイアウトを数分で作成できます。

したがって、Webサイトの設計経験がなくても、Divi Builderを使用して美しいWebサイトを構築し、画像、スタイリッシュなテキスト、ビデオ、フォーム、表などのリッチメディアをコンテンツに導入できます。

この記事では、DiviBuilderを使用してプロフェッショナルなWebサイトのレイアウトとページを作成する方法を紹介します。

これにより、多くのWebサイト所有者がこのWordPressプラグインを使用する理由をよりよく理解できます。

Divi Builderは何を提供しますか？

2018年の終わりに、WordPressはソフトウェアのバージョン5.0をリリースしました。 これは、古いWYSIWYG（What You See Is What You Get）エディターをGutenbergと呼ばれる新しいドラッグアンドドロップブロックエディターに置き換えたため、重要なリリースでした。

WordPressにはドラッグアンドドロップのページビルダーがパッケージ化されているので、なぜ誰もがDiviBuilderなどの代替ページ構築ソリューションを購入したいと思うのか疑問に思われるかもしれません。

私は新しいWordPressブロックエディターのシンプルさが好きですが、それを使用したことがあれば、それが多くの制限といくつかのカスタマイズオプションがある基本的なソリューションであることに気付くでしょう。

対照的に、Diviの可能性は無限です。 シンプルなブログデザインから複雑なオンラインショップや会社のウェブサイトまで、あらゆるものを作成するために使用できます。 それは本当にページ構築をまったく新しいレベルに引き上げます。

Divi Builderは、任意のWordPressテーマで動作するスタンドアロンのページ構築ソリューションとして2015年に発売されました。 以前は、この機能は、2年前にElegantThemesによってリリースされたDiviWordPressテーマ内でのみ使用できました。

プラグインは、長年にわたって継続的に拡張および改良されてきました。 エレガントなテーマは、バグ修正、微調整、および主要な新機能の詳細を示す更新をブログで一貫して公開しています。

進化するDiviBuilderの良い例は、ビジュアルビルダーです。 以前のバージョンのDiviBuilderでは、カスタムレイアウトはWordPressエディター内で作成されていました。 後で、ユーザーフレンドリーな「ビジュアルビルダー」が追加され、Webサイトのフロントエンドでレイアウトを作成できるようになりました。

ビジュアルビルダーは、Divi Builderのメインユーザーインターフェイスとして中心的な役割を果たしていますが、必要に応じて、レガシービルダーを使用してバックエンドでレイアウトを作成することもできます（これについては後で詳しく説明します）。

Divi Builderには、作成したレイアウトを保存できるライブラリシステムがあります。 次に、必要なときにライブラリからレイアウトをロードし、使用しているページに合わせてレイアウトを調整できます。

プラグインには1,000以上の見事な既成のレイアウトが付属しており、公式のDiviマーケットプレイスやサードパーティのマーケットプレイスからさらに多くのレイアウトがリリースされています。

これらのデザインは、独自のカスタムレイアウトやWebサイトデザインの素晴らしい出発点になります。 ユニークなレイアウトを作成するために必要な時間を大幅に短縮できるので、私はそれらの大ファンです。

Divi Builderの本当のセールスポイントは、カスタマイズです。

Divi Builderがどのように機能するかを学ぶのに時間を費やした後、プラグインがいかに用途が広いかを理解し始めます。 スタイリング、モジュール、行、列など、ページ上のすべての要素を調整できます。

簡単に言えば、ページ上にある場合は変更できます。

DiviBuilderはWooCommerceを強力にサポートしています。 エレガントなテーマは、この統合を「WooBuilder」と呼んでいます。

Divi Builderを使用すると、製品ページのカスタムレイアウトを作成し、WooCommerce固有のコンテンツモジュールを追加できます。 オンラインショップ用の既製のレイアウトも利用できます。

DiviBuilderがどのように機能するかを詳しく見てみましょう…

VisualBuilderの起動

WebサイトでDiviBuilder WordPressプラグインがアクティブ化されると、投稿、ページ、およびカスタム投稿タイプの上部に[Use the DiviBuilder]ボタンが表示されます。

小さな設定領域には、コンテンツの幅を変更できるWordPressエディターからアクセスすることもできます。

ブログの投稿またはページに移動してDiviBuilderボタンをクリックすると、「このレイアウトはDiviで構築されています」というメッセージが表示されます。

WebサイトのフロントエンドでDiviBuilderを起動するには、このボタンをクリックする必要があります。

ただし、WordPressプロファイル画面でビジュアルエディターの設定を無効にすると、DiviBuilderが機能しないことに注意してください。

新しいブログ投稿またはページを作成する場合は、DiviBuilderまたはデフォルトのWordPressエディターを使用するオプションがあります。

または、WordPress管理バーからWebサイトのフロントエンドから直接DiviBuilderを起動することもできます。 ログインすると、「VisualBuilderを有効にする」リンクがWebサイトに表示されます。

Divi Builderは通常、デフォルトのWordPressエディターの代わりにWordPressユーザーによって使用されますが、Divi LayoutBlockを使用してGutenbergエディターと調和して機能することができます。

Divi Layout Blockは、ページの任意の領域に挿入でき、通常のWordPressエディターブロックと並べて配置できます。

複数のDiviレイアウトブロックをコンテンツに挿入できます。 ブロック内にまったく新しいレイアウトを作成したり、以前に保存したレイアウトをDiviライブラリからロードしたりできます。

ご覧のとおり、Divi Builderは、Webサイト全体を乗っ取らないことで、WordPressを非常によく補完します。 必要なときにだけDiviBuilderを使用する必要があります。

ディビの美しいレイアウト

Divi Builderを起動すると、3つのオプションが表示されます。

新しいレイアウトを最初から作成するか、作成済みのレイアウトを選択するか、既存のページのクローンを作成するかを選択できます。

既成のレイアウトを選択した場合、Diviライブラリはすべての既成のデザインをロードして表示します。 これは、Divi Builderのメインメニューからいつでもロードできるため、誤って閉じても心配する必要はありません。

執筆時点では、1,100を超えるレイアウトと149のレイアウトパックが利用可能です。 デザインは、アート＆デザイン、ビジネス、コミュニティ＆非営利、教育、イベント、ファッション＆ビューティー、フード＆ドリンク、ヘルス＆フィットネス、ライフスタイル、オンラインストア、サービス、シンプル、テクノロジーの13のカテゴリに分類されます。

必要に応じて、事前に作成されたレイアウトライブラリを検索するだけです。 この領域から、保存したレイアウトと既存のページを表示することもできます。

レイアウトパックは、Webサイトのいくつかの領域のデザインを含むレイアウトのコレクションです。 たとえば、ホームページ用、ブログ用、アバウトページ用、ショップ用のレイアウトを含めることができます。

デモボタンをクリックすると、デザインのライブプレビューが読み込まれます。 すべてのレイアウトのデモは、Divi LayoutPacksページで表示できます。

「このレイアウトを使用」をクリックすると、DiviBuilderは問題のレイアウトまたはレイアウトパックのインポートを開始します。

すべてのWordPressページ構築ソリューションと同様に、Divi Builderは、投稿、ページ、カスタム投稿タイプのメインコンテンツ領域にレイアウトを直接挿入します。

したがって、レイアウトをブログ投稿にインポートすると、手動で削除しない限り、サイドバーが表示されます。 ページでは、ほとんどのWordPressテーマがサイドバーを削除する全幅ページテンプレートまたはランディングページテンプレートを備えているため、このプロセスはより簡単です。

レイアウトをインポートしたら、デザインをカスタマイズして独自のデザインにすることができます。 行った変更は、いつでも保存して再利用できます。

レイアウトも分類できます。これは、レイアウトのライブラリが大きくなるにつれて役立つものです。

メインのDivi管理メニューには、DiviテーマビルダーとDiviライブラリへのリンクがあります。

Divi Theme Builderを使用すると、ヘッダー、本文、およびフッターが定義された固有のページテンプレートを作成できます。

テンプレートに任意のレイアウトを割り当てて、Webサイトのどの領域を表示するかを正確に定義できます。

たとえば、ホームページとブログ用に1つ、オンラインショップ用に1つ、404エラーページ用に1つ、公開した一連のブログ投稿用にもう1つテンプレートを作成できます。

保存したすべてのレイアウトは、Diviライブラリのメインページに表示されます。

この領域から、すべてのレイアウトにアクセスしたり、レイアウトカテゴリを変更したり、レイアウトをインポートおよびエクスポートしたりできます。

メインレイアウトページからレイアウトを編集することを選択すると、レイアウトは「ワイヤーフレームビュー」に表示されます。

このモードは、レガシービルダーのルックアンドフィールに似ています。 必要に応じてフロントエンドビジュアルビルダーに戻すこともできますが、これはレイアウトの構造を表示し、いくつかの簡単な変更を行うための優れた方法であることがわかります。

Divi Builderの既成のレイアウトの大規模なコレクションは、数分で素晴らしいデザインを作成するのに役立ちます。 これらは、独自のカスタムレイアウトの優れた出発点であり、使用可能なレイアウトを参照することで、DiviBuilderの動作について詳しく知ることができます。

間違いなく、DiviLibraryとDiviThemeBuilderテンプレートシステムはDiviBuilderのバックボーンであり、Diviが非常に用途が広く、プロフェッショナルなデザインを非常に迅速に作成できる理由の1つです。 これは、デフォルトのWordPressブロックエディターなどの代替ソリューションにはまだ欠けている機能です。

VisualBuilderインターフェース

すべてのWordPressページビルダーは異なる動作をするため、DiviBuilderのビジュアルビルダーがどのように動作するかを理解するために時間を費やす必要があります。

Divi Builderのメインインターフェイスは、各ページの下部に表示されます。 メニューが最小化されると、3つのドットが付いたボタンのみが表示されます。

3つのドットが付いたボタンをクリックすると、メインインターフェイスが読み込まれます。

ページの左側、中央、右側に多くのオプションが表示されます。

左側には6つのボタンがあります。 3つの縦のドットが付いたボタンは、ビジュアルビルダー設定メニューをロードします。

このメニューでは、ホバーモード、クリックモード、およびグリッドモードのメニューに3つのボタンを追加できます。 ホバーモードでは、ページのさまざまな部分にカーソルを合わせるとオプションが表示されますが、クリックモードでは、ページの特定の部分をクリックする必要があります。 グリッドメニューには、すべてが一度に表示されます。

デフォルトの表示モードを変更し、主要な機能を有効/無効にするためのその他のオプションがいくつかあります。

ビジュアルビルダーの左側にある他のボタンは、ワイヤーフレームビュー、デザインのズームインとズームアウト、およびデスクトップ、タブレット、モバイルデバイスでのページの表示用です。

これらの機能はすべて、ページがどのように構成され、さまざまな状況でどのように表示されるかを確認するのに役立ちます。

私はワイヤーフレームビューモードの大ファンです。ワイヤーフレームビューモードはすべてのデザイン要素を取り除き、ページがどのように構成されているかを示します。 これは、物を動かしたり、物の配置方法を変更したりするときに特に役立ちます。

ビジュアルビルダーインターフェイスの中央には7つのボタンがあります。左側に3つ、右側に3つ、中央にメニューを閉じる大きなXがあります。

左側の最初のボタンはDiviライブラリをロードし、2番目のボタンはレイアウトをライブラリに保存し、3番目のボタンはページレイアウトをクリアします。

反対側には、ページ設定、編集履歴、および移植性のためのボタンが表示されます。

ページ設定ボックスでは、ページタイトル、抜粋、注目の画像、背景色、スタイル、分割テスト、可視性などを変更できます。

変更を元に戻したりやり直したりできるということは、間違いを心配する必要がないことを意味します。 いつでも変更を元に戻して、現在のレイアウトおよびグローバルレイアウトの以前の状態に戻すことができます。

移植性ボタンは、ページレイアウトをエクスポートおよびインポートできるので便利です。

Divi Builderインターフェースの右側に、検索ボタン、ヘルプボタン、およびレイアウトを保存するためのボタンが表示されます。

Diviを使用すると、表示モード、設定、ドキュメントなどを検索できます。 検索結果をクリックすると、すぐに機能が読み込まれます。

DiviBuilderヘルパーボックスも非常に便利です。 いくつかのビデオチュートリアルが表示され、キーボードショートカットへの参照が表示されます。

これらのショートカットを使用して、レイアウトの作成プロセスを高速化できます。 変更の取り消しとやり直し、レイアウトの保存、表示モードの変更、モジュールのコピーなどのショートカットがあります。

エレガントなテーマには、すべてがどのように機能するかを説明するVisualBuilderに関する詳細なガイドがあります。

これは素晴らしいリファレンスですが、Diviを初めて使用するときは、すべてをいじり回すことができるように、事前に作成されたレイアウトをロードすることをお勧めします。 それはあなたがそれがどのように一緒に結びつくかを見るのを助けるでしょう。

行、列、モジュールなど

ページビルダーの利点は、ページの各部分にさまざまな種類のコンテンツを入力できることです。 これには、地図、表、画像、動画、ウィジェットなどが含まれます。

一部のWordPressページビルダーでは、これらのさまざまなコンテンツタイプはブロックと呼ばれます。 他では、それらは要素と呼ばれます。

Diviはそれらをモジュールと呼びます。

残念ながら、エレガントなテーマは名前に少し一貫性がありません。 Divi Builder内では、これらはモジュールと呼ばれますが、マーケティング資料とドキュメントでは、モジュールではなくブロックへの参照が多数表示されます。

Divi Builderには40を超えるコンテンツモジュールがあり、各モジュールには、モジュールの表示内容を形作るのに役立つ多数のカスタマイズオプションが含まれています。

モジュールは、列と行の内側に配置する必要があります。

空白のキャンバスでページレイアウトを開始する場合は、ページにプラス記号が表示された緑色のボタンが表示されます。

これにカーソルを合わせると、新しい行を追加するオプションが表示されます。 行の周りに表示される青いアウトラインは、セクションと呼ばれます。 セクションに必要な数の行と列を追加できます。

言い換えると、モジュールは列の中に配置され、列は行の中に含まれ、行はセクションの中に配置されます。

セクションにカーソルを合わせると、セクションを移動したり、セクション設定にアクセスしたり、セクションを複製したり、セクションをライブラリに保存したり、セクションを削除したりするためのボタンが表示されます。

行と列の左上にも同じボタンが表示されます。 ここですべてのオプションを確認してください。コンテンツの配置場所とコンテンツのスタイルを制御する方法をよりよく理解できるようになります。

メニューの最後にある3つのドットをクリックすると、1ダースほどの追加設定が表示されます。

Divi Builderで新しい行を追加するときは、その行に必要な列構造も選択する必要があります。

構造を変える場合は、後で表示する列の数を簡単に変更できます。 必要な構造が見つかるまで、メインキャンバス領域に列をドラッグアンドドロップすることもできます。

行と列の構造を選択すると、[モジュールの挿入]ボックスが表示され、レイアウトのコンテンツモジュールを選択できます。

モジュールを選択すると、その設定ボックスが表示されます。

各コンテンツモジュールで利用できるカスタマイズのレベルは驚異的です。 色、間隔、トランジション、カスタムCSS、位置、効果など、デザインのあらゆる側面を定義できます。

設定ボックスに表示されるオプションは、選択したモジュールに応じて変わります。

事前に作成されたレイアウトを使用すると時間を節約できますが、Divi Builderを最大限に活用してレイアウトを独自のものにしたい場合は、モジュール、列、行、およびセクションの設定ボックスを調べる必要があります。 これにより、ページ上のすべてのスタイルと位置を完全に制御できます。

大量のモジュール、列、行、およびセクションをページに追加すると、ページの一部の領域が少し混雑しているように感じる場合があります。 たとえば、モジュールにカーソルを合わせて設定を読み込むと、行とセクションの設定も表示される場合があります。

この場合、すべてがよりクリーンな形式で表示されるため、ワイヤーフレームビューに切り替えることをお勧めします。

DiviBuilderがテキストと画像をどの程度柔軟に使用しているかを正確に示すことは困難です。

したがって、Diviの公式デモページで、このWordPressプラグインで何ができるかを確認することをお勧めします。

レガシービルダーの使用

エレガントなテーマにより、ビジュアルビルダーはDivi Builderを使用するデフォルトの方法になりましたが、必要に応じて、WordPressエディター内で直接レイアウトを作成することもできます。

Diviは、バックエンドエディタを「レガシービルダー」と呼んでいます。

これを使用するには、Divi Builderプラグインオプションページの詳細セクションに移動し、最新のDivi Builderエクスペリエンスを無効にして、クラシックエディターを有効にする必要があります。

従来のビルダーの上には、標準のWordPressエディターに戻ってフロントエンドでビルドするためのボタンがあります。

何年もDiviを使用している方は、下に表示されているレガシービルダーに精通しているでしょう。 新規ユーザーは、ビジュアルビルダーのワイヤーフレームビューモードに似ていることに気付くでしょう。

インターフェイスの上部には、DiviBuilderレイアウトのバックアップと復元を可能にするインポートおよびエクスポートオプションがあります。 その隣には、分割テストと多数のスタイリングオプションおよびCSS設定を備えた設定メニューがあります。

その下には、ライブラリへの保存、ライブラリからのロード、およびレイアウトのクリアへのリンクがあります。 反対側には、変更を元に戻したり、変更をやり直したり、変更の履歴を表示したりするためのボタンがあります。

新しい行と列をページに簡単に挿入できます。

列が複数の行にまたがる全幅セクションと特殊セクションを追加することもできます。

レガシービルダーはWordPressエディターに直接表示されるため、レイアウトへの変更をリアルタイムでプレビューすることはできませんが、これは、レイアウトを作成してモジュールを追加するためのスペースが増えることを意味します。

ページを構成するときは、ビジュアルビルダーよりも窮屈さを感じないため、この設定を好みます。

ドラッグアンドドロップ機能を使用してページの任意の部分を移動できるため、レガシービルダーはカスタムレイアウトを作成する効率的な方法です。

一部のDiviユーザーにとって、これはコンテンツの作成とページのスタイリングの好ましい方法であり続けます。 多くの人がこのモードをまだ使用している理由がわかります。これがどのように機能するかを理解すれば、新しいレイアウトの作成は迅速で、気を散らすものはほとんどありません。

DiviBuilderプラグイン設定

カスタマイズ設定の大部分はメインのDiviBuilderインターフェース内にありますが、いくつかの追加設定はメインのDivi管理メニューにあります。

DiviテーマビルダーとDiviライブラリに加えて、メインのDivi Builderプラグインオプションページ、ロールエディター、およびサポートセンターが表示されます。

プラグインオプションページは、更新、API設定、投稿タイプの統合、および詳細の4つのセクションに分かれています。

Divi Builderの自動更新を受け取るには、エレガントテーマのユーザー名とAPIキーを入力する必要があります。

Googleマップのコンテンツブロックを使用するには、API設定セクションにGoogleAPIキーを入力する必要があります。 このセクションからGoogleFontsを無効にすることもできます。

Divi Builderを使用すると、ページビルダーを使用する投稿タイプを正確に選択できます。 たとえば、ギャラリーの投稿タイプでDiviBuilderを無効にすることができます。

JavascriptやCSSの縮小、Divi Builder製品ツアーの無効化など、他の多くの設定が詳細セクションにあります。

前述のように、これは、レガシービルダーインターフェイスを有効にして、WordPressブロックエディター（Gutenberg）をクラシックエディターに置き換える場所でもあります。

Divi Role Editorを使用すると、さまざまなユーザーロールで実行できることと実行できないことを正確に指定できます。

ユーザーがオプションページ、テーマビルダー、メインのDivi Builderインターフェイス、レイアウトライブラリなどにアクセスできるかどうかを定義できます。

たとえば、投稿者がブログ投稿を作成するときにDivi Builderとレイアウトにアクセスできるようにし、プラグインオプションページへのアクセスを制限することができます。

Divi管理メニューの最後のページは「DiviBuilderヘルプ＆サポートセンター」です。

システムレポートがページの上部に表示され、DiviBuilderの適切なホスティング設定があるかどうかが強調表示されます。 Diviで問題が発生した場合は、このページを参照することをお勧めします。 たとえば、リソースが限られているため、レイアウトのインポートが停止する可能性があります。

テスト用のWordPressWebサイトでDiviBuilderをアクティブ化したため、ホスティング設定が最適ではないという警告がいくつか表示されました。

エレガントなテーマへのリモートアクセスを提供し、サポートと直接チャットするためのオプションもここにあります。

さまざまなDiviBuilderチュートリアルもこのページからリンクされています。

書かれたチュートリアルに加えて、作成済みのレイアウトの使用、およびDiviライブラリの使用を開始するのに役立つビデオチュートリアルがあります。

サポートページには、セーフモードオプションとWP_DEBUG_LOGによって生成されたエラーのリストもあります。

Divi Builderはユーザーフレンドリーなソリューションですが、プラグインを初めて使用する場合は、Divi Builderインターフェースをいじった後、提供されているチュートリアルのいくつかを実行することをお勧めします。 Divi Builderで何ができるかをよく理解し、見逃したかもしれないいくつかのクールな機能やトリックを紹介します。

Divi Builderの費用はいくらですか？

エレガントなテーマには、WordPressの世界で最もシンプルで公正な価格設定ポリシーの1つがあります。

エレガントテーマのメンバーシップは、年間ベースまたは1回限りの料金で購入できます。 どちらのプランでも、すべてのエレガントテーマ製品にアクセスでき、好きなだけ多くのWebサイトで使用できます。

年間ライセンスの購入には年間89ドル、生涯アクセスライセンスの購入には249ドルかかります。

年間ライセンスを選択した場合は、ライセンスの有効期限が切れた後も引き続きエレガントテーマ製品を使用できます。 ただし、メンバーシップの有効期限が切れると、サポートや更新は受けられなくなります。

ライフタイムアクセスライセンスは、ElegantThemes製品を2年以上使用する予定の場合に意味があります。

すべてのライセンスには、30日間の返金保証が付いており、いつでもメンバーシップをキャンセルできます。

Divi Builderは、ElegantThemesメンバーシップパッケージの一部にすぎません。

メンバーシップにより、用途の広いDiviテーマにアクセスすることもできます。 これは、ページ作成機能がテーマに直接組み込まれているため、DiviBuilderのファンである場合に使用するのに最適なWordPressテーマです。

エレガントなテーマのメンバーシップには、美しい雑誌のWordPressテーマExtraも含まれています。これは、DiviBuilderを利用したデザインです。

メンバーシップには、メールマーケティングとリードジェネレーションのWordPressプラグインBloomとソーシャルメディア共有のWordPressプラグインMonarchも含まれています。

エレガントなテーマには、WordPressの世界で最高のサポート領域の1つがあります。 彼らの広大なドキュメントエリアには、すべての製品に関する詳細な書面とビデオのチュートリアルがありますが、それでも不明な点がある場合は、サポートチケットを開いて支援を受けることができます。

最終的な考え

DiviBuilderのこの詳細な外観を皆さんが楽しんだことを願っています。

このWordPressプラグインは、市場で最高のドラッグアンドドロップページ構築ソリューションの1つであり、使いやすさ、機能、高度な設定のバランスが非常に優れています。 何千もの高品質のプロのレイアウトを含めることは、ケーキのアイシングです。

エレガントなテーマのメンバーシップは、お金にも素晴らしい価値を提供し続けます。 したがって、Divi Builderを使用したい方は、さらに4つの高度なWordPressテーマとプラグインにアクセスできます。

Divi Builderの動作を確認したい場合は、DiviBuilderプレビューエリアとElegantThemesデモページを確認してください。

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

ケビン