知識庫

在 HubSpot 內容中使用圖像

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

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

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

新增圖片

  • 導航到您的內容:

    • 網址:}
    • 登陸頁
    • 部落格
    • 知識庫
    • 電子郵件:
  • 點擊您的內容的名稱

請注意:僅 . png、.ico、.bmp、.jpg 和 .gif i圖片檔案可以加入行銷電子郵件中


  • 插入影像:
    • 若要將圖像新增至富文本模組,請按一下富文本模組,然後按一下富文本工具列上的insertImage ici映像圖示
    • 若要將圖像新增至圖像模組,請按一下圖像模組,然後按一下佔位符圖像上方側邊欄編輯器中的取代
  • 選擇影像:
    • 若要插入現有影像,請按一下右側面板中的影像
    • 若要從電腦或透過檔案 URL 上傳新圖像,請按一下右側面板中的新增圖像。若要使用Canva 的編輯工具建立新圖像,請按一下「使用 Canva 設計」 。然後單擊圖像將其插入。
  • 在插入圖像之前,您可以優化圖像的載入時間或解析度。在右側面板中,將滑鼠懸停在圖像上並按一下「詳細資料」
  • 然後點擊圖像優化下拉式選單並選擇優化選項
    • :圖像將以更高的解析度加載,但加載時間會增加。
    • 預設:圖像將針對解析度和載入時間進行最佳化。
    • :圖像將以較低的解析度加載,但加載時間會縮短。在我們的開發人員文件中了解有關優化頁面載入時間的更多資訊。

編輯影像

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

在富文本模組中編輯圖像

  • 導航到您的內容:

    • 網址:}
    • 登陸頁
    • 部落格
    • 知識庫
    • 電子郵件:
  • 點擊您的內容的名稱
  • 在內容編輯器中,按一下圖像以顯示圖像編輯工具列。
  • 編輯圖片:
    • 若要調整文字圍繞圖像的環繞方式,請按inline對齊圖示
    • 若要調整影像的大小,請按一下寬度和高度箭頭或輸入像素值
    • 若要調整影像周圍的填充,請按一下「間距」下拉式選單,然後輸入影像圖示邊緣周圍的像素值
  • 若要從富文本模組中刪除圖像,請按一下該圖像,然後按一下delete垃圾桶圖示
  • 若要取代富文本模組中的圖像,請按一下該圖像,然後按一下replace repl取代圖示並新增圖像。
  • 若要連結圖像、新增替代文字或設定載入行為,請按一下圖像,然後按一下鉛筆圖示edit:
    • 要新增圖像鏈接,請單擊彈出框中“鏈接到”下拉式選單,然後選擇鏈接類別。在下面的欄位中,輸入連結的目的地。了解有關不同類型連結的更多資訊。
    • 替代文字欄位中,輸入文字以向搜尋引擎和螢幕閱讀器描述圖像的內容。您也可以在文件工具中向圖像添加替代文字。添加替代文字將提高網站的可訪問性和 SEO。在我們的 開發人員文件中了解有關網站可訪問性的更多資訊。

請注意:向圖像添加替代文字不會添加標題文字。替代文字會影響搜尋引擎排名和可訪問性,而標題文字會在訪客將滑鼠懸停在圖像上時顯示。

  • 若要設定圖片載入行為並自訂搜尋引擎的圖片連結類型,請按一下進階
    • 要設定圖像加載行為,請點擊圖像加載 下拉式選單並選擇一個選項
      • 惰性:僅當訪客到達頁面的該部分時才會載入圖片。這減少了頁面載入所需的時間並改進了 SEO 。預設情況下,圖像將使用此設定加載。
      • 瀏覽器預設:圖像的載入行為由訪客的瀏覽器設定決定。
      • Eager:頁面載入後影像就會載入。
    • 若要自訂圖像連結類型,請在連結類型部分中選擇一個或多個屬性
      • 常規:此連結不受贊助。
      • 不關注:此連結與您的網站無關。
      • 贊助:此連結是贊助連結或廣告。
      • 用戶生成的內容:此連結指向用戶生成的內容,例如部落格評論或論壇討論。
  • 點擊“應用”將更改應用到圖像。

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

在圖像模組中編輯圖像

  • 導航到您的內容:

    • 網址:}
    • 登陸頁
    • 部落格
    • 電子郵件:
  • 點擊您的內容的名稱
  • 在內容編輯器中,按一下圖像模組
  • 若要刪除目前影像,請按一下側邊欄編輯器的「影像」區段中的「刪除」 。這將從圖像模組中刪除當前圖像,但不會從頁面中刪除該模組。
  • 若要取代目前影像,請按一下側邊欄編輯器的「影像」區段中的「取代」 ,然後新增影像
  • 替代文字欄位中,輸入文字以向搜尋引擎和螢幕閱讀器描述圖像的內容。您也可以在文件工具中向圖像添加替代文字。添加替代文字將提高網站的可訪問性和 SEO。在我們的 開發人員文件中了解有關網站可訪問性的更多資訊。

請注意:向圖像添加替代文字不會添加標題文字。替代文字會影響搜尋引擎排名和可訪問性,而標題文字會在訪客將滑鼠懸停在圖像上時顯示。

 
  • 若要在不同裝置上設定影像的大小,請按一下「大小」下拉式功能表並選擇選項
    • 自動調整:影像的大小將縮放以適合其檢視的裝置。
    • 精確的高度和寬度:影像將在所有裝置上顯示為相同的尺寸。
  • 要設定圖像大小的限制,請點擊最大大小下拉式選單並選擇一個 選項
    • 影像的原始尺寸:影像永遠不會大於其原始尺寸。
    • 自訂:影像永遠不會大於寬度高度欄位中設定的特定寬度和高度。
  • 要設定圖像加載行為,請點擊圖像加載 下拉式選單並選擇一個選項
    • 瀏覽器預設:圖像的載入行為由訪客的瀏覽器設定決定。
    • 惰性:僅當訪客到達頁面的該部分時才會載入圖片。這減少了頁面載入所需的時間並改進了 SEO 。預設情況下,圖像將使用此設定加載。
    • Eager :影像盡快載入。
  • 若要新增圖像鏈接,請在連結(可選)欄位中輸入目標 URL 。勾選「在新分頁中開啟連結」複選框可將訪客引導至新瀏覽器標籤中的目標 URL。
  • 若要使變更生效,請按一下右上角的發布更新