設計面板會顯示在 Flex 模式的右側，並包含所選元素的設計屬性 (區段、欄、Widget、flexbox 或進階格線)。 每個元素都有不同的屬性，可以在設計面板中進行調整，也就是說，根據選取的元素，設計性質會有所不同。 根據選取的元素，設計性質包括對齊、配置、間距、調整大小等。

要打開設計面板，請在彈性模式下單擊一個元素，然後單擊 “設計” 。設計面板會在 Flex 模式的右側開啟，因此它不會干擾您檢視和編輯設計的能力。 或者，您可以按一下浮動功能表中的「 編輯設計 」圖示。 關閉設計面板後，您可以通過單擊右上角的 編輯設計 圖標再次打開它。

設計條款

以下是設計面板中使用的設計術語和縮寫：

• 像素。像素是一種測量單位，無論設備大小如何，它都保持不變。 例如，如果一個按鈕是 280px，它將在移動設備上的大小相同，因為它是在平板電腦或台式機上。

• 大众視埠寬度是以檢視網站之螢幕 (視埠) 寬度為基礎的單位。 例如，10 Vw 意味著元素將縮放以佔據其觀看屏幕寬度的 10％。
• VH.視埠高度是以檢視網站之螢幕 (視埠) 高度為基礎的單位。 例如，25 Vh 意味著元素將縮放到佔據其所在屏幕的高度的 25％。
• %。元素所佔的容器 (區段、欄、flexbox 或進階格線) 的百分比。 例如，如果元素大小為 10％，則意味著該元素將縮放以佔據其所在容器的 10％。
• 一個.由內容高度決定的自動測量單位。

對齊

可用於列或柔性盒內的單個元素。 垂直自動佈局的列或垂直 flexbox 內的單個元素可以左，中，右對齊或水平拉伸，以適應其容器寬度的 100％。

配置

完全出血

僅適用於區段，且只能從桌面主要中斷點變更。 切換為「開 啟」時，可讓內容跨越整個螢幕寬度。 切換為「 關閉」時，內容寬度最多可以跨越 1,200 像素。 依預設，完整出血設定會切換為「 關閉」。

若要深入瞭解中斷點，請參閱 Flex 中斷點。

對齊圖元

允許您一次垂直對齊列或 flexbox 中的多個元素。 在經典編輯器中，元素只能單獨和水平對齊。 垂直對齊非常有用，因為它可以在所有中斷點之間保持元素的位置一致，而無需進行其他調整。 若要取得更多資訊，請參閱〈 彈性對齊和間距〉

自動佈局

可讓您選取欄和彈性方塊內的元素是否自動水平或垂直對齊。 默認情況下，元素是垂直對齊的。 元素只能以與自動配置對齊方向相同的方向移動。 例如，如果元素垂直對齊，則只能垂直移動元素，而不能水平移動。 自動配置有助於確保您的設計經過最佳化，以符合任何中斷點。

環繞

只有在為自動版面配置選取「 水平 」時，才可用於欄位與彈性方塊。 當設置為 環繞，它允許列或 flexbox 內的元素保持其尺寸並在屏幕寬度更改時換行。

對齊列

只有在為自動版面配置選取「 換行 」時，才可用於欄與彈性方塊。 允許您設置列或 flexbox 中行的對齊方式。 此設定不會影響列內元素的對齊，只會影響列本身的對齊。

間距

項目之間的間距

允許您設置列或 小部件s 之間的空間一次，它適用於部分中的所有列或列中的所有 部件s。 對於欄，如果自動配置屬性設定為垂直， 小器具s 之間的間距會以像素為單位測量。 如果自動佈局是水平的，則 widget之間的空間以百分比為單位。此屬性不適用於彈性方塊或進階網格內的元素。

設置邊距和填充

邊界是元素邊框與包含在其中的部分，列，flexbox 或高級網格的邊緣之間的空間。

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

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

重置內邊距或邊距

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

尺寸

根據所選元素，您可以調整高度和寬度，以及最大值和最小值。 在 flex 模式下，高度可以用 px，vh，百分比和 A 來測量。但是，柔性列的高度和列之間的空間只能以百分比進行測量。

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

動畫和背景

Flex 模式下的動畫和背景屬性與經典編輯器中的相同。 若要深入瞭解動畫和背景屬性，請參閱 新增動畫 和 自訂背景。

進階網格的設計面板

進階網格具有設計面板屬性，這些屬性不適用於其他元素類型，因為可以建立自由式構圖和重疊元素。 我們建議您在不同的中斷點檢閱設計。

對齊

高級網格中的單個元素可以在任何方向對齊和拉伸，因為它不受自動佈局的約束。

訂單

在設計面板的「排列」區段中，只有在進階網格內有多個元素時，才能使用此屬性。 可讓您將選取的元素移至前方、前進、後方或向後。 如需詳細資訊，請參閱 在 Flex 中建立重疊圖元

重新排列版

可讓您選取欄與列在進階網格內的排列方式，以建立版面配置。

自定義佈局

使用下拉式功能表選取您希望進階網格具有的欄數和列數。 您也可以使用「間 隙 」欄位來指定欄之間的間距。 列的間隙可以以像素或 vw 為單位定義，行的間隙可以以像素或 vh 定義。

引腳

可讓您定義元素在網格內的位置。 一旦設置，該元素將保持在相同的位置，即使網格大小改變。

網格位置

適用於進階網格內部的元素，這些元素已分割為欄和/或列以建立版面配置。 它顯示了元素在網格上的位置。

保持比例

當切換為「開 啟」時，即使格點大小變更，進階格點內的元素也能保持其比例。