知識庫

使用圖片滑桿模組

作者：HubSpot Support | Nov 21, 2022 12:08:55 PM

您可以使用圖片滑桿模組，在同一模組中顯示多張圖片。您可以設定圖片自動循環播放，也可以支援訪客手動切換。

在圖片滑桿模組中新增和編輯幻燈片

  1. 導覽到您的內容：

    • 網站頁面：
    • 登陸頁面： 著陸頁面
    • 部落格：
  2. 按一下內容的名稱。
  3. 在內容編輯器中，按一下左側欄中的add 新增 圖示。
  4. 按一下以展開媒體 類別，然後按一下圖片滑桿 模組，並將其拖曳到位。
  5. 在左側邊欄中，將滑行桿停在幻燈片上，然後按一下edit 編輯 圖示，即可將圖片新增至該幻燈片：
    • 在「圖 片」部分，按一下「上傳」 從電腦選取圖片，或按一下「瀏覽圖片 」從檔案工具選取圖片。若要產生影像，請按一下以 AI 產生。
    • 在標題 欄位中，輸入會出現在圖片下方的標題 。若要顯示沒有標題的影像，請刪除預設文字。
    • 若要在投影片中加入連結：
      • 按一下連結至 下拉式功能表，然後選擇連結類型。
      • 在出現的欄位中指定連結目的地。進一步了解如何在 HubSpot 中使用連結。
      • 若要保持內容開啟，並讓連結在新視窗中開啟，請開啟「在新視窗中開啟連結 」開關。
      • 若要向搜尋引擎標示連結目的地不屬於您的網站，請選擇不跟隨核 取方塊。
    • 按一下套用變更 以儲存此投影片的變更。
  6. 在側邊列編輯器的頂端，按一下圖片滑桿 以返回模組總覽。

  1. 若要新增更多幻燈片，請將滑鼠懸停在不同的幻燈片上，然後按一下edit Edit 圖示。
  2. 若要完成變更，請按一下套用變更。

編輯圖片滑桿模組的設定

  1. 導航至您的內容：

    • 網站頁面：網站頁面：
    • 登陸頁面：登陸頁面：
    • 部落格：
  2. 按一下內容的名稱。
  3. 在內容編輯器中，按一下圖片滑桿模組。
  4. 在側邊列編輯器中，按一下設定 以編輯模組的設定。
  5. 按一下展開幻燈片 部分，以編輯幻燈片選項：
    • 在「每頁幻 燈片」欄位中，輸入圖片滑桿一次顯示的幻燈片數量 。一次最多可顯示五張幻燈片。選擇一次顯示多張幻燈片時，將不會顯示標題和縮圖。
    • 在圖片尺寸 欄位中，選擇寬高比選項。預設情況下，影像會以上載的長寬比顯示。若要統一所有影像的長寬比，請選取強制長寬比。這可能會導致某些影像出現扭曲。
    • 若要新增或移除幻燈片的標題，請選取顯示標題核取方塊。預設情況下，已選取顯示標題核取方塊。
    • 在標題位置下拉式功能表中，選擇標題的位置。

  1. 按一下以展開「移動 」區段，編輯幻燈片轉換選項：
    • 若要設定幻燈片的過場方式，請選取過場選項(例如淡入淡出)。
    • 若要在播放到最後一張幻燈片時重複播放幻燈片 ，請選取循環幻燈片 核取方塊。
    • 若要讓幻燈片自動循環播放，請選取自動播放 核取方塊。如果幻燈片數量少於每頁幻燈片 數量設定，就無法循環播放。
  2. 按一下以展開導覽區 段，編輯導覽選項：
    • 若要顯示箭頭，讓訪客可以手動切換幻燈片，請選取顯示導覽箭頭 核取方塊。
    • 若要在導覽下方顯示影像縮圖，請選取顯示縮圖 核取方塊。
    • 若要在圖片下方顯示小點，以顯示幻燈片總數，並允許訪客選擇特定圖片，請選取顯示小點導覽。
  3. 完成後，按一下套用變更。

編輯圖片滑桿模組的樣式

您可以編輯圖片滑桿模組的樣式，包括幻燈片、導覽和滑桿的樣式。

  1. 導覽到您的內容：

    • 網站頁面：網站頁面：
    • 登陸頁面：登陸頁面：
    • 部落格：
  2. 按一下內容的名稱。
  3. 在內容編輯器中，按一下圖片滑桿模組。
  4. 在側邊欄編輯器中，按一下樣式索引標籤。
  5. 若要繼續編輯圖片滑桿模組的樣式，請按一下幻燈片、導覽或滑桿。

編輯幻燈片的樣式

編輯幻燈片中顯示圖片的樣式：

  1. 按一下幻燈片。
  2. 按一下以展開「影像 」區段。
  3. 在角落半徑 欄位中輸入像素值 。值越大，邊角就會顯得越圓。
  4. 完成後，按一下套用變更。

編輯幻燈片中標題的顯示樣式：

  1. 按一下標題。
  2. 按一下以展開「背景」區段。
    • 若要在標題上方或下方加入邊距，請在上方 邊距 和下方邊距 欄位中輸入像素值。
    • 若要為標題加入襯墊，請在Padding 欄位中輸入像素值 。若要為每邊加入不同的值，請按一下分別編輯，然後在欄位中輸入像素值。
    • 若要在標題中加入背景顏色，請在顏色 部分的第一個欄位中輸入十六進位值 ，或按一下顏色選擇器 並選擇顏色。自訂顏色可從進階標 籤中加入。
    • 若要設定背景顏色的透明度，請在顏色 部分的第二欄輸入百分比值。透明度為 100% 會不透明，而透明度為 0% 則不可见。
  3. 按一下以展開文字區段。
    • 若要變更字型類型，請按一下選擇 字型下拉式功能表，然後選擇字型。
    • 若要變更字型大小，請按一下大小 下拉式功能表，然後選擇字型大小。
    • 若要變更字體顏色，請按一下顏色 選擇器 ，然後選擇顏色。自訂顏色可從進階標 籤中新增。
    • 若要變更字體重量，請按一下bold 字體重量圖示，以取得粗體、italicIcon 斜體或underlineIcon 底線文字。
  4. 完成後，按一下套用變更。

編輯導覽的樣式

您可以編輯導覽的樣式，包括滑桿箭頭、圓點和自動播放按鈕，以及縮圖導覽。可用的樣式選項取決於圖片滑桿模組的導覽設定。

滑桿箭頭

  1. 按一下導覽。
  2. 按一下以展開滑桿箭頭部分。
  3. 在背景顏色部分輸入十六進位值。您也可以按一下顏色選擇器，然後選擇顏色。自訂顏色可以從「進階」標籤中新增。
  4. 若要設定背景顏色的透明度，請在背景顏色部分的第二欄輸入百分比值。例如，透明度為 100% 會不透明，而透明度為 0% 則不可见。
  5. 若要取代用於左右箭頭的圖示，請按一下左圖示和右圖示欄位上方的取代。在右側面板中，選擇圖示。
  6. 若要設定左右圖示的顏色，請在圖示顏色部分的第一個欄位中輸入十六進位值。您也可以按一下顏色選擇器並選擇顏色。自訂顏色可以從「進階」標籤中加入。
  7. 若要設定圖示背景色的透明度，請在圖示顏色部分的第二欄輸入百分比值。例如，透明度為 100% 會不透明，而透明度為 0% 則不可见。
  8. 完成後，按一下套用變更。

圓點和自動播放按鈕

  1. 按一下以展開點和自動播放按鈕部分。
  2. 在顏色部分的第一個欄位中輸入十六進位值，或按一下顏色 選擇器並選擇顏色。可從進階索引標籤新增自訂顏色。
  3. 完成後，按一下套用變更。

縮圖導覽

  1. 按一下以展開縮圖導覽部分。
  2. 若要編輯背景顏色，請在箭頭背景 顏色部分的第一個欄位中輸入十六進位值 ，或按一下顏色 選擇器 並選擇顏色。自訂顏色可從進階標 籤中新增。
  3. 若要編輯背景顏色的透明度，請在箭頭背景 顏色部分的第二欄輸入百分比值。透明度為 100% 會不透明，而透明度為 0% 則不可见。
  4. 若要取代左右箭頭使用的圖示，請按一下箭頭左圖示 和箭頭右圖示欄 上方的取代 。在右側面板中，選擇圖示。
  1. 若要編輯左右箭頭圖示的顏色，請在箭頭圖示填充 顏色部分的第一個欄位中輸入十六進位值 。您也可以按一下顏色選擇器 ，然後選擇顏色。自訂顏色可以從「進階 」標籤中新增。
  2. 若要設定箭頭的透明度，請在圖示 顏色部分的第二欄輸入百分比值。例如，透明度為 100% 會不透明，而透明度為 0% 則不可见。
  3. 要編輯縮圖影像的比例、寬度和圓角：
    • 按一下以展開Thumbnail images (縮圖影像 ) 區段。
    • 若要設定所有縮圖使用的寬高比，請按一下寬高 比下拉式功能表，然後選擇一個寬高比。
    • 若要設定所有縮圖使用的寬度，請在寬度 欄位中輸入像素值 。
    • 若要設定縮圖影像邊角的圓滑程度，請在 半徑 欄位輸入像素值 。數值愈大，圓角會顯得愈圓。
  4. 完成後，按一下套用變更。

編輯滑桿的樣式

  1. 按一下滑桿。
  2. 按一下以展開「間距 」部分。
  3. 若要在滑桿上方和下方加入邊距，請在上方 邊距和下方邊距 欄位中輸入像素值 。
  4. 若要為滑桿加入襯墊，請在Padding 欄位輸入像素值 。若要為每邊加入獨立值，請按一下分別編輯，然後在欄位中輸入像素值。
  5. 完成後，按一下套用變更。
檢視完整文章