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

使用圖像滑桿模組

上次更新時間: 六月 23, 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 的協助