fbpx
Cloudways 主機【8折】專屬優惠

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

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

00

00

小時

00

分鐘

00

例子:中國淘寶每年舉辦【 雙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】?

步驟 1:在【+】新增打開區塊選單

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

步驟 2:選取【倒數計時器 Countdown】

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

從【設計範本 Design Templates】開始

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

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

方法一:從右側的【版面配置 Layout】套用

方法一:從右側的【版面配置 Layout】套用

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

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

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

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

調整基礎外觀 -【調整數值】

調整基礎外觀

步驟 1:點擊(風格樣式 Style 分頁)

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

步驟 2:選擇【正方形】或【圓形】外觀設計

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

步驟 3:時間日期的設定

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

調整基礎外觀 -【容器 Container】

調整基礎外觀 -【容器 Container】

步驟 1:方形容器的設定

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

步驟 2:Border Style 邊框樣式

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

步驟 3:Radius Style 圓角樣式

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

步驟 4:Box-Shadow Style 陰影樣式

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

調整基礎外觀 -【圓形 Circle】

調整基礎外觀 -【圓形 Circle】

步驟 1:圓形容器的設定 1

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

步驟 2:圓形容器的設定 2

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

調整基礎外觀 -【標籤文字 Label Text】

調整基礎外觀 -【標籤文字 Label Text】

步驟 1:Label Text 標籤文字 1

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

步驟 2:Label Text 標籤文字 2

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

調整基礎外觀 -【數字 Number text】

調整基礎外觀 -【標籤文字 Label 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 相關的更新情報,例如系統、外掛和佈景主題相關的更新,也會推送資訊安全的漏洞注要事項,確保您的網站保持和世界的連繫。

加入免費學習社團

學員人數:4,400+ 人(持續增加之中)

中文語系的 WordPress - Facebook 社團列表

發表您的留言

加入我們的 Facebook 學習社團免費的教學資源、交流和解決問題!

是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術