Tam Ekran Arka Plan Video ile Zaman Nasıl Yapılır
Bu yazı, Divi Geri Time Counters modülünü organize etmenin 5 etkileyici yolunu başlıklı Mini Serimizde 5’in 5. Bölümü. 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!
Bugün, sayım zamanı hakkında mini dizilerimizde son öğretici! Umarım bu öğretici de ilham vericidir. Bu öğreticinin mini dizileri ile ilgili en güzel şey, tam olarak öğreticideki gibi kullanabilmeniz veya size gerçekten özgü güzel bir web sitesi oluşturmak için bir başlangıç noktası olarak kullanabilmenizdir.
Bu yüzden geri çekilme modülümüzün mini dizilerini tamamlamak için, gerçekten seveceğinizi düşündüğüm bir şey var. Başka bir deyişle, sonuna kadar en iyisini kurtardım! Bugünün öğreticisinde, eğlenceli ve olağanüstü bir şekilde “gerginlik oluşturmak” için geri zaman sayımınızda tam ekran arka plan videosunu nasıl kullanacağınızı göstereceğim. Başlayalım! Divi’nin Geri Sayım Modülü: Bundan önce ve sonra, başlayacağımız Divi Varsayılan Zaman -Retreat Modül. Ve aşağıda bugün ne yapacağımızın animasyonlu gifini göreceksiniz. Bu sefer geri sayım net nedenlerle benzersizdir. Tam ekran sizi geri saymaya odaklamayı sağlar ve yüzen bir parçacığın güzel arka plan videosu modern ve sofistike bir görünüm sağlar. Bu mini dizilerin başlangıcında bahsettiğim gibi, zaman sayma süresi web siteleri veya ürün lansmanı için gerginlik ve hatta bir etkinlik için çok uygundur. Bugünün geriye dönük zaman sayaçları bu rolü mükemmel bir şekilde dolduruyor! Tam ekran kanalına abone olan tam ekran arka plan videosu ile zaman yapımı nasıl yapılır. Ücretsiz veya premium stok kayıtları bulmak için birçok yer var, ancak bu öğretici için Videezy’den bazı ücretsiz video klipleri kullanacağız. Doğrudan videoya bağlantıyı takip edeceğiz: https://www.videezy.com/elements– ve -Kespikler /125-Batakçı-Partiküller Stock-Video-HD
Lütfen bilgisayarınıza ücretsiz stok videoları indirmek için “İndir” Büyük Mor düğmesini tıklayın. Yakında kullanacağız. Bugünkü tasarımımızın geri kalanı varsayılan Divi kontrolü ve bazı özel CSS ile çalışmıyor, bu nedenle hazırlanması gereken daha fazla tasarım öğesi yok. Yani Divi’ye gitme zamanı! Divi ile bir tasarım uygulayarak bugünün öğreticisini mevcut sayfada kullanabilirsiniz, ancak basitlik için yeni bir sayfada çalışacağız. Bu yüzden yeni bir sayfa oluşturun, bir başlık verin, divi’yi etkinleştirin, ardından görsel bir divi yapıcı açmak için “Visual Builder kullan” düğmesini tıklayın. Divi bizim için otomatik olarak yeni bir rol yapıyor, ancak şimdi yeni bir çizgi yapmamız gerekiyor. Lütfen ve Green Plus simgesini tıklayın, ardından aşağıdaki ekran görüntüsünde kırmızı çizgide gösterildiği gibi sütunun bir satırını eklemek için simgeyi tıklayın. Divi, eklenecek modülü seçmenizi otomatik olarak isteyecektir. “Geriye sayım” yazmaya başlayabilirsiniz ve zaman -retreat sizin için filtrelenecektir. Üzerine tıklayın, zaman sayma süresi düzeninize eklenecek ve geriye dönük zaman sayma modülü ayarları önünüzde açılacaktır.
İlk modül ayarlarını ayarlayın, geri sayılacak tarihi seçin, ardından “Arka plan rengini kullan” ı değiştirin. Şimdi, “Tasarım” sekmesini tıklayın ve “Sayı Yazı Tipi Boyutu” nu 85px ve “Yazı Tipi Etiketi Boyutu” nu 15px olarak değiştirin. Modül ayarlarında değişmemiz gereken tek şey bu. Ancak, Divi varsayılan yazı tipi (SANS Open SAN) dışında bir şey kullanıyorsanız, aynı görünümü elde etmek için modül ayarlarındaki “Tasarım” sekmesindeki tüm yazı tiplerini “SANS” olarak değiştirmeniz gerekir. Örneğin ben. Değilse, modül modülünün ayarlarını kapatmak için Kaydet düğmesine tıklayabilirsiniz. Not: Metin modülünün renginin “Işık” olarak geri sayılmasına izin verdik, çünkü zaman sayma zamanı yok gibi görünecektir. Arka plan videomuzu aşağıdaki talimatlara ekledikten sonra geri sayımı görebileceğiz.
Parçalarımızın ayarlarını ayarlamak artık bu bölümde bazı küçük ayarlamalar yapması gerekiyor. İmleci bölüme gidin ve bölüm ayarlarını açın (imleci bölüme yönlendirdiğinizde görünen mavi kontrol kümesindeki dişli simgesini tıklayın). Ayarları aldıktan sonra “Arka Plan Video MP4” ayarlarına gidin. Yükle düğmesini tıklayın ve daha önce Videezy’den indirdiğimiz videoyu ekleyin. Şimdi gençleştirme sayımızın arkasında çalınan bir arka plan videosu göreceksiniz! Şimdi yalnızca bölüm modülü ayarlarında özel CSS sekmesinde küçük bir ayar yapmamız gerekiyor. Özel CSS kutusuna “Ana Element” e kaydırın ve yükseklik ekleyin: 100VH; kutuya. Bu, görünümün yüksekliğinin% 100 bir parçası haline getirerek ekranı doldurur. Şimdi bölüm ayarlarını kaydetmek için Yeşil Kaydet düğmesini tıklayın. Şimdiye kadar görmeniz gereken şey bu. Yaklaşmak!
CSS Custom Ekle Yapmamız gereken son şey, bizi oraya getirmek için özel CSS eklemektir! Evet, ayarlarda ve satırlara az sayıda özel CSS ekledik, ancak geri kalan özel CSS için, Divi tema panelinden veya ayrı ayrı Ayarlar sayfasından özel CSS kutusuna ekleyeceğiz. Neden tüm CSS’yi doğrudan modüle, satıra veya parçaya eklemiyoruz? Divi, modülleri, satırları ve bölümleri ayarlamada önceden hedeflenmiş bir CSS sınıfına sahiptir, ancak Divi Stylesheet’te bulunan tüm CSS sınıflarını hedeflemez. Bu nedenle, yukarıda belirtilen alanlardan birine CSS ekleyerek sınıfların kendilerini hedeflememiz gerekiyor.
CSS eklemeden önce, sadece bugün üzerinde çalıştığımız geriye dönük zaman sayımlarını ayarlayacağımız ve sitede geriye doğru tüm sayaçları değil veya sitede olacağımız için özel sınıfımızı eklememiz gerekir. Bu nedenle, modül ayarlarını açın ve CSS sekmesine tıklayın ve CSS sınıfı olarak Custom-countdown-5 ekleyin. Şimdi özel sınıfımız eklendi, özel CSS’imizi eklemeye hazırız. Yukarıda belirtildiği gibi, bu CSS’yi Divi Tema seçeneğinde veya ayrı sayfalar için Divi sayfa ayarlarına özel bir CSS kutusuna ekleyebilirsiniz. Sitenizdeki diğer sayfalara aynı tasarıma sahip ek zaman sayımları eklemeyi planlamadığınız sürece, ayrı sayfalar için sayfa ayarlarına CSS eklemelisiniz. Bu, özel CSS değişikliklerini gerçek zamanlı olarak görmenizi sağlayacaktır (Divi’nin görsel inşaatçısına teşekkür ederiz).
Sayfa ayarlarını açmak için ekranınızın altındaki Mor Dişli simgesini tıklayın. Görmüyorsanız, gördüğünüz Mor simgesini tıklayın ve diğer menü simgeleri açılır. Sayfa ayarları açıldıktan sonra CSS sekmesine tıklayın ve aşağıdaki CSS’yi kutuya yapıştırın. Gerçek zamanlı değişiklikleri görmelisiniz. & amp; amp; lt; pre & amp; amp; gt; custom-countdown-5.et_pb_cuntdown_timer .sep { Görüntü yok;} .Custom-countdown -5.et_pb_cuntdown_timer. section.values {
Sınır-sol: 1px katı #808080;
}
.Custom-countdown-5. Günler {
Sınır-sol: Yok! Önemli;
Marj-sağ: 16px;
}
Ardından, değişikliklerinizi kaydedin ve kreasyonlarınıza hayran olun!
Bonus: Ek özelleştirme Dünün öğreticisinde, geriye dönük zaman sayımlarınıza arka plan animasyonlu gradyanların nasıl ekleneceğini gösterdim. Daha benzersiz bir ekran için animasyonlu gradyanın arka planını tam ekran arka plan videomuzla birleştirebiliriz! Sadece aşağıdaki CSS’yi ekleyin (yukarıdan CSS’den sonra) .. et_pb_section: {content: “”;
Pozisyon: Mutlak;
Üst: 0;
Sol: 0; Alt: 0;
Sağ: 0;
-O-animasyon: Colorcycle 20’ler sonsuza dekir;
-Moz-animasyon:
Colorcycle 20’ler sonsuz kolay;
-Webkit-Animasyon: Colorcycle 20’ler sonsuza dekir; Animasyon: Colorcycle 20’ler sonsuza dek kolay;
Arka plan: doğrusal gradyan (270deg, #A253E0, #F15B4F, #2EA3F2);
Arka plan boyutu:% 600% 600;
}
@-Webkit-Keyframes Colorcycle {0%{Arka Plan pozisyonu:%0%50}%50 {arka plan pozisyonu:%100%50}%100 {arka plan pozisyonu: 0%50%}} @-moz-keyframes colorcycle {%0 {arka plan pozisyonu:%0%50}%50 {arka plan pozisyonu:%100%50}%100 {arka plan pozisyonu:%0%50}} @keyframes colorcycle {arka plan pozisyonu: 0 %50}%50 {arka plan pozisyonu:%100%50}%100 {arka plan pozisyonu:%0%50}}
.et_pb_section_video_bg {opaklık: .9; }
Aşağıdaki görünüm:
Bu, geriye dönük zamanımın geri zamanımın mini dizilerini sona erdirirken, topluluk için iyi olan daha fazla divi öğreticileri olduğu sonucuna varmıştı. Takip ettiğiniz için teşekkür ederiz ve sizi her gün Divi’nin blogunu yayınlamak için burada görmeyi umuyorum! Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
