文件CommercePage Builder

僅限PaaS

元素 — 文字

最後更新： 2025年5月5日
  • 主題：

建立對象：

  • 初學者
  • 中繼
  • 使用者

使用​ 文字 ​內容型別在Page Builder 階段中新增包含WYSIWYG （「所見即所得」）編輯器的文字容器。 此外，您可以從編輯器工具列將連結、影像、變數和Widget新增至文字。

橫幅上的 格式化文字

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

文字編輯器工具

您可以直接從舞台或設定頁面存取文字編輯器。 直接對階段所做的變更會自動儲存。 如需詳細資訊，請參閱使用編輯器。

文字編輯器工具 — TinyMCE

文字容器工具箱

文字容器工具箱

工具圖示說明
移動 移動圖示 將文字容器移至頁面上的另一個有效位置。
（標籤）文字將目前的容器識別為文字元素。
設定 設定圖示 在編輯模式中開啟文字容器屬性。
隱藏 隱藏圖示 隱藏文字容器。
顯示 顯示圖示 顯示隱藏的文字容器。
複製 圖示重複 製作文字容器的副本。
移除 移除圖示 從舞台刪除文字容器及其內容。
NOTE
隱藏的元素會儲存在資料庫中，且對客戶不可見。 不過，搜尋引擎和其他對您的網站進行編目的機器人可看見這些元素。 如果透過具有不可見屬性的API呼叫提出請求，這些區段也會當作內容的一部分傳回，除非您將其從階段中移除。

新增文字

  1. 在Page Builder面板中，展開​ Elements ​並將​ Text ​預留位置拖曳至舞台上的列、欄或索引標籤集。

    將文字預留位置拖曳到舞台

  2. 視需要使用編輯器來輸入文字並設定其格式。

    如需詳細資訊，請參閱使用編輯器。

    包含內容的 文字編輯器

建立連結

編輯器中的「插入連結」按鈕可讓您輕鬆在相簿中新增影像的超連結。 不過，如果您有預先設定的URL，也可以使用文字建立內嵌連結。 與Widget按鈕不同，插入/編輯連結按鈕未與存放區中的頁面、產品或類別整合。

若要建立電話號碼或電子郵件的連結，請參閱新增自訂變數。

  1. 在店面中，導覽至將成為連結目標目的地的頁面，並複製連結資訊。

    您可以使用完整URL或省略商店網域參照的相對URL。

    完整URL - https://mystore.com/women/tops-women/tees-women.html

    相對URL - ../women/tops-women/tees-women.html

  2. 選取編輯器空間中的文字，然後按一下編輯器工具列上的​ 插入/編輯連結 （ 插入/編輯連結按鈕）。

    新增格式化文字的連結

  3. 針對​ URL，輸入您準備的相對連結。

  4. 將​ Target ​設為None。

    此設定會在相同的瀏覽器視窗中開啟頁面，而非開啟新標籤。

  5. 針對​ Title，輸入Shop Tees。

    某些瀏覽器會使用Title連結屬性作為工具提示。

  6. 若要儲存連結並返回Page Builder工作區，請按一下​ OK。

    連結詳細資料

插入影像

  1. 將游標置於您要插入影像的文字中。

  2. 按一下編輯器工具列上的​ 插入/編輯影像 （ 插入/編輯影像按鈕）。

  3. 針對​ Source，按一下搜尋圖示，即可使用媒體儲存來尋找及選取影像。

  4. 針對​ Image Description，輸入影像的描述文字。

    此文字會填入影像的alt連結屬性，並被某些瀏覽器用於協助工具。

  5. 輸入寬度和高度​ Dimensions （以畫素為單位），以呈現頁面上的影像。

    保持選取​ Constrain proportions ​核取方塊，以自動維持影像的外觀比例。

  6. 若要插入影像然後返回Page Builder工作區，請按一下​ OK。

變更文字設定

  1. 將滑鼠懸停在文字容器上以顯示工具箱，然後選擇​ 設定 （ 設定圖示 ）圖示。

    NOTE
    因為文字容器已緊密巢狀內嵌於另一個容器中，請確定您有正確的工具箱。

  2. 視需要更新內容。

  3. 視需要更新​ Advanced ​設定。

    • 若要控制文字在父容器中的位置，請選擇​ Alignment：

      選項
      說明
      Default
      套用目前佈景主題樣式表中指定的對齊預設設定。
      Left
      沿著父容器的左邊框對齊清單，並允許指定的任何邊框間距。
      Center
      將清單對齊父項容器的中心，並容許任何指定的內距。
      Right
      沿著父容器的右邊框對齊區塊，並允許指定的任何邊框間距。

    • 設定套用至文字容器所有四個側面的​ Border ​樣式：

      選項
      說明
      Default
      套用關聯樣式表所指定的預設邊框樣式。
      None
      未提供任何容器框線的可見指示。
      Dotted
      容器邊框會以虛線顯示。
      Dashed
      容器邊框會以虛線顯示。
      Solid
      容器邊框會以實線顯示。
      Double
      容器邊框會以雙線顯示。
      Groove
      容器框線會顯示為槽線。
      Ridge
      容器框線會顯示為脊線。
      Inset
      容器框線會顯示為內嵌線。
      Outset
      容器邊框會顯示為外線。

    • 如果您設定了None以外的框線樣式，請完成框線顯示選項：

      選項
      說明
      Border Color
      選擇色票、按一下檢色器，或輸入有效的顏色名稱或相等的十六進位值，以指定顏色。
      Border Width
      輸入邊框線條寬度的畫素數。
      Border Radius
      輸入畫素數目，以定義用來將邊框每個角落倒圓角的半徑大小。

    • （選擇性）從目前的樣式表中指定要套用至容器的​ CSS classes ​名稱。

      以空格分隔多個類別名稱。

    • 輸入​ Margins and Padding ​的值（以畫素為單位），以決定文字容器的外邊界和內邊距。

      在圖表中輸入對應的值。

      容器區域
      說明
      Margins
      套用至容器所有側邊外部邊緣的空白空間量。 選項： Top / Right / Bottom / Left
      Padding
      套用至容器所有邊內側邊緣的空白空間量。 選項： Top / Right / Bottom / Left

  4. 完成後，按一下​ Save ​套用設定並返回Page Builder工作區。

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d