如何在 Odoo 中設計網站圖片與動態效果
返回資源|ERP 系統

如何在 Odoo 中設計網站圖片與動態效果

Yannis, Odoo Expert
8 分鐘閱讀

目錄

認識建構模塊

Odoo Website 編輯器顯示四種建構模塊類別

Odoo Website 將建構模塊分為四大類別,各有不同用途:

  • Structure(結構) — 用於標題、圖片和文字的經典模塊,是最基礎的版面元素。
  • Features(功能) — 以更進階的方式展示特定資訊的模塊,例如價格比較表。
  • Dynamic(動態) — 與其他 Odoo 應用整合的模塊。例如,你可以直接嵌入電商產品或電子報訂閱表單。
  • Inner Content(內部內容) — 設計用於放置在其他模塊內部的元素,例如按鈕或分隔線。

將建構模塊拖放到頁面上

只需將任何模塊拖放到頁面上即可使用。如果對結果不滿意,可以點擊復原箭頭,或使用 Discard 按鈕還原自上次開啟編輯器以來的所有變更。

小提示: 使用 Discard 按鈕時要小心——它會一次移除所有未儲存的變更,而不是只還原最後一步。

圖片操作

圖片是快速傳達訊息的關鍵元素。Odoo 提供了多種有效管理圖片的方式。

新增與替換圖片

替換圖片對話框,包含上傳和 Unsplash 選項

點擊任何圖片元素並選擇 Replace 即可替換圖片。你可以上傳自己的圖片,也可以使用 Odoo 內建的 Unsplash 整合功能,存取數百萬張免費照片和插圖。只需輸入關鍵字即可搜尋。

Odoo 中的 Unsplash 圖片搜尋結果

圖片最佳化

Odoo 會自動最佳化圖片品質,以加快頁面載入速度,這同時有助於提升搜尋引擎排名。如需手動調整,你可以直接在編輯器中調整圖片的檔案大小。

樣式選項

圖片樣式選項,顯示間距、樣式、圓角和形狀控制項

選取圖片後,你可以自訂以下選項:

選項功能說明
Padding(間距)調整圖片周圍的留白
Style(樣式)套用預設的視覺樣式
Corner Roundness(圓角)控制邊角的圓滑程度
Shape(形狀)將圖片放入裝飾性形狀中

圖片放置在裝飾性形狀內的效果

新增動態與動畫效果

靜態頁面容易顯得單調乏味。動態效果能吸引注意力並提升使用者參與度。Odoo 提供兩種主要的動態類型。

影片背景

橫幅模塊編輯器中的影片背景選項

你可以將任何橫幅圖片替換為影片背景:

  1. 選取橫幅模塊
  2. 點擊 Video 選項
  3. 貼上 YouTube、Dailymotion 或 Vimeo 的連結
  4. 點擊 OK

當訪客進入頁面時,影片將自動播放。

元素動畫

動畫設定面板,顯示捲動和出現觸發條件

你可以為任何模塊內的個別元素添加動畫。提供兩種觸發方式:

  • On Scroll(捲動觸發) — 每次使用者捲動經過該元素時播放動畫
  • On Appearance(出現觸發) — 元素首次出現在畫面中時播放一次動畫

每個動畫可設定以下參數:

  • Direction(方向) — 左、右、上、下
  • Effect(效果) — 淡入、滑動或彈跳

頁面預覽,展示影片播放和滑動動畫的實際效果

使用背景形狀

背景形狀能在模塊之間建立視覺流動感,讓頁面看起來更加連貫一致。

背景形狀選項面板,包含形狀範本

新增背景形狀的步驟:

  1. 選取任意模塊
  2. 點擊 Shape 選項
  3. 從可用範本中選擇一個形狀
  4. 調整方向和顏色以配合你的設計

套用了微妙背景形狀的模塊

顏色選擇宜保持低調,以維持可讀性,避免讓訪客感到視覺疲勞。

管理模塊佈局

隨著頁面內容增多,你需要重新排列模塊。Odoo 讓這個過程十分簡單。

重新排序模塊

在編輯器中拖放重新排序模塊

  • 拖放 — 點擊並拖曳任何模塊到頁面上的新位置
  • 箭頭按鈕 — 使用上/下箭頭將模塊移動一個位置

重新定位模塊內的元素

模塊內的個別元素(例如圖片或文字)也可以使用左/右箭頭控制項進行重新定位。

複製模塊

模塊上的複製按鈕,以及下方複製後的結果

如果你想使用某個模塊的版面配置但搭配不同內容,點擊 Duplicate 按鈕即可。新模塊會繼承原始模塊的所有樣式和動畫設定。

儲存自訂範本

將模塊儲存為自訂範本並重新命名

當你建立了一個計劃在網站中重複使用的模塊設計時,可以將其儲存為自訂範本:

  1. 選取該模塊
  2. 點擊 Save
  3. 之後在模塊面板的 Custom Templates 中即可找到
  4. 重新命名以便識別

這能省去從頭重建和重新設定模塊樣式的時間。

後續步驟

  • 嘗試各個模塊類別,了解有哪些可用選項
  • 使用 Unsplash 圖片快速製作頁面設計原型
  • 添加微妙的動畫效果以引導訪客注意力
  • 查看 Odoo 官方 YouTube 頻道,獲取更多進階設計技巧與最佳實踐

參考資料

標籤

Odoo網站設計圖片動畫
Professional businesswoman working with data and analytics in modern office environment

需要香港 Odoo 實施協助?

Zoo AI 是香港 Odoo 合作夥伴,為中小企提供專業 ERP 實施與 AI 自動化方案。立即聯絡我們,了解更多。