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

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

上次更新時間: 四月 17, 2023

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

所有產品和版本

拖放頁面編輯器中,用戶可以重新排列並將自訂樣式套用到頁面的不同部分。 使用初學者範本、某些主題範本和具有拖放區域的編碼範本建立的頁面,可使用拖放編輯。 

了解拖放編輯器

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

透過建立行、列和區段,您可以同時重新排列或應用樣式到多個模組。 了解更多關於自訂拖放內容的樣式。  

  1. 模塊:網站內容的單個區塊。 某些模組,例如富文本模組,可以包含多種類型的內容。 
  2. Row :水平的一排模塊。 您可以將樣式套用到整行,或重新排列其在頁面上的位置。 
  3. Column :多個模組的垂直堆疊。 您可以將樣式套用到整個欄位或重新排列其在頁面上的位置。 
  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
  • 若要複製現有元素,請將鼠標懸停在元素上,然後按一下重複的抄送複製圖示。
  • 若要從頁面中移除元素,在元素上方按一下[刪除]除圖示。 

edit-column-icons

新增及編輯模組

  • 瀏覽至您的內容:

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

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

  • 若要自訂模組內的內容,請將遊標停留在模組上,然後按一下圖示:
    • edit編輯模組:編輯模組內容
    • clonduplicate Clone module :在頁面上複製此模組。
    • delete刪除模塊:從頁面中刪除此模塊。

edit-module-icons

這篇文章有幫助嗎?
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助