知識庫

編輯行動呼籲的大小(舊版)

作者:HubSpot Support | Nov 21, 2022 11:55:45 AM

使用內建的大小調整選項和自訂CSS調整CTA (舊版)的大小。 為圖片CTA上傳圖片時,你可能需要考慮視網膜最佳化

若要進一步自訂行動呼籲,請瞭解如何使用CSS將自訂樣式新增至行動呼籲(舊版)。 如果你要將行動呼籲新增至電子郵件或範本,請了解如何將行動呼籲置中(舊版)

編輯你的行動呼籲(舊版)大小 

你可以手動調整行動呼籲的大小,或使用自訂CSS自動填滿行動呼籲容器或模組的寬度。 如果要 在非HubSpot網站上 嵌入i mage CTA ,則可能需要在樣式表中應用其他CSS聲明(例如width: 100%; ) ,以使圖像CTA響應。

若要編輯按鈕的大小,請按照以下步驟操作: 
  • 點擊左上角的下拉式選單,然後選擇行動呼籲(舊版)。
  • 將遊標懸停在行動呼籲上,然後點擊「操作 」>「編輯」。
  • 在滑入式面板中,按一下進階選項。
  • 如要手動調整自訂行動呼籲的大小:
    • 清除適合文字核取方塊。 這將刪除應用的自動調整大小。
    • 在按鈕填充區段中,輸入按鈕寬度和按 鈕高度字段的大小值。 
    • 按一下下一步>。 
    • 按一下「儲存」。然後按一下「完成」。 
  • 若要讓自訂行動呼籲填滿其容器或模組的整個寬度,請按照以下步驟
    • 清除「自動調整大小」核取方塊。 
    • 在「自訂CSS」欄位中,輸入您的自訂CSS
    • 將width設定為width: 100%;
    • 按一下下一步>。 
    • 按一下「儲存」。然後按一下「完成」。 

 

什麼是視網膜優化?

如果您的收件人在現代版本的Apple Mail和iOS郵件中檢視行動呼籲,視網膜最佳化會讓您的行動呼籲圖片在網站頁面和電子郵件中更清晰; Outlook或Gmail等網路郵件服務不支援此功能。 

當您上傳的影像至少是CTA所需大小的兩倍時,將支援視網膜最佳化,類似於網際網路上所有影像的視網膜支援運作方式。 另請注意以下事項: 

  • 如果您要建立的CTA為400像素x 100像素,則上傳的圖片必須為800像素x 200像素,才能支援@ 2x像素密度顯示。
  • 行動呼籲支援新增4倍版本。 舉例來說,如果你要建立的CTA為400像素x 100像素,你可以上傳1600像素x 400像素的圖片。
  • 系統會自動在你的網站上顯示行動呼籲,並提供1x、2x、3x和4x版本的srcset屬性(如有)。
  • 如果上傳的圖片尺寸與行動呼籲顯示的大小相同,則無法支援Retina。 例如,如果為400px x 100px的CTA上傳了400px x 100px的圖片