Divi ile Animasyonlu Arka Plan Renkleri Nasıl Oluşturulur

Divi'nin animasyon seçenekleri, zaten güzel olan bir sayfayı hızla ilgi çekici bir sayfaya da dönüştürebilir. Şimdiye kadar hepimiz Divi'nin size sunduğu çeşitli tasarım öğelerinde yerleşik olarak bulunan farklı animasyonlara alıştık. Ancak bu animasyonları belirli bir tasarım seçeneğini vurgulamak için de kullanabileceğinizi biliyor muydunuz?

Bu eğitimde, hareketli arka plan renkleri oluşturmaya odaklanacağız. İstenen sonucu elde etmek için, arka plan rengi için bir Bölücü Modül kullanacağız ve üstüne bir Metin Modülü yerleştireceğiz. Bu öğreticinin, gelecek web tasarım projelerine hareketli arka plan renkleri eklemeniz için size ilham vermesini umuyoruz.

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Animasyonlu Arka Plan Renk Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz animasyonlu arka plan rengi düzenine koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Yeniden Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

aralık

Yapmanız gereken ilk şey, üzerinde çalıştığınız sayfaya yeni bir bölüm eklemek. Bölüm ayarlarını açın ve bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 5vw
• Alt Dolgu: 17vw

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın ekranın tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

Bölücü Modül #1'i Sütuna Ekle

görünürlük

Bir Bölücü Modül ile başlayarak, ihtiyacımız olan çeşitli modülleri eklemeye başlama zamanı. Bu Bölücü Modül, arka plan rengi, boyutu ve animasyonu için kullanılacaktır. 'Bölücüyü Göster' seçeneğinin devre dışı olduğundan emin olun.

• Bölücüyü Göster: Hayır

Arka plan rengi

Arka plan ayarlarına gidin ve aşağıdaki arka plan rengini ekleyin:

• Arka Plan Rengi: #212121

aralık

Aralık ayarlarına geçin ve görünüm alanı yükseklik birimini kullanarak modülünüze istediğiniz şekli verin.

• Üst Dolgu: 30vh
• Alt Dolgu: 30vh

Animasyon

Animasyon gecikmeli özel bir animasyon ekleyerek arka plan renginin canlandırılmasına izin veriyoruz.

• Animasyon Stili: Slayt
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Sağ
• Animasyon Gecikmesi: 1000ms
• Animasyon Yoğunluğu: %88
• Animasyon Opaklığı Başlatma: %100

Sütuna Metin Modülü #1 Ekle

İçerik Ekle

İhtiyacımız olan bir sonraki modül bir Metin Modülü. Seçtiğiniz bazı H2 ve paragraf içeriğini ekleyin.

Metin Ayarları

Ardından, metin ayarlarına gidin ve değerleri buna göre değiştirin:

• Metin Yazı Tipi: Didact Gothic
• Metin Rengi: #ffffff
• Metin Boyutu: 1.1vw (Masaüstü), 1.7vw (Tablet), 2.5vw (Telefon)
• Metin Satırı Yüksekliği: 2.1em
• Metin Yönü: Yasla

Varsayılan Başlık 2 Metin Ayarları

Sonraki H2 metin ayarlarında bazı değişiklikler yapın.

• Başlık 2 Yazı Tipi: Abril Fatface
• Başlık 2 Metin Rengi: #1c1c1c
• Başlık 2 Metin Boyutu: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)
• Başlık 2 Çizgi Yüksekliği: 1.8em

Vurgulu Başlık 2 Metin Ayarları

Fareyle üzerine gelindiğinde metin rengini de değiştiriyoruz.

• Başlık 2 Metin Rengi: #ffffff

Her İki Modülü de Klonla

Her iki modülü de eklemeyi ve özelleştirmeyi tamamladığınızda, bunları klonlayabilirsiniz. Bu yazının sonraki adımlarında, her iki taraftan gelen bir arka plan rengi animasyonu oluşturmak için dört modülün hepsini değiştireceğiz. Ayırıcı modüller ve metin modülleri aynı kapta oluşturulmuş gibi görünmesi için Metin Modüllerine bir örtüşme de ekleyeceğiz.

Bölücü Modül Çoğaltmasını Değiştir

Arka Plan Rengini Değiştir

Yinelenen Bölücü Modülünü açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #0bbfa1

Animasyonu Değiştir

Arka plan animasyonunun diğer taraftan görünmesini sağlamak için animasyon yönünü değiştiriyoruz. İstediğimiz sonucu elde etmek için biraz daha yüksek bir animasyon gecikmesi de ekleyeceğiz.

• Animasyon Yönü: Sol
• Animasyon Gecikmesi: 1500ms

Metin Modülü Çoğaltmasını Değiştir

İçeriği Değiştir

Yinelenen Metin Modülünü açıp içeriği değiştirerek devam edin.

Başlık 2 Metin Ayarlarını Değiştir

Tasarım sekmesine geçin ve H2 metin ayarlarını da değiştirin.

• Başlık 2 Metin Hizalama: Sağ
• Başlık 2 Metin Rengi: #0cc9ad

Bölücü Konumlandırma

Bölücü Modül #1

İlk Bölücü Modülün sağ tarafında biraz boşluk görünmesine izin vermek için, görünüm alanı genişlik birimini kullanarak biraz sağ kenar boşluğu ekleyeceğiz.

• Sağ Marj: 20vw

Bölücü Modül #2

İkinci Bölücü Modülü de açın ve aynı alanın doldurulmasına izin verin, ancak bunun yerine sayfanın sol tarafında.

• Üst Marj: 2vw
• Sol Kenar Boşluğu: 20vw

Örtüşme Ekle

Metin Modülü #1

Artık satırımızdaki tüm modülleri özelleştirdiğimize göre, ilk Metin Modülünden başlayarak çakışmaları oluşturmaya başlayabiliriz. Modülün boşluk ayarlarına aşağıdaki özel kenar boşluğu değerlerini ekleyin:

• Üst Marj: -49vh
• Sağ Kenar Boşluğu: 20vw (Masaüstü), 15vw (Tablet), 10vw (Telefon)

Metin Modülü #2

Yinelenen Metin Modülü için de aşağıdaki özel kenar boşluğu değerlerini kullanın:

• Üst Marj: -49vh
• Sol Kenar Boşluğu: 20vw (Masaüstü), 15vw (Tablet), 10vw (Telefon)

Sonucu Görüntülemek için Visual Builder'dan çıkın

Örtüşmeleri oluşturduktan sonra sonucu görmek için Görsel Oluşturucu'dan çıkmanız gerekir!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Her zaman web tasarımında sınırları zorlamanıza ve güzel ve ilgi çekici web siteleri oluşturmanıza yardımcı olacak yollar arıyoruz. Bu gönderide, hareketli arka plan renkleri oluşturmak için farklı tasarım öğelerini ve örtüşmeleri yaratıcı bir şekilde birleştirdik. Bu, üzerinde çalıştığınız herhangi bir sayfaya ekstra boyut katmanın ve web sitenizin mevcut tasarım trendleriyle mükemmel bir şekilde eşleşmesini sağlamanın harika bir yoludur. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde bir 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 kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.