Divi ile arka plan rengi animasyonu nasıl yapılır
Divi animasyon seçenekleri güzel sayfaları hızlı bir şekilde ilginç sayfalara dönüştürebilir. Şimdi, hepimiz Divi tarafından sizin için sağlanan çeşitli tasarım öğelerine yerleştirilmiş çeşitli animasyonlara alışkınız. Ancak belirli bir tasarım seçeneğini de vurgulamak için bu animasyonu kullanabileceğinizi biliyor muydunuz? Bu öğreticide, animasyonlu arka plan renkleri yapmaya odaklanacağız. İstenen sonuçları elde etmek için, arka plan rengi için bölücü modülünü kullanacağız ve metin modülünü üzerine yerleştireceğiz. Bu öğretici, yaklaşan web tasarım projesine animasyonlu bir arka plan rengi eklemenize ilham veriyor.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Yaratmaya başlayalım!
YouTube kanalına abone Olmanız gereken ilk şeyin yeni bir bölümünü ekliyoruz, üzerinde çalıştığınız sayfaya yeni bir parça eklemek. Bölüm ayarlarını açın ve bazı özel dolgu değerleri ekleyin.
Üst Dolgu: 5VW
Dolgu Alt: 17VW
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın ekranın tüm genişliğini karşılamasına izin verin. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
1 numaralı bölücü modülünü görünürlük sütununa ekleyin, bölücü modülünden başlayarak ihtiyacımız olan çeşitli modülleri eklemeye başlamanın zamanı geldi. Bu bölücü modülü arka plan rengi, boyutu ve animasyon için kullanılacaktır. ‘Bölüciyi Görüntüle’ seçeneğinin devre dışı bırakıldığından emin olun. Divisor göster: hayır
Arka Plan Rengi Arka plan ayarlarını açın ve aşağıdaki arka plan rengini ekleyin: Arka plan rengi: #212121
Mesafe mesafe ayarlarına geçin ve ViewPort yükseklik birimini kullanarak modülünüze istediğiniz şekli verin. Üst Dolgu: 30VHPADDING AŞAĞIDAKİ: 30VH
Animasyonumuz, animasyon gecikmeleri ile özel animasyonlar ekleyerek arka plan renginin canlandırılmasını sağlar.
Animasyon Stili: Slayt Animasyon tekrarlama: bir kez
Animasyonlu yön: doğru
Animasyon gecikmesi: 1000ms
Animasyon yoğunluğu:% 88
Animasyon Opaklık Başlar:% 100
Metin Modülü Ekle Sütuna 1 #1 Ekle İhtiyacımız olan bir sonraki modülün içeriğini ekleyin Metin modülü. Biraz H2 içeriği ve seçim paragrafınız ekleyin.
Metin Ayarları Ardından, metin ayarlarını açın ve değeri buna göre değiştirin:
Metin boyutu: 1.1vw (masaüstü), 1.7vw (tablet), 2.5vw (telefon)
Yüksek çizgi metin: 2.1em
Metin Oryantasyonu: haklı çıkar
Başlık Metin Ayarları 2 Varsayılan Sonraki H2 metin ayarlarında bazı değişiklikler oluşturun.
Başlık 2 Yazı Tipi: Abril Fatface Başlık 2 Renk Metni: #1C1C1C
Başlık 2 Metin Boyutu: 3VW (Masaüstü), 5VW (Tablet), 7VW (Telefon)
Post 2 hat yüksekliği: 1.8EM
Metin ayarlarımızın 2’sini doğrudan yönlendirme, imleci yönlendirirken metnin rengini de değiştirir.
Başlık 2 Renk Metni: #ffffff İki modülü ekleyip ayarladıktan sonra modülün ikinci klonu, klonlayabilirsiniz. Bu yazının bir sonraki adımında, her iki taraftan gelen bir arka plan rengi animasyonu oluşturmak için dört modülü değiştireceğiz. Ayrıca, bir bölücü modülüne benzemesini sağlamak için metin modülüne örtüşme ekleyeceğiz ve metin modülü aynı kapta yapılır.
Yinelenen modül değiştirme renk arka planı değiştirin yinelenen bölücü modülünü açın ve arka plan rengini değiştirin. Arka plan rengi: #0bbfa1 Bir arka plan animasyonunu yapmak için animasyonu değiştir diğer taraftan görünür, animasyonun yönünü değiştiririz. İstediğimiz sonuçları elde etmek için biraz daha yüksek bir animasyon gecikmesi de ekleyeceğiz.
Animasyon gecikmesi: 1500ms Yinelenen Metin Modülünü Değiştir İçeriği Değiştirme Yinelenen bir metin modülünü açarak ve içeriği değiştirerek devam edin.
Başlık 2 metin ayarlarını değiştirin Tasarım sekmesine geçin ve H2 metin ayarlarını da değiştirin.
Başlık 2 Metin Seviyesi: Doğru Başlık 2 Renk Metni: #0cc9ad Bölme modülünün #1’in yerleştirilmesi İlk bölücü modülünün sağ tarafında bazı beyaz boşluklar görünmesini sağlamak için, görünüm geniş birimini kullanarak sağ kenar boşluğu ekleyeceğiz.
Doğru marj: 20VW
#2 bölücü modülü ayrıca ikinci bölücü modülünü açar ve kullanılmak üzere aynı alanı bırakır, ancak bunun yerine sayfanın sol tarafında. Üst Marj: 2VW
Sol kenar boşluğu: 20VW Üst üste binen metin modülü ekleyin #1 Şimdi satırımızdaki tüm modülleri ayarladık, ilk metin modülünden başlayarak örtüşmeye başlayabiliriz. Modül alanı ayarlarına aşağıdaki özel marj değerini ekleyin:
Üst kenar boşluğu: -49vh
Sağ kenar boşluğu: 20VW (masaüstü), 15VW (tablet), 10vw (telefon) Metin Modülü #2 Yinelenen metin modülleri için aşağıdaki özel marj değerlerini kullanın:
Üst kenar boşluğu: -49vh
Sol kenar boşluğu: 20VW (masaüstü), 15VW (tablet), 10vw (telefon) Sonuçları görmek için görsel oluşturucudan çıkın, üst üste geldikten sonra, sonuçları görmek için görsel oluşturucudan çıkmanız gerekir!
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel Son zihnimiz her zaman web tasarımındaki sınırları teşvik etmenize ve güzel ve çekici web siteleri oluşturmanıza yardımcı olacak yollar arıyor.Bu yazıda, animasyonlu bir arka plan rengi oluşturmak için farklı ve örtüşen tasarım öğelerini yaratıcı bir şekilde birleştiriyoruz.Bu, üzerinde çalıştığınız herhangi bir sayfaya bazı ekstra boyutlar eklemenin ve web sitenizin mevcut tasarım trendlerini mükemmel bir şekilde eşleştirmenin iyi bir yoludur.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde yorum bıraktığınızdan emin olun. Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, e -posta bültenimize ve YouTube kanallarımıza abone olduğunuzdan emin olun, böylece her zaman biri olacaksınız Bu ücretsiz içeriğin faydalarını bilen ve alan ilk insanlar.
Yaratmaya başlayalım!
YouTube kanalına abone Olmanız gereken ilk şeyin yeni bir bölümünü ekliyoruz, üzerinde çalıştığınız sayfaya yeni bir parça eklemek. Bölüm ayarlarını açın ve bazı özel dolgu değerleri ekleyin.
Üst Dolgu: 5VW
Dolgu Alt: 17VW
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın ekranın tüm genişliğini karşılamasına izin verin. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
1 numaralı bölücü modülünü görünürlük sütununa ekleyin, bölücü modülünden başlayarak ihtiyacımız olan çeşitli modülleri eklemeye başlamanın zamanı geldi. Bu bölücü modülü arka plan rengi, boyutu ve animasyon için kullanılacaktır. ‘Bölüciyi Görüntüle’ seçeneğinin devre dışı bırakıldığından emin olun. Divisor göster: hayır
Arka Plan Rengi Arka plan ayarlarını açın ve aşağıdaki arka plan rengini ekleyin: Arka plan rengi: #212121
Mesafe mesafe ayarlarına geçin ve ViewPort yükseklik birimini kullanarak modülünüze istediğiniz şekli verin. Üst Dolgu: 30VHPADDING AŞAĞIDAKİ: 30VH
Animasyonumuz, animasyon gecikmeleri ile özel animasyonlar ekleyerek arka plan renginin canlandırılmasını sağlar.
Animasyon Stili: Slayt Animasyon tekrarlama: bir kez
Animasyonlu yön: doğru
Animasyon gecikmesi: 1000ms
Animasyon yoğunluğu:% 88
Animasyon Opaklık Başlar:% 100
Metin Modülü Ekle Sütuna 1 #1 Ekle İhtiyacımız olan bir sonraki modülün içeriğini ekleyin Metin modülü. Biraz H2 içeriği ve seçim paragrafınız ekleyin.
Metin Ayarları Ardından, metin ayarlarını açın ve değeri buna göre değiştirin:
Metin yazı tipi: Didact Gothic
Metin rengi: #ffffffMetin boyutu: 1.1vw (masaüstü), 1.7vw (tablet), 2.5vw (telefon)
Yüksek çizgi metin: 2.1em
Metin Oryantasyonu: haklı çıkar
Başlık Metin Ayarları 2 Varsayılan Sonraki H2 metin ayarlarında bazı değişiklikler oluşturun.
Başlık 2 Yazı Tipi: Abril Fatface Başlık 2 Renk Metni: #1C1C1C
Başlık 2 Metin Boyutu: 3VW (Masaüstü), 5VW (Tablet), 7VW (Telefon)
Post 2 hat yüksekliği: 1.8EM
Metin ayarlarımızın 2’sini doğrudan yönlendirme, imleci yönlendirirken metnin rengini de değiştirir.
Başlık 2 Renk Metni: #ffffff İki modülü ekleyip ayarladıktan sonra modülün ikinci klonu, klonlayabilirsiniz. Bu yazının bir sonraki adımında, her iki taraftan gelen bir arka plan rengi animasyonu oluşturmak için dört modülü değiştireceğiz. Ayrıca, bir bölücü modülüne benzemesini sağlamak için metin modülüne örtüşme ekleyeceğiz ve metin modülü aynı kapta yapılır.
Yinelenen modül değiştirme renk arka planı değiştirin yinelenen bölücü modülünü açın ve arka plan rengini değiştirin. Arka plan rengi: #0bbfa1 Bir arka plan animasyonunu yapmak için animasyonu değiştir diğer taraftan görünür, animasyonun yönünü değiştiririz. İstediğimiz sonuçları elde etmek için biraz daha yüksek bir animasyon gecikmesi de ekleyeceğiz.
Animasyon gecikmesi: 1500ms Yinelenen Metin Modülünü Değiştir İçeriği Değiştirme Yinelenen bir metin modülünü açarak ve içeriği değiştirerek devam edin.
Başlık 2 metin ayarlarını değiştirin Tasarım sekmesine geçin ve H2 metin ayarlarını da değiştirin.
Başlık 2 Metin Seviyesi: Doğru Başlık 2 Renk Metni: #0cc9ad Bölme modülünün #1’in yerleştirilmesi İlk bölücü modülünün sağ tarafında bazı beyaz boşluklar görünmesini sağlamak için, görünüm geniş birimini kullanarak sağ kenar boşluğu ekleyeceğiz.
Doğru marj: 20VW
#2 bölücü modülü ayrıca ikinci bölücü modülünü açar ve kullanılmak üzere aynı alanı bırakır, ancak bunun yerine sayfanın sol tarafında. Üst Marj: 2VW
Sol kenar boşluğu: 20VW Üst üste binen metin modülü ekleyin #1 Şimdi satırımızdaki tüm modülleri ayarladık, ilk metin modülünden başlayarak örtüşmeye başlayabiliriz. Modül alanı ayarlarına aşağıdaki özel marj değerini ekleyin:
Üst kenar boşluğu: -49vh
Sağ kenar boşluğu: 20VW (masaüstü), 15VW (tablet), 10vw (telefon) Metin Modülü #2 Yinelenen metin modülleri için aşağıdaki özel marj değerlerini kullanın:
Üst kenar boşluğu: -49vh
Sol kenar boşluğu: 20VW (masaüstü), 15VW (tablet), 10vw (telefon) Sonuçları görmek için görsel oluşturucudan çıkın, üst üste geldikten sonra, sonuçları görmek için görsel oluşturucudan çıkmanız gerekir!
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel Son zihnimiz her zaman web tasarımındaki sınırları teşvik etmenize ve güzel ve çekici web siteleri oluşturmanıza yardımcı olacak yollar arıyor.Bu yazıda, animasyonlu bir arka plan rengi oluşturmak için farklı ve örtüşen tasarım öğelerini yaratıcı bir şekilde birleştiriyoruz.Bu, üzerinde çalıştığınız herhangi bir sayfaya bazı ekstra boyutlar eklemenin ve web sitenizin mevcut tasarım trendlerini mükemmel bir şekilde eşleştirmenin iyi bir yoludur.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde yorum bıraktığınızdan emin olun. Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, e -posta bültenimize ve YouTube kanallarımıza abone olduğunuzdan emin olun, böylece her zaman biri olacaksınız Bu ücretsiz içeriğin faydalarını bilen ve alan ilk insanlar.
