如何在Divi 5中的不同斷點上重新排序元素

響應設計不僅需要擴展佈局，還需要控制內容跨設備的內容堆棧的方式。在桌面上構造的設計可能是在移動設備上令人困惑的訂單，側邊欄或次要元素將鑰匙內容推出了視圖。 Divi 5使用其新的Flexbox系統來解決此問題，該系統引入了預構建的響應列結構和精確的訂購控件。

在這篇文章中，我們將研究為什麼重新排序元素很重要，Divi 5的Flexbox工具如何使其變得簡單，並瀏覽各個步驟以在不同的斷點處進行重組佈局。

為什麼要重新排序元素

當佈局從桌面轉移到移動設備時，堆疊順序並不總是反映您預期的體驗。平衡的三柱桌面設計可以倒入垂直堆棧中，左列總是首先出現，推動呼叫行動，註冊表單或聯繫信息較遠的頁面，用戶可能永遠不會看到它。

訂閱我們的YouTube頻道

Divi 5的Flexbox系統通過讓您在每個斷點處視覺重新排序元素來解決此問題。您可以直接在移動設備的標題下移動CTA，在定價表上方放置推薦書，或在長時間內容之前突出顯示聯繫信息。您可以決定層次結構。這樣可以確保您最重要的內容總是出現在最重要的地方。

Divi 5的Flexbox如何使重新排序變得容易

Divi 5可以直接控制元素如何跨斷點。您可以使用預構建的Flex列結構來設置自然調整的佈局，然後在每個屏幕尺寸下微調列結構和列訂單。

該彈性箱的作用像是一個基於空間進行調整的輝煌容器。您可以控制每個設備上的訂單，而不是隨機堆疊。

Divi 5還可以很好地處理嵌套和復雜的佈局。您可以在每個斷點處更改行結構，列大小和模塊順序，而無需複制內容或編碼。

它還自動管理垂直對齊和定位，使您的內容看起來有目的，完全響應且不隨機排列。

Divi 5中響應迅速重新排序的分步指南

讓我們看一下如何使用其新的Flexbox系統在Divi 5中重新排序元素。下面的步驟使您通過設置列結構並在不同的斷點上調整順序，以使您的佈局在每個設備上保持清晰且一致。

1。設置您的七個自定義斷點

Divi 5為您提供了七個斷點，而不是三個斷點。您可以更改每個像素值，以便您的網站在任何設備上都正確。

單擊任務欄中的“省略號”菜單，並找到斷點切換開關。每個都有默認範圍，但是您可以更改這些數字以更好地適合您的受眾。

您會看到電話（767px以下），電話寬（860px以下），平板​​​​電腦（980px以下），平板​​​​電腦寬（以下1024px），桌面（超過981px），寬屏（超過1280px）和超寬（超過1440px）。

打開它們後，任務欄中出現了很小的圖標。單擊任何圖標，以查看您的網站如何立即查看該屏幕大小。

您可以抓住畫布的邊緣並向左或向右拖動，而不是單擊每個圖標並受到測試的限制。您的設計在拉動時會縮小或擴展，顯示您的佈局在不同寬度時的變化方式。

將畫布拖到300px，然後觀察您的三列桌面佈局變成單個移動堆棧。將其拉回1200px，然後再次看到您的內容散佈。您無需切換預覽模式或調整瀏覽器窗口的大小。

2。訪問Flex控件

單擊任何行的設置圖標以打開右側的設置面板。導航到該面板頂部的“設計”選項卡。在佈局菜單下，您會找到Divi 5的Flexbox控件的所有。默認情況下，在佈局樣式下選擇FLEX。

如果未應用於您現有的佈局，則可以通過單擊將其更改為Flex。

向下滾動以找到佈局方向字段。這將確定列出現的順序和方式（彼此並肩或更高）。

以下是控制對齊和分配的合理內容選項。同時，對齊項目選項出現在定位選項下方。

3。每個屏幕尺寸的微調佈局結構

您的Flexbox控件現在已經有效，但是桌面佈局可能需要用於較小屏幕的結構調整。三列佈局可能在台式機上工作得很漂亮，但在平板電腦上變得壓倒性和擁擠，需要2×2網格，甚至在移動設備上只有一個網格的空間。

幸運的是，控件右上方的設備圖標使您可以在不同的屏幕上預覽佈局，並為每個斷點進行了flexbox設置。這使您可以調整設計，使其看起來不錯，並且在每個設備上都可以很好地工作。

切換到平板電腦斷點，然後單擊“更改列結構”按鈕。而不是當前設置，選擇一個2×2對稱佈局。通過在每行中顯示較少的卡片，這立即使視圖減少了壓倒性。根據需要調整垂直和水平縫隙以保持平衡外觀。然後選擇CTA列，將其列類設置為尺寸設置下的全寬，然後選擇“成長為填充”。

現在，您的平板電腦版本同時顯示兩張卡片，保持統一的外觀。呼叫操作按鈕位於底部的行中，使其脫穎而出，類似於您的桌面佈局。此更新有助於創造一種更清潔，更具吸引力的體驗，從而避免了太多選擇聚集在一起的雜亂無章的感覺。

對於移動設備，請使用更改列結構選項切換到單列結構。在Flexbox控件中，將佈局方向設置為列反向。將差距調整為最適合您的內容的差距。

4。跨斷點的重新排序列

使用訂單值是一種手動確定在各種屏幕尺寸的Flex容器元素（通常列）的順序的好方法。行設置中的“順序”選項卡給每個列提供一個數字，該數字告訴瀏覽器：“在位置1中顯示此列，位於位置2中的該列”，依此類推。較低的數字首先出現，較高的數字出現最後一次。那樣簡單。

您甚至可以使用訂單“ 0”或諸如“ -1”之類的負數來強制特定內容首先出現，無論其他值如何。

每個斷點都支持其自己的訂購系統，使您可以完全控制跨設備的元素定位。

讓我們看一個實用的例子：在桌面上，選擇第1列，然後將其訂單設置為1。選擇第2列並將其訂單設置為“ 2”，並對列的其餘部分進行相同操作。您的桌面佈局從左到右自然流動，並以呼籲進行操作。

在平板電腦和手機上定制訂單

現在，使用設備切換切換到平板電腦斷點。並更改列訂單：

將第6列（召喚）設置為“ 3”，因此它顯示在中間行中。將列1和第2列（第3列AS 4）留下，其餘部分則為需要。平板電腦用戶在價值主張後立即查看您的呼籲行動，然後是支持細節。

然後，使用設備切換切換到移動設備。將CTA列的訂單更改為“ 3”，並按原樣保留前兩個列的順序。使列的其餘部分類似於平板電腦的佈置。

內容的基本源順序保持不變，但是CTA從最後一個位置移至第三位，而不會影響桌面佈局。這樣，您就可以控制部分在不同的斷點出現的情況下，而無需重複或重組您的內容。

控制所有內容如何用Divi 5堆疊

Divi 5的新Flexbox系統可為您精確控制跨設備的內容堆棧。通過七個可自定義的斷點和實時帆布縮放，您可以實時預覽和調整佈局。

您不必依靠瀏覽器的默認堆疊順序，而是確切地確定側欄，CTA和密鑰內容出現的位置。 Flexbox使您可以在每個設備上保持層次結構和清晰度，而無需額外的解決方法或代碼。