モジュールをDivi WordPressテーマに追加する方法

公開: 2022-10-14

Divi WordPress テーマへのモジュールの追加は、数分で実行できる簡単なプロセスです。 モジュールを Divi WordPress テーマに追加するには 2 つの方法があります。 1 つ目は WordPress 管理パネルを使用する方法で、2 つ目は Divi Page Builder を使用する方法です。 WordPress 管理パネルは、モジュールを Divi WordPress テーマに追加する最も簡単な方法です。 モジュールを Divi WordPress テーマに追加するには、WordPress 管理パネルにログインし、[Divi] タブに移動します。 「Divi」タブで、「モジュールの追加」ボタンをクリックします。 ポップアップウィンドウが表示されます。 ドロップダウン メニューから追加するモジュールを選択し、[モジュールの追加] ボタンをクリックします。 Divi Page Builder は、モジュールを Divi WordPress テーマに数分で追加できる強力なドラッグ アンド ドロップ ページ ビルダーです。 Divi Page Builder を使用するには、WordPress 管理パネルにログインし、[Divi] タブに移動します。 「Divi」タブで、「Page Builder」ボタンをクリックします。 新しいページが Divi Page Builder インターフェイスで読み込まれます。 モジュールを Divi WordPress テーマに追加するには、モジュールを左側のサイドバーからコンテンツ領域にドラッグ アンド ドロップするだけです。 モジュールがコンテンツ エリアに表示されたら、[設定] ボタンをクリックしてモジュールの設定を編集できます。

ディビモジュールビルダー

クレジット: www.youtube.com

Divi Module Builder は、Divi Page Builder 用のカスタム モジュールを簡単に作成できる強力なツールです。 Divi Module Builder を使用すると、自分でコーディングしたり設計したりすることなく、カスタム モジュールを簡単に作成できます。 Divi Module Builder を使用すると、応答性が高く、インタラクティブで、すべてのデバイスで見栄えのするカスタム モジュールをすばやく簡単に作成できます。

Divi モジュールは、デザインでさまざまな方法で使用できます。 ブロックは、スタンドアロンのピースとして、または行と列の一部として使用して、レイアウトを作成できます。 モジュールをライブラリに保存して、後で使用できるようにすることができます。 Divi モジュールは、レイアウトに視覚的な魅力を加える優れた方法です。 Visual Builder で色、サイズ、およびモジュールの設定を変更して、まさに必要なデザインを作成できます。

別のモジュール内のDiviモジュール

別のモジュール内に divi モジュールを挿入することは可能です。 これは、モジュールのメニューから「モジュールの挿入」オプションを選択することで実行できます。 選択すると、挿入するモジュールを選択できるウィンドウが表示されます。

これには、現在インストールされているDIVI ライブラリの各アイテムのショートコード、またはツールの有料バージョンまたはプレミアム バージョンの将来のショートコードが含まれています。 特定の要素を使用するには、表示されたショートコードをコピーして、好きな場所に貼り付けます。 アコーディオンが機能しない、グローバル モジュールが正常に機能しない、およびアコーディオンが正常に機能しない。 ただし、いくつかのユニークなデザインを作成するための優れたツールです。 DIVI には、2 つのマップ モジュールと証言モジュールが含まれています。 ショートコードをコピーして貼り付けることで、ショートコードを追加できます(マップはこちら)。 まず、2 番目のタブに移動し、紹介ショートコードをクリックします。 2 つのタブが作成されると、タブ モジュールが下に表示されます。

ディビコードモジュール

クレジット: www.elegantthemes.com

Divi コード モジュールを使用すると、カスタム CSS、HTML、および JavaScript を直接Divi Builderに入力できます。 これは、Web サイトのルック アンド フィールをカスタマイズしたり、Divi Builder では利用できない機能を追加したりするのに役立ちます。

Divi のモジュールを使用してページを作成できます。 すべてのモジュールは、独自のものを作成するのに役立つ機能、要素、およびデザイン設定の独自のセットで構成されています。 Divi の膨大なモジュール セットにより、ほぼすべてのタイプの Web サイトを簡単に構築できます。 ページは、HTML、JavaScript、および CSS を含むコード モジュールのコードで構築できます。 エレガント テーマが提供する各無料モジュールを、Divi メンバーシップの一部として使用できます。 Divi モジュールを作成すると、将来のプロジェクトで使用したり、Divi マーケットプレイスで販売したりできます。 独自のモジュールを作成する方法の詳細については、開発者向けドキュメントをご覧ください。

Divi モジュールの挿入

Divi モジュールは、Divi Builder 内で独自のカスタム レイアウトを作成するために使用できる既製のモジュールです。 さまざまなモジュールが利用可能で、それぞれに独自のオプションと設定のセットがあります。 Divi モジュールを目的の場所にドラッグ アンド ドロップすることで、レイアウトに挿入できます。

Divi を使用すると、Web サイトをすばやく簡単に作成できます。 可能であれば、このソリューションを使用して、他の方法では使用できないモジュールをここに配置できます。 ウェブサイト上のファイルを編集する前に、ガイドを使用して子テーマを作成することを強くお勧めします。 子テーマがない場合、 Divi テーマはその後の更新ですべてのカスタム コードを削除します。 この例では、タブ モジュールを使用して連絡先フォームを作成します。 ニュースレターのサインアップ プロセスをより魅力的にするために、フッターに宣伝文句モジュールまたは専門セクションを含めることができます。 Divi モジュールを作成するには、保存されたコンテンツに関連する ID が必要です。 これを行う最善の方法は、Divi ライブラリを開き、マウスをモジュール名の上に置くことです。 モジュールの ID を見つけたら、それをページに追加するのは簡単なプロセスです。

Divi Builder Layout プラグインのインストール方法

Divi Builder Layout プラグインをインストールするには、[プラグイン] タブに移動し、[新しいプラグインを追加] をクリックします。 プラグインをインストールするには、表示されるウィンドウで [今すぐインストール] ボタンを選択し、使用する ZIP ファイルを検索します。

カスタム Divi Builder モジュール Divi Builder モジュール

オンラインで購入できるカスタム divi ビルダー モジュールが多数あります。 Web サイトにソーシャル メディア アイコンを追加したり、カスタムの連絡先フォームを作成したりするなど、さまざまな目的でそれらを見つけることができます。 Divi ビルダー モジュールは、自分でコーディングしなくても Web サイトに機能を追加できる優れた方法です。

Divi Page Builder のモジュールは、私のニーズを満たすために拡張されました。 クライアントからいくつかのリクエストを受け取ったとき、既存のモジュールを変更するか、新しいモジュールを作成する必要がありました。 ニーズは異なる場合があるため、この記事ではモジュールのカスタマイズに関する詳細は説明しません。 ET Builder モジュール クラスは非常に大きいため、モジュール全体を自分で作成することに専念したくはありません。 Divi ファイルに移動して検索することで、必要なものに最も近い既存のモジュールを選択できます。 ここに示されているものと同じように見える Image モジュールを使用します。 そのためには、et_pb_ ファイルを保持する必要があります。 そうしないと、スラッグのプレフィックスがあるため、Divi Builder はモジュールをロードしません。 新しいクラス インスタンスを参照するには、名前を変更してショートコードを追加する必要があります。

Divi Builder: WordPress 用の柔軟で使いやすいページビルダー

Divi Builder は、可能な限り柔軟でありながら、可能な限りシンプルに使用できるように設計されています。 Divi Builder は、WordPress を始めたばかりの方でも、プラットフォームの経験がある方でも、あらゆるレベルの WordPress ユーザーにとって優れた選択肢です。 モジュラー システムのため、Divi Builder を使用すると、独自のカスタム レイアウトを作成するために使用できるカスタム モジュールを簡単に作成できます。 Divi Builder には移植性機能があり、レイアウトを他の Web サイトに簡単にエクスポートできます。