header-logo
了解如何以 Wix 建立網站和商家。
了解如何建立、管理並維護 Wix 網站。
管理訂閱、方案與請款單。
處理業務,與會員連繫。
學習如何購買、連結或轉移網站網域。
以進階功能提升效率。
尋求解決方法,了解已知問題,或聯絡我們。
placeholder-preview-image
以課程和教學加強技能。
學習網頁設計、行銷等範疇的秘訣。
學習如何提升來自搜尋引擎的自然網站流量。
以全端平台建立自訂網站。
與專家配對,幫助實現目標。
placeholder-preview-image

Wix Studio 編輯器:新增與管理區段

4 分鐘
區段是每個頁面的基礎區塊。使用區段可將相關內容整理在一起,讓頁面看起來專業且結構分明。
可根據需求在每個頁面新增多個區段。您可以選擇空白區段、線框或完全可自訂的預先設計區段。區段會橫跨瀏覽器寬度,且可隨意設定高度。
建立全域區段:
透過 將其設定為全域,讓同一個區段顯現在多個頁面上。

新增線框與預先設計的區段

我們提供大量現成且完全回應式的區段,以加速創作過程。只需選擇所需的區段,並根據客戶的樣式進行自訂。若主要需要版面配置而非設計方面的協助,請改為選擇空白線框。

若要新增框架或預先設計的區段:

  1. 點擊編輯器左側的 新增元件
  2. 點擊 區段 線框
  3. 點擊類別即可查看可用設計。
  4. 將區段拖曳至頁面。
  5. 根據需求自訂區段:
    • 點擊元件即可自訂內容。
    • 變更背景
    • 圖片文字取代為自有內容。
GIF 顯示 Wix Studio 編輯器中的「新增元件」面板,以及「區段」與「線框」索引標籤中的可用設計

新增空白區段

在畫布上作業時,可以快速新增空白區段。將滑鼠游標懸停在任何區段的頂部或底部,然後點擊 + 新增區段。接著即可決定要從頭開始設計、套用格線版面配置,還是使用現成的設計。

若要新增空白區段:

  1. 前往相關頁面。
  2. 將滑鼠游標懸停在相關區段的頂部或底部,然後點擊 + 新增區段
  3. 選擇開始設計的方式:
    • 設計好的區段:選擇預先設計好的區段,並根據客戶需求進行自訂。
    • 格線版面配置:選擇具有多個儲存格的格線來整理內容。
    • 新增元件:從在空白區段中新增元件開始。
空白新區段的螢幕截圖,顯示可以點擊並套用的格線儲存格版面配置
儲存設計以供未來使用:
在編輯器中選擇區段並點擊 尚有...項操作 圖示 。接著點擊 儲存為資產。這會 儲存設計 並使其顯示在「新增元件」面板(資產索引標籤)中。

使用儲存格整理區段

儲存格 新增至區段以建立回應式且結構化的版面配置。將元件保留在不同的儲存格中可確保其在所有畫面中都留在原位。選擇版面配置,然後將元件移動到儲存格中 ── 您稍後可以隨時拆分儲存格或新增儲存格。

若要對區段套用格線:

  1. 在編輯器中選擇相關區段。
  2. 點擊區段頂部的 空白 下拉選單。
選取區段時開啟的工具列螢幕截圖,其中包含可用版面配置的下拉式選單
  1. 選擇版面配置:拼貼等。
    提示:您可隨時從下拉式選單中更改版面配置,這不會移動您的元件。
  2. 將元件拖曳到相關儲存格。
  3. (選填)根據需求 自訂區段格線 ── 新增儲存格、拆分現有儲存格、在儲存格之間新增間隙等。
想要恢復為沒有格線的區段嗎?
右鍵點擊各個儲存格並選擇 刪除

重新排序頁面區段

為客戶建構網站時,您可能會決定稍微調整內容的結構與組織。這正是區段發揮作用之處;您可隨時在畫布上快速移動內容。

若要重新排列畫布上的區段:

  1. 在編輯器中選擇相關區段。
  2. 點擊區段上的「尚有...項操作」圖示 尚有...項操作
  3. 點擊 向上移向下移
在 Studio 編輯器畫布上選擇區段,並點擊「尚有...項操作」圖示即可向上或向下移動
已在較小的斷點上更改區段順序?
您可以隨時重新套用目前在桌面版設定的順序。前往 圖層 面板,點擊 頁面 旁的 尚有...項操作 圖示 ,然後選擇 在所有斷點上使用區段順序

The Layers panel, selecting a page and clicking to apply the desktop breakpoint order to all other breakpoints

刪除區段

您可隨時刪除區段。這會從所有斷點的頁面中刪除該區段。
請注意:
無法刪除包含商店、Wix Events 或部落格等應用程式的區段。

若要刪除區段:

  1. 在編輯器中選擇相關區段。
  2. 點擊區段上的「尚有...項操作」圖示 尚有...項操作
  3. 點擊 刪除
想要改為隱藏區段嗎?
點擊 不顯示 即可在目前的 斷點 隱藏該區段。您可在 圖層面板 中找到隱藏的區段,也可在該處取消隱藏。
編輯器中已選擇區段的螢幕截圖,顯示刪除方法

常見問題

點擊下方問題以瞭解更多資訊。