文件CommercePage Builder

元素 — HTML代碼

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

建立對象：

  • 初學者
  • 中繼
  • 使用者

使用​ HTML代碼 ​內容型別，在Page Builder 階段中新增HTML、CSS和JavaScript代碼片段。 例如，您可能想要新增自訂HTML、宣告可套用至頁面上元素的CSS類別。 或者，您可能想要為您從第三方提供者收到的標誌、按鈕或橫幅新增程式碼片段。

HTML程式碼工具箱

HTML程式碼工具箱

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

新增HTML代碼

下列範例示範如何內嵌Google Font程式碼並宣告覆寫目前樣式表的自訂標題類別。

步驟1：選擇Google字型

  1. 造訪Google Fonts網站，並選擇要使用的字型系列。

  2. 複製要內嵌在頁面<head>區段中的產生程式碼，並將其暫時貼到文字編輯器中。

    • 內嵌字型代碼
    • CSS規則

  3. 將字型系列規則新增至每個標題類別，並將標題類別括在<style>標籤中。

    此程式碼已貼到Page Builder中。

    code language-html 
    <style>
   h1 {color: teal; font-family: 'Khand', sans-serif; }
   h2 {color: teal; font-family: 'Khand', sans-serif; }
   h3 {color: teal; font-family: 'Khand', sans-serif; }
</style>

步驟2：將程式碼新增至頁面

  1. 在您商店的​ 管理員 ​側邊欄中，前往​ Content > Elements>Pages。

  2. 尋找字型可用的頁面，並以編輯模式開啟。

  3. 向下捲動並展開​ Content ​區段。

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

    使用紅色指引將分隔線放置在列、欄或索引標籤集中另一個內容容器之前或之後。

    將HTML程式碼預留位置拖曳到舞台 {width="600" modal="regular"}

  5. 將游標停留在HTML容器上以顯示工具箱，然後選擇​ 設定 （ 設定圖示 {width="20"} ）圖示。

  6. 在文字方塊中，貼上您準備的內嵌Google字型程式碼和樣式宣告。

    為了更方便閱讀，您可以輸入一些空格來縮排程式碼。

    HTML程式碼和樣式 {width="500" modal="regular"}

  7. 視需要更新其餘的設定(如需詳細資訊，請參閱變更HTML碼設定)。

  8. 在右上角，按一下​ Save ​以套用設定並返回Page Builder工作區。

    透過瀏覽器檢視頁面時，新字型會呈現。

步驟3：預覽頁面

  1. 在​ Currently Active ​區段中，將​ Enable Page ​設為Yes。

    正在啟用頁面 {width="600" modal="regular"}

  2. 在右上角，按一下​ Save ​箭頭並選擇​ Save & Close。

  3. 在格線中尋找頁面，並在​ Actions ​欄中選取​ View。

    使用新字型系列預覽頁面標題 {width="700" modal="regular"}

變更HTML碼設定 html-settings

  1. 將游標停留在HTML容器上以顯示工具箱，然後選擇​ 設定 （ 設定圖示 {width="20"} ）圖示。

  2. 在文字方塊中，視需要編輯程式碼。

    支援HTML、CSS和JavaScript程式碼。 您可以在此處輸入屬於頁面<head>區段的程式碼片段。

    編輯器也提供在程式碼中插入特殊元素的按鈕：

    table 0-row-2 1-row-2 2-row-2 3-row-2
    按鈕 說明
    插入Widget… 按一下，在HTML文字方塊中的游標位置處插入Widget。
    插入影像…… 按一下，在HTML文字方塊中的游標位置處插入來自相簿的上傳影像或影像。
    插入變數…… 按一下，在HTML文字方塊中的游標位置處插入變數。

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

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

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

      在下列範例中，選項設定為使用演算後程式碼區塊的置中對齊。

      具有中央對齊的分隔線 {width="600" modal="regular"}

    • 設定套用至程式碼容器所有四個側面的​ 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
      選項 說明
      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
      容器區域 說明
      Margins 套用至容器所有側邊外部邊緣的空白空間量。 選項： Top / Right / Bottom / Left
      Padding 套用至容器所有邊內側邊緣的空白空間量。 選項： Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d