Diviモジュールまたは行を他のDiviモジュール内に挿入する方法（プラグインなし）

しばらくDiviユーザーであった場合、別のモジュール内にDiviモジュール（または行）を挿入するという考えが頭に浮かんだかもしれません。 ほとんどの場合、Diviを上手に使用する方法を知っていれば、この種のことは実際には必要ありません。 Diviモジュールは、機能と組み込みの設計設定が満載された強力な要素です。 ただし、Diviを使用して2つのモジュールを設計し、一方を他方に挿入することで、これらの機能を強化すると便利な場合があります。 この良い例の1つは、モジュール（連絡先フォームなど）をトグルモジュールに挿入して、トグルをクリックしたときにフォームが表示されるようにすることです。

このチュートリアルでは、Diviモジュールまたは行を別のDiviモジュールに挿入する方法を共有します。 これを行うには、JQueryの小さなスニペットをいくつか追加する必要があります。 コードを配置したら、Divi Builderを使用して適切なCSSクラスを追加し、挿入/移動する要素とそれらを配置するモジュールをターゲットにすることができます。

始めましょう！

スニークピーク

このチュートリアルで作成する例を簡単に見てみましょう。

トグルモジュール内の連絡フォーム

宣伝文モジュール内のトグルモジュールとボタンモジュール（右の列）

トグルモジュール内のDivi行

レイアウトを無料でダウンロード

このチュートリアルのレイアウトを手に入れるには、まず下のボタンを使用してレイアウトをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

私たちのYoutubeチャンネルを購読する

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

心に留めておくべきこと

このチュートリアルでは、このプロセスで使用するすべてのモジュールのスタイルを設定するプロセスは、Divi Builderの組み込み設定を使用して視覚的に実行できるため、その部分はユーザーに任せます。 モジュール/行を別のモジュール内に挿入するために、適切なCSSクラスとHTMLを各Divi要素に適用する方法にさらに焦点を当てます。

最終結果はライブページでのみ表示され、ビジュアルDiviBuilderから編集している間は表示されないことに注意してください。 つまり、Diviを使用してモジュールを設計できますが、ページのライブバージョンを表示するまで、ビルダー内でモジュールは分離されたままになります。

text / htmlを追加できるモジュールまたはモジュール内にのみ行を挿入できます。

また、後で説明するように、列またはセクション内に含めることができるインスタンス（モジュールまたは別のモジュールに挿入される行）の数には一定の制限があります。 モジュールを別のモジュールに挿入する場合、列ごとに1つの「宛先」モジュール（挿入するモジュールを保持するモジュール）に制限されます。 また、行を別のモジュールに挿入する場合、セクションごとに1つの「宛先」モジュールに制限されます。 これはある意味での制限ですが、必要に応じてページに複数のインスタンスを配置するオプションがあります。

パート1：Diviモジュールを別のモジュールに挿入する方法

このチュートリアルの最初の部分では、Diviモジュールを別のモジュールに挿入する方法を示します。 最初に、トグルモジュール内にコンタクトモジュールを追加する方法を示します。 次に、宣伝文句モジュール内にトグルモジュールとボタンモジュールを追加する方法を示します。

例1：トグルモジュール内にコンタクトフォームモジュールを挿入する

新しい行を追加

まず、セクションに新しい1列の行を追加します。

トグルモジュール（宛先モジュール）を追加します

列内に、トグルモジュールを追加します。

この例では、このToggle Module内に、宛先モジュールと呼ばれるモジュールを挿入します。 技術的には、実際の宛先はToggle Moduleの本文コンテンツ（テキスト/ HTMLを追加できる場所）内にあります。 宛先の場所を指定するには、ポータブルモジュール（挿入するモジュール）のターゲットの場所として機能する必要なCSSクラスを含む新しいdivを挿入する必要があります。

トグル設定の[コンテンツ]タブで、次のHTMLを本文に追加します。 HTMLを挿入する前に、必ず[テキスト]タブをクリックしてください。

<div class="divi-module-destination"></div>

お問い合わせフォームモジュール（ポータブルモジュール）を追加します

次に、挿入するモジュールをトグルモジュールに追加する必要があります。 この例では、契約書モジュールをトグルモジュールの本体に挿入します。 宛先モジュールと同じ列内に新しい「ポータブル」モジュールを追加することが重要です。

これを行うには、トグルモジュールのすぐ下に新しい連絡先フォームモジュールを追加します。

（挿入するモジュールの）お問い合わせフォームの設定の下にある[詳細設定]タブをクリックし、次のCSSクラスを追加します。

• CSSクラス：divi-portable-module

列クラスを追加する

次に、両方のモジュールを保持する列にカスタムクラスを追加する必要があります。 列の設定を開き、次のCSSクラスを追加します。

• CSSクラス：親列

コードを追加する

この作業を行うために必要なコードは非常に短く、単純です。 基本的に、JQueryを使用して、親列を持つクラス「divi-portable-module」（クラス「parent-column」を持つモジュール）を持つ各モジュールを検索し、 div内の各モジュールにクラス「」を追加します。 divi-module-destination」。

このコードには、ボタンモジュールを別のモジュールに挿入するためのスニペットと、Divi行をモジュールに挿入するためのスニペットも含まれています。

コードを追加するには、お問い合わせフォームモジュールの下に新しいコードモジュールを追加します。

必要なコードを貼り付ける前に、JSをHTMLに埋め込むために必要なスクリプトタグを[コード]ボックス内に追加します。

次に、スクリプトタグの間に次のコードを貼り付けます。

(function ($) {
  $(document).ready(function () {

    // Option #1: Move Divi Module(s) into a Module
    // Limit: One Instance per Column
    // Use following code if you want to move 
    // a module inside another module. Each column with the
    // class 'parent-column' will append any module(s)
    // with the class 'divi-portable-module' to the div
    // with the class 'divi-module-destination'.
    // Only one instance of 'divi-module-destination' should
    // be added per column.
    $('.divi-portable-module').each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });
    
    // Buttons: Insert Button Module(s) into a Module
    // Adding a custom CSS class to a button module
    // is applied to the 'a' tag which is a child element
    // of the module wrapper. This code makes sure to append
    // the entire button module wrapper (the parent element)
    // as well. This functionality is the same as option #3 above.
    // Siimply use the class 'divi-portable-button' on a button module
    // instead of 'divi-portable-module'.
    $('.divi-portable-button').parent().each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });

    // Option #2: Move Divi Row(s) into a Module
    // Limit: One Instance per Section
    // Use the following code if you want to move 
    // a row inside a module on more than one section
    // of a page. Each section with the
    // class 'parent-section' will append any row(s)
    // with the class 'divi-portable-row' to the div
    // with the class 'divi-row-destination'.
    // Only one instance of 'divi-row-destination' should
    // be added per section.
    $('.divi-portable-row').each(function () {
      $(this).closest('.parent-section').find('.divi-row-destination').append($(this));
    });

  });
})(jQuery);

機能を理解する

バックエンドのDiviBuilder内では、モジュールは分離されたままになります。 ただし、フロントエンドのライブページで結果を表示すると、お問い合わせフォームがToggleモジュールに挿入されていることがわかります。

ライブページのコードを調べると、Contact FormModuleがクラス「divi-module-destination」でdiv内に正常に挿入されていることがわかります。

モジュールのスタイリング

前に述べたように、モジュールはバックエンドのDiviBuilderで分離されたままになります。 ただし、それぞれに追加したスタイルは引き続き適用されます。 したがって、Divi Builderを使用して、宛先モジュールとポータブルモジュールの両方のスタイルを自由に更新してください。

注：場合によっては、宛先モジュール（現在は親モジュール）のスタイルが挿入されたモジュールに適用されることがあります。 この場合、挿入されたモジュールの設定を更新することで、そのスタイルをオーバーライドできるはずです。

結果

ライブページを表示したときの最終結果は次のとおりです。

例2：宣伝文句モジュール内にトグルモジュールを挿入する

次の例では、宣伝文モジュールの中にトグルモジュールを挿入します。 プロセスは以前と同じです。 コードスニペットは、列ごとに1つの宛先モジュールの使用を制限します。 つまり、宛先モジュールに追加できるクラス「divi-portable-module」を持つ複数のポータブルモジュールを持つことができますが、クラス「divi-module-destination」を持つdivのインスタンスは1つだけです。桁。

これを示すために、同じ行の別の列にあるモジュールの別のグループで同じプロセスを繰り返しましょう。

行に新しい列を追加する

まず、既存の行に新しい列を追加します。

列クラスを追加する

最初の列で行ったように、新しい列に次のCSSクラスを指定します。

• CSSクラス：親列

宣伝文モジュール（宛先モジュール）を追加します

新しい列の中に、宛先モジュールとして機能する宣伝文モジュールを追加します。

宣伝文の本文内に、ポータブルモジュールを挿入するクラス「divi-module-destination」と同じdivを含む次のHTMLを貼り付けます（この場合はモック本文テキストの下）。

<div class="divi-module-destination"></div>

トグルモジュールの追加（ポータブルモジュール）

宣伝文にトグルモジュールを追加したいので、宣伝文と同じ列内に新しいトグルモジュールを作成します。

次に、次のCSSクラスをToggleモジュールに追加して、宣伝文に移動/挿入するモジュールとして指定します。

• CSSクラス：divi-portable-module

結果

次に、ライブページをチェックして結果を確認します。 これで、トグルは宣伝文モジュール内に存在します。

例3：宣伝文モジュールの内部にボタンモジュールを挿入する

この次の例では、前の例と同じ宣伝文句モジュールにボタンモジュールを挿入します。 通常、他のモジュールについては、同じプロセスを繰り返して、新しいポータブルモジュールを宣伝文に追加します。 ただし、ボタンモジュールはバックエンドで少し異なる方法で構築されているため、ボタンモジュールに別のクラスを追加する必要があります。

ボタンモジュールの追加（ポータブルモジュール＃2）

これを行うには、すでに宣伝文に挿入されているトグルモジュールの下に新しいボタンモジュールを追加します。

次に、次のCSSクラスをボタンモジュールに追加します。

• CSSクラス：divi-portable-button

結果

次に、ライブページで結果を確認します。 宣伝文モジュールには、トグルモジュールとボタンモジュールが含まれるようになりました。

そして、これは、「destination」divを持つモジュール内にボタンモジュールを挿入するために使用される対応するコードスニペットです。 このコードスニペットとの主な違いは、ボタンクラス「divi-portable-button」の親要素（舞台裏のボタンラッパーdiv ）をターゲットにしていることです。

パート2：Divi行をモジュールに挿入する方法

モジュール内に1つまたは複数の行全体を挿入する場合、プロセスはモジュールを別のモジュールに挿入するのと非常によく似ています。 宛先モジュールと挿入するポータブル行を含むセクションにクラス「parent-section」を追加する必要があります。 クラス「divi-row-destination」のdivを宛先モジュールに追加する必要があります。 そして、宛先モジュールに挿入する行にクラス「divi-portable-row」を追加する必要があります。

これがその方法です。

セクションを追加

まず、ページに新しい通常のセクションを追加します。

セクション設定の[詳細設定]タブで、次のCSSクラスを追加します。

• CSSクラス：親セクション

宛先モジュールの行を追加

宛先モジュールを保持するための新しい1列の行を追加します。

トグルモジュール（行の宛先モジュール）を追加します

この例では、Toggleモジュール内に行を挿入します。 したがって、新しいトグルモジュールを行に追加します。

トグルモジュールは宛先モジュールであるため、トグルの設定を開き、次のHTMLを本文のコンテンツに追加します。

<div class="divi-row-destination"></div>

ポータブル行を作成する

宛先モジュールが配置されたので、前の行の下に新しい行を追加します。 これは、トグルモジュールに挿入するポータブル行として機能します。

行をコンテンツで埋める

この時点で、Divi Builderを使用して、必要なコンテンツ/モジュールを行に入力できます。 行内にあるため、行内のすべてが最終的にトグルモジュールに挿入されることに注意してください。

行にクラスを追加

次に、行の設定を開き、次のCSSクラスを指定して、トグルモジュールに挿入する行として指定します。

• CSSクラス：divi-portable-row

使い方

バックエンドでDiviBuilderを使用してレイアウトを編集する場合、行はモジュールから分離されたままになります。 ただし、トグルモジュール内に行を挿入する機能はあります。

結果

結果を確認するには、ライブページをチェックして、トグルモジュールを開きます。 これで、行全体が含まれます。

そして、これを可能にする対応するコードスニペットがあります。 対応するクラスが使用されていることに注意してください。

モジュール内に複数の行を挿入する

セクションごとに宛先モジュールのインスタンスを1つ（つまり、クラス「divi-row-destination」のdiv）保持している限り、同じクラス「divi-portable-row」を指定するだけで、その宛先に複数の行を挿入できます。 」。

たとえば、以前に作成したメニュー項目のある行の上に、ギャラリーモジュールを使用して別の行を追加できます。 次に、その行に同じクラス「divi-portable-row」を指定します

クラス「divi-portable-row」の両方の行がトグルモジュールに挿入されます。

プラグイン/ショートコードの使用

同様のことを行い、より柔軟性やオプションを提供するプラグインをお探しの場合は、マーケットプレイスからショートコードfor Diviプラグインをチェックしてください。これにより、ショートコードを使用して任意のDiviレイアウトをページに埋め込むことができます。 プラグインをインストールすると、Diviライブラリに保存したレイアウトごとに埋め込み可能なショートコードが生成されます。

最終的な考え

ほとんどの場合、特別な必要がない限り、モジュールや行を他のモジュールに挿入する必要はありません。 通常、この種のことをしなくても、必要なレイアウト/デザインを取得できます。 ただし、プラグインに頼らずにこれを行う簡単な方法を探している人にとっては、このソリューションが役立つことを願っています。

さらに、考えられるすべてのアプリケーションについて考えてください。

コメントでお返事をお待ちしております。

乾杯！