Divi'nin Geri Sayım Sayacı Modülüne Basit Zarafetle Nasıl Stil Verilir

Bu gönderi, Divi'nin Geri Sayım Sayacı Modülüne Tarz Vermenin 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!

---

Web sitenize bir geri sayım sayacı eklemek, web sitenizin ziyaretçileriyle etkileşim kurmanın çok etkili bir yolu olabilir. Özel bir teklif veya promosyon için aciliyet yaratmak, efsanevi bir ürün veya web sitesi lansmanından önce merak yaratmak veya bir düğün veya konser gibi belirli bir etkinliğe geri sayım yapmak istiyorsanız, geri sayım sayaçları WordPress'inize mükemmel bir "ek dokunuş" olabilir. İnternet sitesi.

Bu mini dizide, Divi'nin geri sayım sayacını etkileyici bir şekilde şekillendirebileceğiniz 5 farklı yolu sizinle paylaşacağım. Ancak, size sadece tasarımı göstermek yerine, daha derine ineceğim ve kendi başınıza nasıl yapacağınızı öğrenebilmeniz için tasarım sürecinin tüm yönleriyle ilgili bir eğitim vereceğim.

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

Dalmadan önce, neyle başladığımızı görmek önemlidir. Aşağıda, varsayılan ayarlarla Divi geri sayım modülünün bir ekran görüntüsü bulunmaktadır.

Artık Divi geri sayım modülünü varsayılan ayarlarıyla kullanmakta yanlış bir şey yok. Basit, temiz ve işi yapacak. Ancak bu mini seri, “etkileyici” unvanını korumak için tasarımı birkaç adım ileriye taşımayı amaçlıyor. O halde bugün ne yaratacağımıza bir göz atalım.

Bu geri sayım sayacını benzersiz kılan, geri sayımın arkasındaki tam ekran arka plan görüntüsüdür. Geri sayım sayacının ince yarı saydam arka plan rengi, onu ayırmaya ve arka plandan öne çıkmasına yardımcı olur, ancak yine de arka plan görüntüsünün görünmesine izin verir.

Bu örnekle ilgili harika olan şey, farklı renk paletleriyle birçok farklı resim stilini kullanabilmeniz ve yine de harika görünecek olmasıdır. Böylece onu takip edebilir ve olduğu gibi kullanabilir veya size özel bir şey yaratmak için bir başlangıç ​​noktası olarak kullanabilirsiniz.

“Simple Elegance” Divi Geri Sayım Sayacı Modül Tasarımının Oluşturulması

Youtube Kanalımıza Abone Olun

Tasarım Öğelerinin Hazırlanması

Bu geri sayım sayacının büyük bir kısmı Divi ayarları ve CSS aracılığıyla elde edilir, bu nedenle yapmamız gereken çok fazla hazırlık çalışması yoktur. Ancak, bir arka plan resmini seçmemiz ve rötuşlamamız gerekiyor.

Daha önce de belirttiğim gibi, bir resim seçerken çok fazla esnekliğe sahip olacaksınız. Geri sayım sayacının renkleri nötr ve arka plan yarı saydam olduğundan, bize farklı görüntülerle oynamak ve hala harika görünmesini sağlamak için çok yer bırakıyor.

Çevrimiçi olarak stok görsel satın alabileceğiniz ve ücretsiz görseller bulabileceğiniz pek çok yer var. En sevdiğim ücretsiz görsel kaynağı unsplash.com ve bugünün öğreticisi için görseli burada buldum.

Bir resim seçtikten sonra, geri sayım sayacına odaklanmak için resmi biraz karartmak faydalı olabilir. Bugünkü eğitimde görüntüyü koyulaştırmak için Adobe Photoshop'u siyah bir Dolgu Katmanı olarak kullandım. Daha sonra, tam olarak doğru olana kadar opaklıkla oynadım – tıpkı bir önceki öğreticimizin adım adım nasıl yapılacağını gösterdiği gibi.

Photoshop'unuz yoksa, basit görüntü düzenlemeleri yapmak için harika olabilecek Pixlr Editor gibi daha ucuz (veya ücretsiz) alternatifler vardır.

İşte düzenlenen resmin öncesi ve sonrası.

Tasarımı Divi ile Uygulamak

Artık imajımızı seçip hazırladığımıza göre Divi'ye gitme zamanı. Bu özel geri sayım, bir web sitesi için bir açılış sayfası olarak iyi çalışır, bu yüzden WordPress'te yeni bir sayfa oluşturalım, ona bir başlık verelim, Divi'yi etkinleştirelim ve Visual Builder'a gidelim. Yine de yeni bir sayfa oluşturmanız gerekmediğini unutmayın. Geri sayım sayacını mevcut bir sayfaya eklemek istiyorsanız bu ilk adımı atlamanız yeterlidir.

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, bir sütun satırı ekleyin ve satıra bir geri sayım sayacı modülü ekleyin. Daha sonra geri saymak için bir tarih seçmeniz istenecektir. İsteğe bağlı olarak bir geri sayım sayacı başlığı da seçebilirsiniz. Örneğimizde başlığımız olarak “ Yakında Başlatılıyor… ” ekledik. Modül ayarlarını birazdan değiştirmek için geri döneceğiz, ancak şimdilik modül ayarlarını kaydetmek için yeşil onay kutusunu tıklayın.

Şimdi görselimizi arka plan görseli olarak bölüme 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, resminizi arka plan resmi olarak yükleyin. Aşağıdaki resimde, şimdiye kadar sahip olduklarımızı göreceksiniz. Harika değil, ama ilerleme kaydediyoruz.

Modül Ayarlarını Ayarlama

Şimdi geri sayım sayacı ayarlarını incelemeye başlama zamanı. 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).

Genel ayarlarda:

• metin rengini 'koyu' olarak değiştir
• 'Arka Plan Rengini Kullan'ı 'Hayır' olarak değiştirin

Tasarım ayarlarında:

• tüm yazı tiplerini 'Arvo' olarak değiştir
• Sayı Yazı Tipini ve Etiket Yazı Tipini kalın olarak değiştirin
• Etiketler Yazı Tipini tamamı büyük harf olarak değiştirin (TT simgesi)
• Başlık Metni Rengini beyaz olarak değiştirin (#ffffff)
• Etiket Metin Rengini beyaz olarak değiştirin (#ffffff)
• Numbers Yazı Tipi Boyutunu 52px ve Etiket Yazı Tipi boyutunu 12px olarak değiştirin.
• Alt için Özel Kenar Boşluğu'na 0 piksel ekleyin.

Satır Ayarlarını Düzenleme

Şimdi satırda birkaç küçük ayar yapmamız gerekiyor. Fareyle satırın üzerine gelin ve Satır Ayarları'nı açın (satırın üzerine geldiğinizde görünen yeşil kontrol grubundaki dişli simgesine tıklayın). Genel ayarları aynı tutacaksınız, ancak Tasarım ayarlarında bazı ayarlamalar yapmamız gerekecek:

• Arka plan rengini rgba(255,255,255,0.1) olarak değiştirin
• 'Sütun Doldurmasını Mobil Cihazda Tut' ayarını 'Evet' olarak değiştirin

Satır arka plan rengi, geri sayım sayacına yarı saydam hissi veren şeydir. Temel olarak, opaklığın yalnızca %10'a düşürüldüğü beyaz bir arka plan. Veya başka bir deyişle, %90 şeffaftır. Renk seçicinin yanındaki ikinci kaydırıcı kontrolünü kullanarak opaklığı ayarlayabilirsiniz.

Ardından, ana satır öğesine birkaç satır CSS ekleyeceğiz. Satır Ayarlarının CSS sekmesine gidin. “Ana Eleman” kutusunu görene kadar aşağı kaydırın. Ve aşağıdaki CSS'yi kutuya yapıştırın:

max-width: 50%;
margin-left: auto;
margin-right: auto;
top: 20vh;

Yukarıdaki kod birkaç şey yapar. İlk olarak, satırın ekranın %50'sinden fazlasını kaplamamasını sağlar (maksimum genişlik: %50). Ve genişliği değiştirdiğimiz için, hala ortalanmış olacağından emin olmamız gerekiyor (sol kenar boşluğu: otomatik; sağ kenar boşluğu: otomatik). Son olarak, sıranın tam olarak dikey olarak ortalanmamasını, merkezin biraz üzerinde olmasını istedim. Bunu başarmak için vh (görünüm alanı yüksekliği) kullanacağız. Böylece top:20vh eklendiğinde, ekranın üst kısmından olan mesafe, tüm görüntü alanı yüksekliğinin %20'si olacaktır. İstediğiniz yere ulaşmak için bununla oynayabilirsiniz.

Bölüm Ayarlarının Yapılması

Aslında Bölüm Ayarlarında yapacağımız çok küçük bir ince ayar var. Bölüm Ayarları'nı açın (bölümün üzerine geldiğinizde görünen mavi kontrol setindeki dişli simgesine tıklayın) ve Bölüm Ayarları'nın CSS sekmesine tıklayın. Ana Öğe'ye ilerleyin ve aşağıdaki CSS satırını ekleyin:

 height: 100vh; 

Bu CSS satırı, bölümü "tam ekran" yapacak veya başka bir deyişle, bölümün yüksekliğini görünüm alanı yüksekliğinin %100'ü yapacaktır. Bu, Divi'de Tam Genişlik başlıkları için bir kontrol olarak kullanılabilen Tam Ekran ayarına çok benzer.

İşte şimdiye kadar sahip olduklarımız.

Gerçekten şekillenmeye başladığını görebilirsiniz. Neredeyse geldik.

Özel CSS Ekleme

Eklememiz gereken son şey biraz özel CSS büyüsü! Evet, teknik olarak bölüm ve satır ayarlarına zaten bir miktar CSS ekledik, ancak bunun için onu Divi Tema Seçenekleri panelinin Özel CSS kutusuna veya bireysel sayfa ayarları özel CSS kutusuna ekleyeceğiz.

Neden doğrudan modül, satır veya bölümün içine değil de oraya ekliyoruz? Divi, modüllerin, satırların ve bölümlerin ayarlarında önceden hedeflenmiş CSS alanlarına sahiptir, ancak Divi stil sayfasında bulunan her CSS sınıfını hedeflemez. Yine de CSS 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.

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-1'i ekleyin.

Tamam, şimdi özel CSS'yi eklemeye hazırız. Yukarıda, Divi Tema Seçenekleri panelindeki özel CSS kutusuna aşağıdaki CSS'yi veya üzerinde çalıştığınız tek tek sayfa için sayfa ayarları içindeki özel CSS kutusunu ekleme seçeneğiniz olduğundan bahsetmiştim.

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 kutuya yapıştırın.

.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;
}

Geri sayım sayacımızda birkaç farklı şeyin değiştiğini hemen fark edeceksiniz (Visual Builder'ın canlı güncellemesi sayesinde). Her bölümün geri sayım sayacına ne yaptığını görmek için yukarıdaki CSS'yi küçük parçalar halinde yapıştırmanızı öneririm. Bu aynı zamanda, isterseniz daha fazla özelleştirmenizi de sağlar.

Değişikliklerinizi kaydettiğinizden emin olun; o zaman az önce yarattığınız şeye hayran olabilirsiniz!

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

Umarım bugünkü eğitim, Divi geri sayım sayacı modülünü bir sonraki seviyeye taşımanız için size ilham vermiştir! Unutmayın, bugün bu mini dizinin sadece 5'inci günü! Yarınki gönderide, size şeffaf bir geri sayım sayacını nasıl güzel bir arka plan görüntüsü elde edeceğinizi göstereceğim.

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!