Flex 是用於設計像素完美,具有額外設計功能的響應部分的模式。 Flex 允許您快速創建和編輯網站,同時仍然使用您已經熟悉的經典編輯器中的構建功能。 與經典編輯器相比,Flex 提供了自動佈局,多個元素對齊和分佈,響應式大小單位以及對列的更多控制。 與傳統編輯器相比,這使您可以更快地創建和編輯響應式設計。
您可以將 flex 部分添加到現有站點中,也可以使用 Flex 模板創建一個新的站點。 如果您使用 flex 模板,那么所有部分都是用 flex 創建的。 標題不是用 Flex 製作的,如果您添加新頁面、商店、博客或會員頁面,默認情況下它們不會用 Flex 創建,但您可以向這些頁面添加 Flex 部分。
柔性術語
以下提供專門與 Flex 相關的術語定義。
柔性模式。 您在其中創建和編輯彈性部分。在 Flex 模式下,您可以訪問傳統編輯器中不存在的設計功能,但仍然可以訪問傳統編輯器的構建功能。
柔性部分。 具有默認 flex 列的行,用於創建布局。 您可以在 flex 部分中添加,刪除或更改柔性列的順序。 Flex 部分可以另存為模板以備將來使用。
柔性列。 您新增小工具的位置。 Flex 列具有自動佈局,這意味著裡面的小部件會自動垂直或水平對齊。 由於自動佈局,您無法在 flex 列內自由移動元素,而必須使用對齊方式,間距和邊距設置來移動元素。
垂直和水平內部欄位。 一個能夠自動對齊其中的小部件垂直或水平排列的容器。由於自動布局的緣故,在垂直或水平內部欄位內,您無法自由移動元素,而是必須使用對齊、間距和邊緣設置來移動元素。
先進的網格。 用於建立自由形式構圖或重疊圖元。 先進的網格不提供像 Flex 列自動佈局或垂直對齊。 因此,我們建議您檢查所有中斷點上的設計。
中斷點。 對應於不同裝置 (例如桌上型電腦、平板電腦和行動裝置) 寬度的像素範圍。 當裝置的寬度位於中斷點預先定義的像素範圍內時,網站的版面配置會進行調整,以便針對該裝置的大小和方向最佳化內容和設計。
Flex元素。 一個放置在flex列內的高階網格或水平或垂直內部欄位。
元素的層次結構
在柔性模式下,柔性部分包含柔性列,柔性列包含小部件。 這是一個默認的層次結構,這意味著你不能一個小部件添加到柔性部分,而不具有柔性列。
選擇圖元
有幾種方法來選擇一個元素(柔性部分,柔性列,或窗口小部件):
將游標暫留在元素上並按一下。 將鼠標懸停在元素上時,尋找藍色輪廓,該輪廓表示您的單擊將選擇哪個元素。
從 「圖層」面板中選取元素。 在側面板中,按一下「 圖層」。 從此處,您可以從選取的區段中選取任何元素。
從設計面板中選擇元素。 單擊設計面板中的麵包屑以選擇一個元素。
從浮動功能表中選取元素。 如果您已經選擇了一個元素,將鼠標懸停在浮動菜單上方的元素名稱上,將出現 flex 元素的麵包屑。
彈性模式
圖層面板
「圖層」面板會顯示在 flex 模式的左側,並顯示所選區段中的 flex 元素。 元素會根據其階層顯示,區段為最上層。 從圖層面板中,您可以添加新元素、選擇元素、重新排列元素、重命名元素以及隱藏或顯示某些斷點上的元素。
設計面板
設計面板會顯示在 Flex 模式的右側,並包含所選元素的設計控制項 (彈性區段、彈性欄或 Widget)。 根據選取的元素,設計選項包括版面、調整大小、對齊等。
浮動菜單
當您選取元素時,會出現浮動選單。 您可以在浮動選單中切換元素、新增元素、開啟內容或設計面板、複製元素、調整對齊方式、刪除元素等等。
常見問題
Flex 和經典編輯器有什麼區別?
與經典編輯器相比,Flex 提供了額外的設計功能,使您能夠更快速,輕鬆地創建響應式網站。 以下是 Flex 提供的設計功能,但傳統編輯器沒有:
節省時間。Flex 基於自動佈局,這意味著設計經過優化以匹配任何斷點。
內容對齊。 可讓您同時對齊 flex 欄中的所有元素。 在經典編輯器中,您必須單獨對齊每個元素。
自動對齊。 Flex 列和內部欄位會自動將元素垂直或水平對齊。
列數。在 Flex 模式下,您可以將超過 4 列添加到屏幕寬度為 100% 的部分。
項目之間的間距。 允許您設置一次項目之間的空間,並將其應用於 flex 列中的所有元素。
元素大小調整。 調整元素大小以最佳化螢幕高度 (以像素為單位),以百分比表示螢幕寬度
編輯速度更快。 使用 Flex 進階設計功能,您可以比傳統編輯器更快速地編輯現有設計。
柔性 版本 1.0 和 2.0 版有什麼區別?
在 2022 年 7 月 18 日 之前使用 Flex 創建的任何內容都是使用 Flex 版本 1.0 創建的。先前建立的範本或團隊區段將繼續使用 Flex 1.0 版進行編輯,但未來新建立的設計將會使用 Flex 2.0 版。 如果您正在編輯在 Flex 1.0 中創建的模板或團隊部分,則在頂部欄,部分名稱和圖層面板中將顯示 Flex 1.0 版本的指標。 2022 年 7 月 18 日之後, 所有先前未使用 Flex 的新網站或網站都是使用 Flex 版本 2.0,無法存取 Flex 版本 1.0。
Flex 2.0 版本更加簡化,類似於經典的編輯器比 1.0 版本。 2.0 版提供了更多的預定義組件,以便用戶可以更快地創建和編輯設計。 用戶現在可以添加列作為放置小部件的佈局,而不是使用網格來放置對象。列為用戶提供了自動佈局,這意味著對象在每個斷點上看起來很棒,而無需額外的編輯。
限制
目前,您無法在彈性模式下將其他語言新增至網站。 您需要先退出彈性模式。 若要深入瞭解多語言網站,請參閱設定多語言網站。