您有在一些購物網站或平台，在他們推出（促銷計劃）之前，會建立一個【倒數器 Countdown】在網站的顯著位置。讓訪客看到時會有一種期待感，您怎至可以提供早鳥優惠（Early bird discount）作為預售的推廣計劃，透過 WordPress 的 Qubely 區塊外掛，您可以輕鬆建立多樣化和客制化外觀的 【倒數器 Countdown】，讓我們一起看下去。
00
日
00
小時
00
分鐘
00
秒
例子：中國淘寶每年舉辦【 雙11 優惠】
不單止各大電商網站喜歡使用倒數計時器，這個方式不是他們的專利，現在是行銷人員的必備技能，像每年的【感恩節】優惠活動，幾呼每個賣產品和服務的網站都會高掛一個倒數器，是提高生意額非常好的手段，而且制作難度非常低，透過 Qubely 可以輕鬆制作優雅的外觀。
引用維基百科：雙十一資料
關聯文章推薦：什麼是 Qubely？強化區塊編輯器的功能
Qubely 是功能齊全的區塊編輯器支援和擴充功能工具包
預計在 2021 年至 2025 年之間，新型的 WordPress 區塊編輯器（Block Editor）的支援和擴充功能的工具包將會大放異彩，從之前推出 Gutenberg Editor 或俗稱的【古騰堡編輯器】發展至今，已經有大量開發廠商加入研究更強更快的區塊（Block）。當中我們找到非常亮眼的代表【Qubely】，還有很多後起之秀正睦續冒起當中，在可見的將來，大家可能會進入【完全不需要使用和依賴像 Elementor 等的第三方頁面編輯器】的工具，也可以制作快速和令人驚歎的網站作品。
如何新增一個【倒數器 Countdown】？
步驟 1：在【+】新增打開區塊選單
步驟 2：選取【倒數計時器 Countdown】
從【設計範本 Design Templates】開始
新增【倒數器 Countdown】之後，讓我們來調整這個元素的外觀，有（兩種）快速套用外觀的方法，針對（文章）和（頁面），記得不要選錯喔！
- 方法一適合用於（文章 Post），因為是單純匯入一個倒數計時器到您的文章裡，自由度是最大，它不用跟周邊的物件產生關聯。
- 方法二適合用於（頁面 Page）或（到達頁面 Landing Page），因為這個倒數計時器是以整個頁面來規劃，配合其他區塊的整合方案，是強制一整套的組合拳，預設頁面寬度是（100% 全寬），所以如果像文章出現（側邊欄）會出現崩潰的狀態。
方法一：從右側的【版面配置 Layout】套用
點擊倒數計時器物件後，右方會展開（調整）的控制項面板，您可以從（Design Templates）裡找到 6 個預設的外觀樣式，免費版和付費版提供的選擇有差異實屬正常。
方法二：從上側的【匯入版面配置 Import Layout】套用
從上方工具列的【匯入版面配置 Import Layout】裡，可以從 Countdown 的分頁找到 6 個預設的範本供您選擇，溫馨提醒只適用於沒有測邊欄的頁面。
調整基礎外觀 -【調整數值】
步驟 1：點擊（風格樣式 Style 分頁）
步驟 2：選擇【正方形】或【圓形】外觀設計
步驟 3：時間日期的設定
Starting Date 倒數器開始計時日期
Event Time（24 Hour Clock） 時分秒的參數，看您需要多大的精準度
調整基礎外觀 -【容器 Container】
步驟 1：方形容器的設定
Background Gradient 背景漸層顏色
Minimun Width 最少闊度
Border Padding 邊框間距
Space Between 空白位的間距
步驟 2：Border Style 邊框樣式
2. 點狀
3. 虛線
4. 雙線
步驟 3：Radius Style 圓角樣式
步驟 4：Box-Shadow Style 陰影樣式
調整基礎外觀 -【圓形 Circle】
步驟 1：圓形容器的設定 1
Border Width 邊框寬度
BG Border Width 背景邊框寬度
Border Style 邊框樣式（可選圓角或方角）
Border Fill 邊框的顏色
步驟 2：圓形容器的設定 2
Gradient Angle 顏色漸層的角度，以 360 度為一個完整，您可以試試不同的數值
Color Stop 顏色的停留點是控制顏色的漸層變化，沒有正確與錯誤，調出自己喜歡即可。
Border Empty Fill 邊框空白位置的顏色
調整基礎外觀 -【標籤文字 Label Text】
步驟 1：Label Text 標籤文字 1
View 時分秒文字在（圓圈內）或（圓圈外）
Position 標籤文字在（正上方）或（正下方）
4 個日期、小時、分鐘和秒數可以自行更改不同的字串
步驟 2：Label Text 標籤文字 2
排版樣式可以讓您文字的選項，但注意這和您網站本身的文字樣式可能會有衝突，調整要小心一點。
調整基礎外觀 -【數字 Number text】
計數器最重要當然是不停跳動的數字，這面板可以讓您調整相關的參數。主要都是文字樣式如大小、顏色和間距等等，就不再累述了，沒什麼困難之處。
倒數計時器樣式 01
00
Days
00
Hours
00
Minutes
00
Seconds
最基本的款式，簡簡單單，應該適合大部分情況。
倒數計時器樣式 02
00
Days
00
Hours
00
Minutes
00
Seconds
這個是模仿日常的（鬧鐘）或（比賽）的計時器。
倒數計時器樣式 03
00
日
00
小時
00
分鐘
00
秒
在背景漸層上下一點功夫，變成時尚和簡約的款式。
倒數計時器樣式 04
00
Days
00
Hours
00
Minutes
00
Seconds
有使用 Apple Watch 嗎？就是現在流行運動手錶那的 App 的感覺，充滿未來感。
倒數計時器樣式 05
00
Days
00
Hours
00
Minutes
00
Seconds
去除背景色的打擾，保留最單純的數字，比較不會破壞網站版型的選擇。
倒數計時器樣式 06
00
日
00
小時
00
分鐘
00
秒
圓形計時器的另一個款色，但中間保留一個（軌道）的設計，把時分秒移出外圍。
參考資料和引用文獻
立即訂閱我們的網站
我們的團隊並不會濫發信息和廣告，每月定期會整理優惠和 WordPress 相關的更新情報，例如系統、外掛和佈景主題相關的更新，也會推送資訊安全的漏洞注要事項，確保您的網站保持和世界的連繫。
加入免費學習社團
學員人數：4,400+ 人（持續增加之中）
