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

在HubSpot內容中使用圖片

上次更新時間: 十一月 21, 2022

套用至:

所有產品和版本

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

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

新增圖片

  • 瀏覽至您的內容:

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

請注意:僅限png.ico.bmp.jpg.gif圖片檔案可以新增到市場推廣電子郵件中


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

在插入影像之前,您可以透過按一下右側面板中影像的詳細資料來優化影像的載入時間或分辨率。 然後按一下影像優化下拉菜單,然後選擇一個優化選項: 

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

編輯影像

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

在富文本模組中編輯影像 

  • 瀏覽至您的內容:

    • 網站頁面: 在 HubSpot 帳戶中,進入「行銷」>「網站」>「網站頁面」。
    • 登陸頁面: 在 HubSpot 帳戶中,進入「行銷」>「登陸頁面」。
    • 博客: 在 HubSpot 帳戶中,進入「行銷」>「網站」>「部落格」。
    • 知識庫: 在 HubSpot 帳戶中,進入「服務」>「知識庫」。
    • 郵箱在 HubSpot 帳戶中,進入「行銷」>「電子郵件」。
  • 將鼠標懸停在內容上,然後按一下[編輯]。 
  • 在內容編輯器中,按一下影像以顯示影像編輯工具列。
  • 編輯影像:  
    • 若要調整文字在影像周圍的環繞方式,請按一下內嵌 對齊圖示。 
    • 若要調整影像的大小,請勾選w idth 和h八個 箭頭或輸入像素值。 
    • 若要調整影像 周圍的填充,請按一下間距下拉菜單,然後在影像圖示的邊緣周圍輸入像素值
  • 若要從富文本模組中移除影像,請按一下影像,然後按一下刪除垃圾桶圖示。 
  • 若要替換富文本模組中的影像,請按一下影像,然後按一下換替換圖示並新增影像。
edit-image-in-rich-text-module
  • 若要連結影像、新增替代文字或設定載入行為,請按一下影像,然後按一下鉛筆圖示編輯:
    • 若要新增影像連結,請按一下彈出方塊中的連結下拉菜單,然後選擇連結類別在下面的欄位中輸入連結的目的地。 進一步了解不同類型的連結
    • 在「替代文字」欄位中,輸入文字以向搜尋引擎和螢幕讀取器描述影像是什麼。 這將改善網站的無障礙性和SEO。 請參閱我們的開發人員文件,進一步了解網站無障礙設施。 

請注意:影像中新增替代文字不會新增標題文字。 替代文字會影響搜尋引擎的排名和無障礙設施,而當訪客懸停在影像上時,標題文字會出現。 

  • 若要設定影像載入行為和自訂搜尋引擎的影像連結類型,請按一下進階
    • 若要設定影像載入行為,請按一下影像載入 下拉菜單,然後選擇一個選
      • 延遲:圖片只會在訪客到達網頁的那部分時載入。 這可以減少頁面載入所需的時間,並改善SEO。 預設情況下,影像將載入此設定。 
      • 急切:頁面載入後,影像會立即載入。 
      • 瀏覽器預設值:影像的載入行為取決於訪客的瀏覽器設定。 
    • 若要自訂影像連結類型,請在連結類型部分選擇一個或多個屬性: 
      • 普通: 此連結並非保薦。 
      • 沒有追蹤: 此連結未與您的網站相關聯。
      •  辦:此連結是主辦連結或廣告。
      • 用戶生成的內容: 此連結導向用戶生成的內容,例如網誌評論或論壇討論。 
  • 按一下套用以將變更套用至影像。

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

  • 在內容編輯器的右上角,按一下[更新發佈] ,即可設定變更為即時。 

在影像模組中編輯影像

  • 瀏覽至您的內容:

    • 網站頁面: 在 HubSpot 帳戶中,進入「行銷」>「網站」>「網站頁面」。
    • 登陸頁面: 在 HubSpot 帳戶中,進入「行銷」>「登陸頁面」。
    • 博客: 在 HubSpot 帳戶中,進入「行銷」>「網站」>「部落格」。
    • 郵箱在 HubSpot 帳戶中,進入「行銷」>「電子郵件」。
  • 將鼠標懸停在內容上,然後按一下[編輯]。 
  • 在內容編輯器中,按一下影像模組。   
  • 若要移除目前的影像,請按一下側邊欄編輯器的「影像」部分中的「除」。 這將從影像模組中移除目前的影像,但不會從頁面中移除該模組。 
  • 若要替換目前的影像,請按一下側邊欄編輯器的「影像」部分中的「換」,然後新增影像。 
  • 在「替代文字」欄位中,輸入文字以向搜尋引擎和螢幕讀取器描述影像是什麼。 這將改善網站的無障礙性和SEO。 請參閱我們的開發人員文件,進一步了解網站無障礙設施。 

請注意:影像中新增替代文字不會新增標題文字。 替代文字會影響搜尋引擎的排名和無障礙設施,而當訪客懸停在影像上時,標題文字會出現。 

replace-or-remove-image-in-image-module 
  • 設定影像的大小。您可以自動設定大小,也可以設定自訂高度和寬度: 
    • 自動調整: 影像的大小會調整成與檢視的裝置相符。 
    • 精確的高度和寬度影像將在所有裝置上以相同的大小顯示。
  • 設定最大大小: 
    • 影像的原始大小:影像永遠不會顯示為大於原始大小。 
    • 自訂:影像顯示的寬度和高度永遠不會大於寬度和高度欄位中設定的特定度和高度。 
  • 若要設定影像載入行為,請按一下影像載入  下拉菜單,然後選擇一個選
    • 延遲:圖片只會在訪客到達網頁的那部分時載入。 這可以減少頁面載入所需的時間,並改善SEO。 預設情況下,影像將載入此設定。 
    • 瀏覽器預設值:影像的載入行為取決於訪客的瀏覽器設定。 
  • 若要新增影像連結,請在連結(可選)欄位中輸入目的地網址 。 選擇在新瀏覽器標籤中開啟連結核取方塊,將訪客導向到新瀏覽器標籤中的目的地網址。 
set-size-link-and-loading-in-an-image-module
  • 在內容編輯器的右上角,點擊「更新」或「發佈」以啟用變更。 
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.