您有在一些購物網站或平台,在他們推出(促銷計劃)之前,會建立一個【倒數器 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
秒
圓形計時器的另一個款色,但中間保留一個(軌道)的設計,把時分秒移出外圍。
Qubely 優惠碼,適用任何 Qubely 產品和方案

參考資料和引用文獻
我們提供市場上最新的網站架設新聞、教學和相關知識,我們不會向用戶發送垃圾和推廣內容,而你可以隨時「取消訂閱」。
學員人數:6,600+ 人(持續增加之中)
