元素 — 文字

使用 文字 內容型別,以使用WYSIWYG (「您所見即所得」)編輯器新增文字容器,在 Page Builder 階段. 此外,您還可以新增連結、影像、 變數,並從編輯器工具列將Widget移至文字。

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

NOTE
若您正在對下列專案進行重大變更 Page Builder 內容,建議您增加 管理員工作階段存留期 以防止工作階段在工作時逾時。

文字編輯器工具

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

文字編輯器工具 — TinyMCE {width="600"}

文字容器工具箱

文字容器工具箱 {width="600"}

工具
圖示
說明
移動
移動圖示 {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. 設定 TargetNone.

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

  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