fbpx
2024 年最佳 WordPress 佈景主題

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

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

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

00

00

小時

00

分鐘

00

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

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

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

雙十一(英文:double 11),是指每年 11 月 11 日的大型促銷活動,最早起源於中國阿里巴巴旗下購物網站在 2009 年 11 月 11 日舉辦的「淘寶商城促銷日」,現已演變成全行業一年一度的購物活動,及影響全球零售業的消費現象。「雙十一」的發起者阿里巴巴 CEO 張勇將雙十一稱為「商業界的奧林匹克」。2012 年 11 月 11 日網路購物全日銷售額超過美國網路星期一,成為全球最大的網際網路的購物節日。雙十一購物節戰場延伸進 12 月,即「雙十二」。

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

Qubely 是功能齊全的區塊編輯器支援和擴充功能工具包

預計在 2021 年至 2025 年之間,新型的 WordPress 區塊編輯器(Block Editor)的支援和擴充功能的工具包將會大放異彩,從之前推出 Gutenberg Editor 或俗稱的【古騰堡編輯器】發展至今,已經有大量開發廠商加入研究更強更快的區塊(Block)。當中我們找到非常亮眼的代表【Qubely】,還有很多後起之秀正睦續冒起當中,在可見的將來,大家可能會進入【完全不需要使用和依賴像 Elementor 等的第三方頁面編輯器】的工具,也可以制作快速和令人驚歎的網站作品。

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

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

步驟一:在 [+] 新增打開區塊選單

在左上方或文章的段落裡都可以找到讓您新增區塊 (Block) 的 [+] 符號,點擊後選擇 [瀏覽全部]。

步驟二:選取倒數計時器 (Countdown)

在 Qubely 的區塊中,找到 (Countdown) 和點擊後,就會立即新增一個倒數計時器到您的內容裡。

從設計範本 (Design Templates) 開始

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

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

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

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

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

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

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

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

調整基礎外觀 | 調整數值

調整基礎外觀 | 調整數值
調整基礎外觀 | 調整數值

區域一:點擊風格樣式 (Style) 分頁

這裡提供可以設定倒數計時器的外觀選項,免費版功能會受到限制。

區域二:選擇正方形或圓形外觀設計

這是二選一的選項,所以在下方,如果您選擇正方形,就不會出現圓形的設定參數,反之仍然。

區域三:時間日期的設定

Event Date | 活動進行日期
Starting Date | 倒數器開始計時日期
Event Time (24 Hour Clock) | 時分秒的參數,看您需要多大的精準度

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

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

區域一:方形容器的設定

背景顏色 (Background Color)
背景漸層顏色 (Background Gradient)
最少闊度 (Minimun Width)
邊框間距 (Border Padding)
空白位的間距 (Space Between)

區域二:邊框樣式 (Border Style)

1. 實線
2. 點狀
3. 虛線
4. 雙線

區域三:圓角樣式 (Radius Style)

提供兩種設定方式,分別是一次控制四個角的統一參數,和四個角各自獨立的圓角設定,注意 px 和 em 對跨裝置的差異。

區域四:陰影樣式 (Box-Shadow Style)

您可以參考自家 Logo 的品牌色調決定,不一定要用黑色,模糊值 (Blur) 和擴散值 (Spread),用預設或調整到舒服即可。

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

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

區域一:圓形容器的設定 1

圓形的大小尺寸 (Circle Size)
邊框寬度 (Border Width)
背景邊框寬度 (BG Border Width)
邊框樣式 (Border Style) | 可選圓角或方角
邊框的顏色 (Border Fill)

區域二:圓形容器的設定 2

顏色漸層的類形 (Gradient Type),可以選擇(單方向漸層)或(圓形擴散漸層)
顏色漸層的角度 (Gradient Angle),以 360 度為一個完整,您可以試試不同的數值
顏色的停留點 (Color Stop) 是控制顏色的漸層變化,沒有正確與錯誤,調出自己喜歡即可
邊框空白位置的顏色 (Border Empty Fill)

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

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

區域一:標籤文字 (Label Text) 1

是否啟用或關閉標籤文字 (Enable Label)
View 時分秒文字在 (圓圈內) 或 (圓圈外)
標籤文字出現在 (正上方) 或 (正下方) 的什麼位置 (Position)
4 個日期、小時、分鐘和秒數可以自行更改不同的字串

區域二:標籤文字 (Label Text) 2

標籤文字的顏色 (Label Color)
排版樣式可以讓您文字的選項,但注意這和您網站本身的文字樣式可能會有衝突,調整要小心一點。

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

調整基礎外觀 | 數字 (Number Text)
調整基礎外觀 | 數字 (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 產品和方案

參考資料和引用文獻

我們提供市場上最新的網站架設
新聞、教學和相關知識,我們不會向用戶
發送垃圾和推廣內容,而你可以隨時「取消訂閱」。

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

前往免費的學習社團
中文語系的 WordPress - Facebook 社團列表

發表您的留言