Divi ile Kalın Renkli Zaman Retortrine Modülü (ancak Zarif) Nasıl Yapılır
Bu yazı, Divi Geri Time sayaç modülünü organize etmenin 5 etkileyici yolunu başlıklı Mini Serimizde 5’in 3’tür. Her birine nasıl ulaşacağına dair bir öğretici ile Divi’nin geri sayım modülünün beş benzersiz örneği için bu haftayı dört gözle bekleyin!
Dünün gönderisinde, WordPress sitenizde geriye dönük zaman sayımını kullanmanın çeşitli avantajlarından bazılarını tartıştım ve ayrıca Divi Time -Retreat modülünü “Basit Elegance” ile nasıl yeniden düzenleyeceğinizi gösterdim. Bugünkü gönderide, öğretici serisine devam edeceğim ve size cesur ve renkli bir geri sayım yapmak için Divi zamandan geriye doğru modülünü nasıl kullanacağınızı göstereceğim. Başlayalım!
Divi’nin Geriye Sayım Modülü: Dünün gönderisinde olduğumuz gibi önce ve sonra, başlangıç noktamıza bakalım. Aşağıda, varsayılan ayarlarla Divi Geri Sayı Modülünün ekran görüntüsü verilmiştir. Şimdi nereye gittiğimize bakalım. Bu yazının başlığı ile önerildiği gibi, zaman sayaçları cesur olacak şekilde tasarlanmıştır. Bu, web sitesi ziyaretçilerinin dikkatini çekmek ve büyük bir şeyin geleceğini bildiklerinden emin olmak için tasarlanmıştır. Bu geriye dönük sayma stiliyle ilgili en güzel şey, her türlü web sitesinde kullanılabilmesidir. Tasarım moderndir ve en azından herhangi bir sayfa stiliyle iyi bir şekilde karışmasına izin verirken, cesur renk kullanıcının dikkatini çekecektir. Kırmızı hayranı değil mi? Endişelenme, size bu öğreticinin altındaki herhangi bir web sitesinin renk paletine uyacak şekilde değiştirmenizi göstereceğim.
Divi Time Ters Modül Tasarımı “Cesur ve Renk” YouTube kanalımıza abone Olmak Bu geriye dönük zaman sayaçlarından diğer büyük faydalar tasarım öğelerini hazırlar Aslında hazırlanması gereken tasarım öğeleri değil! Her şey CSS’nin gücü ile yapılır (ve elbette varsayılan Divi kontrolü!). Tasarımı Divi ile uygularken, hazırlanması gereken tasarım öğeleri olmadığı için doğrudan Divi’ye gidebiliriz. Basitlik uğruna, bu öğretici için yeni bir sayfa oluşturacağım, ancak bunu mevcut bir sayfaya eklemek istiyorsanız kolayca takip edebilirsiniz. Bu yüzden WordPress’te yeni bir sayfa oluşturacağım, Divi’yi etkinleştireceğim ve daha sonra yeni bir görsel üreticiye gideceğim. Sahip olduğum gibi yeni bir sayfa yaptıysanız, bizim için zaten boş bir parça var. Değilse, bunu mevcut Divi sayfasına eklerseniz yeni bir parça oluşturun. Şimdi Green Circle simgesine (+) tıklayarak satır ekleyeceğiz, ardından aşağıdaki resimde kırmızı okla gösterildiği gibi bir sütun satırı için simgeyi tıklayacağız.
Ardından, Divi otomatik olarak listeden modülü seçmenizi isteyecektir. Evet, tahmin edebilirsiniz, geri çekilmek için zaman seçin. Modül ayarlarını ayarlamak, zaman sayma ayarlarını kazmaya başlama zamanıdır. Zaman için sermaye ayarları bir modül ekledikten sonra calcrators otomatik olarak açılır, ancak kapattıysanız, imleci zaman sayımlarına geriye doğru yönlendirin, ardından görünen koyu gri kontrol setindeki dişli simgesini tıklayın. Şimdi, değiştireceğimiz ortam bu. Aşağıda isimsiz ayarlar varsa, varsayılan olarak bırakın. Genel ayarlarda: Geri sayılacak tarihi seçin (1 Ocak’ı seçiyorum)
Arka plan rengini #E6434D olarak değiştirin
Aşağıdakiler genel ayarların görünümü:
Ardından, tasarım ayarları için sekmeyi tıklayın:
Tüm yazı tiplerini (başlıklar, sayılar ve etiketler) büyük harf (TT simgesi) ve kalın ile ‘Oswald’ olarak değiştirin
Şimdi Kaydet’i tıklayın! Bu, şimdiye kadar geriye dönük sayım modülünüzün görüntülenmesidir:
Fena değil! Şimdi her şeyi bitirmek için CSS! CSS Custom ekle Yapmamız gereken son şey, bizi oraya götürmek için özellikle CSS’nin biraz harikası eklemektir!
Başka bir sayfaya aynı stille daha sonra geri çekilmek için daha fazla zaman ekleyeceğinizi düşünüyorsanız, Divi Tema Seçenek Paneline CSS ekleyin. Değilse, sayfa ayarları için özel bir CSS kutusuna ekleyebilirsiniz. Sayfa ayarlarını açmak için ekranınızın altındaki Mor Dişli simgesini tıklayın. Dişli simgesini görmüyorsanız, kalan menüyü görüntülemek için gördüğünüz Mor düğmesini tıklayın. Max-Width: 620px;
Marj-sol: Otomatik; Marj-Sağ: Otomatik;
Border-Radius: 8px;
Box-Shadow: 6px 4px 74px #B36E6E;
}
.Custom-countdown-2. Değer {
Mektup Alanı: 6px;
Arka plan-rengi: #dc2d43;
Dolgu: 30px 6px! Önemli;
Dolgu-sol: 11 piksel! Önemli;
Genişlik: 89px! Önemli;
}
.Custom-countdown-2. Günler {
Marj-sağ: 37px;
}
.Custom-countdown-2 div.sep.section p {
Görüntü yok;
}
.Custom-countdown-2.et_pb_countdown_timer. Section.values {
Genişlik:%18;
}
.Custom-countdown-2. Günler. Değer {
Genişlik: 129px! Önemli;
}
Bireysel sayfa ayarlarında özel bir CSS kutusu kullanıyorsanız, Divi’nin yeni görsel üreticisindeki doğrudan güncelleme sayesinde gerçek zamanlı olarak güncellendiğini görmelisiniz. Öğrenme amaçları için, CSS’yi tek tek üzerine eklemek yararlı olabilir. CSS’nin hangi zaman sayaçlarını neyin kontrol ettiğini göstermenize yardımcı olacaktır. CSS’de yeniyseniz bu olağanüstü bir öğrenme deneyimi olabilir.
CSS ve sayfanın kendisini ekledikten sonra değişikliklerinizi sayfa ayarları kutusuna kaydettiğinizden emin olun. Şimdi, yaptıklarımıza hayran olalım!
