DiviWebサイトをElementorに変換するためのステップバイステップガイド

Diviは、最も人気のあるWordPressテーマの1つであり、Webサイトをリアルタイムでデザインできるビジュアルページビルダーです。 一方、Elementorは、ドラッグアンドドロップ機能を備えた最高のWordPressページビルダープラグインとして認識されており、数分でWebサイトを作成およびカスタマイズできます。

これらのページビルダーはどちらも非常に強力です。 ウィジェット、要素、カスタマイズ機能などの多くの類似点に加えて、これら2つのページビルダーの間には多くの違いがあります。

Elementorはほとんどすべてのテーマと互換性があるのに対し、ElegantThemesを使用している場合は主にDiviBuilderを使用します。 これが、多くのユーザーが現在DiviからElementorに切り替えている最大の理由の1つです。 価格設定も、この選択プロセスにおいて重要な役割を果たします。

DiviからElementorにも移行する場合は、このブログが最適です。 今日は、WebサイトをDiviからElementorに変換する方法についてのステップバイステップガイドを共有します。

WebサイトをDiviからElementorに変換するための前提条件

チュートリアルに飛び込む前に、前提条件を確認しましょう。

最初に：Divi Webサイトを変換する前に、必ずWebサイトをバックアップしてください。 任意のWordPressバックアッププラグインを使用してプロセスを実行できます。

2番目：WordPressキャッシングプラグインを使用する場合は、それをオフにする必要があります。

3番目：変換する前にステージングサイトを作成することをお勧めします。 Webサイトデュプリケータープラグインを使用して、ステージングWebサイトを簡単に作成できます。

始めましょう：

DiviをElementorに変換する方法：従うべき5つのステップ

正直なところ、Webサイト全体または特定のWebページをDiviからElementorに変換することはできません。 Elementorが静的HTMLコードを生成するのに対し、Diviはショートコードを使用してWebコンテンツを構築するためです。

したがって、WebサイトのデザインをDiviからElementorに変換することを計画している場合は、それを再構築する必要があります。 ここでは、Elementorページビルダーを使用してDiviWebサイトを再構築する方法を紹介します。

ステップ1：Elementorをインストールする
ステップ2.Diviと関連プラグインを削除する
ステップ3：新しいページを作成する
ステップ4：Elementorウィジェットを使用してページにコンテンツを追加する
ステップ5：Elementorテンプレートを使用してWebサイトを設計する

上記の手順に従って、Elementorを使用してWebサイトを再設計します。

ステップ1：Elementorをインストールする

まず、 [プラグイン]->[新規追加]に移動する必要があります。

プラグインページにリダイレクトされます。 ここでは、プラグインディレクトリから「Elementor」プラグインを検索して見つける必要があります。 次に、[インストール]をクリックしてプラグインをインストールします。 その後、プラグインをアクティブ化する必要があります。

注： Webサイトを設計するためにElementor proの機能が必要な場合は、ElementorProをインストールできます。

プラグインのアクティブ化が完了したら、 Elementor-> Settings領域に移動して、Elementorの基本設定を管理する必要があります。

ステップ2.Diviと関連プラグインを削除する

インストールプロセスが完了したら、次のステップは、WebサイトからDiviとその推奨プラグインを非アクティブ化することです。 次に、ショートコードが残っているページがたくさんあります。

これらのショートコードを削除する必要があります。 これを行うには、ShortCode Cleanerを使用して、これらの壊れたショートコードを削除します。 必要に応じて、ガベージコレクタを使用してデータベースをクリーンアップします。

ステップ3：新しいページを作成する

これで、Webサイトを変換する準備が整いました。 まず、新しいページを作成する必要があります。 これを行うには、 [ページ]->[新規追加]にアクセスします。

新しいページ（デモページ）を作成しました。 また、ページ設定も行っております。

1. ページレイアウト->ElementorCanvasを設定します。
2. [公開]ボタンをクリックして、ページを公開します。
3. [ Elementorで編集]ボタンをクリックして、ページをElementorエディターパネルで開きます。

Elementorの使用方法：初心者向けの究極のガイド

ステップ4：Elementorウィジェットを使用してページにコンテンツを追加する

素晴らしい。 これでWebページが正常に作成され、Elementorで編集する準備が整いました。

そして、ページにコンテンツを追加する時が来ました。 Elementorには、Webページのデザインに使用できるドラッグアンドドロップウィジェットが付属しています。

見出しウィジェットを追加しましょう。 ウィジェットギャラリーから見出しウィジェットを見つけるだけです。 次に、ウィジェットをWebページに適した場所にドラッグアンドドロップします。

[スタイル]オプションを使用して、見出しをカスタマイズできます。

さらにカスタマイズするには、Elementorの高度な機能を使用できます。

ステップ5：Elementorテンプレートを使用してWebサイトを設計する

Elementorには、Webサイトをデザインするための既製のWebサイトテンプレートもいくつか付属しています。 設計目的に応じて適切なものを選択できます。 ただし、これらのテンプレートは独自の方法でカスタマイズできます。

ElementorWebサイトテンプレートの使用方法を見てみましょう。

まず、テンプレートアイコンをクリックします。

次のモーダルポップアップで、すべてのElementor Blocks ＆ Templatesを取得します。

ここから適切なテンプレートまたはブロックを選択できます。 このテンプレートを使用するには、 [インストール]ボタンをクリックして、インストールをしばらく待つ必要があります。

それでおしまい。

DiviとElementorに関するFAQ

ここでは、ElementorとDiviに関するいくつかの基本的な質問に答えました。

DiviWebサイトを変換する準備はできていますか

ElementorやDiviのようなページビルダーはウェブサイトのデザイン時代を変えます。 今、あなたは簡単にリアルタイムでウェブサイトをデザインすることができます。

このブログでは、DiviをElementorに変換する方法を紹介しました。 ElementorとDiviに関するいくつかの基本的な質問にも回答しました。 ご不明な点がございましたら、下のコメント欄からお問い合わせください。 できるだけ早くお答えします。

このブログが役に立ったら、ソーシャルメディアで共有してください。 WordPressとElementorに関連する詳細情報を入手するには、ニュースレターに参加することを忘れないでください。