新手也可以學會如何使用 Qubely 制作倒數計時器 (Countdown)？

這篇文章最後更新日期：2022 年 7 月 16 日 | 作者： Mack Chan

您有在一些購物網站或平台，在他們推出「促銷計劃」之前，會建立一個倒數器 (Countdown) 在網站的顯著位置。讓訪客看到時會有一種期待感，您怎至可以提供早鳥優惠 (Early bird discount) 作為預售的推廣計劃，透過 WordPress 的 Qubely 區塊外掛，您可以輕鬆建立多樣化和客制化外觀的倒數器 (Countdown)，讓我們一起看下去。

例子：中國淘寶每年舉辦「雙 11 優惠」

不單止各大電商網站喜歡使用倒數計時器，這個方式不是他們的專利，現在是行銷人員的必備技能，像每年的【感恩節】優惠活動，幾呼每個賣產品和服務的網站都會高掛一個倒數器，是提高生意額非常好的手段，而且制作難度非常低，透過 Qubely 可以輕鬆制作優雅的外觀。

關聯文章推薦：什麼是 Qubely？強化區塊編輯器的功能

如何新增一個倒數器 (Countdown)？

從設計範本 (Design Templates) 開始

新增倒數器 (Countdown) 之後，讓我們來調整這個元素的外觀，有兩種快速套用外觀的方法，針對文章和頁面，記得不要選錯喔！

• 方法一適合用於文章 (Post)，因為是單純匯入一個倒數計時器到您的文章裡，自由度是最大，它不用跟周邊的物件產生關聯。
• 方法二適合用於頁面 (Page) 或 到達頁面 (Landing Page)，因為這個倒數計時器是以整個頁面來規劃，配合其他區塊的整合方案，是強制一整套的組合拳，預設頁面寬度是 (100% 全寬)，所以如果像文章出現 (資訊欄 / 側邊欄) 會出現崩潰的狀態。

方法一：從右側的版面配置 (Layout) 套用

點擊倒數計時器物件後，右方會展開調整的控制項面板，您可以從 (Design Templates) 裡找到 6 個預設的外觀樣式，免費版和付費版提供的選擇有差異實屬正常。

方法二：從上側的匯入版面配置 (Import Layout) 套用

從上方工具列的匯入版面配置 (Import Layout) 裡，可以從 Countdown 的分頁找到 6 個預設的範本供您選擇，溫馨提醒只適用於沒有測邊欄的頁面。

調整基礎外觀 | 調整數值

調整基礎外觀 | 容器 (Container)

調整基礎外觀 | 圓形 (Circle)

調整基礎外觀 | 標籤文字 (Label Text)

調整基礎外觀 | 數字 (Number Text)

計數器最重要當然是不停跳動的數字，這面板可以讓您調整相關的參數。主要都是文字樣式如大小、顏色和間距等等，就不再累述了，沒什麼困難之處。

倒數計時器樣式 01

最基本的款式，簡簡單單，應該適合大部分情況。

倒數計時器樣式 02

這個是模仿日常的（鬧鐘）或（比賽）的計時器。

倒數計時器樣式 03

在背景漸層上下一點功夫，變成時尚和簡約的款式。

倒數計時器樣式 04

有使用 Apple Watch 嗎？就是現在流行運動手錶那的 App 的感覺，充滿未來感。

倒數計時器樣式 05

去除背景色的打擾，保留最單純的數字，比較不會破壞網站版型的選擇。

倒數計時器樣式 06

圓形計時器的另一個款色，但中間保留一個（軌道）的設計，把時分秒移出外圍。

Qubely 優惠碼，適用任何 Qubely 產品和方案

參考資料和引用文獻

• Qubely 官方網站 Demo
• 網站迷谷：什麼是 Qubely？強化區塊編輯器的功能
• 網站迷谷：新手也可以學會如何使用 Qubely 制作 [倒數計時器 Countdown]？
• 網站迷谷：WordPress 精選圖片 (Featured Image) 是什麼？
• 網站迷谷：使用 Qubely 制作華麗和優雅的多樣化文章列表 (Post Grid)
• 網站迷谷：WordPress 小工具 | 區塊小工具 (Widget) 是什麼？
• 網站迷谷：什麼是 WordPress 傳統小工具 (Classic Widgets)？
• 網站迷谷：3 個最佳的 WordPress 頁面編輯器 (Page Builder) 外掛推薦和評價
• 網站迷谷：WordPress 區塊編輯器 (Block Editor) 是什麼？
• 維基百科：雙十一
• 維基百科：光棍節
• 圖片來源：免費圖片素材

WordPress 學員人數
12,000+ 人 (持續增加之中)