Divi 5モジュールグループで独自のモジュールを構築します

コードの行に触れずにカスタムDiviモジュールを作成しますか？ Divi 5の新しいモジュールグループを使用すると、複数の要素を単一の再利用可能なレイアウトに結合できるようになりました。 JavaScriptはありません。 PHPなし。ドラッグ、ドロップ、デザインだけです。

このクイックガイドでは、Diviの新しいグループを使用して独自のモジュールを作成する方法を示します。ぼろぼろ、価格設定テーブル、証言、または想像できる他のタイプのモジュールをゼロから構築する方法を具体的に見ることができます。

注： Divi 5は新しいWebサイトで使用する準備ができていますが、既存のサイトをDivi 5に変換することはまだお勧めしません。更新プロセスに自信があるとき、私たちから何かを見るでしょう。

Diviの新しいモジュールグループとは何ですか？

グループ、またはモジュールグループは、列内の単一のユニットに複数のモジュールおよび/または行をペアにする新しいコンテナ要素です。これには、複数の小さな要素をグループ化し、ページの必要な場所にグループ全体を移動できるという利点があります。

モジュールグループは問題なくページ全体に移動でき、FlexBoxとループビルダー機能がリリースされると特に役立ちます。ループビルダーがリリースされると、グループを使用して、カスタムブログレイアウト、フッターメニュー、イメージギャラリーなどを作成できます。ですから、今では便利ですが、数か月後には、使用する方がさらに印象的です。

ネストされた列は、Divi 5に追加した別の非常に要求されたDivi機能でした。 「モジュールグループ」という名前は、モジュールのみをグループ化できるように見えるかもしれませんが、逆のことは真実です。実際のところ、グループ内でネストされた行を使用することができます。これにより、無限にネストされたレイアウト構造を構築し、再利用可能なグループの一部にする機会が開かれます。

独自のDiviモジュールを作成する方法

モジュールグループを使用すると、エディター内で独自のモジュールを作成できます。モジュールとネストされた行をグループ化して、大きなモジュールの一部に似た複雑な配置を作成できます。

1.独自の宣伝文句モジュールを作成します

組み込みの肥大モジュール

Blurbモジュールは、多くのDiviデザインの定番です。それは頼りになるモジュールですが、それを分解すると、それをクリックするものがいくつかあります。それらは次のとおりです。

画像/アイコン、タイトル/見出し、およびボディコンテンツ。モジュールグループを作成し、これらのモジュールをその中に配置できます。画像またはアイコン、見出し、テキストモジュールです。一緒に、これらの3つのモジュールは、Blurbモジュールで使用可能な同じコンテンツを再現できます。

宣誓モジュールの解剖学

独自のBlurbモジュールグループを作成します

以下は、左側にアイコンがあり、aを使用してblurbモジュールの視覚的に同一の複製を備えた宣伝文字モジュールの例です。

グループ、内側の行、列（1）アイコンモジュールを備えた列、および見出しとテキストモジュールを備えた列（2）。

X線は、異なる方法で構築されているにもかかわらず、それぞれのスケルトンが類似点を確認するためにオンになっています。

この配置で特別なのは、最初の列が18％の幅に設定されており、2番目の列が82％の幅を占めることです（列のサイジングオプションは、ネストされた行機能の更新で新しくなります）。

このようなモジュールを構築するには、個々の要素ごとにより多くのデザインスタイリングオプションを提供するという追加の利点があります。 Blurbモジュールにより、画像/アイコンの配置が簡単になりますが、トレードオフがあります。希望するデザインに最も近いアプローチを使用してください。

2。独自の価格設定テーブルモジュールを作成します

組み込みの価格設定テーブルモジュール

一部のDIVIモジュールにはさらに多くのことが進行中です。価格表モジュールの場合です。以下に示すように、価格設定テーブルごとにいくつかのフィールドがあります。

価格表モジュールの解剖学

独自の価格設定テーブルモジュールグループを作成します

モジュールグループと個々のモジュールを使用して価格設定テーブルモジュールを再作成すると、この結果が得られます。

テーブルごとに7つの個別のテキスト/オプションフィールドに注目してください。視覚的には、各テーブルには3つの主要な部分（見出し、価格、詳細）があります。グループ内にこれを行う方法はいくつかありますが、以下では、それぞれに3つのネストされた行を使用しました。そこから、各セクション内の見出しモジュールとテキストモジュールを使用して、価格表を再現しました。

価格設定テーブルモジュールを使用することの良い点は、レイアウトのほとんどを処理し、ヘッドスタートを取得することです。しかし、時にはそれは、特定のことをしたいときに操作するのが難しいことを意味します。よりシンプルなモジュールを使用してこの価格設定テーブルレイアウトを作成するために追加の作業を行うと、より多くの設計制御と自由が得られます。

3.独自の証言モジュールを作成します

組み込みの証言モジュール

Diviの証言モジュールは、多くのことが起こっているもう1つのモジュールです。最大4つの異なるテキスト要素と画像/アイコンオプションのペアが含まれています。

独自の証言モジュールグループを作成します

証言モジュールの再現の最も時間のかかる側面は、間隔を正しくすることです（特に複数のブレークポイントで）。しかし、一度それを手に入れると、物事は非常に簡単です。グループレイアウト全体で、いくつかの行とアイコン、画像、見出し、およびテキストモジュールを使用しました。

これらのモジュールのいくつかを再現することの良いところは、より多くの可能性に自分自身を開くことです。いくつかのより複雑なモジュールには、広範なCSSのみが操作できるという意見のレイアウトがあります。しかし、自分でそれを構築するとき、あなたはそれらのサブ要素の多くを動き回る自由をより自由に持っています。

このように設計するとき、より多くのレイアウトの可能性が開きます。たとえば、要素をより大きなグループレイアウト内で完全に異なる位置に移動することにより、証言モジュールで不可能なこと（少なくとも簡単ではないこと）を実行できます。設計にある程度の柔軟性が必要な場合、これらの断片の一部を構築することで、あなたが望む精度を達成するのに役立つかもしれません。

また、上記のようなカスタムの証言モジュールを作成し、今後のループビルダーを使用してCPTから証言を引き出すことができるというアイデアが大好きです。設計の自由 +構造化されたデータとコンテンツを使用してより速く構築する機能を提供します。

カスタムモジュールをグローバル要素として保存します

新しいモジュールが正しいと感じたら、サイトの他の場所で使用するためのグローバルな要素として保存してください。グループ設定メニューを開きます。 [ライブラリに保存]オプションをクリックします。

モーダルが表示され、後で簡単に使用できるようにモジュールに名前を付けることができます。 「グローバルとして保存」を切り替えて、Diviライブラリに保存します。変更する変更は、後でサイト全体にコピーをすべて更新します。

グローバル要素は、グローバルであることに気付くのに役立つ独特の緑色になります。

保存されているすべてのグローバル要素やその他のライブラリアイテムにアクセスできます。ダッシュボード> divi> diviライブラリにアクセスできます。ここでグローバル要素を編集すると、サイト全体で更新されます。また、使用されているページでグローバル要素を直接編集することもできます（サイト全体で更新されます）。

構築するすべてのサイトにモジュールが必要ですか？ 「 Divi Cloudに保存」を切り替えます。モジュールはクラウドライブラリにあり、どこでもプロジェクトに備えています。ライブラリアイテムは1つのサイトに物事を保持し、Diviクラウドはサイトからサイトへと一緒に移動します。両方を使用してビルドをスピードアップし、より一貫性を上げます。

Diviクラウドを取得します

今日何か新しいものを作ってください

モジュールグループは、新しいパワーを手に入れます。オリジナルで必要なレイアウトを形作ることができます。宣誓モジュールを再作成することから始めて、プロセスがどのように適合するかを確認します。この方法でDiviを使用することに慣れると、標準モジュールを使用したり独自のモジュールを作成したりできるため、さらに複雑なデザインを作成することに気付くでしょう。

上記のものの多くは、グループがドロップする前にDIVIで可能でしたが、物事を簡単にします。特にFlexとLoop Builderを起動すると、グループはDiviでデザインの定番になります。

レベルアップする準備はできましたか？新鮮なサイトを手に取り、最初のカスタムモジュールを今日テストしてください。