文件CommercePage Builder

元素 — 文字

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

建立對象：

  • 初學者
  • 中繼
  • 使用者

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

橫幅上的 格式化文字 {width="700"}

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

文字編輯器工具

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

文字編輯器工具 — TinyMCE

文字容器工具箱

文字容器工具箱

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

新增文字

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

    將文字預留位置拖曳到舞台 {width="600" modal="regular"}

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

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

    包含內容的 文字編輯器 {width="600"}

建立連結

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

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

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

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

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

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

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

    新增格式化文字的連結 {width="500" modal="regular"}

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

  4. 將​ Target ​設為None。

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

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

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

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

    連結詳細資料 {width="500" modal="regular"}

插入影像

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

  2. 按一下編輯器工具列上的​ 插入/編輯影像 （ 插入/編輯影像按鈕 {width="20"}）。

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

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

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

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

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

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

變更文字設定

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

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

  2. 視需要更新內容。

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

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

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

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

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
      選項 說明
      Default 套用關聯樣式表所指定的預設邊框樣式。
      None 未提供任何容器框線的可見指示。
      Dotted 容器邊框會以虛線顯示。
      Dashed 容器邊框會以虛線顯示。
      Solid 容器邊框會以實線顯示。
      Double 容器邊框會以雙線顯示。
      Groove 容器框線會顯示為槽線。
      Ridge 容器框線會顯示為脊線。
      Inset 容器框線會顯示為內嵌線。
      Outset 容器邊框會顯示為外線。

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

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

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

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

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

      在圖表中輸入對應的值。

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

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

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