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

使用入門模板建立頁面

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

套用至:

所有產品和版本

你可以使用新手模板建立簡單的網站或登陸頁面。 本文說明如何建立新頁面、自訂頁面設計,以及如何使用新手模板發佈頁面。 

請注意: 新手模板 支援智慧內容、自訂模組、個性化設定、對富文本模組中的源代碼的存取、受密碼保護的頁面,或模板互換和對標題HTML的存取等進階選項。


使用入門模板建立頁面

若要使用新手模板建立新的登陸頁面:

  • 瀏覽至您的內容:

    • 網站頁面: 在 HubSpot 帳戶中,進入「行銷」>「網站」>「網站頁面」。
    • 登陸頁面: 在 HubSpot 帳戶中,進入「行銷」>「登陸頁面」。
  • 在右上角,按一下建立下拉菜單,然後選擇網站頁面登陸頁面。 
  • 在模板選擇畫面上, 活躍主題的模板 會出現在頁面頂部,而所有其他模板會出現在底部的「 其他模板 」部分。 點擊 模板如果你尚未選擇活躍的主題,系統會提示你選擇一個主題,或點擊 跳至模板 以選擇現有模板。
  • 若要使用所選範本建立頁面,請按一下右上角  選擇此範本。 若要在手機或桌面上預覽網頁,請按一下預覽。 

select-a-template-to-create-page

編輯頁面內容

新手模板包含稱爲模組的網站內容的塊。 您可以將這些模組排列成水平行或垂直列。

您可以將行和列分組成元素的區段。 透過將元素分組在一起,您可以將背景風格套用到網頁的整個區域。 您也可以拖放這些元素以重新排列頁面布局。 進一步了解如何在拖放區域中編輯網頁內容

若要自訂網頁在行動裝置上的外觀  按一下側欄編輯器中的行動編輯行動圖示

edit-mobile-version-of-a-page

自定義字體、顏色和按鈕

若要自訂新手模板的預設樣式,請按一下側邊欄編輯器中的「主」標籤。 您也可以為網頁的特定行、欄或部分自訂背景色彩或影像

Edit-theme-options-in-starter-template

 

排版

在「版式」部分,編輯套用於網頁正文和標題的字體與字型。 支持所有Google字體
  • 正文文字:為網頁正文自訂字體、字體大小和字體色彩。
    • 按一下正文文字下拉選單,然後選擇字體
    • 按一下箭頭鍵以調整字體大小。
    • 按一下色彩選取器,然後選擇字體的色彩。 若要設定自訂色彩,請按一下「進階」標籤並輸入十六進制值。 
  • 標題:使用標題標籤自訂模組中文字的字體與色彩。
    • 按一下標題下拉選單,然後選擇字體
    • 按一下色彩選取器,然後選擇字體色彩。 若要設定自訂色彩,請按一下「進階」標籤並輸入十六進制值。 
  • 連結文字:自訂套用於網頁連結的字體與色彩。
    • 按一下連結文字下拉選單,然後選擇字體
    • 按一下色彩選取器,然後選擇連結色彩。 若要設定自訂色彩,請按一下「進階」標籤並輸入十六進制值。 
    • 按一下下拉式選單,然後選擇要套用至連結文字的風格
    • 當連結被懸停、點擊和已被訪問時,請自訂連結的色彩和透明度: 
      • 連結懸停色彩:點擊色彩選取器,並選擇連結 色彩,當訪客懸停在連結上時。 若要變更色彩的透明度,請在文字欄位中輸入百分比值。 
      • 活躍連結色彩:按一下色彩選取器,並選擇結時的連結彩。 若要變更色彩的透明度,請在文字欄位中輸入百分比值。 
      • 瀏覽過的連結色彩:按一下色彩選取器,然後選擇色彩,當該連結已被訪客點擊時。 若要變更色彩的透明度,請在文字欄位中輸入百分比值。 

edit-link-text

表單和按鈕

在「表單和按鈕」部分,自訂簡單按鈕和表單提交按鈕在頁面上的風格。
  • 按鈕背景色:自訂套用於按鈕背景的色彩。
    • 輸入十六進制值或按一下色彩選取器並選擇色彩。 
    • 若要設定按鈕背景色彩的透明度,請在欄位中輸入百分比值 。 
  • 按鈕文字色彩:自訂套用於頁面按鈕文字的色彩。
    • 輸入十六進制值或按一下色彩選取器以選擇文字的色彩。
    • 若要設定按鈕背景色彩的透明度,請在欄位中輸入百分比值 。 
  • 按鈕角半徑:自訂頁面上的按鈕的圓形或方形顯示方式。
    • 在欄位中輸入,或按一下滑桿並拖動到新位置。 
    • 數值越高,頁面上的按鈕邊緣就越圓,而數值為零表示按鈕是矩形的。

請注意: HubSpot建議根據「設」標籤中的設定保持一致的色彩、字體和風格。 您可以在左側面板的「選項」標籤中覆蓋個別模組的預設樣式


預覽並發佈你的頁面

在網頁上線之前,按一下右上角的「預覽」,以測試網頁在桌面和行動裝置上的顯示方式。 滿意頁面預覽後,按一下右上角 發佈。 

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.