使用拖拉版型設計網站版面與首頁區塊

使用拖拉版型編輯器建立與調整官網外觀，包含全站設定、頁面內容編輯、商品頁面配置等。

| 拖拉版型

CYBERBIZ 的**拖拉版型**（Drag-and-Drop Layout）是一項直覺化的官網設計工具，其核心優勢在於**不需要編寫程式碼**，商家僅需透過滑鼠拖曳、點選與設定，即可快速調整官網前台的視覺版面與功能配置。

以下為拖拉版型的主選單、功能介紹與操作教學：

如何進入拖拉版型設定¶

1. 進入路徑：管理後台 > 「網站外觀」 > 「套版主題管理」。
2. 啟動編輯：確認目前使用的是拖拉版型（若非，可至「瀏覽更多主題」下載）後，點選「網站設定」即可開始編輯。

全站共用設定¶

以下設定會套用至官網的所有頁面：

導覽列¶

操作位置：管理後台 > 網站外觀 > 套版主題管理 > 導覽列。

可自訂網站 Logo 圖案及其在電腦版的高度。樣式可選「預設」、「併排置左」或「併排置右」，並支援設定搜尋欄位的開關。

頁腳¶

支援綁定自定義選單、填寫聯絡資訊、自訂文字介紹，以及開啟社群媒體（Facebook/Instagram/LINE/YouTube）的圖示連結。

彈窗廣告¶

可依行銷需求設定圖片、影片或互動遊戲作為首頁彈窗。

顏色與圖示設定¶

可變更全站強調色；此外可設定網站圖示（Favicon）、轉貼連結圖片（OG Image）及導覽列的 Icon 樣式。

首頁區塊功能¶

首頁是由多個「區塊」組成，您可以自由新增、刪除或排序以下內容：

1. 輪播素材：設定多張廣告圖片，支援電腦/平板/手機分開上傳，並可調整圖片停留秒數。
2. 商品分類櫥窗：可展示全部商品或指定分類（自訂/條件分類）的商品，並自訂展開方式（往下展開或左右滑動）與排列個數。
3. 自訂排版設計（進階）：此區塊允許在一橫列中並排顯示多個元件（如圖片、影片、跑馬燈、單個商品或 HTML），商家可透過設定「版面螢幕占比」（如 50%+50%）來決定寬度。
4. 主打商品：僅綁定 1 件重點商品，直接在首頁顯示款式選單、數量選擇器與購買按鈕，藉此提升轉換率。
5. 折疊內容：設計官網 FAQ 或購物須知，採單列區塊點擊展開的設計。
6. 自訂 HTML：供進階用戶貼入語法，例如嵌入 Instagram 貼文牆（elfsight 應用）。

商品頁面與標籤強化功能¶

拖拉版型針對商品展示提供了更細緻的開關功能：

其他頁面管理¶

除了首頁，商家還可以針對以下頁面進行個別設定：

• 商品群組頁面：設定分類頁左側的篩選選單及每頁商品顯示數量。
• 部落格頁面：調整列表頁的每頁文章數、精選文章來源，以及單篇文章頁的版面內容。
• 其他：包含 404 錯誤頁面（更換圖片）、搜尋結果頁與客服頁面。

拖拉版型功能說明¶

拖拉版型（Drag-and-Drop） 讓商家無需撰寫程式碼，即可透過圖形化介面直覺地建立與調整官網外觀。

拖拉版型編輯器介面總覽¶

進入與基本設定¶

• 進入路徑：前往後台 網站外觀 > 套版主題管理，確認使用拖拉版型（拖拉版型標籤）後點選 網站設定。

• 全站共用設定：

  • 導覽列：可設定選單排列樣式（預設/併排置左/併排置右）、背景是否透明，以及次選單是否同步展開。瞭解 如何設定選單與導覽列。
  • 彈窗廣告：可設定圖片、影片、互動遊戲或排程跑馬燈廣告。
  • 頁腳：提供「上下」或「左右」排序樣式，並可開啟 社群媒體圖示 的顯示與連結。瞭解 如何設定頁腳。
  • 顏色設定：可一鍵變更全站的主色調、強調色（如標籤顏色）及字體顏色。
  • 全站設定：可設定 favicon、網站 Logo、字型、網站 SEO、商品相關設定及商品標籤。

彈窗廣告¶

商家可以根據行銷目的，選擇以下幾種內容形式：

• 圖片彈窗：商家可分別上傳電腦版、平板版與手機版圖片（電腦版為必填），並設定圖片點擊後導向的網址。

• 影片彈窗：目前支援嵌入 YouTube 影片 連結進行展示。

• 互動遊戲：可將後台設定好的「輪盤遊戲」或「紅包抽獎」放入彈窗中，增加趣味性並發放紅利或優惠券（此功能為官網會員專屬，需登入才可參與）。

• 排程跑馬燈：可在彈窗內載入預先製作好的跑馬燈內容，達成自動化更新廣告圖的需求。

顏色設定¶

商家可以針對全站的基礎視覺元素進行定義：

• 主色調與文字顏色：可一鍵變更全站的主色調顏色及全站字體顏色。

• 強調色：這是最重要的設定之一，會自動套用於系統多個動態 UI 元素。

全站設定¶

提供商家集中控管官網的基礎視覺識別、搜尋引擎優化（SEO）、全域商品顯示行為以及網站安全防護等核心設定。

視覺識別與品牌資產¶

• 網站圖示設定：

  • Favicon： 設定顯示於瀏覽器分頁標籤上的小圖示。
  • OG Image (轉貼連結預設圖片)： 設定網站連結分享至 Facebook 或 LINE 時顯示的預設縮圖。

• 導覽列圖示： 系統預設 3 種樣式，商家亦可上傳自定義圖示檔案。

• 字型設定： 調整全站網頁所套用的字體樣式。

網站 SEO 與安全保護¶

• SEO 設定： 可定義網站的 標題、簡述 與 關鍵字，優化搜尋引擎對網站的收錄與排名。若標題欄位留空，系統會預設以商店名稱作為標題。

• 網頁鎖右鍵： 勾選可禁止使用者透過點擊滑鼠右鍵，自行下載圖片或複製文字，保護原創內容。

全域商品顯示行為¶

商家可統一設定商品在各列表頁與詳細頁的呈現方式：

• 商品標語： 商品特色或促銷標語。

• 商品色票小圖*： 可開啟在官網前台顯示商品顏色款式小圖。

• 銷售數量： 可開啟顯示商品的 已銷售數量。

• 開賣時間*： 針對設定為尚未上架的商品，可開啟顯示商品的 開賣倒數時間。

• 價格區間： 可勾選顯示商品 價格區間，開啟後前台會自動隱藏原有的 定價 標籤。

• 商品款式選單： 可設定前台商品款式顯示方式為下拉選單或是按鈕。

• 商品影片設定*： 若商品有設定影片，可指定影片顯示在圖片彈窗的第一格或最後一格。

• 商品購買數量上限： 設定每個款式商品可以被加入到購物車中的上限。

• 商品圖游標懸停效果：設定游標移動到商品圖片上方的效果，包括顯示加入購物車按鈕、圖片切換、陰影/邊框強調、放大效果。

• 折扣貼紙*： 當任一款式售價金額低於定價時會顯示此折扣貼紙於商品圖片左上方位置。

動態標籤設定 (商品標籤)¶

系統會根據特定條件自動為商品附上標籤，並依據固定的優先順序由左至右排列：

• 定期定額標籤： 商品綁定定期定額活動時顯示。

• 特價標籤： 當商品售價低於定價時顯示。

• 缺貨標籤： 商品庫存為 0 且設定為停止銷售時顯示。

• 自定義標籤*： 商家可設定最多 5 組 自定義標籤（支援文字或圖片類型），並透過與後台商品標籤關聯來觸發顯示。

• 備註：這些標籤的底色通常套用「顏色設定」中的「強調色」。

首頁與頁面內容編輯¶

商家可點選 新增區塊 來組合多種功能模組，並透過滑鼠拖拉調整順序。點擊 區塊名稱可進入相關編輯頁面。

實際選項依照方案跟功能設定可能有所不同。

輪播素材¶

透過多張圖片輪替展示，吸引消費者注意力並推廣重要活動。

點擊「素材」文字即可進入編輯頁面。

• 圖片上傳：支援分別上傳 電腦版、平板版與手機版 的圖片素材。

• 圖片連結：點開下拉選單可選擇要連結的項目，支援官網內部的商品頁、分類頁、行銷活動頁，或自行輸入 外部連結。

• 圖片替代文字 (ALT)：商家應務必填寫圖片替代文字，此舉有助於 優化 SEO 搜尋引擎排名。

• 刪除素材：若不再需要該張圖片，可點擊「移除素材」將其刪除。

版面細節設定 (其他版面設計)¶

除了圖片本身，商家可以微調輪播的呈現方式：

• 圖片停留秒數：設定每張圖片在自動跳至下一輪之前所停留的時間（秒）。

• 圖片切換速度：設定圖片切換的速度，數值越大代表切換速度越慢（秒）。

• 圖片數量與間距：可設定每一輪顯示的圖片張數；若設定多張（2張以上），可調整圖片之間的間距。

  

• 版面邊距：可分別設定電腦版與手機版的 左右外邊距 及 底部外邊距，確保圖片在不同裝置上比例適中。

橫幅廣告¶

• 圖片上傳：可分別上傳電腦版、平板版與手機版的圖片，確保在不同裝置上都能完美呈現。

• 圖片連結：點開選單可選擇連結至特定商品、分類群組、行銷活動頁，或設定 外部連結。

• 按鈕設定：可選擇是否開啟按鈕，並自訂按鈕文字與位置（中上、置中、中下）。

• 版面邊距：可針對電腦版與手機版分別設定左右外邊距及底部外邊距，調整與其他區塊的距離。

商品分類¶

商品分類可讓商家設計商品櫥窗，展示特定分類商品群。

• 標題：輸入商品櫥窗區塊的名稱。

• 選擇商品分類：可選「展示全部商品」、「指定自訂分類」或「指定條件分類」。

• 配置展示規則：

  • 商品數量上限：建議設在 36 個以內 以維持網站載入速度。
  • 商品展開：可選擇「往下展開」或「左右滑動」。
  • 商品欄數：電腦版可設每排 2~6 個；手機版（含平板）為 1~3 個。
  • 商品排列：可選擇「置左」、「置中」、「置右」排列。
  • 文字排列：可選擇「置左」、「置中」、「置右」排列。
  • 版面外邊距：可設定左右外邊距、底部外邊距。電腦版與手機版(手機版包含平板版)可分開設定。
  • 電腦版分類樣式：提供「預設」、「顯示部分內容」、「全顯示」三種呈現風格。
  • 商品圖游標懸停效果：設定滑鼠移動到商品圖片上顯示的效果，提供 「快速加入購物車按鈕」、「圖片切換」、「陰影/邊框強調」、「放大效果」。

影片設定¶

• 標題： 輸入影片標題。

• 影片連結：僅支援 YouTube 影片連結格式。

• 自動播放：開啟後，訪客瀏覽至頁面影片區塊時影片將自動播放。

• 隱藏外框：當影片開啟自動播放，且啟用隱藏外框，該 YouTube 無法暫停影片。

• 重複播放：開啟後，影片播放結束時將自動返回起始點重新播放，形成無間斷循環。

• 版面外邊距：可設定左右外邊距、底部外邊距。電腦版與手機版(手機版包含平板版)可分開設定。

分頁頁籤¶

在首頁展示多個部落格群組，讓消費者能透過頁籤切換快速瀏覽不同主題的文章。

• 新增區塊： 點擊「新增部落格群組」，商家可以挑選預先在「部落格管理」中建立好的主題分類放入頁籤中。

• 即時預覽： 在設定過程中，商家可以透過編輯器右方的畫面 即時查看 頁籤的呈現樣式與切換效果。

• 版面設計： 在「其他版面設計」選項中，商家可以針對該區塊的間距、外邊距、欄數等視覺細節進行微調。

自訂排版設計¶

商家可在同一個橫列中新增多個不同類型的素材元件，並設定各元件的顯示比例與排列順序，以調整該橫列的版型配置。

• 圖片： 可分別上傳 電腦版、平板版與手機版 圖片，並設定圖片連結、替代文字 (ALT) 及版面螢幕占比。

• 影片： 僅支援 YouTube 影片 連結。商家需將影片上傳至 YouTube 後，在此貼上網址並設定顯示比例。

• 排程跑馬燈： 商家可從預先建立好的「跑馬燈進階設定」群組中選擇欲展示的跑馬燈，並設定其螢幕占比。

• 自訂 HTML： 支援輸入自定義代碼。

  注意：若代碼與網站語法不相容可能導致畫面異常，建議謹慎使用。

• 商品： 商家可挑選 單個商品 展示，並設定「電腦版商品分類樣式」。

  限制： 此區塊僅適用於 2025 年 9 月 4 日後建立的一頁式商店；若商店在此日期前建立，請勿使用此商品區塊，以免產生前台顯示錯誤。

其他排版細節設定

在「其他版面設計」選項中，商家可以進行以下微調：

• 邊距設定： 分別設定電腦版與手機版（含平板）的 左右外邊距 與 底部外邊距。

• 區塊間距： 調整電腦版中並排素材之間的間隔距離。

• 行動裝置排版： 針對平板與手機，可設定排版方式為「單個一列」或「兩個一列」。

圖文介紹¶

區塊與圖片設計

商家可在此設定圖片的呈現方式與位置：

• 圖片素材：至少需上傳電腦版圖片，系統亦支援分別上傳平板與手機版圖片以達到最佳顯示效果。

• 圖片位置：可設定圖片位於文字的「左側」或「右側」。

• 電腦版占比：商家可自行設定圖片在電腦版畫面中的占比比例，藉此微調圖文之間的平衡。

• SEO 優化：設定圖片時應填寫「圖片替代文字 (ALT)」，這能讓搜尋引擎更準確定義圖片內容，有助於優化網站排名。

文字素材與內容編輯

「圖文介紹」區塊支援多組文字內容組合：

• 素材上限：文字素材（包含標題、內文、按鈕）最多可設定 3 組，且可重複使用相同類型的素材。

• 標題與內文：可自訂文字內容、設定字級（文字大小），內文部分提供簡易文字編輯器供商家輸入。

• 按鈕設定：

  • 可自訂按鈕文字與按鈕顏色。
  • 按鈕連結：可點開下拉選單選擇導向站內商品、分類、行銷活動頁，或自行設定外部連結。

• 顯示排序：在「區塊設定」中，商家可以透過拖拉方式自由調整標題、內文與按鈕的顯示順序。

版面細節與樣式設定

在「其他版面設計」選項中，商家可以進行細部美化：

• 文字排版：可統一設定文字排版為「靠左」、「置中」或「靠右」。

• 色彩設定：可分別調整區塊的 文字顏色 與 背景顏色。

• 邊距調整：可針對電腦、平板與手機版分別設定 左右外邊距 與 底部外邊距，調整與其他區塊的間距。

自訂 HTML¶

商家自行編輯 HTML 內容或嵌入 CSS 語法，用以添加官網預設功能之外的自定義素材或第三方服務工具（如：IG 動態牆）。

• 自訂 HTML 內容：點選 編輯 按鈕可開啟編輯器。商家可在此直接 輸入 HTML 語法，且該區塊同時 支援 CSS 語法。

• 其他版面設計（邊距設定）：可針對 電腦版 與 手機版（含平板） 左右外邊距 及 底部外邊距。

• 嵌入第三方外掛（如 Elfsight IG 牆）：在 elfsight 取得追蹤碼後，新增「自訂 HTML」區塊，點擊編輯並貼上語法即可在官網顯示 IG 動態牆。

文字編輯¶

建立結構化內文、展示品牌資訊。進入該區塊後，商家可以針對以下維度進行調整：

• 內文編輯： 在文字編輯器進行內容撰寫。

• 字級設定： 商家可以自由調整內文的 文字大小（字級），以符合視覺美感。

• 邊距調整： 可針對 電腦版、平板與手機版 分別設定 左右外邊距 與 底部外邊距 ，用以控制區塊與網頁邊界或其他區塊的間距。

主打商品¶

在區塊設定中點擊 商品設定 來綁定欲展示的商品，請留意以下規範：

• 綁定數量： 此區塊僅限綁定 1 件 商品。

• 適用狀態： 商品必須為 已上架 狀態。系統不支援顯示「未上架」、「已下架」、「未公開」或「已刪除」的商品。

• 不支援類型： 此區塊 不支援「組合商品」與「電子票券」。

區塊內容自訂與排序

您可以依據行銷需求，自由選擇要在區塊中顯示的資訊，並透過拖拉調整其 顯示順序：

• 可顯示項目： 包含「商品標題」、「價格」、「款式選單」、「數量選擇器」、「購買按鈕」以及自定義的「文字」。

• 彈性調整： 若不希望消費者直接在該區塊選擇數量，可將「數量選擇器」關閉；若想加強導購語氣，可善用「文字」欄位進行補充說明。

版面設計與同步規則

• 邊距設定： 點擊「其他版面設計」，可設定此區域與網站邊界（左右與底部）的距離，確保視覺平衡。

• 樣式同步： 為了維持網站視覺的一致性，以下資訊會直接 與該商品在商品頁的設定保持同步，無法在此區塊單獨更改：

  • 商品圖片比例。
  • 款式選單樣式（如色票小圖或下拉選單）。
  • 預設款式設定。
  • 商品售完後的按鈕文字（如：補貨中、聯絡店家）。

折疊內容¶

展示資訊量較大但非即時需要全數閱讀的內容，如官網的 FAQ（常見問題）、購物須知、配送政策 或 售後服務 說明。

點擊該區塊的 其他版面設計 分頁，可調整以下視覺細節：

• 區塊標題： 設定整個折疊區域的總體標題（例如：常見問題 QA）。

• 顏色設定： 可自訂區塊的文字與背景色彩，以符合品牌視覺。

• 邊距調整： 設定此區域與網站邊界（左右及底部）的距離。

折疊項目內容編輯

商家可以依據需求逐一新增具體的內容條目：

• 內容輸入： 每個項目皆可分別輸入 項目標題 與 詳細內文。

• 圖示設定： 可為每個折疊項目設定對應的 Icon（圖示），增加視覺辨識度。

• 項目數量限制： 單一個「折疊內容」區塊內，最多可設定 10 個 折疊項目。

商品頁面¶

商品頁面主要由四個功能區塊組成，可依需求開啟或調整排序：

商品群組頁面¶

在拖拉編輯器中，您可以針對群組頁面進行以下細節設定：

• 商品分類設定：

  • 左側選單連結：可指定該群組頁面要套用哪一組導覽選單（需先在「選單/導覽列設定」 完成設置）。

  • 商品欄數：商品每排顯示的數量。

  • 商品數量上限：設定每頁顯示的商品數量。

  • 更多商品顯示方式：設定顯示更多商品的呈現方式，分頁跳轉或是向下無限滾動顯示。

商品多層級分類¶

需先建立商品多層級分類架構 。

完成結構後，商家可針對多層級分類頁面的呈現方式進行微調。

部落格頁¶

此頁面主要用於呈現多篇文章的摘要列表。

• 每頁文章數量：商家可以自訂每頁要顯示的文章總數。

• 顯示精選文章：勾選此功能後，系統會在部落格列表頁的底部顯示特定的「精選文章」，適合用來增加熱門文章的曝光。

• 精選文章群組：在開啟精選文章後，可以進一步選擇要顯示哪一個部落格群組內的文章作為精選內容。

部落格文章頁¶

此頁面用於顯示單篇完整文章的詳細內容。

• 文章標籤區標題：系統會自動抓取該文章所屬群組內的所有「文章標籤」並在此區塊呈現。

客服頁¶

客服頁面在前台主要以「聯絡我們」表單的形式呈現，供訪客留言諮詢。

• 問題類型設定：商家可自訂「聯絡我們」表單中的下拉式問題選單。設定路徑為後台 會員 > 客服問題分類。

• 聯絡資訊設置：除了表單外，建議在 頁腳（Footer）區塊同步設定完整的公司電話、地址與 Email，增加品牌信任感。

針對顧客留言的客服頁面，拖拉版型支援建立 Google reCAPTCHA 安全驗證 ，以防止機器人攻擊或垃圾訊息。

404 頁¶

引導當消費者訪問到失效連結（如活動結束、商品下架或網址錯誤）時的顯示畫面。商家可以透過簡單的設定，自訂該頁面的視覺。

• 更換圖片：商家可以 自行上傳並更換 404 頁面的圖片。建議設計符合品牌風格或有趣的引導圖案，以緩解負面體驗。例如：提示網頁已走失，並提供回到首頁的按鈕提示。
• 標題：設定 404 頁面標題文件。
• 返回首頁：設定返回首頁按鈕文字。

快速到貨頁¶

用於自訂快速到貨專區的視覺與醒目入口。

• Logo 背景：設定 導覽列顏色（Logo 背景），以幫助消費者區分一般專區與快速到貨專區。

• 顯示快速到貨按鈕：勾選後系統會在官網全站導覽列上方顯示明顯的專區入口，引導消費者點擊。

搜尋頁¶

搜尋頁面目前提供以下自訂設定項目：

• 選擇選單：商家可以指定搜尋頁面左側要套用的 選單連結列表（需先建立選單）。

• 商品顯示資訊：搜尋結果中的商品會同步套用「全站設定」中的顯示規範，包含 商品價格區間（顯示最低價至最高價）、商品標語 以及 已銷售數量。

• 標籤顯示：搜尋結果頁支援顯示多種商品標籤，包含 定期定額標籤、特價標籤、缺貨標籤 以及 自定義標籤。

搜尋範圍與邏輯說明

搜尋（放大鏡）功能的運作邏輯如下：

• 搜尋範圍：系統不只查詢「商品名稱」，搜尋範圍亦涵蓋 商品群組名稱、商品廠商以及商品介紹。

• 分詞邏輯：商品標題支援 分詞搜尋，需完全符合分詞才會被搜到；例如使用「空格」或「-」會將標題切分為單詞，若輸入標題為「ER-1410」，搜尋「1410」可找到，但若標題為「ER1410」，搜尋「1410」則無法找到。

• 排除搜尋：若商家有部分商品不希望出現在搜尋頁，可於商品編輯頁的「基本設定」中 關閉「商品搜尋功能」，該商品將無法在站內搜尋框、所有商品列表以及外部 Google 搜尋中被檢索。

後續操作¶

常見問題¶