Tam Ekran Arka Plan Videosu ile Geri Sayım Sayacı 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. 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!

---

Bugün mini dizimizdeki geri sayım sayacıyla ilgili son eğitim! Umarım bu eğitimler hem eğitici hem de ilham verici olmuştur. Bu eğitici mini dizilerin en güzel yanı, onları tam olarak öğreticide olduğu gibi veya tamamen size özel güzel web siteleri oluşturmak için bir başlangıç ​​noktası olarak kullanabilmenizdir.

Geri sayım sayacı modülü mini dizimizi bitirmek için gerçekten seveceğinizi düşündüğüm bir şey var. Başka bir deyişle, en iyisini sona sakladım! Bugünkü eğitimde, size eğlenceli ve dikkat çekici bir şekilde "gerilim oluşturmak" için geri sayım sayacınızda tam ekran arka plan videosunu nasıl kullanacağınızı göstereceğim. Başlayalım!

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

İşte başlayacağımız varsayılan Divi geri sayım sayacı modülü.

Aşağıda, bugün oluşturacağımız şeyin animasyonlu bir GIF'ini göreceksiniz.

Bu geri sayım sayacı, bariz nedenlerle benzersizdir. Tam ekran bölümü geri sayıma odaklanmanızı sağlar ve yüzen parçacıkların güzel arka plan videosu ona modern ve sofistike bir görünüm kazandırır. Bu mini dizinin başında bahsettiğim gibi, bir geri sayım sayacı, bir web sitesi veya ürün lansmanı ve hatta bir etkinlik için gerilim oluşturmak için mükemmeldir. Bugünün geri sayım sayacı bu rolü mükemmel bir şekilde dolduruyor!

Tam Ekran Arka Plan Videosu ile Geri Sayım Sayacı Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Tasarım Öğelerinin Hazırlanması

Günümüzün geri sayım sayacı, tam ekran arka plan videosu kullanır. Ücretsiz veya premium stok görüntüleri bulabileceğiniz pek çok yer var, ancak bu eğitim için Videezy'den bazı ücretsiz video kliplerden yararlanacağız.

İşte kullanacağımız videonun doğrudan bağlantısı: https://www.videezy.com/elements-and-effects/125-flying-particles-stock-video-in-hd

Devam edin ve ücretsiz stok videosunu bilgisayarınıza indirmek için büyük mor “İndir” düğmesine tıklayın. Kısa bir süre sonra kullanacağız. Bugünkü tasarımımızın geri kalanı, yerleşik Divi kontrolleri ve bazı özel CSS'lerle birlikte, yani hazırlanacak başka tasarım öğesi yok. Öyleyse Divi'ye gitme zamanı!

Tasarımı Divi ile Uygulamak

Bugünkü öğreticiyi mevcut bir sayfada kullanabilirsiniz, ancak basitlik adına yeni bir sayfada çalışacağız. Yeni bir sayfa oluşturun, bir başlık verin, Divi'yi etkinleştirin, ardından Divi'nin görsel oluşturucusunu açmak için büyük mavi “Görsel Oluşturucu Kullan” düğmesini tıklayın.

Divi bizim için otomatik olarak yeni bir bölüm oluşturuyor ama şimdi yeni bir satır oluşturmamız gerekiyor. Devam edin ve yeşil artı simgesine tıklayın, ardından aşağıdaki ekran görüntüsünde kırmızı anahatta gösterildiği gibi bir sütun satırı eklemek için simgeye tıklayın.

Divi, otomatik olarak eklenecek bir modül seçmenizi isteyecektir. “Geri sayım” yazmaya başlayabilirsiniz ve geri sayım sayacı sizin için filtrelenecektir. Üzerine tıklayın, geri sayım sayacı düzeninize eklenecek ve geri sayım sayacı modülü ayarları önünüzde açılacaktır.

Modül Ayarlarını Ayarlama

Önce geri saymak için bir tarih seçin ve ardından “Arka Plan Rengini Kullan”ı Hayır olarak değiştirin.

Şimdi, “Tasarım” sekmesine tıklayın ve “Sayılar Yazı Tipi Boyutu”nu 85 piksel ve “Etiket Yazı Tipi Boyutu”nu 15 piksel olarak değiştirin. Modül ayarlarında değiştirmemiz gereken tek şey bu. Ancak, varsayılan Divi yazı tipinden (Open Sans) başka bir şey kullanıyorsanız, aynı görünümü elde etmek için modül ayarlarının “Tasarım” sekmesindeki tüm yazı tiplerini “Açık Sans” olarak değiştirmeniz gerekecektir. benim örneğim olarak. Aksi takdirde, geri sayım sayacı modülü ayarlarını kapatmak için kaydet düğmesine tıklayabilirsiniz. NOT: Geri sayım modülü metin rengini “Light” olarak bıraktığımız için orada hiç geri sayım sayacı yok gibi görünecek. Aşağıdaki talimatlara arka plan videomuzu eklediğimizde geri sayımı görebiliriz.

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

Şimdi bölümde birkaç küçük ayar yapmamız gerekiyor. Fareyle bölümün üzerine gelin ve Bölüm Ayarları'nı açın (bölümün üzerine geldiğinizde görünen mavi kontrol grubundaki dişli simgesine tıklayın).

Bölüm ayarlarını yaptıktan sonra, “Arka Plan Video MP4” ayarlarına gidin. Yükle düğmesine tıklayın ve daha önce indirdiğimiz videoyu Videezy'den ekleyin. Şimdi geri sayım sayacımızın arkasında oynayan arka plan videosunu görmelisiniz!

Şimdi Bölüm Modülü Ayarlarının Özel CSS sekmesinde sadece küçük bir ayar yapmamız gerekiyor. "Ana Öğe" özel CSS kutusuna ilerleyin ve yükseklik ekleyin : 100vh; kutuya. Bu, bölümü görüntü alanı yüksekliğinin %100'ü yaparak bölümü tam ekran yapar.

Şimdi bölüm ayarlarını kaydetmek için yeşil kaydet düğmesine tıklayın. İşte şimdiye kadar görmeniz gerekenler. Yakınlaşmak!

Özel CSS Ekleme

Yapmamız gereken son şey, bizi oraya götürecek özel CSS'yi eklemek! Evet, bölüm ve satır ayarlarına zaten az miktarda özel CSS ekledik, ancak özel CSS'nin geri kalanı için bunu Divi Tema Seçenekleri panelinin veya tek tek sayfanın Özel CSS kutusuna ekleyeceğiz ayarlar.

Neden tüm CSS'yi doğrudan modül, satır veya bölüm içine eklemiyoruz? Divi, modüllerin, satırların ve bölümlerin ayarlarında önceden hedeflenmiş CSS sınıflarına sahiptir, ancak Divi stil sayfasında bulunan tüm CSS sınıflarını hedeflemez. Dolayısıyla, yukarıda bahsedilen alanlardan birine CSS ekleyerek bu sınıfları kendi başımıza hedeflememiz gerekecek.

Yine de CSS'yi eklemeden önce, sitede bulunan veya sitede olacak TÜM geri sayım sayaçlarını değil, yalnızca bugün üzerinde çalıştığımız geri sayım sayacı modülünü özelleştirebilmemiz için özel sınıflarımızı eklememiz gerekecek.

Bu nedenle, modül ayarlarını açın ve CSS sekmesine tıklayın ve CSS sınıfı olarak özel geri sayım-5'i ekleyin.

Artık özel sınıfımız eklendiğine göre, özel CSS'mizi eklemeye hazırız. Yukarıda bahsedildiği gibi, bu CSS'yi Divi Tema Seçenekleri içindeki özel CSS kutusuna veya tek bir sayfa için Divi sayfası ayarlarına ekleyebilirsiniz. Sitenizdeki diğer sayfalara aynı tasarıma sahip ek geri sayım sayaçları eklemeyi planlamıyorsanız, tek tek sayfanın sayfa ayarlarına CSS'yi eklemenizi öneririm. Bu, özel CSS değişikliklerini gerçek zamanlı olarak görmenizi sağlar (Divi'nin Görsel Oluşturucusu sayesinde).

Sayfa ayarlarını açmak için ekranınızın altındaki mor dişli simgesine tıklayın. Bunu görmüyorsanız, gördüğünüz mor simgeye tıklayın, menü simgelerinin geri kalanını açacaktır. Sayfa Ayarları açıldığında, CSS sekmesine tıklayın ve aşağıdaki CSS'yi kutuya yapıştırın. Değişiklikleri gerçek zamanlı olarak görmelisiniz.

<pre>.custom-countdown-5.et_pb_countdown_timer .sep {
display: none;
}

.custom-countdown-5.et_pb_countdown_timer .section.values {
 border-left: 1px solid #808080;
}
.custom-countdown-5 .days {
border-left: none !important;
 margin-right: 16px;
}

Ardından, değişikliklerinizi kaydedin ve yaratıcılığınıza hayran kalın!

BONUS: Ek Özelleştirme

Dünkü eğitimde, geri sayım sayacınıza nasıl hareketli bir gradyan arka planı ekleyeceğinizi gösterdim. Daha da benzersiz bir görünüm için animasyonlu degrade arka planı tam ekran arka plan videomuzla birleştirebiliriz! Basitçe aşağıdaki CSS'yi ekleyin (yukarıdan CSS'den sonra).

.et_pb_section:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-o-animation: colorcycle 20s ease infinite;
-moz-animation:
colorcycle 20s ease infinite;
-webkit-animation: colorcycle 20s ease infinite; animation: colorcycle 20s ease infinite;
background: linear-gradient(270deg, #a253e0, #f15b4f, #2ea3f2);
background-size: 600% 600%;
}
@-webkit-keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.et_pb_section_video_bg { opacity: .9; }

İşte nasıl görüneceği:

Bu, Geri Sayım Sayacı Serimi Bitiriyor

Bu, geri sayım sayacı mini dizilerimi sonlandırırken, topluluk için mağazada daha fazla harika Divi öğreticisi var. Takip ettiğiniz için teşekkürler ve her gün Divi blog yazıları için sizi tekrar burada görmeyi umuyorum!

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!