跳到內容
請注意::這篇文章的翻譯只是為了方便而提供。譯文透過翻譯軟體自動建立,可能沒有經過校對。因此,這篇文章的英文版本應該是包含最新資訊的管理版本。你可以在這裡存取這些內容。

使用圖像滑塊模塊

上次更新時間: 十月 30, 2023

可与下列任何一种订阅一起使用,除非有说明:

所有產品和版本

您可以使用影像滑桿模組在同一模組中顯示多個影像。 您可以將影像設定為自動循環播放,也可以支援訪客手動切換影像。 

在圖像滑塊模塊中添加和編輯幻燈片

  • 前往你的內容:

    • 網站頁面: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「網站」>「網站頁面」。
    • 登陸頁面: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「登陸頁面」。
    • 博客: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「網站」>「部落格」。
  • 將遊標懸停在內容上,然後點擊「編輯」
  • 在內容編輯器中,按一下左側邊欄的「新 增新增」圖示。 
  • 按一下以展開「媒體」類別,然後按一下「影像滑桿」模組並將其拖曳到位。 
  • 在左側邊欄中,將滑鼠遊標懸停在投影片上,然後按一下編輯 編輯圖示,即可將影像新增到該投影片: 
    • 在「影像」部分,按一下上傳以從電腦中選擇影像,或按一下瀏覽影像以從檔案工具中選擇影像。 
    • 在「說明」欄位中,輸入將顯示在影像下方的說明。 若要顯示無標題的影像,請刪除預設文字。 
    add-image-and-caption-to-image-slider
    • 若要新增投影片連結,請按照以下步驟操作:
      • 點擊「連結至」下拉式選單,然後選擇連結類型。
      • 在顯示的欄位中指定連結目的地。 深入瞭解如何在HubSpot中使用連結。 
      • 若要保持內容開啟,並在新視窗中開啟連結,請按一下以切換開啟新視窗中的開啟連結 。 
      • 若要將連結目的地識別為不屬於搜尋引擎網站,請勾選「否追蹤」核取方塊。 
    • 按一下套用變更以儲存此投影片的變更。 
  • 在側邊欄編輯器的頂部,按一下影像滑桿以返回模組概覽。 

go-back-to-image-slider-overview

  • 若要新增更多投影片,請將滑鼠遊標懸停在不同的投影片上,然後按一下編輯 編輯圖示。
  • 若要完成變更,請按一下套用變更。 

編輯圖像滑塊模塊的設置

  • 前往你的內容:

    • 網站頁面: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「網站」>「網站頁面」。
    • 登陸頁面: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「登陸頁面」。
    • 博客: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「網站」>「部落格」。
  • 將遊標懸停在內容上,然後點擊「編輯」
  • 在內容編輯器中,按一下影像滑桿模組。 
  • 在側邊欄編輯器中,按一下「設定」以編輯模組的設定。 
  • 按一下以展開「投影片」部分以編輯投影片選項:
    • 在「每頁投影片 數」欄位中,輸入一次顯示在影像滑桿中的投影片數。 一次最多可以顯示五張投影片。 當一次選取多張投影片時,將不會顯示說明文字和縮圖。 
    • 在「影像大小」部分中,選擇長寬比選項。 預設情況下,影像將使用其自身的長寬比顯示。 要標準化整個影像的單一長寬比,請選擇強制長寬比。 這可能會導致某些影像出現扭曲。 

edit-slide-settings

  • 按一下以展開「移動」部分以編輯投影片轉場選項:
    • 要讓投影片在到達最後一張投影片時重複播放,請選擇循環播放投影片核取方塊。 
    • 要自動循環播放投影片,請選擇自動播放核取方塊。 如果投影片數量少於「每頁投影片數量」設定,則不會發生循環。 
  • 按一下以展開「導航」部分,編輯導航選項:
    • 若要顯示允許訪客在投影片之間手動切換的箭頭,請選取顯示導覽箭頭核取方塊。 
    • 若要在導覽下方顯示影像縮圖,請勾選顯示縮圖核取方塊。 
    • 要在影像下方顯示可顯示投影片總數的點,並允許訪客選擇特定影像,請選擇顯示點導航。 
  • 若要完成變更,請按一下套用變更。 

編輯圖片庫模組的樣式

  • 前往你的內容:

    • 網站頁面: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「網站」>「網站頁面」。
    • 登陸頁面: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「登陸頁面」。
    • 博客: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「網站」>「部落格」。
  • 將遊標懸停在內容上,然後點擊「編輯」
  • 在內容編輯器中,按一下影像滑桿模組。 
  • 在側邊欄編輯器中,按一下「樣式」索引標籤。 
  • 若要設定影像四角的圓角顯示方式,請按一下投影片,然後按一下以展開「影像」部分。 在角半徑字段中輸入像素值。 數值越高,出現的角落就越圓整。
    • 若要在說明文字的上方或下方新增邊距,請按一下以展開「背景」部分,然後在上方的邊距和下方的邊距欄位中輸入像素值。
    • 若要為說明文字新增內邊距,請在「內邊距」欄位中輸入像素值 。 要為每側添加單獨的值,請單擊單獨編輯,然後在字段中輸入像素值。
    • 若要為說明新增背景顏色,請在「顏色」部分的第一個欄位中輸入 十六進位值,或按一下顏色選擇器並選擇顏色。 您可以從「進階」索引標籤新增自訂顏色。
    • 要設置背景顏色的透明度,請在「顏色」部分的第二個字段中輸入百分比值。 100%的透明度是不透明的,而0%的透明度是不可見的。 
    edit-slide-settings 
    • 若要編輯說明文字的字型,請按一下以展開「文字」部分,然後按一下「選擇字型」下拉式選單並選擇字型。 
    • 要更改字體大小,請單擊大小下拉菜單並選擇字體大小。 
    • 要更改字體顏色,請單擊顏色選擇器並選擇一種顏色。 您可以從「進階」索引標籤新增自訂顏色。
    • 要更改字體粗細,請單擊 體、斜體或下劃線文字的粗體字粗細圖標。要編輯影像標題的外觀,請單擊幻燈片,然後單擊標題:
  • 要編輯滑塊箭頭的外觀:
    • 單擊導航。
    • 單擊以展開滑塊箭頭部分。
    • 要設置左右圖標的背景顏色,請在「背景顏色」部分的第一個字段中輸入十六進制值,或者單擊顏色選擇器並選擇一種顏色。 您可以從「進階」索引標籤新增自訂顏色。
    • 要設置背景顏色的透明度,請在「背景顏色」部分的第二個字段中輸入百分比值。 100%的透明度是不透明的,而0%的透明度是不可見的。 
    • 要替換用於左右箭頭的圖標,請單擊左側圖標和右側圖標字段上方的替換 。 在右側面板中,選取一個圖示。
     change-image-slider-arrow-icons
    • 要設置左右圖標的顏色,請在圖標顏色部分的第一個字段中輸入十六進制值,或者單擊顏色選擇器並選擇顏色。 您可以從「進階」索引標籤新增自訂顏色。
    • 要設置背景顏色的透明度,請在圖標顏色部分的第二個字段中輸入百分比值。 100%的透明度是不透明的,而0%的透明度是不可見的。 
  • 要更改影像和自動播放按鈕下方的點的外觀:
    • 單擊導航。
    • 按一下以展開「點和自動播放」按鈕部分。
    • 在「顏色」部分的第一個欄位中輸入十六進位值,或單擊顏色選擇器並選擇顏色。 您可以從「進階」索引標籤新增自訂顏色。
  • 若要變更縮圖導覽的外觀:
    • 單擊導航。
    • 單擊以展開縮略圖導航部分。
    • 要設置左右箭頭圖標的背景顏色,請在箭頭背景顏色部分的第一個字段中輸入十六進位值,或者單擊顏色選擇器並選擇一種顏色。 您可以從「進階」索引標籤新增自訂顏色。
    • 要設置背景顏色的透明度,請在箭頭背景顏色部分的第二個字段中輸入百分比值。 100%的透明度是不透明的,而0%的透明度是不可見的。 
    • 要替換用於左右箭頭的圖標,請單擊左箭頭圖標和右箭頭圖標字段上方的替換 。 在右側面板中,選取一個圖示。
  • arrow-left-in-image-slider 
    • 要設置左右箭頭圖標的顏色,請在箭頭圖標填充 顏色部分的第一個字段中輸入十六進位值,或者單擊顏色選擇器並選擇顏色。 您可以從「進階」索引標籤新增自訂顏色。
    • 要設置箭頭的透明度,請在圖標顏色部分的第二個字段中輸入百分比值。 100%的透明度是不透明的,而0%的透明度是不可見的。 
    • 按一下以展開「縮圖影像」部分。
    • 要設置用於所有略圖影像的寬高比,請單擊寬高比下拉菜單並選擇寬高比。 
    • 要設置用於所有略圖影像的寬度,請在「寬度」字段中輸入像素值 。 
    • 要設置略圖影像的圓角顯示方式,請在「半徑」字段中輸入像素值 。 數值越高,出現的角落就越圓整。 

edit-thumbnail-images-settings

  • 要編輯滑塊的間距:
    • 單擊滑塊。 
    • 按一下以展開「間距」部分。
    • 要添加滑塊上方和下方的邊距,請在上方的邊距和下方的邊距字段中 輸入像素值 。 
    • 要向滑塊添加填充,請在填充字段中輸入像素值 。 要為每側添加單獨的值,請單擊單獨編輯,然後在字段中輸入像素值。
這篇文章有幫助嗎?
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助