知識庫

在HubSpot內容中使用圖片

作者:HubSpot Support | Jun 21, 2023 7:01:57 PM

您可以在HubSpot內容中將圖像添加到富文本模塊或圖像模塊。 富文字模組支援多種類型的內容(圖片、文字、行動呼籲等) ,而每個圖片模組只能包含一張圖片。 

請注意: 拖放電子郵件編輯器中的文字模組和自訂RTF文字模組不能包含圖片。 

新增圖片

  • 前往你的內容:

    • 網站頁面:
    • 登陸頁面:
    • 博客:
    • 知識庫:
    • 電子郵件:
  • 將遊標移至內容上方,然後點擊「編輯」。 

請注意:只有.png、.ico、.bmp、.jpg和.gif圖片檔案可以新增至行銷電子郵件


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

在插入影像之前,您可以透過單擊右側面板中影像上的詳細信息來優化影像的加載時間或分辨率。 然後按一下影像最佳化下拉式選單,並選擇最佳化選項: 

    • 高:影像將以更高的解析度載入,但載入時間會增加。
    • 預設值:影像將針對解析度和載入時間進行最佳化。
    • 低:影像將以較低的分辨率載入,但載入時間會減少。 請參閱我們的開發人員文件,深入瞭解如何針對載入時間最佳化頁面。 

編輯圖片

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

在RTF文字模組中編輯圖片 

  • 前往你的內容:

    • 網站頁面:
    • 登陸頁面:
    • 博客:
    • 知識庫:
    • 電子郵件:
  • 將遊標移至內容上方,然後點擊「編輯」。 
  • 在內容編輯器中,按一下影像以顯示影像編輯工具列。
  • 編輯影像:
    • 要調整文字在影像周圍的環繞方式,請單擊內嵌 對齊圖標。 
    • 要調整影像的大小,請單擊寬度和高度箭頭或輸入像素值。 
    • 要調整影像周圍的填充,請單擊間距下拉菜單,然後輸入影像圖標邊緣周圍的像素值。
  • 要從RTF模塊中刪除圖像,請單擊圖像,然後單擊刪除垃圾桶圖標。 
  • 要替換富文本模塊中的圖像,請單擊該圖像,然後單擊替換替換替換圖標並添加新圖像。
  • 若要連結影像、新增替代文字或設定載入行為,請按一下影像,然後按一下鉛筆圖示編輯:
    • 若要新增連結至影像,請在彈出式視窗中按一下「連結至」下拉式選單,然後選擇連結類別。 在下方欄位中輸入連結的目的地。 進一步了解不同類型的連結
    • 在替代文字欄位中,輸入要向搜尋引擎和螢幕閱讀器描述影像的文字。 您還可以在「檔案」工具中將替代文字新增到影像。 新增替代文字可改善網站的輔助功能和搜尋引擎最佳化(SEO)。 請參閱我們的開發人員文件,進一步了解網站無障礙功能。 

請注意:在圖片中新增替代文字不會新增標題文字。 替代文字會影響搜尋引擎排名和協助工具,而標題文字則會在訪客將遊標停留在圖片上方時顯示。 

  • 若要設定圖片載入行為並自訂搜尋引擎的圖片連結類型,請按一下進階。
    • 要設置圖像載入行為,請單擊圖像載入 下拉菜單並選擇一個選項:
      • 延遲:只有當訪客到達頁面的該部分時,才會載入圖片。 這樣可以縮短頁面載入所需的時間,並改善搜尋引擎最佳化。 預設情況下,將使用此設定載入影像。 
      • 瀏覽器預設:影像的載入行為取決於訪客的瀏覽器設定。 
      • Eager :頁面載入後,圖片將立即載入。 
    • 若要自訂影像連結類型,請在「連結類型」區段中選擇一個或多個屬性: 
      • 一般:此連結並非贊助連結。 
      • 不追蹤:此連結未與您的網站關聯。
      • 贊助:此連結是贊助連結或廣告。
      • 使用者產生的內容:此連結會指向使用者產生的內容,例如網誌評論或論壇討論。 
  • 按一下套用以將變更套用至影像。

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

編輯影像模組中的影像

  • 前往你的內容:

    • 網站頁面:
    • 登陸頁面:
    • 博客:
    • 電子郵件:
  • 將遊標移至內容上方,然後點擊「編輯」。 
  • 在內容編輯器中,按一下圖片模組。 
  • 要刪除當前影像,請單擊側邊欄編輯器的影像部分中的刪除。 這將從圖像模塊中刪除當前圖像,但不會從頁面中刪除模塊。 
  • 要替換目前的影像,請單擊側邊欄編輯器的影像部分中的替換,然後添加新影像。 
  • 在替代文字欄位中,輸入要向搜尋引擎和螢幕閱讀器描述影像的文字。 您還可以在「檔案」工具中將替代文字新增到影像。 新增替代文字可改善網站的輔助功能和搜尋引擎最佳化(SEO)。 請參閱我們的開發人員文件,進一步了解網站無障礙功能。 

請注意:在圖片中新增替代文字不會新增標題文字。 替代文字會影響搜尋引擎排名和協助工具,而標題文字則會在訪客將遊標停留在圖片上方時顯示。 

 
  • 若要在不同裝置上設定影像的大小,請按一下「大小」下拉式選單,然後選擇一個選項:
    • 自動調整:影像會縮放大小,以適合正在檢視的裝置。 
    • 確切的高度和寬度:影像將在所有裝置上顯示為相同的大小。
  • 要設置影像大小的限制,請單擊最大大小下拉菜單並選擇一個選 項:
    • 圖片的原始大小:圖片永遠不會大於原始大小。 
    • 自訂:影像永遠不會大於寬度和高度欄位中設定的特定寬度和 高度。 
  • 要設置圖像載入行為,請單擊圖像載入 下拉菜單並選擇一個選項:
    • 瀏覽器預設:影像的載入行為取決於訪客的瀏覽器設定。 
    • 延遲:只有當訪客到達頁面的該部分時,才會載入圖片。 這樣可以縮短頁面載入所需的時間,並改善搜尋引擎最佳化。 預設情況下,將使用此設定載入影像。 
    • Eager :儘快載入圖片。 
  • 若要新增圖片的連結,請在「連結」(選填)欄位中輸入實際連結 網址 。 選取「在新分頁中開啟連結」核取方塊,將訪客引導至新瀏覽器分頁中的實際連結網址。 
  • 若要將變更上線,請點擊右上角的「發佈」或「更新」。