Divi 5のネストされた行で作られた10のグリッドレイアウト（無料ダウンロード）

グリッドレイアウトは、コンテンツを整理し、ユーザーエクスペリエンスを向上させ、デバイス全体でシームレスな応答性を確保するための構造化された柔軟な方法を提供します。 Divi 5 Public Alphaのリリースにより、Webデザイナーは、創造的な境界を押し広げる美しいグリッドレイアウトを作成するための新しいツールセットを持っています。完全に再設計されたビジュアルビルダーと、ネストされた列、高度なユニット、モジュールグループなどの強力な新機能を備えているため、レイヤードの複雑なレイアウトを簡単に構築できます。

この投稿では、対称機能グリッドからダイナミックメーソンリーブログやインタラクティブなポートフォリオショーケースまで、Divi 5で簡単に構築できるグリッドレイアウトを紹介します。ポートフォリオ、eコマースストア、または企業のウェブサイトを設計するかどうかにかかわらず、これらのレイアウトは、デザインを高めて視聴者を魅了するように促します。

Divi 5の高度な機能により、これらのクリエイティブなグリッドスタイルのレイアウトがどのように可能かを調べてみましょう。

Divi 5は新しいWebサイトで使用する準備ができていますが、既存のサイトをDivi 5に変換することはまだお勧めしません。

グリッドレイアウト用のキーDIVI 5機能

Divi 5の再構築された財団は、グリッドレイアウトの作成をこれまで以上に簡単にする機能を紹介しています。これらのツールにより、設計者は、デバイス全体で柔軟性を維持しながら、精度と効率のある複雑で視覚的に魅力的なグリッドを作成できます。以下では、美しいグリッドレイアウトを可能にする重要なDivi 5の機能を調べます。

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

ネストされた列

Divi 5のネストされた行機能を使用すると、行内に行を配置でき、無限のネスト可能性を提供して、直感的なドラッグアンドドロップインターフェイスを備えた複雑なグリッド構造を作成できます。この機能により、多層グリッドの設計が簡素化され、モジュール配置を正確に制御できます。

複雑な製品ショーケースを構築するか、階層化されたポートフォリオグリッドを構築するかどうかにかかわらず、次に行われた行を使用すると、コンテンツをよりスマートに整理し、レイアウトを動的で視覚的に魅力的にします。

カスタマイズ可能なブレークポイント

レスポンシブデザインは最新のWebサイトにとって重要であり、Divi 5のカスタマイズ可能なブレークポイントにより、グリッドがどのデバイスでも完璧に見えるようにすることができます。 7つのデスクトップ、タブレット、モバイルブレークポイントを使用して、グリッドがさまざまな画面サイズにシームレスに適応できるようにすることができます。

Visual Builder内のさまざまなブレークポイントでレイアウトのリアルタイムプレビューを提供するCanvas Scalingと組み合わせたこの機能により、グリッドが応答性に最適化され、すべてのデバイスで一貫したユーザーエクスペリエンスが提供されます。

モジュールグループ

モジュールグループは、一貫したグリッドの美学を設計および維持するプロセスを合理化します。モジュールをグループ化することにより、集合的なスタイリングを適用し、複数のページでこれらのグループを再利用し、時間を節約し、設計の一貫性を確保することができます。

これは、ブログの投稿や製品カードなどのグリッドレイアウトに特に便利です。これは、フォント、色、ホバーエフェクトなどの一貫したデザイン要素がサイト全体のまとまりのある外観に不可欠です。

設計変数

Divi 5は、設計変数を使用して、色、フォント、リンク、タイポグラフィなどなどの主要なデザイン要素の集中管理を提供します。この機能により、グリッドレイアウトとWebサイト全体で均一性が保証され、一貫した視覚的アイデンティティを容易に維持できます。スタイルは変数マネージャーに設定されており、どこでも適用できます

色やフォントスタイルを更新する必要がありますか？設計変数を使用すると、1つの場所で変更を加え、すべてのセクションとページに即座に適用し、ワークフローを合理化し、デザインを磨くことができます。

高度なユニット

Divi 5の高度なユニットは、VW、VH、REM、EMなどのオプションを使用した間隔とサイジングを粒状に制御できます。これらのユニットは、デバイス間で完全にスケーリングする動的でレスポンシブなグリッドレイアウトを有効にします。変数マネージャーを使用して、パディング、マージン、または要素サイズを調整できます。高度なユニットは、グリッドコンポーネントを整列させ、正確にスケーリングする柔軟性を提供し、レイアウトが機能的で視覚的に調和していることを確認します。

属性管理

属性管理は、設計要素全体で属性をコピー、貼り付け、リセットできるようにすることにより、設計プロセスを加速します。この機能は、ホバーエフェクトや間隔などの一貫したスタイルを複数のモジュールに適用するための最も重要です。繰り返しのタスクを減らすことにより、属性管理を使用すると、複雑なグリッドレイアウトの開発をスピードアップしながら、創造性に集中できます。

これらのDivi 5機能は、比類のない柔軟性と効率を提供するために連携して機能し、ユーザーエクスペリエンスを向上させ、Webデザインを向上させる見事でレスポンシブなグリッドレイアウトを簡単に作成できます。

Divi 5の10のクリエイティブグリッドレイアウトの例

グリッドレイアウトはモダンなWebデザインの基礎であり、Divi 5を使用すると、それらを構築することはかつてないほど容易になりました。製品、ポートフォリオ、チームメンバー、またはFAQを紹介するかどうかにかかわらず、DIVI 5は機能的で視覚的に見事なレイアウトを構築できます。 Divi 5で作成できるグリッドレイアウトの10の例を見てみましょう。

1。対称機能グリッド

対称機能グリッドは、製品、サービス、またはポートフォリオアイテムをきれいに整理し、整理するのに最適な方法を提供します。このグリッドスタイルは、構造化されたコンテンツを強調するのに最適であり、そのアプリケーションが用途が広いです。ビジネスWebサイト、ポートフォリオ、ランディングページに使用でき、ユーザーを簡単にユーザーにガイドする洗練された外観を提供できます。

以下の例では、4列のグリッドを構築して、薬剤師事業を紹介しました。ネストされた行、モジュールグループ、属性管理を使用して、数分でプロフェッショナルで洗練された外観を達成できます。

2。石積みグリッド

石積みグリッドは、視覚的に魅力的でしっかりと詰まったグリッドで、ブログの投稿、ポートフォリオアイテム、またはさまざまな高さのレシピを配置するダイナミックでPinterestスタイルのレイアウトです。固定された列の高さを備えた従来のグリッドとは異なり、石積みグリッドはコンテンツを自然に流すことができ、垂直ギャップを埋めてシームレスでオーガニックな外観を作成します。このグリッドスタイルは、ブログ、雑誌、クリエイティブなポートフォリオなど、視覚的なストーリーテリングを優先するWebサイトに最適です。 Divi 5のネイティブ機能により、スタイリッシュで応答性の高いメーソンリーグリッドを作成することは直感的で効率的です。

以下の例では、ネストされた行とモジュールグループを組み合わせてレシピ用の石積みグリッドを作成し、Diviのショートカットを使用してグループをより速く複製しました。

3。インタラクティブなポートフォリオグリッド

インタラクティブなポートフォリオグリッドレイアウトは、作業を紹介する魅力的な方法を提供します。ユーザーがコンテンツを探索できるように、ライトボックスポップアップ、ホバーエフェクト、ボタンなどを組み込むことができます。このグリッドスタイルは、写真、デザイン、その両方など、視覚的な仕事で視聴者を魅了することを目的としたウェブサイトに最適です。

Divi 5の高度な機能を備えたデザイナーは、クリエイティブな作業を効果的に強調するレスポンシブでユーザーフレンドリーなポートフォリオグリッドを作成できます。

4。製品ショーケースグリッド

製品ショーケースグリッドは、ベストセラー、注目製品、または世界に紹介している新製品を紹介するユニークな方法を提供します。 eコマースストア向けに最適化された画像、タイトル、価格、ボタンを使用して、構造化された視覚的に魅力的なレイアウトを作成できます。グリッドレイアウトを使用して、クリーンで整理されたレイアウトを作成して、ユーザーが閲覧して購入の決定を容易にすることができます。

DIVI 5を使用すると、強力な機能を利用して、エンゲージメントとコンバージョンを促進するレスポンシブでブランド一貫性のあるレイアウトを作成できます。

5。チームメンバーグリッド

チームメンバーのグリッドを使用すると、画像、名前、役割、ソーシャルリンクでチームプロファイルを紹介できます。このグリッドスタイルは、プロフェッショナルで親しみやすいプレゼンテーションを作成し、チームの専門知識と性格を強調するウェブサイトに最適です。チームグリッドは、企業サイト、代理店、または非営利団体に最適ですが、人を紹介する必要があるサイトに適用できます。

以下の例では、ネストされた行を備えた3列グリッドを使用し、設計変数を適用してフォントサイズを応答します。

6。サービスグリッド

グリッドレイアウトは、会社のサービスを紹介するのに最適な方法です。組織化されたスキャン可能な形式でサービスを強調しているため、価値提案を伝える必要があるWebサイトに最適です。代理店、フリーランサー、またはサービスベースのビジネスに最適なGridは、Divi 5の高度な機能を使用して、クライアントの問い合わせとコンバージョンを促進するレスポンシブで魅力的なレイアウトを作成します。

以下の例では、4列の行を使用し、行間隔にcalc（）式を割り当て、モジュールグループとネストされた行を組み込んで設計プロセスを高速化しました。

7。イベントスケジュールグリッド

イベントスケジュールグリッドスタイルは、時間に敏感な情報を専門的かつ整理していないことを整理および提示するのに最適であり、会議、ワークショップ、コミュニティの集まりなどのイベントをホストするウェブサイトに最適です。 Divi 5の機能を使用すると、グリッド形式で日付、タイトル、および説明を追加できるため、訪問者が必要なものを簡単に見つけることができます。

以下の例は、機能的かつ審美的にイベントを表示するために、ネストされた行を備えた3列のレイアウトを示しています。

8。価格設定テーブルグリッド

Divi 4（およびDivi 5）には価格設定モジュールが付属していますが、価格設定、ボタン、箇条書きに限定されています。 Diviのネイティブ機能を拡大し、ニーズに応じた価格設定グリッドを構築したい人のために、Divi 5はそれを行う方法を提供します。ネストされた行、モジュールグループ、属性管理を使用して、コンテンツを驚くほど表示する価格設定グリッドを作成できます。

たとえば、ビルトイン価格モジュールの制限に準拠することなく、価格設定、機能、および複数のボタンを提供する3列のレイアウトを作成できます。小さな画面のレスポンシブ設定を微調整してから、幅50％の列のオプショングループプリセットを作成し、タブレットとモバイルで列が完全に並ぶようにします。

9. FAQアコーディオングリッド

WebサイトにFAQセクションを設定することで、ユーザーがよくある質問のリストにアクセスできるようになり、提供するものについてより良いアイデアを提供できます。このグリッドスタイルは、グリッドの明確さとアコーディオンモジュールのインタラクティブ性を組み合わせているため、簡潔でアクセス可能な情報を提供する必要があるWebサイトに最適です。サポートページ、ヘルプセンター、または情報サイトに最適なFAQグリッドは、Divi 5の堅牢な機能を活用して、ユーザーエクスペリエンスを向上させるレスポンシブで魅力的なレイアウトを作成します。

この例では、ネストされた行を使用して、情報ビデオとQ＆Aを備えた魅力的なFAQセクションを作成して、情報に基づいた決定を下すために必要な関連情報をユーザーに提供しました。

10。画像ギャラリーグリッド

ライトボックスポップアップを備えたギャラリーグリッドは、写真、ポートフォリオの例、またはその他の画像を紹介する視覚的に印象的な方法です。このグリッドスタイルは、視覚的なストーリーテリングを紹介するのに最適であり、アートギャラリー、旅行ブログ、写真など、見事な画像を優先するウェブサイトに最適です。 Divi 5を使用すると、デザイナーは魅惑的なレスポンシブで魅力的なギャラリーグリッドを作成できます。

以下の例では、単純な4列のレイアウトを使用して画像を紹介します。追加のタッチのために、画像のライトボックスを有効にし、各写真の右下隅にソーシャル共有モジュールを追加しました。

DIVI 5で効果的なグリッドレイアウトを作成するためのヒント

Divi 5の強力で柔軟な機能のおかげで、効果的なグリッドレイアウトの構築はこれまで以上に簡単です。機能グリッドを構築するか、オーバーレイ要素を備えたダイナミックイメージギャラリーを構築するかどうかにかかわらず、これらのヒントは、Divi 5の機能を最大化して、ウェブサイトのユーザーエクスペリエンスを高めるレスポンシブ、まとまりのある、効率的なデザインを作成するのに役立ちます。

1.ネストされた行をレバレッジします

Divi 5のネストされた列機能は、複雑で多層グリッド構造を作成します。正確なアライメントのために単一のグリッドセル内に画像やテキストを配置するなど、行内で行をネストすることでコンテンツを整理できます。ネストされた行は、ポートフォリオグリッドやイベントスケジュールなどのレイアウトの構築に最適であり、創造的で構造化されたグリッドを設計する柔軟性を提供します。

2。応答性のために最適化します

Canvasスケーリングとカスタマイズ可能なブレークポイントを使用して、すべてのデバイスでグリッドが完璧に見えるようにすることができます。ビジュアルビルダー内のレイアウトをリアルタイムでテストして、デスクトップ、タブレット、モバイルデバイスでどのように適応するかをプレビューします。特定のブレークポイントで列の幅、間隔、またはフォントサイズを調整して、使いやすさと視覚的な魅力を維持できます。 Divi 5のカスタマイズ可能なブレークポイントを使用すると、大画面からスマートフォンまで、すべてのユーザーにシームレスなエクスペリエンスを確保できます。

3.効率のためにモジュールグループを使用します

Divi 5のモジュールグループは、製品カードやチームメンバープロファイルなどの同様のグリッド要素をグループ化することにより、ワークフローを合理化できます。一貫したスタイリング（フォント、色、ホバーエフェクトなど）を複数のモジュールに同時に適用して、ページ全体で再利用できます。これは、価格設定テーブルやFAQなどのグリッドの均一性を維持し、繰り返し編集を減らし、洗練された外観を確保するための時間節約です。

4.設計変数との一貫性を維持します

設計変数を使用して、色、フォント、間隔、リンクなどの制御を一元化します。これらの要素を1つの場所で定義することにより、グローバルにスタイルを更新でき、サービスグリッドやギャラリーのレイアウトを視覚的に調和させておくのに最適です。

5。高度なユニットを試します

動的間隔とサイジングのためにVH、VW、REM、CALC（）、CLAMP（）などの高度なユニットを使用して、グリッドの柔軟性を高めます。これらのユニットにより、グリッド要素はビューポートのサイズまたはフォント設定に基づいて流動的にスケーリングし、応答性と視覚バランスを確保できます。

グリッドセクションのレイアウトを無料でダウンロードしてください

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

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

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

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

ダウンロード

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

Divi 5で創造性を解き放ちます

ネストされた行から属性管理まで、Divi 5の機能スイートにより、デザイナーは汎用性が高く、応答性が高く、視覚的に見事なグリッドレイアウトを簡単に構築できます。 DIVI 5は、特徴グリッドからインタラクティブなポートフォリオまで、任意のグリッドレイアウトを作成するための比類のない柔軟性、精度、効率を提供します。 eコマースのWebサイト、aboutページ、またはFAQセクション、Divi 5の最新のインターフェイス、および強化された機能を構築するかどうかにかかわらず、創造的なビジョンをシンプルにします。

可能性を探る準備はできていますか？ Divi 5 Public Alphaに飛び込み、グリッドレイアウトの作成を実験します。前述のように、Divi 5は新しいWebサイトに適していますが、少なくともまだ既存のサイトで使用することはお勧めしません。

私たちはあなたの作品を見たいです。ソーシャルメディアやコメントでユニークなグリッドレイアウトを共有してください。