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

在HubSpot模板上居中表單

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

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

行銷 Hub Professional, Enterprise
CMS Hub Professional, Enterprise
舊版 Marketing Hub Basic

您可以使用水平空格模板或自定義CSS在HubSpot模板上居中表單。

使用水平分隔器模塊

  • 在你的 HubSpot 帳戶中,瀏覽「行銷」>「檔案和範本」>「設計工具」。
  • 按一下尋找工具中的範本名稱以編輯。
  • 在右側的檢查器中,按一下+新增以插入兩個新的水平間隔模組;一個在表單模組的左側,另一個在右側。
center-a-form

 

使用自定義CSS

  • 在你的 HubSpot 帳戶中,瀏覽「行銷」>「檔案和範本」>「設計工具」。
  • 在尋找器中,我將CSS檔案放在資料夾中,然後按一下它在編輯器中選擇它。
  • 添加以下代碼以將網站上的所有表單居中:
/*要在其模組中對中表單,並應用最大寬度*/ form.hs-form, .hs_cos_wrapper .form-title { max-width: 600px;  display: block;  margin: 0 auto; } /*要在表單模組中對中表單標題*/ .hs_cos_wrapper .form-title { text-align: center; } /*對中表單提交按鈕*/ .hs_submit { text-align: center; } 
  • 如果要將特定表單居中,您可以在範本上的表單模組中新增 自訂類別,然後調整CSS以僅適用於具有該類別的模組。 例如,如果您在模板上的表單模組中新增自訂類中心表單,您的CSS將如下所示:
/*要將表單放在其模組中,並套用最大寬度*/ form.hs-form, .center-form .hs_cos_wrapper .form-title { max-width: 600px;  display: block;  margin: 0 auto; } /*要將表單標題放在表單模組中*/ .center-form .hs_cos_wrapper .form-title { text-align: center; } /*要將表單提交按鈕放在中心*/ .center-form .hs_submit { text-align: center; }
  • 按一下右上角的「發佈變更」。
這篇文章有幫助嗎?
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助