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

在HubSpot內容中使用影像

上次更新時間: 六月 21, 2023

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

所有產品和版本

您可以將影像新增至HubSpot內容中的富文本模組或影像模組。 富文本模組支持多種類型的內容(圖像,文本, CTA等) ,而每個圖像模組只能包含單個圖像。 

請注意: 拖放電子郵件編輯器中的文字模塊和自訂富文本模塊不能包含圖像。 

新增圖片

  • 瀏覽至您的內容:

    • 網站頁面: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「網站」>「網站頁面」。
    • 登陸頁面: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「登陸頁面」。
    • 博客: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「網站」>「部落格」。
    • 知識庫: 在你的 HubSpot 帳戶中,瀏覽「服務」>「知識庫」。
    • 郵箱: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「電子郵件」。
  • 將遊標停留在內容上,然後按一下「編輯」。 

請注意:只有.png , .ico , .bmp , .jpg和.gif圖像文件可以添加到行銷電子郵件中


  • 插入影像: 
    • 若要將影像新增至富文字模組,請按一下富文字模組,然後按一下富文字工具列上的insertImage ici影像圖示 。
    • 若要將影像新增至影像模組,請按一下影像模組,然後在佔位符影像上方的側邊欄編輯器中按一下替換 。 
  • 選擇影像: 
    • 若要插入現有影像,請按一下右側面板中的影像 。
    • 若要從電腦或透過檔案URL上傳新影像,請按一下右側面板中的「新增影像」。 若要使用Canva的編輯工具建立新影像,請按一下使用Canva設計。 然後按一下影像以插入。

在插入影像之前,您可以通過按一下右側面板中影像上的詳細資料來優化影像以獲得加載時間或解析度。 然後按一下「影像優化」下拉式選單,然後選擇一個優化選項: 

    • 高:影像將以更高的分辨率加載,但加載時間增加。
    • 預設值:影像將對分辨率和加載時間進行最佳化。
    • 低:影像將以較低的分辨率加載,但加載時間會減少。 請參閱我們的開發人員文件,進一步了解如何為載入時間優化頁面。 
set-image-optimization-for-rich-text-content

編輯影像

將影像新增至內容後,您可以編輯其大小、新增替代文字、新增連結或設定其載入行為。 

在RTF模組中編輯影像 

  • 瀏覽至您的內容:

    • 網站頁面: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「網站」>「網站頁面」。
    • 登陸頁面: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「登陸頁面」。
    • 博客: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「網站」>「部落格」。
    • 知識庫: 在你的 HubSpot 帳戶中,瀏覽「服務」>「知識庫」。
    • 郵箱: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「電子郵件」。
  • 將遊標停留在內容上,然後按一下「編輯」。 
  • 在內容編輯器中,按一下影像以顯示影像編輯工具列。
  • 編輯影像: 
    • 若要調整文字在影像周圍的環繞方式,請按一下內嵌 對齊圖示。 
    • 若要調整影像的大小,請按一下寬度和高度箭頭,或輸入像素值。 
    • 若要調整影像周圍的填充,請按一下「間距」下拉式選單,然後輸入影像圖示邊緣周圍的像素值。
  • 若要從富文本模組中移除影像,請按一下該影像,然後按一下刪除垃圾箱圖示。 
  • 若要替換富文本模組中的影像,請按一下該影像,然後按一下替換替換圖示並新增影像。
edit-image-in-rich-text-module
  • 若要連結影像、新增替代文字或設定載入行為,請按一下影像,然後按一下鉛筆圖示編輯:
    • 若要新增影像的連結,請按一下彈出式方塊中的「連結至下拉式選單」,然後選擇連結類別。 在下面的欄位中,輸入連結的目的地。 進一步了解不同類型的連結
    • 在「替代文字」欄位中,輸入要向搜尋引擎和螢幕閱讀器描述影像的文字。 您也可以在「檔案」工具中為影像新增替代文字。 新增替代文字將改善網站的可訪問性和SEO。 在我們的開發人員文件中了解有關網站無障礙功能的更多信息。 

請注意:在圖片中添加替代文字不會添加標題文字。 替代文字會影響搜尋引擎的排名和可訪問性,而標題文字則會在訪問者將鼠標懸停在影像上時出現。 

  • 若要設定影像載入行為並自訂搜尋引擎的影像連結類型,請按一下「進階」。 
    • 若要設定影像載入行為,請按一下「影像載入」 下拉式選單,然後選擇一個選項: 
      • 延遲:只有當訪問者到達頁面的那一部分時,圖像才會加載。 這樣可以減少頁面加載所需的時間,並改善SEO。 預設情況下,影像會使用此設定加載。 
      • 瀏覽器預設值:影像的載入行為由訪客的瀏覽器設定決定。 
      • 急切:一旦頁面加載,圖像就會加載。 
    • 若要自訂影像連結類型,請在「連結類型」部分選擇一個或多個屬性: 
      • 常規:此連結不受贊助。 
      • 注意:此連結與您的網站無關。
      • 贊助:此連結是贊助連結或廣告。
      • 使用者產生的內容:此連結會導致使用者產生的內容,例如部落格評論或論壇討論。 
  • 按一下套用,將變更套用至影像。

add-link-and-alt-text-to-rich-text-image

  • 若要將變更上線,請按一下右上角的「發佈」或「更新」,然後按一下對話方塊中的「發佈」或「更新」。 

在圖像模組中編輯圖像

  • 瀏覽至您的內容:

    • 網站頁面: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「網站」>「網站頁面」。
    • 登陸頁面: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「登陸頁面」。
    • 博客: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「網站」>「部落格」。
    • 郵箱: 在你的 HubSpot 帳戶中,瀏覽「行銷」>「電子郵件」。
  • 將遊標停留在內容上,然後按一下「編輯」。 
  • 在內容編輯器中,按一下影像模組。 
  • 若要移除當前影像,請在側邊欄編輯器的影像部分點擊移除。 這將從圖像模塊中刪除當前圖像,但不會從頁面中刪除模塊。 
  • 若要替換當前影像,請在側邊欄編輯器的「影像」部分按一下「替換」,然後新增影像。 
  • 在「替代文字」欄位中,輸入要向搜尋引擎和螢幕閱讀器描述影像的文字。 您也可以在「檔案」工具中為影像新增替代文字。 新增替代文字將改善網站的可訪問性和SEO。 在我們的開發人員文件中了解有關網站無障礙功能的更多信息。 

請注意:在圖片中添加替代文字不會添加標題文字。 替代文字會影響搜尋引擎的排名和可訪問性,而標題文字則會在訪問者將鼠標懸停在影像上時出現。 

replace-image 
  • 若要在不同裝置上設定影像大小,請按一下「大小」下拉式選單,然後選擇一個選項:
    • 自動調整:影像將縮放大小,以適應所觀看的裝置。 
    • 精確的高度和寬度:影像將在所有裝置上顯示為相同的大小。
  • 若要設定影像大小限制,請按一下「最大尺寸」下拉式選單,然後選擇一個 選項: 
    • 影像的原始大小:影像永遠不會大於原始大小。 
    • 自訂:影像永遠不會出現超過在寬度和高度欄位中設定的特定寬度和 高度。 
  • 若要設定影像載入行為,請按一下「影像載入」 下拉式選單,然後選擇一個選項: 
    • 瀏覽器預設值:影像的載入行為由訪客的瀏覽器設定決定。 
    • 延遲:只有當訪問者到達頁面的那一部分時,圖像才會加載。 這樣可以減少頁面加載所需的時間,並改善SEO。 預設情況下,影像會使用此設定加載。 
    • 急切:圖像盡快加載。 
  • 若要新增指向影像的連結,請在連結(可選)欄位中輸入目標網址 。 選取「在新標籤中開啟連結」核取方塊,將訪客引導至新瀏覽器標籤中的目標網址。 
set-image-size-and-loading-options
  • 若要將變更上線,請按一下右上角的「發佈」或「更新」,然後按一下對話方塊中的「發佈」或「更新」。 

這篇文章有幫助嗎?
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助