新聞發(fā)布
管理系統(tǒng)
添加一個(gè)倒計(jì)時(shí)到您的網(wǎng)站，可以讓你的網(wǎng)站訪客的一種非常有效的方法。你是否想創(chuàng)建一個(gè)特殊的優(yōu)惠或促銷活動(dòng)的緊迫性，史詩般的產(chǎn)品或網(wǎng)站推出之前制造懸念，或倒到一個(gè)特定的事件如婚禮或音樂會(huì)，倒數(shù)計(jì)時(shí)器可以完美補(bǔ)充說：“觸摸”到你的WordPress網(wǎng)站。
在這個(gè)迷你系列，我要與你分享5種不同的方式，你可以風(fēng)格Divi的倒計(jì)時(shí)器的令人印象深刻的方式。但是，而不是展示你的設(shè)計(jì)，我要潛得更深，并提供對設(shè)計(jì)過程的所有方面的教程，你可以學(xué)習(xí)如何自己做。
三倒計(jì)時(shí)模塊：之前和之后
在我們之前，重要的是看我們從。以下是截圖的默認(rèn)設(shè)置倒計(jì)時(shí)模塊劃分。
現(xiàn)在使用分倒計(jì)時(shí)模塊與它的默認(rèn)設(shè)置沒有錯(cuò)。它的簡單，干凈，和將要做的工作。但是，這種迷你系列是以設(shè)計(jì)的幾個(gè)步驟，按住“令人印象深刻的標(biāo)題，“讓我們看看我們會(huì)創(chuàng)造今天。
是什么讓這個(gè)倒計(jì)時(shí)是獨(dú)一無二的全屏幕背景圖像背后的倒計(jì)時(shí)。淡淡的半透明的背景顏色的倒計(jì)時(shí)給它分離，使其從背景中突出，但仍允許能夠顯示背景圖像。
在這個(gè)例子中你可以使用不同的調(diào)色板圖像的各種不同的風(fēng)格，它仍然看起來很棒。所以你可以跟隨和使用它，或使用作為一個(gè)跳點(diǎn)創(chuàng)造出獨(dú)一無二的你。
創(chuàng)建“簡單的優(yōu)雅”分倒計(jì)時(shí)模塊的設(shè)計(jì)
制備的設(shè)計(jì)元素
這個(gè)倒計(jì)時(shí)的大多數(shù)是通過分設(shè)置和CSS實(shí)現(xiàn)的，所以沒有很多的準(zhǔn)備工作，我們需要做的。然而，我們需要選擇和修飾的背景圖像。
正如我前面提到的，你會(huì)選擇一個(gè)圖像具有很大的靈活性。由于計(jì)時(shí)器的顏色是中性的，而背景是半透明的，它留給我們很多的發(fā)揮空間與不同的圖像，它仍然看起來很棒。
有很多地方的網(wǎng)上購買股票的圖像，以及尋找免費(fèi)的圖片太。我喜歡的免費(fèi)圖片來源unsplash.com，這就是我的發(fā)現(xiàn)今天的教程圖像
當(dāng)你選擇圖像，有助于加深形象一點(diǎn)把重點(diǎn)放在倒計(jì)時(shí)。變暗的圖像在今天的教程中，我使用了Adobe PS圖象處理軟件一個(gè)黑色填充層。然后我玩的不透明度直到我得到它就–正如前面的教程中我們展示了如何做，一步一步
如果你沒有PS圖象處理軟件，還有其他更便宜（或免費(fèi)）的替代品，如Pixlr編輯器，可以很好的制作簡單的圖像編輯。
這是一個(gè)之前和之后，被編輯的圖像。
實(shí)施設(shè)計(jì)
現(xiàn)在，我們有我們的圖像選擇和準(zhǔn)備，是時(shí)候去Divi。這種特殊的倒計(jì)時(shí)以及網(wǎng)站的登陸頁面，讓我們建立在WordPress中新的一頁，給它一個(gè)名稱，使分，和頭部的視覺生成器。記住，你不需要?jiǎng)?chuàng)建一個(gè)新頁面雖然。干脆跳過這第一步，如果你想添加的倒計(jì)時(shí)到現(xiàn)有的頁面。
如果你已經(jīng)創(chuàng)建了一個(gè)新的頁面，然后有我們在的地方的空白部分。否則，如果你添加到您現(xiàn)有的分頁面創(chuàng)建一個(gè)新的部分。
現(xiàn)在，插入一一列行，并添加一個(gè)倒計(jì)時(shí)模塊的行。然后你將被提示選擇一個(gè)日期倒計(jì)時(shí)。你可以隨意選擇一個(gè)倒計(jì)時(shí)器的標(biāo)題以及。在我們的例子中，我們添加了“即將啟動(dòng)…“作為我們的標(biāo)題。我們將重新調(diào)整設(shè)置在一個(gè)點(diǎn)的模塊，但現(xiàn)在點(diǎn)擊綠色的復(fù)選框，保存模塊設(shè)置。
現(xiàn)在，我們要添加的部分圖像作為背景圖像。為此，懸停在部分直到你看到它概述了藍(lán)色。然后，在左上角，點(diǎn)擊齒輪圖標(biāo)打開節(jié)設(shè)置。
然后，上傳你的圖像作為背景圖像。在下面的圖片，你會(huì)看到我們有這么遠(yuǎn)。它不是很大，但我們正在取得進(jìn)展。
調(diào)整模塊設(shè)置
現(xiàn)在是時(shí)候開始倒計(jì)時(shí)定時(shí)器設(shè)置。懸停在倒數(shù)計(jì)時(shí)器，打開模塊設(shè)置（單擊控件時(shí)顯示懸停在倒數(shù)計(jì)時(shí)器的暗灰色的齒輪圖標(biāo)）。
在綜合設(shè)置
更改文本顏色暗
改變背景顏色的使用' '不'
在設(shè)計(jì)設(shè)置
改變字體“下午”
改變字體和字體加粗標(biāo)簽數(shù)量
改變標(biāo)簽的字體全部大寫（TT圖標(biāo)）
改變標(biāo)題文字的顏色為白色（# ffffff）
改變標(biāo)簽的文本顏色為白色（# ffffff）
換號(hào)碼的字體52px，和標(biāo)簽的字體大小12px。
添加到自定義0px底緣。
調(diào)整列的設(shè)置
我們現(xiàn)在需要對行進(jìn)行一些小的調(diào)整。懸停在該行開放行設(shè)置（單擊控件時(shí)顯示懸停在排綠色的齒輪圖標(biāo)）。你把一般的設(shè)置相同，但我們需要作出一些調(diào)整設(shè)計(jì)設(shè)置
改變背景顏色RGBA（255255255,0.1）
更改設(shè)置為“保持柱填料移動(dòng)”到“是”
行的背景顏色是什么賦予了倒數(shù)計(jì)時(shí)器的半透明的感覺?；旧希皇且粋€(gè)與不透明白色背景將下降到只有10%。換句話說，它是透明的90%。你可以通過使用第二滑塊控件旁邊的顏色選擇器，調(diào)整不透明度。
接下來我們要添加幾行CSS的主要行元素。導(dǎo)航到該行設(shè)置CSS選項(xiàng)卡。向下滾動(dòng)，直到你看到“主元的盒子。”并粘貼以下CSS盒子里：
<trans data-src="max-width: 50%;margin-left: auto;margin-right: auto;top: 20vh;" data-dst="大寬度：50%；margin-left: auto；右邊距：汽車；頂部：20vh；">大寬度：50%；margin-left: auto；右邊距：汽車；頂部：20vh；</trans>
上面的代碼做的幾件事。首先，它使得該行不會(huì)占用超過50%的屏幕（大寬度：50%）。因?yàn)槲覀兏淖儗挾?，我們需要確保它仍然是中心（margin-left:汽車；右邊距：汽車）。后，我想行不完全垂直居中，但略高于中心。為了實(shí)現(xiàn)這個(gè)我們要利用VH（視口高度）。所以加上：20vh，從屏幕頂部的距離將20%整個(gè)視口高度。你可以玩這個(gè)把它放在你想要的。
調(diào)整部分設(shè)置
我們其實(shí)只有一個(gè)很小的調(diào)整，使部分設(shè)置。打開節(jié)設(shè)置（單擊控件時(shí)顯示懸停段藍(lán)色齒輪圖標(biāo)），并對部分設(shè)置CSS選項(xiàng)卡，單擊。向下滾動(dòng)到主元素添加下面一行的CSS：
<trans data-src="height: 100vh;" data-dst="身高：100vh；">身高：100vh；</trans>
這一行的CSS將使部分“全屏幕”，或者換句話說，讓視口的高度100%節(jié)高度。這是全屏幕的設(shè)置，是非常相似的在Divi全寬頭的控制。
所以這是我們迄今為止。
你可以看到它真的開始形成。我們快到了。
添加自定義的CSS
我們需要的后一件事是一個(gè)小小的自定義CSS魔法！是的，我們在技術(shù)上已經(jīng)添加一些CSS的區(qū)和行設(shè)置，但是我們會(huì)將它添加到任何分主題選項(xiàng)面板或單個(gè)頁面設(shè)置自定義的CSS框自定義CSS盒子。
為什么我們把它在那里，不要直接在模塊、行或段？嗯，分有預(yù)靶向CSS區(qū)域的模塊，設(shè)置行和段，但沒有目標(biāo)的每一個(gè)CSS樣式，在樣式表可分。在我們可以開始添加CSS雖然，我們需要添加自己的自定義類，我們只定義我們目前的工作模塊的CSS，并不是所有的倒數(shù)計(jì)時(shí)器，在現(xiàn)場或?qū)⒃诂F(xiàn)場。
開放、模塊設(shè)置，然后單擊在模塊設(shè)置CSS選項(xiàng)卡，并添加custom-countdown-1隨著CSS類
好了，現(xiàn)在我們準(zhǔn)備添加自定義的CSS。我上面提到的，你必須添加以下CSS自定義CSS盒子內(nèi)的分主題選項(xiàng)面板中的選項(xiàng)，或自定義的CSS盒內(nèi)頁設(shè)置為個(gè)人網(wǎng)頁，你的工作。
如果你認(rèn)為你會(huì)加入更多的倒計(jì)時(shí)后，這一風(fēng)格的其他網(wǎng)頁，然后添加CSS的分主題選項(xiàng)面板。否則，你可以把它添加到頁面設(shè)置自定義CSS盒。
打開頁面設(shè)置，在屏幕的底部的紫色齒輪圖標(biāo)點(diǎn)擊。如果你沒有看到齒輪圖標(biāo)，點(diǎn)擊，你看到揭露其他紫色按鈕菜單。然后，點(diǎn)擊CSS標(biāo)簽粘貼到下面的CSS盒子。
<trans data-src=".custom-countdown-1.et_pb_countdown_timer .section.values {width: 21%;}.custom-countdown-1 div.sep.section {display: none;}.custom-countdown-1 .value {letter-spacing: 6px;background-color: white;padding: 30px 6px !important;padding-left: 11px !important;}.custom-countdown-1 .hours {margin-left: 21px;}" data-dst="。custom-countdown-1.et_pb_countdown_timer。section.values {寬度：21%；}。custom-countdown-1 div.sep.section {顯示：無；}。custom-countdown-1。值{字母間距：6px；背景顏色：白色；填充：30px 6px！重要的；填充左：11px！重要的；}。custom-countdown-1。小時(shí){保證金左：21px；}">。custom-countdown-1.et_pb_countdown_timer。section.values {寬度：21%；}。custom-countdown-1 div.sep.section {顯示：無；}。custom-countdown-1。值{字母間距：6px；背景顏色：白色；填充：30px 6px！重要的；填充左：11px！重要的；}。custom-countdown-1。小時(shí){保證金左：21px；}</trans>
你會(huì)馬上通知（感謝生活的視覺生成器更新），我們倒計(jì)時(shí)了幾件不同的事情。我建議將CSS以上小塊看每個(gè)部分做什么的倒計(jì)時(shí)器。這也將讓你輕松定制，你的愿望。
一定要保存您的更改；然后你可以欣賞你剛剛創(chuàng)建的！
