使用圖像滑塊模塊

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

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

• 前往你的內容：

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

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

編輯圖像滑塊模塊的設置

• 前往你的內容：

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

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

編輯圖片庫模組的樣式

• 前往你的內容：

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

• • 要設置左右箭頭圖標的背景顏色，請在箭頭背景顏色部分的第一個字段中輸入十六進位值，或者單擊顏色選擇器並選擇一種顏色。 您可以從「進階」索引標籤新增自訂顏色。
  • 要設置背景顏色的透明度，請在箭頭背景顏色部分的第二個字段中輸入百分比值。 100%的透明度是不透明的，而0%的透明度是不可見的。 
  • 要替換用於左右箭頭的圖標，請單擊左箭頭圖標和右箭頭圖標字段上方的替換 。 在右側面板中，選取一個圖示。
•  
  • 要設置左右箭頭圖標的顏色，請在箭頭圖標填充 顏色部分的第一個字段中輸入十六進位值，或者單擊顏色選擇器並選擇顏色。 您可以從「進階」索引標籤新增自訂顏色。
  • 要設置箭頭的透明度，請在圖標顏色部分的第二個字段中輸入百分比值。 100%的透明度是不透明的，而0%的透明度是不可見的。 
  • 按一下以展開「縮圖影像」部分。
  • 要設置用於所有略圖影像的寬高比，請單擊寬高比下拉菜單並選擇寬高比。 
  • 要設置用於所有略圖影像的寬度，請在「寬度」字段中輸入像素值 。 
  • 要設置略圖影像的圓角顯示方式，請在「半徑」字段中輸入像素值 。 數值越高，出現的角落就越圓整。 

• 要編輯滑塊的間距：
  • 單擊滑塊。 
  • 按一下以展開「間距」部分。
  • 要添加滑塊上方和下方的邊距，請在上方的邊距和下方的邊距字段中 輸入像素值 。 
  • 要向滑塊添加填充，請在填充字段中輸入像素值 。 要為每側添加單獨的值，請單擊單獨編輯，然後在字段中輸入像素值。