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

在拖放區域中編輯頁面內容

上次更新時間: 一月 20, 2023

套用至:

所有產品和版本

在拖放網頁編輯器中,用戶可以重新排列網頁的不同部分,並將自訂樣式套用到網頁的不同部分。 拖放編輯可用於使用新手模板、部分主題模板和具有拖放區域的編碼模板建立的頁面。 

了解拖放編輯器

拖放區域由模組組成,這些模組是網站內容的塊。 模組可以排列成水平行或垂直欄,然後可以分組成區段。 

透過建立行、欄和區段,您可以一次重新排列或將造型套用到多個模組。 進一步瞭解如何自訂拖放內容的風格。  

  1. 模組:網站內容的個別區塊。 某些模組,如富文本模組,可以包含多種類型的內容。 
  2. 行:一排水平的模組。 您可以將造型套用於整行,或重新排列頁面上的位置。 
  3. 列:多個模組的垂直堆棧。 您可以將造型套用於整個欄位,或重新排列它在頁面的位置。 
  4. 部分:一組多行或一列,涵蓋網頁的全部寬度。 您可以將造型套用於整個部分,或重新排列頁面上的位置。 

edit-drag-and-drop-areas-in-page-editor

整理您的內容

在側邊欄編輯器中,您可以查看內容中的區段、行、欄和模組的概述。 在這裡,您可以重命名、編輯、複製、刪除或隱藏它們: 

  • 瀏覽至您的內容:

    • 網站頁面: 在 HubSpot 帳戶中,進入「行銷」>「網站」>「網站頁面」。
    • 登陸頁面: 在 HubSpot 帳戶中,進入「行銷」>「登陸頁面」。
  • 將滑鼠停留在頁面上,然後按一下[編輯]
  • 在側邊欄編輯器中,按一下內容標籤。 
  • 您可以控制哪些頁面元素在側邊欄編輯器中可見:
    • 若要僅檢視網頁的區段,請按一下全部收起。 這將收起所有行、列和模組,因此只有部分在側邊欄編輯器中可見。 
    • 若要查看網頁上的所有內容,請按一下「全部擴展」。 這將在側邊欄編輯器中顯示所有部分、行、列和模組。 
    • 若要檢視個別頁面元素或容器,請按一下其名稱旁邊的+加號 
    • 若要隱藏元素或容器,請按一下其名稱旁邊的-減去符號 。 
  • 您也可以編輯、重命名、複製、刪除和隱藏頁面元素:
    • 若要編輯元素,請按一下其名稱。 
    • 若要重命名元素,請按一下其名稱旁邊的三個圓點,然後選擇重命名[element]。 在「」對話方塊中,輸入元素的名稱,然後按一下儲存。 
    • 若要複製元素,請按一下其名稱旁邊的三個圓點,然後選擇複製。 這將創建一個與它鄰近的原始元素的完全副本。 
    • 若要刪除元素,請按一下其名稱旁邊的三個圓點,然後選擇刪除。 
    • 若要隱藏模組,請按一下其名稱旁邊的三個圓點,然後選擇隱藏此模組。 這將在頁面預覽中隱藏模組,但不會在側邊欄編輯器中隱藏模組。 若要在頁面上顯示隱藏的模組,請按一下其名稱旁邊的三個圓點,然後選擇顯示此模組。 

使用部分

在拖放編輯器中,您可以透過將模組拖放到空白區段佈局上來建立可重複使用的頁面區段。 開發人員也可以使用開發人員文件建立這些部分。 建立區段後,可以在任何支援拖放編輯的頁面上使用。 包含智能規則的已儲存部分將在新增到頁面時使用這些規則。 

請注意:一次最多只能從拖放編輯器中儲存50個可重用部分。 若要儲存新的可重複使用部分,請刪除現有的可重複使用部分。 

建立區塊

您可以儲存區段,以使其可在使用相同主題的其他頁面上重用。

  • 瀏覽至您的內容:

    • 網站頁面: 在 HubSpot 帳戶中,進入「行銷」>「網站」>「網站頁面」。
    • 登陸頁面: 在 HubSpot 帳戶中,進入「行銷」>「登陸頁面」。
  • 將滑鼠停留在頁面上,然後按一下[編輯]
  • 在內容編輯器中,將鼠標懸停在兩個部分之間,然後按一下+ +圖示。 

add-a-page-section

  • 在右側面板中,按一下佈局標籤,然後選擇部分的 佈局。 

add-blank-layout-to-page

  • 在內容編輯器中,將模組拖放到佈局上方,並將其放置到位。 對您部分的每個模組重複。 

drag-and-drop-onto-layout

  • 將鼠標懸停在該區域上方,然後按一下下拉圖示,然後選擇儲存區域。 

save-a-section

請注意:現有頁面區段和未佈局建立的區段也可以儲存為可重用區段。  


  • 在右側面板中,輸入部分的名稱 和描述,然後按一下儲存。 

添加或刪除部分

  • 瀏覽至您的內容:

    • 網站頁面: 在 HubSpot 帳戶中,進入「行銷」>「網站」>「網站頁面」。
    • 登陸頁面: 在 HubSpot 帳戶中,進入「行銷」>「登陸頁面」。
  • 將滑鼠停留在頁面上,然後按一下[編輯]
  • 在內容編輯器中,將鼠標懸停在兩個部分之間,然後按一下+ +圖示。 

add-a-page-section

  • 在右側面板中,將鼠標懸停在部分上,然後按一下選擇。 從拖放編輯器儲存的區段將顯示在「已儲存」區段下方,而開發人員建立的區段將顯示在「主題」區段下方。  
  • 新增包含智能規則的已儲存區段,將會將這些規則套用至新增的區段。 這些部分將標籤為智慧。 
  • 若要刪除區段,請按一下+加號圖示以新增區段,然後將鼠標懸停在區段上方,然後按一下刪除 刪除圖示。 在「」對話方塊中,按一下刪除。 

add-smart-section

編輯行、欄或區段

  • 在頁面編輯器中,將鼠標懸停在行、欄或部分,然後勾選編輯編圖示。 
  • 若要自訂行、列或部分周圍的填充和邊距,請在側邊欄編輯器中按一下對齊和間距
  • 若要編輯區域的背景,請按一下側邊欄編輯器中的背景然後選擇一個造型選項:  
    • 無: 移除任何背景色彩或影像。
    • 色彩: 設定單一色彩作為背景。 輸入 十六進制值或按 一下選取器並選擇一種色彩,然後輸入透明度值。 
    • 影像:設置影像作為背景。 若要新增影像,請按一下上傳 以從電腦中新增影像,或按一下 瀏覽影 以從 檔案中選擇影像。 
    • 漸層:設定兩種顏色一起褪色作為背景。 按一下方向下拉選單,然後選擇漸層方向。 對於每種色彩,輸入 十六進制值或按 一下色彩選取器並選擇一種色彩,然後輸入透明度值。 
edit-background-for-a-page-section
  • 若要複製現有元素,請將鼠標懸停在該元素上,然後按一下複製抄送複製圖示
  • 若要從頁面中移除元素,請將h移至該元素上方,然後按一下 刪除刪除圖示。 

edit-column-icons

新增和編輯模組

  • 瀏覽至您的內容:

    • 網站頁面: 在 HubSpot 帳戶中,進入「行銷」>「網站」>「網站頁面」。
    • 登陸頁面: 在 HubSpot 帳戶中,進入「行銷」>「登陸頁面」。
  • 將滑鼠停留在頁面上,然後按一下[編輯]
  • 在內容編輯器中,按一下側邊欄編輯器中的模組,然後將它拖動到頁面上的位置。 
  • 若要調整模組的寬度,請按一下列之間的垂直分隔符,然後將其拖動到位。

adjust-column-size-in-drag-and-drop-editor

  • 若要自訂模組中的內容,請將鼠標懸停在模組上,然後按一下圖示
    • 編輯編輯模組:編輯模組內容
    • 製複製模組:在頁面上複製此模組。
    • 刪除 模組:從頁面中移除此模組。

edit-module-icons

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