"Geri Sayım Sayacı" modülünü nasıl özelleştireceğinizi bilmek ister misiniz? Divi GIF ile?
Bugünkü eğitimde, kursunuzda tam ekran arka plan videosunu nasıl kullanacağınızı göstereceğiz. "Geri sayım saati". Eğlenceli ve dikkat çekici bir şekilde "gerilim yaratmak" için kullanılabilir.
Başlayalım!
anket
Bu öğreticiye dalmadan önce, elde etmek istediğimiz sonuca bir göz atalım.
Divi ile geri sayım tasarımı
Tasarım öğelerinin hazırlanması
Tasarlayacağımız geri sayım, arka planda bir video kullanıyor. Ücretsiz veya premium stok görüntüleri bulabileceğiniz birçok yer var. Ancak bu eğitim için, bazı ücretsiz video kliplerden yararlanacağız. video.
Kullanacağımız videonun doğrudan bağlantısı: Uçan Parçacıklar.
Divi ile tasarım uygulaması
Mevcut bir sayfayı kullanabilirsiniz. Ancak sadelik adına yeni bir sayfada çalışacağız.
Bu yüzden yeni bir sayfa oluşturun ve aşağıdaki sütun yapısına sahip bir satır ekleyin.
Modülü takın " Geri sayım saati ".
Modül parametrelerinin ayarlanması
Önce geri sayıma kadar bir tarih seçin, ardından düzenleyin:
- Arka Plan Rengini Kullan: HAYIR
Şimdi sekmeye tıklayın "Tasarım" ve aşağıdaki ayarları değiştirin.
- Sayılar Metin Boyutu: 85px
- Etiket Metni Boyutu: 15px
AÇIKLAMA : arka plan rengini kaldırdığımız için geri sayım yok gibi görünecek. Aşağıdaki talimatlara arka plan videomuzu eklediğimizde geri sayımı görebileceğiz.
Bölüm Parametrelerini Ayarlama
Şimdi bölümde bazı küçük değişiklikler yapmamız gerekiyor. Bölümün üzerine gelin ve ayarları açın.
Sekmede içerik, ayarlara git " Arka plan Video »ve sonra Olayın Arka Planı Video MP4.
Tıkla « Arka Plan Ekle Video » ve daha önce indirdiğimiz videoyu ekleyin video. Şimdi geri sayımımızın arkasında oynayan arka plan videosunu görmelisiniz.
Şimdi sekmede sadece küçük bir ayar yapmamız gerekiyor gelişmiş bölüm modülü parametreleri. Aşağıdaki özel CSS'yi ekleyin Ana eleman.
height: 100vh; 
İşte şimdiye kadar görmeniz gerekenler.
Özel CSS eklendi
Yapmamız gereken son şey, bizi sonuna kadar götürecek özel CSS'yi eklemek.
Yani, modül ayarlarını açın, sekmeye tıklayın "Gelişmiş" ve CSS sınıfını ekleyin
- CSS Sınıfı: özel geri sayım-5
Artık özel sınıfımız eklendiğine göre, özel CSS'mizi eklemeye hazırız.
Bunu yapmak için sayfa ayarlarına gidin.
Sekmeye git gelişmiş ve aşağıdaki özel CSS'yi ekleyin.
.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
Daha da benzersiz bir görünüm için animasyonlu degradeyi arka plan videomuzla birleştirebiliriz. Sadece aşağıdaki CSS'yi ekleyin (yukarıdaki 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:
DIVI'yı Şimdi İndirin !!!
Sonuç
Bu eğitimin sonraki projeleriniz için size ilham vereceğini umuyoruz. Divi. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.
Ayrıca kılavuzumuza bakın WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
