Divi 5のネストされた列で構築された6つの新しい画像ギャラリー（無料ダウンロード）

画像ギャラリーを手動で構築しようとしたことがある場合は、物事がどれほど早く乱雑になるかを知っています。不均一な画像、並列の行、および反応しないデザインは、シンプルなギャラリーをレイアウトの悪夢に変えます。

DIVI 4でさえ、複雑な画像構造は、多くの場合、複数の行と特殊セクションを積み重ね、間隔を微調整し、数時間の手動のカスタマイズを意味していました。しかし、Divi 5を使用すると、そのすべてをスキップできます。

新しいネストされた行機能のおかげで、より高度な画像ギャラリー構造を構築できます。この投稿では、6つのギャラリーレイアウトデザインをどのように紹介し、有利なスタートを切ることができます。

Divi 5は新しいWebサイトで使用する準備ができていますが、既存のWebサイトを移行する前に少し待ちます。

ネストされた行を使用して、複雑なレイアウトを構築します

Divi 4には、画像ギャラリーを構築するのに必要なものはすべて既にありましたが、複雑なレイアウトを作成することはしばしば不格好だと感じました。 Divi 5は、ハッキングを必要とせずに、高度なギャラリーレイアウトを視覚的に構築するためのより高速でよりクリーンな方法を提供するネストされた行を導入します。

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

ネストされた列とは何ですか？

ネストされた行は、Divi 5の強力な新しいレイアウト機能であり、1つの行を別の行の内側に配置できるため、ページの構築方法をより詳細に制御できます。これにより、コードを作成したり、回避策に依存したりすることなく、視覚ビルダーの内部に複雑なセクションを直接設計することができます。

行をネストすることは、別のモジュールを追加するようなものです。列を配置し、[プラス]ボタンをクリックして新しい行を選択する要素の上にホバリングする必要があります。次に、これらすべての行レイアウトから選択できます。これらは、さまざまなギャラリー構造に最適です。

このネストされた行は、通常の行とまったく同じように動作します。列構造を選択し、モジュールを追加し、必要に応じて別の行をネストすることができます。その無限のネスト可能性のおかげで。ドラッグして列をサイズ変更することもできます。そのため、幅を調整すると直感的に感じられ、数学や間隔のハッキングが含まれません。

ネストされた行は、デフォルトでも完全に応答します。ビルダーから、さまざまな画面でレイアウトを微調整できます。 Divi 5フレームワークの一部であるため、オプショングループプリセットや設計変数など、他の機能と完全に機能します。また、ネストされた行とDivi 5の高度な機能を組み合わせて、ギャラリーのデザインワークフローを最適化するためのヒントを共有します。

Divi 5のネストされた列に関するすべてを学びます

ネストされた列を違うものは何ですか？

Divi 4では、カスタムイメージギャラリーのレイアウトを構築し、行、特殊セクション、レイアウトを使用して、より高度なデザインを実現するために、クリエイティブに関与しました。これは、デザインのノウハウがなければ困難なことを意味していました。そして、あなたが経験をしたとしても、あなたはいくつかのレイアウト構造に制限されていました。

ネストされた列は、より直感的なアプローチを提供します。別の行や専門セクションに依存する必要はありません。列を簡単にネストし、モジュールとミックスして一致させて、無制限のデザインパターンを作成できます。製品ショーケースを作成したいですか？ 2列の行を作成し、左に注目の画像を追加し、右側に説明し、左の画像の下に3列の行をネストし、サポート画像を追加します。あなたの想像力は限界です！

ネストされた行で構築できる6画像ギャラリーレイアウト

何が可能かを垣間見るために、それらを設計するためにネストされた行がどのように使用されたかについての指示を含む6つの画像ギャラリーレイアウトデザインを作成しました。それらを見てみましょう。

レイアウト1：インラインCTAギャラリー

階層化されたグリッドレイアウトは、大きなビジュアル、サポートショット、慎重に配置されたテキストの組み合わせで1つのプロジェクトを強調するモダンな雑誌スタイルのグリッドを使用します。最初のセクションは、2列のネストされた行（別の2列の行にネストされている）で、2つの画像を備えたもので、次は別の大きな画像です。水平なテキストバナーがグリッドを破壊し、コンテキストと行動を促進することを追加します。一番下のセクションでは、別の3列のレイアウトをもたらし、ストーリーを継続しますが、テキストの説明が長くなる余地があります。

この設計は、視覚的なリズムとクリアコンテンツの階層を必要とするポートフォリオ、不動産ショーケース、または編集レイアウトに最適です。構造化された意図的な気分になりながら、画面サイズで美しく機能します。

それを構築する方法

2列の行から始めます。右に1つの画像を追加し、左列に別の行をネストします。すべてに写真を追加します。次に、別のネストされた列がバナーの下に配置され、別のビジュアルセットと一緒にテキストの段落を保持します。構造全体を繰り返すか、ネストされた画像に関するテキストの行を置くなど、いくつかの変更を加えます。

このレイアウトは、各視覚セクション内でネストされた行がどのように使用されるかにおいてユニークです。 Divi 5のネストされた列により、構造的な柔軟性が可能になり、単一の列内の行形式を混合し、コンテキスト要素の下で編み込みます。

レイアウト2：フォーカスギャラリーを分割します

左列が短いテキストブロックの上に垂直画像を積み重ねる2列のレイアウトと、右の列には大きな画像があり、その後に3つの小さなサポート画像の行があります。この配置は、1つの主要な視覚的なモーメントを強調し、同じレイアウト内の書面によるコンテキストとセカンダリ画像ストリップの両方のスペースを確保します。

スプリットフォーカスギャラリーのレイアウトは、各視覚ブロックが1つの瞬間や感情をキャプチャする結婚式、イベント、または花のギャラリーに最適です。また、大胆なフォーカルイメージをサムネイルとサポートのサポートと、小さな引用、証言、またはイントロメッセージを組み合わせたい場合にもうまく機能します。

それを構築する方法

2列の行を作成します。左の列で、上に垂直画像を積み、その下に2つの別々の行を使用してテキストモジュールをスタックします。右の列に、注目の写真の上部に単一の画像モジュールを挿入し、その下に3つの列が付いたネストされた列を追加して、より小さなサポート画像を保持します。

重要なのは、パディングを調整し、ネストされた列の溝幅を1に設定して、すべてをきつく清潔に保つことです。後で、画像を追加したら、境界プリセット（境界幅2と境界色の白に設定）を作成し、すべての要素に適用します。

レイアウト3：プロジェクトスポットライトギャラリー

このレイアウトは、画像ギャラリーを個々のプロジェクトや製品のショーケースに変えます。ビジュアルを表示する代わりに、各アイテムは独自のラベルとアクションを促進するため、ポートフォリオ、レシピ、製品のハイライト、またはケーススタディに最適です。

各画像に短い2列の行が続きます。左側には簡単な説明またはプロジェクト名が含まれており、右側には、今すぐ注文のようにアクションを実行するようにユーザーを招待するボタンがあります。プロジェクトのスポットライトギャラリーレイアウトは、ギャラリーにより多くの目的と相互作用をもたらします。

それを構築する方法

各画像の下に、2列のネストされた行を追加しました。簡単な説明には左の列を使用し、右の列を使用して、行動を呼び起こすボタンにしました。次に、グローバルスタイルを使用してボタンをスタイリングし、各ギャラリーアイテムのこの構造を繰り返して、一貫性を維持しました。行を画像のオーバーレイにするために、垂直オフセット40pxとzインデックス1000で位置を絶対に設定しました。

また、すべての画像に影のプリセットを追加しました。これにより、ギャラリーに洗練された外観を与えただけでなく、数回クリックして複数のモジュールに一貫したブランドを適用できるようになりました。

レイアウト4：スクロール公開ギャラリー

スクロール公開ギャラリーレイアウトは、ユーザーがスクロールするにつれて展開される視覚的なストーリーテリング用に設計されています。各セクションは、より小さなサポートビジュアル（複数の行を一緒にネストすることによって作成された）と組み合わせた大きな画像を備えています。

編集ギャラリー、レシピのショーケース（ステップや材料の強調表示）、またはグループモーメントをインタラクティブにキャプチャしたい会社チームページに最適です。圧倒的な視聴者の代わりに、各ストーリーを視覚的に1ブロックずつ視覚的にガイドします。

それを構築する方法

構造はシンプルです。2列の行を作成します。画像モジュール、見出し、テキスト、左側のボタンを追加します。右側には、2つの列のある新しい行をネストし、画像モジュールをそれぞれに挿入して、ビジュアルをサポートします。次に、シングルと2列の2列をスタックして、石積みのようなグリッドを作成できます。

このレイアウトのキープレーヤーは、左セクションで、固執します。注目のセクションスティックを作成するには、モジュールグループを作成し、スクロールエフェクト設定を有効にする必要があります。 [モジュール]グループをクリックして、 [設定]> [Advanced]> [スクロールエフェクト]に移動します。

モジュールグループを上部に固定し、ボディエリアに下の粘着性の制限を設定します。ユーザーが下にスクロールすると、注目された画像が固執し、他の画像は上昇し続けます。

レイアウト5：スティッガード製品ギャラリー

すべてのギャラリーに焦点画像や複雑な構造が必要なわけではありません。時々、必要なのは、ずらされた構造に配置された一連の画像だけであり、そこにネストされた列が静かに輝いています。

このレイアウトは、典型的なグリッドのように感じずにコレクションを強調表示したい電子商取引や製品中心のサイトに最適です。 1つのセクション内で1、2、および3列の画像行を混合することにより、視覚的な単調さを破壊するために、多くの空白とネストされた列を使用します。その結果、手作りと編集のように感じられ、製品の詳細、素材のクローズアップ、または補完的なアイテムを紹介するのに最適なバランスの取れたレイアウトが得られます。

それは、視覚的なストーリーテリングが重要な革製品、陶器、手作りのアイテムなどの触覚や高級製品を備えたブランドにとって特にうまく機能します。

それを構築する方法

2列の行を作成します。左列にネストされた行を使用して、画像の積み重ねられたレイアウトを追加します。 1つの行には2つの小さな写真が並んでおり、もう1つの行には垂直画像があります。右の列に、3つの列が付いた新しい行をネストし、製品画像を挿入します。その下に、テキストとボタンを配置します。

重複するハンドバッグ効果（手作りセクションのように）を作成するには、その列に画像モジュールを追加し、絶対的な位置（Advanced> Position> Absolute ）を使用します。次に、オフセットスライダーとZインデックスを使用して、2つのセクションの間に階層化します。これにより、視覚的な関心を高めるために画像がグリッドを壊す雑誌スタイルのレイアウトを作成できます。

レイアウト6：非対称ポートフォリオグリッド

非対称ポートフォリオグリッドレイアウトは、クリーンな2列形式のストーリーテリングと画像を組み合わせています。左の列を使用して、見出し、短い説明、CTAのあるプロジェクトを紹介します。右の列では、3列のネストされた列が大きな特徴の画像の上にあり、サポートショットでキービジュアルを表示する絶好の機会を提供します。

このデザインは、キュレーションされたケーススタディまたはポートフォリオを提示するデザイナー、写真家、または代理店に最適です。自然なスクロールリズムとモバイルに優しいフローを提供しながら、注目を集め続けます。

それを構築する方法

2列の行から始めます。左の列に、タイトルと説明のテキストモジュールを追加し、その後ボタンモジュール（必要に応じて）を追加します。

右の列にネストされた行を追加します。 3列のレイアウトを選択し、別の画像モジュールをスタックします。ネストされた行に3つのサポート画像と、積み重ねられた画像モジュールに大きな画像を挿入します。他の行構造を使用して、より多くのパターンを作成します。

すべてを整列させるには、溝の幅を1に設定し、アップロードする前に写真を一貫した高さまで切り取ります。グローバルな画像プリセット（ソフトボーダーやドロップシャドウなど）とホバリングエフェクトを使用して、物事をインタラクティブで洗練したままにします。

また、画像にオーバーレイする別のネストされた行に気付くでしょう。オーバーレイ効果を作成するために、絶対に位置を設定します。

インタラクティブな画像ギャラリーを構築するためのトップヒント

レイアウトが整ったら、いくつかの追加の詳細を振りかけて、ギャラリーをより洗練させます。方法は次のとおりです。

1.ホバーエフェクトを作成します

ホバーエフェクトを追加することは、画像ギャラリーをよりダイナミックに感じさせる最も簡単な方法の1つです。コンテンツから気を散らすことなく対話性を追加し、ユーザーが関与するときに画像が生き生きと感じるのに役立ちます。

Divi 5では、画像にホバーエフェクトを追加するのは簡単です。編集中は、簡単にホバー（およびレスポンシブモード）に切り替えて、設定をカスタマイズできます。

すべての異なる画像または設定オプションのホバーに切り替える必要はありません。 1回切り替え、カスタマイズするすべての要素に変更を加えて保存します。境界線の色を変更しましたが、フィルターを試したり、変換したり、影を追加したり、簡単に追加したりすることもできます。

これを個々の画像に適用したり、すべての画像を同じように動作させたい場合は、プリセットとして保存できます。それは小さな詳細ですが、それはあなたのギャラリーを思慮深くインタラクティブに感じさせ、Diviはそれを楽にします。

2。コピー/貼り付け属性を使用して、スタイルを画像にすばやく適用します

ギャラリーで各画像を手動でカスタマイズするのは、特に境界、影、ホバーエフェクトなどの一貫したスタイルを適用する場合に時間がかかります。プリセットはグローバルスタイルに最適ですが、マイナー調整ごとに新しいプリセットを作成したくない場合があります。

Divi 5の属性管理システムは、合理化されたソリューションを提供します。数回クリックするだけで、1つの画像からスタイルをコピーして他の画像に適用できます。すべての画像に対して同じカスタマイズプロセスを手動で繰り返す必要はありません。一貫性をコピーして貼り付けて維持することができます。

たとえば、1つの要素をカスタマイズし、その属性を他の要素にコピーして貼り付けて、スタイルを複製します。

DIVI 5では、より詳細な制御も可能です。たとえば、設計設定のみやホバーエフェクトのみなど、特定の属性グループをコピーして貼り付けることができます。これにより、ワークフローが効率的になり、まとまりがあります。

3.クランプを使用して、流動的で応答性の高い画像を作成します

モダンなギャラリーレイアウトでは、画像がスケーリングするだけでなく、さまざまな画面サイズにインテリジェントに応答する必要があります。それはまさにClamp（）関数があなたが達成するのに役立つものです。

Divi 5は、Clamp（）およびその他の多くの高度なユニットをサポートします。これにより、画像幅、パディング、マージンフィールドなど、どこにでもサイズの値を手動で入力できます。 clamp（）は応答性に最適です。最小値、理想的、最大値をすべて1行に設定できます。

たとえば、クランプ（1200px、30VW、1400px）は、Diviが1200pxを下回らないことを示しており、Viewport幅の最大30％を拡大しますが、1400pxで上限します。

これは、ブレークポイントなしでより流動的なグリッドが必要な画像ストリップやずらしたレイアウトに特に役立ちます。ネストされた行と組み合わせると、Clamp（）は、個別のモバイル調整を必要とせずに各ブロックを自然に適応させるのに役立ちます。

4.さまざまなデバイスのプレビューと調整

レイアウトがデスクトップで見栄えが良くなると、Diviの組み込みのレスポンシブ編集ツールを使用して、タブレットやモバイル用に簡単に微調整できます。デバイスビューを切り替え、各画面の画像サイズ、間隔、テキストアラインメントなどの設定を調整します。

たとえば、スクロールエクスペリエンスを改善するために、モバイルまたはスタック列の列間のパディングを異なる方法で減らすことをお勧めします。これらの設定を調整するのに数分かかると、すべての画面でギャラリーがきれいでプロフェッショナルになります。

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

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

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

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

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

ダウンロード

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

Divi 5でネストされた画像ギャラリー（およびその他）を構築します

Divi 5のネストされた行は、行内に行を配置できるようにすることで、複雑なレイアウトを簡素化します。彼らはまた、あなたのデザインを無限に営巣可能にし、正確な制御を提供します。

ネストされた列は、Divi 5の排他的な機能の1つにすぎません。 Diviの新しいFlexboxベースのレイアウトシステムに注目してください。これは、幅広い新しい行テンプレートとFlexBoxコントロールを導入して、想像できるレイアウトを作成するためのすべてのツールとシンプルさを提供します。

Divi 5を改善し続けるにつれて、設計機能を強化し、ワークフローを簡素化するさらに多くの機能が期待できます。

ギャラリーをハードウェイを構築している場合は、Divi 5を試して、ネストされた行と視覚的なレイアウトツールがすべてをどのように単純化できるかを体験するのに最適な時期です。

Divi 5は新しいWebサイトで使用する準備ができていますが、既存のWebサイトを移行する前に少し待ちます。