6個使用Divi 5的嵌套行建造的新圖像畫廊（免費下載）

如果您曾經嘗試過手動構建圖像庫，那麼您會知道事情變得多麼凌亂。不均勻的圖像，未對準的行和無反應的設計將簡單的畫廊變成了佈局的噩夢。

即使在Divi 4中，複雜的圖像結構通常意味著堆疊多行和專業部分，調整間距以及小時的手動定制。但是有了Divi 5，您可以跳過所有這些。

由於其新的嵌套行功能，您可以構建更高級的圖像庫結構。在這篇文章中，我們將向您展示如何並為您提供6個圖庫佈局設計，以使您有個啟動。

Divi 5已準備好在新網站上使用，但是請等一下，然後再遷移現有網站。

使用嵌套行構建複雜的佈局

Divi 4已經擁有您建造圖像庫所需的一切，但是創建複雜的佈局通常會感到笨拙。 Divi 5引入了嵌套行，為您提供了更快，更清潔的方式，可以在視覺上構建高級畫廊佈局，而無需黑客攻擊。

訂閱我們的YouTube頻道

什麼是嵌套行？

嵌套行是Divi 5中功能強大的新佈局功能，可讓您將一行放在另一行，使您可以更好地控制您的構造頁面。這使得可以直接在視覺構建器內部設計複雜的部分，而無需編寫代碼或依靠解決方法。

築巢一行就像添加另一個模塊。您只需要懸停在要放置行的元素上，然後單擊“加號”按鈕以選擇新行。然後，您可以從所有這些行佈局中進行選擇，這些佈局非常適合各種畫廊結構。

此嵌套行的行為完全像常規行。您可以選擇一個列結構，添加模塊，並在需要時嵌套另一行 - 借助其無限嵌套性。您還可以通過拖動來調整列的大小，因此調整寬度會感覺直觀，並且不涉及數學或間距hacks。

默認情況下，嵌套行也完全響應。從構建器中，您可以在各個屏幕上調整佈局。由於它是Divi 5框架的一部分，因此它可以與其他功能（例如選項組預設和設計變量）完美搭配。我們還將分享將嵌套行與Divi 5的高級功能相結合的技巧，以優化您的畫廊設計工作流程。

了解有關Divi 5的嵌套行

是什麼使嵌套行不同？

在Divi 4中，使用行，專業部分和佈局創造性地涉及自定義圖像庫佈局，以實現更高級的設計。這意味著如果您沒有設計專有技術，那將是具有挑戰性的。即使您有經驗，您也僅限於一些佈局結構。

嵌套行提供了一種更直觀的方法。您不再需要依靠單獨的行或專業部分。您可以輕鬆地嵌套行，並與模塊混合併匹配它們以創建無限的設計模式。想創建產品展示櫃嗎？創建一個兩列行，在左側添加特色圖像，並在右側添加描述，在左圖下方築巢一個三列行，然後添加支持圖像。您的想像力是極限！

6圖庫佈局，您可以使用嵌套行構建

為了讓您了解可能的可能性，我們創建了六個圖像庫佈局設計，並提供了有關如何使用嵌套行用於設計它們的說明。讓我們瀏覽它們。

佈局1：內聯CTA畫廊

分層的網格佈局使用了現代的雜誌式網格，該網格以大型視覺效果，支撐鏡頭和精心放置的文本結合突出顯示一個項目。第一部分是一個2列嵌套的行（嵌套在另一個2列行中），其中有兩個圖像，接下來是另一個大圖像。水平文本橫幅破壞了網格，添加了上下文和通話行動。底部帶來了另一個三列佈局，以繼續故事，但具有更長的文本描述的空間。

此設計非常適合需要視覺節奏和清晰內容層次結構的投資組合，房地產展示或編輯佈局。它在屏幕尺寸的同時仍然感到結構和故意。

如何構建它

從兩列行開始。在右側添加一個圖像，然後在左列中嵌套另一排。向所有人添加圖片。然後，將另一個嵌套的行放在橫幅下，以將文本段落與另一組視覺效果一起放置。重複整個結構或進行一些更改，例如將文本行放在嵌套圖像上。

這種佈局在每個視覺部分內部使用嵌套行的使用方式是獨一無二的。 Divi 5的嵌套行允許結構靈活性，將單列中的行格式混合併在上下文元素下進行分層。

佈局2：拆分焦點畫廊

一個兩列佈局，左列在短文本塊上方堆疊垂直圖像，右列具有大圖像，然後是一排三個較小的支撐圖像。這種佈置突出了一個主要的視覺時刻，同時為書面上下文和同一佈局內的輔助圖像帶允許空間。

分裂的焦點畫廊佈局非常適合婚禮，活動或花卉畫廊，每個視覺塊都會捕捉到一個時刻或情感。當您想將大膽的焦點圖像與支撐縮略圖和小報價，推薦或簡介消息旁邊的小焦點相結合時，它也可以很好地工作。

如何構建它

創建一個2列行。在左列中，在頂部堆疊垂直圖像，並使用兩個單獨的行在其下方的文本模塊上堆疊。在右列中，在特色照片的頂部插入一個單個圖像模塊，然後在其下方添加一個嵌套的行，直接在其下方插入三個列以保持較小的支撐圖像。

鑰匙是在嵌套行中調整填充物，並將排水溝的寬度設置為1 ，以保持所有內容的緊繃和清潔。稍後，當您添加圖像時，創建一個邊框預設（將邊框寬度設置為2 ，並將邊框顏色為白色），然後將其應用於所有元素。

佈局3：項目聚光燈畫廊

這種佈局將您的圖像庫轉換為單個項目或產品的展示。每個項目不僅顯示視覺效果，還具有自己的標籤和呼籲性，使其非常適合投資組合，食譜，產品亮點或案例研究。

每個圖像都遵循短兩列行。左側包含一個快速描述或項目名稱，右側具有一個按鈕，邀請用戶採取行動，例如現在的訂單。項目Spotlight Gallery佈局為您的畫廊帶來了更多的目的和互動。

如何構建它

在每個圖像下，我們添加了一個兩列嵌套行。我們使用左列進行簡短說明，右列用於呼叫行動按鈕。然後，我們使用全局樣式對按鈕進行了設計，並為每個畫廊項目重複此結構以保持一致性。為了使行覆蓋圖像，我們將位置設置為絕對使用垂直偏移40px和z索引1000。

我們還為所有圖像添加了陰影預設，這不僅使畫廊具有拋光外觀，而且還可以通過單擊幾下，讓我在多個模塊上應用一致的品牌來節省我的時間。

佈局4：滾動揭示畫廊

滾動揭示圖庫佈局設計用於用戶滾動隨著用戶滾動而展開的視覺講故事。每個部分都有一個大圖，並配對較小的支撐視覺效果（通過將多行嵌套在一起創建）。

它非常適合編輯畫廊，食譜展示（突出顯示步驟或成分），或者希望互動地捕獲小組時刻的公司團隊頁面。它不是壓倒性的觀眾，而是從視覺上引導他們完成每個故事，一次一次街區。

如何構建它

結構很簡單：創建一個兩列行。在左側添加圖像模塊，標題，文本和一個按鈕。在右側，將一個帶有兩個列的新行嵌套在每個行中，並將圖像模塊插入每個行以支持視覺效果。然後，您可以堆疊單一和兩列行以創建類似砌體的網格。

該佈局的關鍵播放器是左圖，它粘貼。要使您的特色截面棒，您需要創建一個模塊組並啟用滾動效果設置。單擊您的模塊組，然後轉到設置>“高級>滾動效果”。

使您的模塊組堅持到頂部，並將底部粘性限製到身體區域。當用戶向下滾動時，特色圖像將粘貼，而其他圖像不斷向上移動。

佈局5：交錯產品庫

並非每個畫廊都需要焦點圖像或複雜的結構。有時，您只需要一組以交錯結構排列的圖像，這就是嵌套行悄悄地發光的地方。

這種佈局非常適合電子商務或以產品為中心的網站，您想突出一個收藏，而不會使其感覺像典型的網格。它使用大量的空白和嵌套行來打破視覺單調，通過將一個，兩個和三列圖像行混合在單個部分中。結果是一種平衡的佈局，感覺是手工製作和社論，非常適合展示產品詳細信息，材料特寫或互補物品。

它對於具有觸覺或豪華產品的品牌（例如皮革製品，陶瓷或視覺講故事的手工製作物品）特別有效。

如何構建它

創建一個兩列行。在左列中使用嵌套行添加圖像的堆疊佈局。一排並排兩張小照片，另一個有垂直圖像。在右列中，嵌套一個帶有三個列的新行，然後插入產品圖像。在此下方，放置您的文本和按鈕。

要創建重疊的手提包效果（例如在手工製作的部分中） ，請在其行中添加一個圖像模塊，然後使用絕對定位（高級>“位置”>“絕對” ）。然後，使用偏移滑塊和z索引將其分層在兩個部分之間。這使您可以創建雜誌風格的佈局，其中圖像破壞了網格以增加視覺興趣。

佈局6：非對稱投資組合網格

不對稱的投資組合電網佈局以乾淨的兩列格式將講故事和圖像結合在一起。使用左列介紹一個帶有標題，簡短描述和CTA的項目。在右列中，一個三柱嵌套的行貼在大型特色圖像上方，為通過支撐鏡頭顯示了關鍵視覺效果的絕佳機會。

此設計非常適合介紹精選案例研究或投資組合的設計師，攝影師或機構。它在提供自然的滾動節奏和移動友好的流程時，一直集中註意力。

如何構建它

從兩列行開始。在左列中，為您的標題和描述添加一個文本模塊，然後是按鈕模塊（如果需要的話）。

在右列中添加嵌套行。選擇三列佈局，然後堆疊另一個圖像模塊。在嵌套行中插入三個支持圖像，並在堆疊的圖像模塊中插入一個大圖像。使用其他行結構創建更多模式。

為了保持一切對齊，請將天溝寬度設置為1 ，然後在上傳之前將圖片裁剪為一致的高度。使用全局圖像預設（例如軟邊框或落下陰影），並懸停效果來保持互動效果但精緻。

您還會注意到另一個嵌套的嵌套圖像。我們將位置設定為絕對創建覆蓋效果。

建立交互式圖像畫廊的主要技巧

佈局到位後，撒上一些額外的細節，以使您的畫廊更加精緻。以下是：

1。創建懸停效果

添加懸停效果是使您的圖像畫廊感覺更加動態的最簡單方法之一。它增加了互動性而不會分散內容，並在用戶與它們互動時幫助圖像感到活躍。

在Divi 5中，在圖像中添加懸停效果很容易。在編輯時，您可以輕鬆切換到懸停（響應式模式）並自定義設置。

您不必為每個不同的圖像或設置選項切換到懸停；只需切換一次，更改要自定義的所有元素，然後保存。我們更改了邊框顏色，但您也可以嘗試過濾器，更輕鬆地添加陰影，並更輕鬆地嘗試過濾器。

如果您希望所有圖像以相同的方式行事，則可以將其應用於單個圖像或將其保存為預設。這是一個小細節，但它使您的畫廊感到周到和互動，而Divi使它毫不費力。

2。使用複制/粘貼屬性快速將樣式應用於圖像

在畫廊中手動自定義每個圖像可能很耗時，尤其是在應用諸如邊界，陰影或懸停效果之類的一致樣式時。雖然預設非常適合全球樣式，但您可能不想為每個次要調整創建一個新的預設。

Divi 5的屬性管理系統提供了簡化的解決方案。只需單擊幾下，您就可以從一個圖像中復製樣式並將其應用於其他圖像。您不必為每個圖像手動重複相同的自定義過程。您可以復制和粘貼並保持一致性。

例如，自定義一個元素並將其屬性複制並粘貼到其他元素中以復製樣式。

Divi 5還允許更多的顆粒狀控制。例如，您可以復制和粘貼特定屬性組，例如僅設計設置或僅懸停效果。這使您的工作流程效率高和凝聚力。

3。使用夾具創建流體和響應式圖像

在現代畫廊的佈局中，您的圖像不僅應該擴展，而且還應對不同的屏幕尺寸進行智能響應。這正是Clamp（）函數可以幫助您實現的目標。

Divi 5支持Clamp（）和許多其他高級單元，這些單元允許您在任何地方手動輸入尺寸值，包括圖像寬度，填充和邊距字段。夾具（）是響應能力的理想選擇。它使您可以將最小，理想和最大值設置為一行。

例如，一個夾具（1200px，30vw，1400px）告訴Divi永遠不要以1200px的速度低於1200px，擴展高達視口寬度的30％，但以1400px的限制。

這對於圖像條或交錯佈局特別有用，您希望在沒有斷點的情況下更流暢的網格。當與嵌套行結合使用時，Clamp（）幫助每個塊自然適應，而無需單獨的移動調整。

4。預覽和調整不同的設備

一旦您的佈局在台式機上看起來不錯，就可以使用Divi的內置響應式編輯工具輕鬆地對平板電腦和移動設備進行微調。在設備視圖之間切換並調整每個屏幕的圖像大小，間距和文本對齊等設置。

例如，您可能希望以不同的方式減少移動或堆棧列上的行之間的填充，以獲得更好的滾動體驗。花幾分鐘來調整這些設置可以使您的畫廊在每個屏幕上都感到干淨和專業。

免費下載圖庫佈局

是否想開始使用Divi 5中的畫廊佈局？訂閱以下訂閱以訪問JSON文件。您可以將其上傳到Divi庫，然後將其導入到您的頁面上。

下載文件

免費下載

加入Divi新聞通訊，我們將向您發送終極Divi著陸頁佈局包的副本，以及大量其他驚人和免費的Divi資源，提示和技巧。跟進，您將立即成為Divi大師。如果您已經訂閱，則只需在下面的電子郵件地址中輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。請檢查您的電子郵件地址以確認您的訂閱並獲取免費的每週Divi佈局包！

用Divi 5建立嵌套的圖像畫廊（以及更多）

Divi 5的嵌套行通過允許您將行放置在行中來簡化複雜的佈局。他們還提供無限的嵌套性和對您的設計的精確控制。

嵌套行只是Divi 5的獨家功能之一。請注意Divi新的基於Flexbox的佈局系統，該系統還引入了各種新的行模板和Flexbox控件，以為您提供所有工具和簡單性，以製作您可以想像的任何佈局。

隨著我們繼續改善Divi 5，您可以期望更多功能可以增強您的設計功能並簡化工作流程。

如果您一直在艱難地建造畫廊，那麼現在是嘗試Divi 5並體驗嵌套行和視覺佈局工具如何簡化所有內容的最佳時機。

Divi 5已準備好在新網站上使用，但是請等一下，然後再遷移現有網站。