元素 — 文字

使用​ 文字 ​內容型別在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