Page Builder Workspace

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

初學者
中繼
使用者

當Page Builder 啟用時，會修改 Content 區段和內容建立程式，以利用CMS 頁面、產品和類別頁面、區塊和動態區塊的進階Page Builder工具。此區段包含_內容標題_欄位、內容預覽，以及全熒幕Page Builder工作區的輕鬆存取。

預覽為Page Builder的內容區段 {width="700" modal="regular"}

內容標題

由於搜尋引擎會尋找第一級(H1)標題，因此新增第一級標題是確保頁面正確編制索引的簡單方法。

NOTE

顯示在頁面頂端的_Content Heading_欄位是支援使用舊版Commerce建立的內容的舊版欄位。但它不是Page Builder的一部分。根據與目前主題關聯的樣式表，Content Heading會格式化為H1標題。它位於由Page Builder階段定義的使用中內容區域正上方。

為了最佳控制所有層級標題的位置和格式，建議您將 Content Heading 欄位保留空白，並使用Page Builder 標題內容型別。

內容標題與其他標題 {width="700" modal="regular"}

預覽

當您展開「Content」區段，而且有使用「Page Builder」建立的現有內容時，它會顯示內容預覽，如同顯示在頁面中的情形。按一下「Edit with Page Builder」或內容預覽區域內的「Page Builder」工作區以開啟，您可在此進行任何需要的更新。

產品說明預覽 {width="500" modal="regular"}

NOTE

對於產品和類別表單，此內容預覽預設為啟用，但可停用。如果效能因載入預覽而受到影響，您可以在內容管理組態設定中停用預覽。

階段

當您從預覽開啟Page Builder工作區時，舞台是您建立內容及格式化，甚至快速編輯即時內容的主要工作區。舞台最初是空的，它提供了設計表面，您可以從左側面板中拖曳列、欄和標籤。

NOTE

從2.4.1版開始，內容編輯現在僅針對Page Builder控制的所有區域提供全熒幕功能，包括CMS頁面、產品和類別頁面、區塊及動態區塊。全熒幕編輯將焦點放在您的內容上，並提供更符合店面使用者體驗的檢視。

階段與頁面內容 {width="600" modal="regular"}

NOTE

如果您對Page Builder內容進行重大變更，建議您增加管理員工作階段存留期，以防止工作階段在您工作時逾時。

檢視區

檢視區 是使用者看到的網頁可見區域。在全熒幕設計模式中，檢視區按鈕會顯示在Page Builder舞台上方，當網站使用者在店面看到內容時，就會顯示內容。

檢視區按鈕 {width="500" modal="regular"}

Page Builder也會定義檢視區的中斷點。中斷點會定義套用特定樣式的最小和最大寬度。 Page Builder檢視區提供下列內容中斷點：

案頭中斷點—min-width: 1024px。此中斷點會套用為測量1024畫素及更大範圍的檢視區寬度定義的樣式。
行動中斷點—max-width: 768px, min-width: 640px。這些中斷點會套用為檢視區寬度定義的樣式（介於768畫素和640畫素之間）。

Page Builder檢視區提供兩種功能： 內容預覽 和 中斷點設定。

內容預覽

依預設，Page Builder提供兩個檢視區預覽：

案頭 — 顯示沒有預先定義寬度的內容預覽。案頭定義的樣式（使用中斷點最小寬度1024畫素）仍會套用至頁面。但案頭檢視區寬度是由容器內容型別（例如列）的設定所定義。選取案頭檢視區會顯示瀏覽器頁面寬度為1024畫素及更大時，內容在店面上的樣式設定方式。

{width="500" modal="regular"}
行動裝置 — 以預先定義的寬度768畫素顯示內容預覽。不像案頭檢視區，行動檢視區的確會以768畫素的寬度顯示您的頁面內容，以及為中斷點寬度768畫素（最大值）和640畫素（最小值）定義的樣式。

{width="500" modal="regular"}

中斷點設定

檢視區按鈕也提供根據所選檢視區將不同中斷點樣式套用至內容型別的選項。依預設，Page Builder會為列、欄、標籤、標籤專案、橫幅、滑桿和幻燈片的 Minimum Height 欄位提供中斷點設定。當您選取行動檢視區，然後開啟其中一種內容型別的編輯器時，您可以輸入行動檢視區中斷點的特定欄位值。允許特定中斷點設定的內容型別欄位在欄位右側顯示一個圖示，類似於以下列範例：

中斷點設定的圖示指標 {width="400"}