在 Odoo Website 設計圖片與動態效果：香港中小企實用指南
如何運用 Odoo Website 的建構模塊、圖片、動畫及背景形狀，打造專業且能留住訪客注意力的網頁。
讓頁面看起來像請了設計師
在 APAA，我們接觸的香港中小企通常沒有專職設計師。他們有產品、有 Website 訂閱，以及一個需要在素未謀面的客戶眼中顯得可信的首頁。好消息是，Odoo Website 的編輯器正正為這種情況而設：令頁面顯得精緻的大部分元素——擺位得宜的圖片、恰到好處的動態、整潔的版面——其實只是知道該使用哪些控制項而已。
本指南涵蓋 Odoo 頁面建構的視覺層面：建構模塊如何分類、如何操作圖片、如何在不過火的前提下加入動態，以及如何儲存你最滿意的作品，避免每次都要重做。
認識建構模塊
Odoo Website 將建構模塊分為四大類別，各有不同職能：
- Structure（結構） — 用於標題、圖片和文字的經典模塊，是最基礎的版面元素。
- Features（功能） — 以更進階方式展示特定資訊的模塊，例如價格比較表。
- Dynamic（動態） — 與其他 Odoo 應用整合的模塊。例如，你可以直接嵌入電商產品或電子報訂閱表單。
- Inner Content（內部內容） — 設計用於放置在其他模塊內部的元素，例如按鈕或分隔線。
學習這些模塊最快的方法，就是把任何模塊拖放到頁面上看看效果。如果不滿意，可以點擊復原箭頭，或使用 Discard 按鈕還原自上次開啟編輯器以來的所有變更。
一個提醒： Discard 會一次移除所有未儲存的變更，而非只還原最後一步——因此若只想退回一步，請優先使用復原箭頭。
圖片操作
圖片傳達訊息的速度比文字更快，而 Odoo 提供多種妥善管理圖片的方式。
新增與替換圖片
點擊任何圖片元素並選擇 Replace 即可替換。你可以上傳自己的圖片，也可以使用 Odoo 內建的 Unsplash 整合功能，存取數百萬張免費照片和插圖——只需輸入關鍵字即可搜尋。
圖片最佳化
Odoo 會自動最佳化圖片品質，以加快頁面載入速度，這同時有助於提升搜尋引擎排名。如需手動控制，你可以直接在編輯器中調整圖片的檔案大小。
樣式選項
選取圖片後，你可以自訂以下選項：
| 選項 | 功能說明 |
|---|---|
| Padding（間距） | 調整圖片周圍的留白 |
| Style（樣式） | 套用預設的視覺樣式 |
| Corner Roundness（圓角） | 控制邊角的圓滑程度 |
| Shape（形狀） | 將圖片放入裝飾性形狀中 |
新增動態與動畫效果
靜態頁面容易顯得單調乏味。少量動態能吸引目光、提升參與度——關鍵在於刻意運用，而非到處都用。Odoo 提供兩種主要類型。
影片背景
你可以將任何橫幅圖片替換為影片背景：
- 選取橫幅模塊。
- 點擊 Video 選項。
- 貼上 YouTube、Dailymotion 或 Vimeo 的連結。
- 點擊 OK。
當訪客進入頁面時，影片將自動播放。
元素動畫
你可以為任何模塊內的個別元素添加動畫。提供兩種觸發方式：
- On Scroll（捲動觸發） — 每次使用者捲動經過該元素時，動畫便重新播放。
- On Appearance（出現觸發） — 元素首次出現在畫面中時播放一次動畫。
每個動畫可設定以下參數：
- Direction（方向） — 左、右、上、下。
- Effect（效果） — 淡入、滑動或彈跳。
一個實用準則：把動態保留給你希望訪客留意的時刻——一句關鍵標題、一個行動呼籲按鈕——其餘頁面則保持平靜。
使用背景形狀
背景形狀能在模塊之間建立視覺流動感，讓頁面看起來更連貫，而非一堆各自獨立的區段。
新增背景形狀的步驟：
- 選取任意模塊。
- 點擊 Shape 選項。
- 從可用範本中選擇一個形狀。
- 調整方向和顏色以配合你的設計。
顏色宜保持低調。形狀是用來引導目光，而非與內容爭奪注意力——過於搶眼反而會損害可讀性。
管理模塊佈局
隨著頁面內容增多，你需要重新排列模塊。Odoo 讓這個過程十分簡單。
重新排序模塊
- 拖放 — 點擊並拖曳任何模塊到頁面上的新位置。
- 箭頭按鈕 — 使用上/下箭頭，每次將模塊移動一個位置。
重新定位模塊內的元素
模塊內的個別元素（圖片或文字）也可以使用左/右箭頭控制項進行重新定位。
複製模塊
如果你想沿用某個模塊的版面配置，但搭配不同內容，點擊 Duplicate 按鈕即可。新模塊會繼承原始模塊的所有樣式和動畫，因此你只需更換文字和圖片。
儲存自訂範本
當你建立了一個計劃在網站中重複使用的模塊設計時，可以將其儲存為自訂範本：
- 選取該模塊。
- 點擊 Save。
- 之後在模塊面板的 Custom Templates 中即可找到。
- 重新命名以便識別。
這能真正節省時間——你不必每次從頭重建和重新設定模塊樣式，只需放入現成版本再編輯內容即可。
接下來的方向
幾個習慣便足以區分一個看似套版的頁面，與一個看似經過設計的頁面：
- 嘗試各個模塊類別，動工前先了解有哪些可用選項。
- 使用 Unsplash 圖片快速製作版面原型，日後再換上自己的攝影作品。
- 只在你想引導注意力的地方加入微妙的動畫。
- 將你最出色的模塊儲存為自訂範本，令整個網站風格一致。
如果你希望由 APAA 團隊設計並建構一個真正反映你品牌的 Odoo Website——而非套用預設主題——歡迎聯絡我們，我們會協助你打造既得體又載入迅速的頁面。