設計面板會顯示在 flex 模式的右側，並包含所選元素的設計性質 (剖面、欄、小工具、內欄或進階網格)。 每個元素都有不同的性質，可在設計面板中進行調整，這意味著設計性質會根據選取的元素而有所不同。 設計性質包括定線、配置、間距、調整大小等，具體取決於所選元素。

若要開啟設計面板，請在彈性模式下按一下元素，然後按一下「設計」。 設計面板會在彈性模式的右側開啟，這樣它不會干擾您檢視和編輯設計的能力。 或者，您可以按一下浮動功能表中的「編輯設計」圖示。 關閉設計面板後，您可以按一下右上角的「編輯設計」圖示，再次開啟它。

設計面板區段

設計面板由 5 個區段組成：對齊、配置、間距、大小以及動畫和背景。 以下是每個部分的描述以及您可以完成的內容。

對齊

適用於列或內列內的單一元素。 具有垂直自動佈局的列或垂直內列內的單一元素可以左對齊、居中對齊、右對齊或水平拉伸以適合其容器寬度的 100%。

您也可以按一下「對齊」圖示 ()，從浮動功能表對 齊 元素。

佈局

全流血

僅適用於區段，只能從桌面主中斷點變更。 切換到「開啟」時，它允許內容覆蓋整個屏幕寬度。 切換為關閉時，內容寬度最多可以覆蓋 1,200 像素。 根據預設，「完整出血」設定會切換為關閉。 若要進一步了解中斷點，請參閱螢幕大小和裝置。

對齊元素

可讓您一次垂直對齊欄或內欄中的多個元素。 在經典編輯器中，元素只能單獨和水平對齊。 垂直對齊非常有用，因為它可以在所有中斷點之間保持元素的位置一致，而無需進行其他調整。 如需詳細資訊，請參閱對齊與間距。

自動佈局

允許您選擇列和內列內的元素是否自動水平或垂直對齊。 預設情況下，元素是垂直對齊的。元素只能沿著與自動佈局對齊相同的方向移動。 例如，如果元素垂直對齊，您只能垂直移動元素，而不能水平移動。自動佈局有助於確保您的設計經過最佳化以匹配任何斷點。

包裹

僅當選取「水平堆疊」做為自動配置時，才可用於欄和內欄。 設定為「包覆」時，可讓欄或內欄內的元素保留其尺寸並隨螢幕寬度變更而包覆。

對齊列

僅當選取「包覆」作為自動配置時，才適用於欄和內欄。 可讓您設定欄或內欄內列的對齊方式。 此設定不會影響列內元素的對齊方式，只影響列本身。

間距

項目之間的空間

可讓您設定欄或小工具之間的空間一次，並套用至區段中的所有欄或欄中的所有小部件。 對於欄，如果自動配置屬性設定為垂直，則小部件之間的空間以像素為單位測量。 如果自動配置為水平，則小部件之間的空間以百分比為單位測量。 此屬性不適用於內欄或進階網格內的元素。

設定邊界和填充

邊界是元素邊框與其所包含的剖面、欄、內欄或進階網格邊緣之間的空間。依預設，水平邊界和填充值會連結。如果調整左側值，右側值將自動更新以匹配。如果您不想連結值，請按一下連結圖示。

填充是元素的內部空間。 按一下邊界或間距編號以輸入新值，然後使用下拉式功能表選取測量間距的單位 (px、%、vh 或 vw)。 依預設，水平間距是以百分比來測量，垂直間距則以像素為單位測量。

例如，如果您選擇一個列並將左邊框設置為 5 px，它將在列的左邊和欄內元素的外邊緣之間添加 5 px 的空間。 如果對於同一欄，將左邊界設置為 5 px，則它將在列的邊緣和包含該欄的部分邊緣之間添加 5 px 的空格。

重設填充或邊界

在設計面板或浮動菜單中單擊時，它將所選元素的填充或邊距重置為零。

尺寸

根據所選元素，您可以調整高度和寬度，以及最大值和最小值。 在 flex 模式下，高度可以以 px、vh、百分比和 A 來測量。但是，彈性欄的高度和欄之間的空間只能以百分比來測量。 若要進一步了解尺寸單位，請參閱大小單位。

每個元素的預設大小單位不同。 例如，默認情況下，文本框為 100% 寬度按鈕，寬度為 280px。

對於剖面，您只能變更高度。 剖面寬度由裝置設定，而區段內容的寬度則由網站佈景主題中的「內容寬度」設定設定設定。 對於欄，您只能變更由剖面高度或其內部元素定義的寬度高度。 對於內欄和小部件，您可以設置高度和寬度，以及每個項目的最小值和最大值。 任何尺寸單位都可以使用。

動畫和背景

彈性模式中的動畫和背景屬性與經典編輯器相同。

注意事項

Parallax 適用於所有小部件和容器，並且可以應用於所有屏幕尺寸。若要啟用視差，請按一下影像，選取「編輯設計」，捲動至設計面板的「背景」區段，然後開啟「影像位置」功能表。

由於 iOS 限制，平板電腦、行動裝置和 Mac OS 無法使用保持背景圖像靜態的選項。

了解並有效利用尺寸單位對於創建不僅視覺吸引人的佈局，而且在各種設備和屏幕尺寸上還具有響應性的佈局至關重要。設計面板位於編輯器 2.0 中編輯器畫布的右側或在「傳統編輯器」中的 Flex 模式時，可作為所選元素的設計屬性的控制中心，包括剖面、欄、小工具、內欄和進階網格。本文回顧設計面板中可用的尺寸單位，並提供實用的使用範例。

此外，Editor 2.0 允許使用者從主中斷點 (桌面) 設定大小單位，確保所有螢幕尺寸的擴充性。使用者可以在平板電腦和行動中斷點上調整大小單位，而不會影響其他中斷點。如需詳細資訊，請參閱螢幕大小和裝置。

父子概念管理元素的組織，其中主要元素 (例如頁首、本體、功能表和頁尾) 至少包含一個區段。每個區段反過來都包含至少一個欄，可作為各種元素的容器，例如文本、影像或小部件，例如內欄和進階網格。

父元素會保留其設計設定，允許集中控制其外觀。 但是，如果父元素中的區段具有特定的背景顏色設定，父元素的背景可能不會反映此自訂。 這種階層結構確保網站組織的系統性方法，促進高效的設計工作流程和一致的內容呈現。

元素的階層遵循預設結構：區段包含欄，欄包含小部件。這種階層排列可確保您無法將小部件直接新增至區段，而不會將小部件嵌套在欄內。有多種方法可以選取元素 (區段、欄或小工具)：

Flex 區段是具有兩個預設彈性欄的列，可建立基本配置。 新增區段後，您可以新增、移除或重新排列其他欄、內欄或進階網格，以建立所需的配置。 然後，您可以將小部件添加到該佈局中。

刪除彈性區段

若要刪除區段，請按一下滑鼠右鍵以開啟關聯式功能表，然後選取「刪除」。 或者，按一下浮動功能表上的刪除圖示。

將區段新增至網站後，您可以新增欄位以包含區段中的 Widget。 默認情況下，所有部分都包含列，但您仍然可以添加其他列。

請注意，欄數上限為 8。

新增彈性欄

若要新增欄：

1. 按一下以選取現有欄。

2. 在浮動功能表中，按一下三個水平點圖示 ()，然後選取「 新增欄」 。或者，按一下欄左邊或右邊緣的加號圖示。

複製彈性欄

您可以複製一列，它將添加到原始卡的右側。 您無法新增超過 100% 寬度的欄。

若要複製欄：

1. 按一下以選取欄。

2. 在浮動功能表上，按一下「重複」 圖示。 或者，您可以右鍵單擊該列以打開上下文菜單並選擇複製。

刪除彈性欄

您可以刪除欄，將其從區段中移除。 但是，每個區段必須至少包含一欄，這表示您無法從區段中刪除最後一欄。

要刪除列：

1. 按一下以選取欄。

2. 在浮動功能表中，按一下「刪除」 圖示。 或者，您可以右鍵單擊該列以打開上下文菜單，然後選擇刪除。

您可以透過多種不同的方式將小工具新增至欄、內欄或進階網格。 如果您已經處於彈性模式，您可以按一下「Widget」，然後選取所需的小工具，直接從側面板新增小工具。

若要新增小工具：

您也可以從「圖層」面板新增 Widget。

若要從圖層面板新增 Widget，請執行下列動作：

對齊和間距可以一起使用，以幫助您實現設計。

間距

元素之間的空間

您可以在同一flex區段中的列之間或小部件內部設置水平或垂直空間的數量。

若要設定元素之間的間距：

1. 右鍵單擊所需的部分、欄、內欄或進階網格，然後選擇編輯設計。

2. 在設計面板的「間距」區段中，在元素之間的間距下，鍵入或使用滑桿來設定水平空間的百分比值或要在「項目間間間距」欄位中要存在元素之間的垂直空間的像素值。

您可以按一下浮動功能表中的「重置填充」圖示，以重設區段和欄的填充。

Flex 區段可建立配置並自動對齊物件，這可幫助您輕鬆快速地設計精美的區段。 但是，當您具有重疊物件或自由式構圖的更複雜設計時，則需要使用進階網格。 進階網格允許您在沒有自動佈局的情況下放置自由式構圖中的元素。 因此，我們建議您檢查所有中斷點的設計。

建立重疊圖元：

建議您在使用進階網格時，在每個中斷點檢查您的設計。 對於重疊的元素，您可能需要在某些斷點上調整設計。

在網頁設計中，選擇合適的佈局系統會顯著影響用戶體驗，尤其是在將內欄和進階網格等小部件佈局元素整合到網站中時。

建議使用內欄小工具：

建議使用進階網格小工具：

什麼時候應該使用內列小部件與高級網格小部件？

內欄最適合模組化配置，尤其是當您需要精確控制區段中的個別項目或需要自動佈局時。 但是，請注意，雖然內部欄保持剖面完整性，但與進階網格相比，移動它們中的小部件卻不太靈活。

內欄允許單獨控制列或欄，非常適合單維版面配置。進階網格可同時操作列和欄，提供對整個配置結構的全面控制，非常適合二維配置。

進階網格 (CSS Grid) 可能會優化 DOM 結構、渲染效率、資源載入、回應速度，以及最小化 HTTP 要求來處理複雜佈局方面具有邊緣優勢。內部欄雖然有效，但可能涉及更多巢狀 HTML 元素，因此可能會導致渲染時間略有較慢。

您也可以在同一區段和整個網站中使用內欄小工具和進階網格小工具，以實現所需的設計。 這涉及在整體佈局結構和內容組織細節之間取得平衡。