Divi'de Muhteşem Mevsimsel Şeffaf Geri Sayım Sayacı Nasıl Oluşturulur

Bu yazı, Divi'nin Geri Sayım Sayacı Modülüne Tarz Vermenin 5 Etkileyici Yolu başlıklı mini serimizin 2. 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!

---

Umarım bu noktaya kadar mini dizimizi takip etmişsinizdir! Bugün size Divi web siteniz için nasıl etkileyici geri sayım sayaçları oluşturacağınızı öğretme günü. 1. gün boyunca tartıştığımız gibi, geri sayım sayaçları yeni bir ürün, web sitesi, etkinlik vb. için beklenti oluşturmanın çok etkili bir yolu olabilir.

Web sitenizin herhangi bir parçası gibi, geri sayım sayacı da yalnızca işlevsel amacına hizmet eden sıkıcı bir unsur olmamalıdır. Ayrıca, şirketi daha da markalaştıran sayfanın güzel bir parçası olabilir. Sayfadan atlamak için tasarlanmış dünün cesur ve renkli geri sayım sayacının aksine, bugünün özelleştirilmiş geri sayım sayacı, bir sanat eserinin parçası gibi sayfaya güzel bir şekilde uyum sağlamak içindir; neredeyse arka plan görüntüsünün kendisinin bir parçası gibi.

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

Bu mini seri, Divi'yi özelleştirmelerle daha da ileriye götürmekle ilgili olduğundan, başlangıç ​​noktasını görmek önemlidir. Veya geri sayım sayacı varsayılan durumunda.

Şimdi, bugün ne yaratacağımıza bir göz atalım.

Serinin 1. gününde oluşturduğumuz ilk geri sayım sayacına benzer şekilde, bu geri sayım sayacı tam ekran arka plan görüntüsü kullanır. Yazı başlığımızın önerdiği gibi “muhteşem” olabilmesi için muhteşem bir arka plan fotoğrafıyla başlaması gerekiyor. Birazdan bunun hakkında daha fazla konuşacağız.

Geri sayım arka plan renginin şeffaflığı, ona kış etkisine katkıda bulunan "buzlu cam" görünümü verir ve aynı zamanda geri sayım zamanlayıcısının görüntüye karıştırılmasına yardımcı olan arka plan görüntüsünün gösterilmesine izin verir. Son olarak, başlığın arka planının yanı sıra geri sayım sayacı numaralarında kullanılan renk, fotoğraftaki ağaçların rengiyle aynıdır. Yine, bu, geri sayım sayacının görüntünün bir parçası olması gerektiği gibi görünmesine yardımcı olur.

“Muhteşem Şeffaf” Divi Geri Sayım Sayacı Modül Tasarımını Oluşturma

Youtube Kanalımıza Abone Olun

Tasarım Öğelerinin Hazırlanması

Hazırlamamız gereken tek tasarım öğesi arka plan görüntüsüdür. Geri sayım sayacının geri kalanı, Divi'nin yerleşik kontrolleri ve özel CSS aracılığıyla oluşturulur.

Kullanacağımız görsel Pexels'tan ücretsiz olarak indirilebilir ve kaynak gösterilmeden kullanılabilir. #526771

Devam edin ve yukarıdaki bağlantıya tıklayın ve dev yeşil “Ücretsiz İndir” düğmesine tıklayın.

Divi'ye gitmeden önce tasarım öğesini hazırlamak için yapmamız gereken son şey, kullanmak için doğru rengi elde etmektir. Yukarıda bahsettiğim gibi, bu tasarımın işe yaramasının sebeplerinden biri, görselimizdeki ağaçlarda bulunan rengi alıp geri sayım sayacımıza koymamızdır. Bu, güzelce karışmasına yardımcı olur. Bunu yapmak için Photoshop kullanacağım, ancak bir görüntüden renk almak için kullanabileceğiniz, Chrome tarayıcısında bulunan geliştirici araçları (denetçi) dahil olmak üzere birçok başka araç var.

Bu özel arka plan görüntüsünün karıştırılmasını kolaylaştıran şey, çeşitli tonlarda gerçekten yalnızca iki renge sahip olmasıdır: beyaz ve grimsi koyu yeşil. Arka plan resmi olarak kullanmak için farklı bir resim seçecekseniz, benzer şekilde minimal renklere sahip bir resim aramanızı tavsiye ederim.

Tasarımı Divi ile Uygulamak

Pekala, görselimiz indirildi ve hangi rengi kullanacağımızı biliyoruz. Şimdi Divi'ye gitme zamanı. Bu geri sayım, tam bir açılış sayfası veya "yapım aşamasında" sayfası olarak harika görünür, ancak isterseniz mevcut bir sayfaya da ekleyebilirsiniz. Yine de bu eğitim için, yeni bir sayfaya ekleme konusunda size yol göstereceğim, ancak mevcut bir sayfaya ekliyorsanız, yine de kolayca takip edebilirsiniz. Bu yüzden, yeni bir sayfa oluşturacağım, ona bir başlık vereceğim, Divi'yi etkinleştireceğim ve mavi “Görsel Oluşturucu Kullan” düğmesini tıklayacağım.

Benim gibi yeni bir sayfa oluşturuyorsanız, zaten boş bir bölüm var demektir. Ş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.

Divi, otomatik olarak listeden bir modül seçmenizi isteyecektir. Divi, "geri sayım" yazmaya başladığınızda modülleri otomatik olarak filtreleyecektir. Ardından sayfaya eklemek için Geri Sayım Sayacı'na tıklayın.

Devam edip bir Geri Sayım Sayacı Başlığı ekleyebilir ve bir tarih seçebilirsiniz. Sadece eğlence için, doğum günümü seçtim

Modül ayarlarına birazdan döneceğiz, ancak şimdilik modülü kaydetmek ve ayarları kapatmak için yeşil onay işareti düğmesine tıklayın.

Ardından, bölüme arka plan resmimizi ekleyeceğiz. Bunu yapmak için, mavi ile anahatlarını görene kadar bölümün üzerine gelin. Ardından, bölüm ayarlarını açmak için sol üstteki dişli simgesine tıklayın.

Ardından, aşağıdaki ekran görüntüsünde gösterildiği gibi yükle düğmesine tıklayarak resminizi arka plan resmi olarak yükleyin.

Benimle aynı resmi kullandığınızı varsayarsak, şu ana kadar geri sayımınız böyle görünüyor.

İlerleme kaydediyoruz!

Modül Ayarlarını Ayarlama

Şimdi geri sayım sayacı ayarlarını incelemeye başlamamızın zamanı geldi. Fareyle geri sayım sayacının üzerine gelin ve Modül Ayarları'nı açın (fareyle geri sayım sayacının üzerine geldiğinizde görünen koyu gri kontrol grubundaki dişli simgesine tıklayın).

Aşağıda değiştireceğimiz ayarları bulacaksınız. Belirtilmeyen bir ayar varsa, bunu varsayılan olarak bırakabilirsiniz.

Genel ayarlar sekmesinde:

• arka plan rengini şu şekilde değiştir: rgba(255,255,255,0.5)

Tasarım ayarları sekmesinde:

• tüm yazı tiplerini 'PT Sans Narrow' olarak değiştirin
• Başlık Yazı Tipini tamamı büyük harf olarak değiştirin (TT simgesi)
• Etiketler Yazı Tipini kalın ve tamamı büyük harf olarak değiştirin (TT simgesi)
• Sayılar ve Etiketler Metin Rengini #526771 olarak değiştirin
• Başlık Yazı Tipi Boyutunu 29 olarak değiştirin
• Numbers Yazı Tipi Boyutunu 65px olarak değiştirin
• Etiketler Yazı Tipi Boyutunu 15px olarak değiştirin

Özel CSS Ekleme

Eklememiz gereken son şey biraz özel CSS büyüsü! Bu serinin son iki gününde olduğu gibi, isteğe bağlı olarak özel CSS'yi Divi Tema Seçenekleri özel CSS kutusuna veya bireysel sayfa ayarları özel CSS kutusuna eklemeyi seçebilirsiniz. Fark, bireysel sayfa ayarlarının yalnızca o sayfa için CSS'yi yüklerken, Divi Tema Seçeneklerine eklemek CSS'yi her sayfaya yükler. Her ikisi de işe yarayacaktır, bu sadece aynı geri sayımı başka bir sayfada kullanmak isteyip istemediğinize bağlıdır. Öyleyse, devam edin ve Divi Tema Seçeneklerine ekleyin.

CSS'yi neden doğrudan modül bölümünün veya satırının CSS sekmesi yerine yukarıda bahsedilen iki seçenekten birine eklediğimizi merak ediyor olabilirsiniz. Bunun nedeni, Divi'nin modüller, satırlar ve bölümler için ayarların CSS sekmesinde önceden hedeflenmiş CSS alanlarına sahip olmasıdır, ancak Divi stil sayfasında bulunan her bir CSS sınıfını hedeflemiyor. Bu yüzden işleri bir adım daha ileri götürmemiz ve kendi CSS'mizi eklememiz gerekecek.

Yine de CSS'imizi eklemeye başlamadan önce, sitede bulunan veya olacak TÜM geri sayım sayaçlarını değil, yalnızca şu anda üzerinde çalıştığımız modülün CSS'sini özelleştirebilmemiz için kendi özel sınıflarımızı eklememiz gerekecek. sitede ol.

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-3'ü ekleyin.

Artık özel CSS'mizi eklemeye hazırız!

CSS'yi yalnızca bir sayfaya eklemeye karar verirseniz, Divi sayfa ayarlarını açmanız gerekir. Bunu yapmak 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 kutuya yapıştırın.

.custom-countdown-3.et_pb_countdown_timer {
max-width: 580px;
margin-left: auto;
margin-right: auto;
}
.custom-countdown-3.et_pb_countdown_timer .title {
 background-color: #6f848d;
 padding-top: 10px;
 padding-bottom: 10px;
 width: 90%;
 margin-left: auto;
 margin-right: auto;
 margin-top: -68px;
}
.custom-countdown-3 .et_pb_countdown_timer .sep {
color: #969696;
}
.custom-countdown-3 .days { margin-right: 12px; 
}

Özel CSS'yi benim yaptığım gibi bireysel Divi sayfa ayarlarına koymayı seçtiyseniz, muhtemelen geri sayımın anında büyük ölçüde değiştiğini fark etmişsinizdir. Bu elbette Divi'nin yeni görsel oluşturucusunun bir parçası olan canlı güncelleme sayesinde. Bu canlı güncelleme birçok nedenden dolayı harikadır ancak bu örnekte, CSS ile, CSS'nin tam olarak ne yaptığını görmenizi sağlar. Bu yüzden CSS'yi birkaç parçaya yapıştırmanızı öneririm. Bu, CSS'nin nasıl çalıştığını öğrenmenize yardımcı olacaktır.

Son olarak, değişikliklerinizi kaydettiğinizden emin olun! Tüm sayfa için olduğu gibi sayfa ayarlarındaki değişiklikleri de kaydetmeniz gerekecek. Şimdi işimiz bitti!

Şimdi devam edin ve az önce yarattığınız şey için sırtınızı sıvazlayın. Bunun gibi bir şeye benzemeli:

Yarın: Cesur (Henüz Zarif) Renkli Geri Sayım Sayacı Nasıl Oluşturulur

Umarım Divi web sitenizde gerçekten benzersiz ve etkileyici geri sayım sayaçlarınızı oluşturmak için bu eğitimden ilham almışsınızdır! Unutmayın, bu mini dizimizin sadece 5'te 1'i. Yarın size "cesur ve renkli" bir geri sayım sayacının nasıl oluşturulacağını göstereceğim yere gelin!

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!