Divi ile Cesur (Henüz Zarif) Renkli Geri Sayım Sayacı Modülü Nasıl Oluşturulur

Bu gönderi, Divi'nin Geri Sayım Sayacı Modülünü Tarz Etmenin 5 Etkileyici Yolu başlıklı mini serimizin 5'inci bölümüdür. Divi'nin geri sayım modülünün beş benzersiz örneğinin tümü için, her birine nasıl ulaşılacağına dair bir eğitimle bu hafta bizi izlemeye devam edin!

---

Dünkü gönderide, WordPress web sitenizde bir geri sayım sayacı kullanmanın çeşitli faydalarından bazılarını tartıştım ve ayrıca Divi'nin geri sayım sayacı modülünü "basit zarafetle" nasıl yeniden şekillendireceğinizi gösterdim. Bugünkü gönderide, öğretici serisine devam edeceğim ve size cesur ve renkli bir web sitesi geri sayımı oluşturmak için Divi'nin geri sayım sayacı modülünü nasıl kullanacağınızı göstereceğim. Başlayalım!

Divi Geri Sayım Modülü: Öncesi ve Sonrası

Tıpkı dünkü gönderide yaptığımız gibi, çıkış noktamıza bir göz atalım. Aşağıda, varsayılan ayarlarla Divi geri sayım modülünün bir ekran görüntüsü bulunmaktadır.

Şimdi nereye gittiğimize bir bakalım.

Bu yazının başlığından da anlaşılacağı gibi, bu geri sayım sayacı kalın olacak şekilde tasarlanmıştır. Web sitesi ziyaretçisinin dikkatini çekmek ve büyük bir şeyin geldiğini bilmelerini sağlamak için tasarlanmıştır.

Bu geri sayım stiliyle ilgili en güzel şey, her tür web sitesinde kullanılabilmesidir. Modern ve minimal tasarımı, herhangi bir sayfa stiliyle güzel bir şekilde uyum sağlamasına olanak tanırken, koyu rengi kullanıcının dikkatini çekecektir. Kırmızı hayranı değil misin? Endişelenmeyin, bu eğitimin ilerleyen bölümlerinde herhangi bir web sitesinin renk paletine uyacak şekilde değiştirmenizi göstereceğim.

“Kalın ve Renkli” Divi Geri Sayım Sayacı Modül Tasarımını Oluşturma

Youtube Kanalımıza Abone Olun

Tasarım Öğelerinin Hazırlanması

Bu geri sayım sayacı stilinin bir başka büyük yararı da, aslında hazırlanacak hiçbir tasarım öğesi olmamasıdır! Her şey CSS'nin gücüyle yapılır (ve elbette yerleşik Divi kontrolleri de!).

Tasarımı Divi ile Uygulamak

Hazırlanacak tasarım öğeleri olmadığı için doğrudan Divi'ye gidebiliriz. Basitlik adına, bu eğitim için yeni bir sayfa oluşturacağım, ancak bunu mevcut bir sayfaya eklemek isterseniz kolayca takip edebilirsiniz. Bu yüzden WordPress'te yeni bir sayfa oluşturacağım, Divi'yi etkinleştireceğim ve ardından muhteşem yeni görsel oluşturucuya gideceğim.

Benim gibi yeni bir sayfa oluşturduysanız, bizim için zaten boş bir bölüm var. Aksi takdirde, bunu mevcut Divi sayfanıza ekliyorsanız yeni bir bölüm oluşturun.

Şimdi yeşil (+) daire simgesine tıklayarak bir satır ekleyeceğiz, ardından aşağıdaki ekran görüntüsünde kırmızı okla gösterildiği gibi bir sütun satırına ait simgeye tıklayacağız.

Ardından, Divi otomatik olarak listeden bir modül seçmenizi isteyecektir. Evet tahmin ettiniz, geri sayım sayacını seçin.

Modül Ayarlarını Ayarlama

Şimdi geri sayım sayacı ayarlarını incelemeye başlama zamanı. Modülü ekledikten sonra geri sayım sayacının ayarlar modu otomatik olarak açılmalıdır, ancak zaten kapattıysanız, fareyle geri sayım sayacının üzerine gelin ve beliren koyu gri kontrol grubundaki dişli simgesine tıklayın.

Şimdi, değiştireceğimiz ayarlar burada. Aşağıda belirtilmeyen bir ayar varsa, varsayılan olarak bırakın.

Genel ayarlarda:

• geri sayım için bir tarih seçin (1 Ocak'ı seçtim)
• arka plan rengini #e6434d olarak değiştir

Genel ayarlar şöyle görünmelidir:

Ardından, Tasarım ayarları sekmesine tıklayın:

• tüm yazı tiplerini (Başlık, Sayılar ve Etiketler) büyük harfle (TT simgesi) ve kalın harflerle 'Oswald' olarak değiştirin

Şimdi kaydet'i tıklayın! Geri sayım modülünüzün şu ana kadar nasıl görünmesi gerektiği:

Fena değil! Şimdi CSS'nin işleri bitirmesi için!

Özel CSS Ekleme

Yapmamız gereken son şey, bizi yolun geri kalanına götürmek için biraz özel CSS sihri eklemek!

Özel CSS'yi eklemeye başlamadan önce, kendi özel CSS sınıflarımızı eklememiz gerekecek, böylece şu anda üzerinde çalıştığımız tekli geri sayım sayacı modülünün CSS'sini özelleştireceğiz ve TÜM geri sayım sayaçlarını değil. sitede veya sitede olacak.

Modül ayarlarını açın ve modül ayarlarının CSS sekmesine tıklayın ve CSS sınıfı olarak custom-countdown-2'yi ekleyin. Elbette CSS sınıfını istediğiniz gibi adlandırabilirsiniz, ancak çalışması için aşağıdaki CSS'deki sınıfları da yeniden adlandırmanız gerekir.

Tamam, şimdi özel CSS'yi eklemeye hazırız. Divi Tema Seçenekleri özel CSS kutusuna özel CSS'yi veya bireysel sayfa ayarlarında özel CSS kutusunu ekleme seçeneğine sahip olacaksınız. Aradaki fark, sayfa ayarlarındaki özel CSS kutusunun CSS'yi yalnızca bir sayfaya ekleyecek, Divi Tema Seçenekleri'ne ekleyerek sitenin her sayfasına ekleyecek olmasıdır.

Daha sonra bu aynı stil ile diğer sayfalara daha fazla geri sayım sayacı ekleyeceğinizi düşünüyorsanız, Divi Tema Seçenekleri paneline CSS'yi ekleyin. Aksi takdirde, sayfa ayarları özel CSS kutusuna ekleyebilirsiniz.

Sayfa ayarlarını açmak için ekranınızın altındaki mor dişli simgesine tıklayın. Dişli çark simgesini görmüyorsanız, menünün geri kalanını göstermek için gördüğünüz mor düğmeye tıklayın.

Ardından, CSS sekmesine tıklayın ve aşağıdaki CSS'yi aşağıdaki gibi kutuya yapıştırın.

.custom-countdown-2 {
 max-width: 620px;
 margin-left: auto;
 margin-right: auto;
 border-radius: 8px;
 box-shadow: 6px 4px 74px #b36e6e;
}
.custom-countdown-2 .value {
letter-spacing: 6px;
background-color: #dc2d43;
padding: 30px 6px !important;
padding-left: 11px !important;
width: 89px !important;
}

.custom-countdown-2 .days {
margin-right: 37px;
}

.custom-countdown-2 div.sep.section p {
display: none;
}

.custom-countdown-2.et_pb_countdown_timer .section.values {
width: 18%; 
}
.custom-countdown-2 .days .value {
 width: 129px !important;
}

Bireysel sayfa ayarlarında özel CSS kutusunu kullandıysanız, Divi'nin yeni görsel oluşturucusundaki canlı güncelleme sayesinde gerçek zamanlı olarak güncellendiğini görmüş olmalısınız. Öğrenme amacıyla, yukarıdaki CSS'yi birer birer yapıştırmak yararlı olabilir. Bu size hangi CSS'nin geri sayım sayacının hangi öğesini kontrol ettiğini göstermenize yardımcı olacaktır. CSS'de yeniyseniz, bu harika bir öğrenme deneyimi olabilir.

CSS'yi ve sayfanın kendisini yapıştırdıktan sonra değişikliklerinizi sayfa ayarları kutusuna kaydettiğinizden emin olun.

Şimdi, yarattıklarımıza hayran olalım!

Yarın: Hareketli Gradyan Arka Planı ile Geri Sayım Sayacı Nasıl Oluşturulur

Umarım bugünün geri sayım sayacı eğitimini beğenmişsinizdir. Mini dizinin bitmesine daha iki günümüz var! Divi'deki geri sayım sayacınıza güzel bir animasyonlu degrade arka planı nasıl ekleyeceğinizi öğrenmek için yarın tekrar kontrol edin!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!