Divi 5のネストされた行とモジュールグループで作成された9カードレイアウト

Divi 5を使用すると、見事なプロのWebサイトの構築がこれまで以上に簡単になりました。ネストされた行やモジュールグループなどの機能により、高度なカードレイアウトを作成して、わずか数回クリックしてサイト全体に再利用できます。 DIVI 5は、近代化されたコードベースとパフォーマンスの向上を導入し、複雑なレイアウトを構築するのに最適です。これらの新機能により、無制限の柔軟性を備えて構築できます。

この投稿では、Divi 5のネストされた行とモジュールグループで構築された9カードレイアウトを紹介し、柔軟で再利用可能なデザインを作成することがいかに簡単かを示します。サービスの紹介、証言の強調、またはポートフォリオの構築など、これらのレイアウトは、洗練された一貫した結果を達成するのに役立ちます。最後に、Divi 5のこれらの新機能が、時間を節約し、プロジェクト全体で設計の一貫性を確保する視覚的に見事な再利用可能なモジュールを作成するのに役立つ方法を見ることができます。

飛び込みましょう！

Divi 5のネストされた行とモジュールグループの理解

Divi 5のネストされた行とモジュールグループは、高度なカードレイアウトを簡単に作成できる機能です。これらのツールがどのように機能するか、そして複雑なレイアウトを構築するのに最適な理由を探りましょう。

YouTubeチャンネルを購読してください

ネストされた列

ネストされた列を使用すると、列の内側に列を配置し、視覚ビルダー内に無限のネスト可能性を提供します。この機能は、従来のレイアウトの制限を破り、柔軟性を備えた複雑なデザインを構築できます。ネストされた行を使用して、単一の列内できちんと整理された高度なカードレイアウトを作成できます。利点は明確です。ネストされた行は、デバイス全体にシームレスに適応するレスポンシブカラム構造を提供します。

モジュールグループ

モジュールグループは、Divi 5の新しいコンテナ要素であり、統一されたスタイリングと管理のために列内に複数のモジュールをグループ化できます。この機能は、グループ全体を1つのアクションでスタイル、移動、または複製できるようにすることで、ワークフローを合理化します。モジュールグループは、FlexBoxやThe Loop Builderなどの今後の機能と統合するように設計されており、動的レイアウトのために将来的にプルーフするようになります。

なぜ彼らが一緒にうまく働くのか

ネストされた行とモジュールグループを組み合わせることで、複雑で再利用可能なカードレイアウトを作成する機能が解除されます。ネストされた列は、複雑な要素を整理するための構造の柔軟性を提供し、モジュールグループはこれらの要素を単一のユニットとして扱うことにより、スタイリングと管理を簡素化します。一緒に、サイト全体に簡単に複製されたレイアウトを構築できます。チームメンバー、サービス、またはFAQを紹介するかどうかにかかわらず、このデュオはプロフェッショナルでスケーラブルなデザインをシンプルにします。

Divi 5の9カードレイアウト

以下では、Divi 5のネストされた行とモジュールグループのパワーを示す9つの高度なカードレイアウトを調べます。これらのレイアウトは、価格設定ページからビデオギャラリーに至るまで、視覚的に見事でレスポンシブなデザインを簡単に作成する方法を示しています。柔軟な構造と一貫したスタイリングと再利用のためのモジュールグループのネストされた行を活用することにより、あらゆる目的のためにプロフェッショナルでスケーラブルなレイアウトを構築できます。各例は、DIVI Webサイトを高めるための実用的な例と時間節約技術を強調しています。

1。価格設定計画

ネストされた行とモジュールグループを組み合わせることは、ウェブサイトで価格設定を紹介するのに最適な方法です。 Divi 5のネストされた行を使用すると、各価格カードが独自のモジュールグループ内に収容されている構造化されたレイアウトを作成し、簡単にコピーして貼り付けることができる柔軟なレイアウトを可能にします。この例では、モジュールグループから始めて、スタイルを整え、ボタンにネストされた行を組み込んでいます。モジュールグループを使用してカードレイアウトを作成すると、サイト全体で簡単に保存して再利用できます。

2。サービス

サービスページは、明確で視覚的に魅力的な方法で提供を強調しようとしている企業にとって不可欠です。 DIVI 5を使用すると、各サービスカードがモジュールグループ内に収容されているマルチ層レイアウトを作成し、ユニークなスタイリングとコンテンツの深さを可能にします。たとえば、見出しとリンクのためにグループ内で行をネストし、見出しとボディテキストの単一の列の行を作成し、ボタン用の2列のネストされた行でフォローアップします。モジュールグループをコピーして、秒単位で小さな設計変更を行うことができます。

3。レストランメニュー項目

レストランメニューには、視覚的な魅力と組織化された情報のバランスが必要です。 DIVI 5を使用すると、各メニュー項目カードがモジュールグループ内に含まれるグリッドのような構造を作成できます。一貫したスタイリングのためにグループにデザイン要素を追加することにより、カード全体を繰り返し再設計することなく、メニューに新しいアイテムを簡単に追加できます。

4。チームメンバーBIOS

チームを紹介することは、ブランドの信頼と性格を構築します。 Divi 5を使用すると、写真、名前、役割、バイオなど、レイヤードコンテンツを使用して、すべて単一の列内で、レイヤードコンテンツを使用して動的なチームメンバーカードを作成できます。その後、ソーシャルメディアリンクと個々のチームページへのリンクのレイアウトにネストされた行を組み込むことができます。モジュールグループをDIVIライブラリに保存し、将来新しいチームメンバーを追加するのは簡単です。

5。クライアントの声

証言は信頼性を高め、Divi 5は視覚的に印象的にします。ネストされた行を使用して、グリッドレイアウトで証言カードを整理します。それぞれにクライアントの見積もり、名前、および役職が含まれています。モジュールグループを使用すると、統一されたスタイリングのためにこれらの要素を束ねることができます。このセットアップにより、設計の一貫性を維持しながら、証言を簡単に追加または再配置できます。 Divi 5のレスポンシブコントロールを使用すると、表示されているデバイスに関係なく、レイアウトが見栄えを良くすることができます。

6。イベントリスト

イベントプロモーションページは、注意を引いて重要な詳細を伝える必要があります。 Divi 5のネストされた行を使用すると、イベント画像、場所、タイトル、日付、リンクなど、レイヤードコンテンツでイベントカードを構築できます。モジュールグループは、これらの要素をグループ化してスタイリングを合理化し、複数のイベントの迅速な複製を可能にします。

7。不動産リスト

不動産リストには、不動産の明確で魅力的なプレゼンテーションが必要です。 DIVI 5でネストされた行とモジュールグループを使用すると、レイヤードされた簡単にコピーされたコンテンツを含むリストカードを構築できます。このアプローチは、新しいリストの追加を合理化し、繰り返しコストのある高価なリスティングサービスを回避することを可能にします。

8。製品ディスプレイ

電子商取引製品ページは、製品を効果的に強調表示する必要があります。モジュールグループとネストされた行のおかげで、Divi 5を使用すると、単一の列内に複数の列を持つ製品カードを作成できます。この方法で製品リストページを作成すると、Vanilla Woocommerce Webサイトの制約から解放され、訪問者が注目の製品を閲覧する美しい方法を提供します。

9。ビデオギャラリー

ビデオギャラリーは、チュートリアル、デモ、またはその他のクリエイティブなビデオコンテンツを表示するのに最適です。ネストされた行とモジュールグループを使用すると、各ビデオカードが独自のレイアウトを備えた独自の列にあるグリッドを作成できます。このセットアップにより、まとまりのあるプロフェッショナルな外観を維持しながら、新しいビデオを簡単に追加できます。

高度なカードレイアウトを作成および再利用するためのベストプラクティス

高度なカードレイアウトを作成する際にDivi 5のネストされた行とモジュールグループの可能性を最大化するために、戦略的アプローチを採用すると、効率、一貫性、およびスケーラビリティが保証されます。以下は、あなたのウェブサイトの美的と機能性を高めるプロフェッショナルで再利用可能なデザインの作成に役立ついくつかのヒントです。

一貫してスタイル

Divi 5の設計変数を使用すると、フォント、色、間隔などのユニバーサルスタイルを定義できます。これらの変数を最初に設定することにより、すべてのカードレイアウトがサイト全体にまとまりのある外観を維持するようにします。たとえば、変数マネージャーのプライマリカラーパレット、タイポグラフィの設定、間隔値を定義します。これらをモジュールグループに適用して、繰り返しのマニュアルスタイリングを避けます。

再利用のためにモジュールグループを保存します

スタイルのモジュールグループをDIVIライブラリまたはDIVIクラウドに保存して、複数のページやプロジェクトに簡単にアクセスできます。たとえば、価格カードレイアウトを作成すると、保存すると、ゼロから再構築せずに他のWebサイトやページで再利用できます。明確な説明的な名前でレイアウトを整理して、後ですばやく見つけることができます。

レスポンシブデザイン

さまざまなデバイスと画面サイズが増えているため、レスポンシブデザインは必須です。 Divi 5のカスタマイズ可能なブレークポイントを使用すると、すべてのデバイスのカードレイアウトを微調整できます。レイアウトを設計するときは、さまざまなブレークポイントでレイアウトをテストして、すべての設計要素が意図したとおりにスケーリングされるようにします。

迅速な更新のためにプリセットを活用します

Divi 5の要素およびオプショングループプリセットを使用すると、モジュールまたは特定の設計要素のすべてのインスタンスにスタイリングの変更を適用できます。たとえば、カードレイアウトでボタンスタイルを更新することにした場合、プリセットはすべての関連するモジュールに即座に変化することを保証します。これは、複数のレイアウトを備えた大規模なWebサイトに最適なツールです。レイアウト内でボタン、見出し、画像など、一般的に使用される要素のプリセットを作成することは、一貫性を維持し、設計プロセスを高速化するための良い習慣です。

これらのベストプラクティスに従うことで、Divi 5のネストされた行とモジュールグループの可能性を最大限に活用して、視覚的に見事で応答性が高く、メンテナンスが簡単な高度なカードレイアウトを作成できます。

カードレイアウトを無料でダウンロードしてください

Divi 5内のカードレイアウトの使用を開始したいですか？以下を購読して、JSONファイルへのアクセスを取得します。これらをDiviライブラリにアップロードして、その後ページにインポートできます。

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

無料でダウンロードしてください

Divi Newsletterに参加してください。究極のDiviランディングページレイアウトパックのコピーに加えて、他の驚くべき無料のDiviリソース、ヒント、トリックを大量にメールで送信します。フォローすると、すぐにDiviマスターになります。既にサブスクライブされている場合は、以下のメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

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

Divi 5でカードレイアウトを作成するのは簡単です

Divi 5のネストされた行とモジュールグループは、高度なカードレイアウトの構築方法を変更し、比類のない柔軟性と効率を提供します。価格のページからビデオギャラリーまで、これらの機能により、時間を節約し、ウェブサイト全体で一貫性を確保する見事な再利用可能なデザインを作成できます。これらの機能を組み合わせることで、あらゆるデバイスにシームレスに適応するプロフェッショナルレイアウトを構築できます。 Divi 5では、複雑で視覚的に魅力的なカードレイアウトを作成することはかつてないほど容易になりました。

最新のDivi 5アルファリリースをダウンロードし、これらのツールを今日実験して、Divi 5が提供するすべてのものを体験することをお勧めします。ソーシャルメディアチャンネルであなたの作品を共有するか、下にコメントをドロップして、Divi 5をカードレイアウトに使用する方法をお知らせください。