Divi'nin Kaydırma Efektleriyle Zarf Animasyonu Nasıl Oluşturulur

Her yeni Divi özelliği çıktığında, alışılmışın dışında düşünmenize ve Divi ile yaratıcı olmanıza yardımcı olacak bazı harika ve kullanışlı öğreticileri paylaşmaya çalışıyoruz. Bugünün öğreticisi tam olarak bunu yapıyor. Divi'nin kaydırma efektleriyle nasıl duyarlı bir zarf animasyonu oluşturabileceğinizi göstereceğiz. Bu, örneğin bir harekete geçirici mesajı vurgulamanın harika bir yoludur, ancak bunu başka amaçlar için de kullanabilirsiniz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

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

Youtube Kanalımıza Abone Olun

Zarf Animasyon Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz zarf animasyon 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!

Öğe Yapısını Yeniden Oluştur

Sayfanın Ortasına veya Altına Yeni Bölüm Ekle

Arka plan rengi

Sayfanızın ortasına veya altına yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve arka plan rengini beyaz olarak değiştirin.

• Arka Plan Rengi: #FFFFFF

aralık

Sonraki boşluk ayarlarını değiştirin.

• Üst Dolgu: 5vw
• Alt Dolgu: 0px

taşmalar

Ve bölüm taşmalarını gizleyin.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

1. Satır Ekle

Sütun Yapısı

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

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #FFFFFF

boyutlandırma

Sonraki satırın tasarım sekmesine geçin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

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

aralık

Ardından, farklı ekran boyutlarına bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 14vw (Masaüstü), 11vw (Tablet ve Telefon)
• Alt Dolgu: 14vw (Masaüstü), 11vw (Tablet ve Telefon)
• Sol Dolgu: 20vw (Masaüstü), 10vw (Tablet ve Telefon)
• Sağ Doldurma: 20vw (Masaüstü), 10vw (Tablet ve Telefon)

Sınır

Biraz sınır yarıçapı da ekleyin.

• Tüm Köşeler: 20px

Kutu Gölge

Ayrıca ince bir kutu gölgesi kullanıyoruz.

• Kutu Gölge Dikey Konumu: 38px
• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.08)

Z İndeksi

Gelişmiş sekmesinde z dizinini artırarak satır ayarlarını tamamlayın.

• Z İndeksi: 11

Sütuna Metin Modülü #1 Ekle

H2 İçeriği Ekle

İlk Metin Modülünden başlayarak modül ekleme zamanı. Seçtiğiniz bazı H2 içeriğini girin.

H2 Metin Ayarları

Modülün H2 metin ayarlarını aşağıdaki gibi değiştirin:

• Başlık 2 Yazı Tipi: Poppins
• Başlık 2 Metin Boyutu: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

Bir öncekinin hemen altına başka bir Metin Modülü ekleyin ve seçtiğiniz bazı açıklama içeriğini ekleyin.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını değiştirin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Metin Satır Yüksekliği: 2.6em

aralık

Farklı ekran boyutlarına da bazı özel üst ve alt değerler ekleyin.

• Üst Dolgu: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)
• Alt Dolgu: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)

Sütuna Düğme Modülü Ekle

Kopya Ekle

Bu sıraya yerleştireceğimiz sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

Ardından, düğmeyi buna göre biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #0f33ff
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 100 piksel
• Düğme Yazı Tipi: Poppins

aralık

Ve farklı ekran boyutlarına bazı özel dolgu değerleri ekleyerek modülün ayarlarını tamamlayın.

• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)
• Sağ Doldurma: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)

2. Satır Ekle

Sütun Yapısı

Artık harekete geçirici mesaj satırına sahip olduğumuza göre, zarf şeklini oluşturmaya başlamanın zamanı geldi. Bunu yapmak için aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

boyutlandırma

Boyutlandırma ayarlarını aşağıdaki gibi değiştirerek satırın tüm bölümün genişliğini almasına izin verin:

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

aralık

Tüm varsayılan üst ve alt dolguyu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Görüntülemek

Sütunların daha küçük ekran boyutlarında yan yana görünmesini sağlamak için satırın ana öğesine bir satır CSS kodu ekleyeceğiz.

display: flex;

Sütun 1'e Görüntü Modülü Ekle

Görüntü Kutusunu Boş Bırak

Sütun 1'e bir Görüntü Modülü ekleyin ve görüntü kutusunu boş bırakın.

Degrade Arka Plan

Bunun yerine, degrade bir arka plan kullanıyoruz.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #e8e8e8
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 150deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

aralık

Modülün dolgu değerlerini buna göre değiştirin:

• Üst Dolgu: 15vw
• Alt Dolgu: 15vw

Görüntü Modülünü Sütun 1'e Klonla ve Çoğaltmayı Sütun 2'ye Yerleştir

1. sütundaki Görüntü Modülünü tamamladıktan sonra, tüm modülü klonlayabilir ve kopyayı 2. sütuna yerleştirebilirsiniz.

Degrade Arka Planını Değiştir

Gradyan arka planını aşağıdaki gibi değiştirin:

• Renk 1: rgba(255,255,255,0)
• Renk 2: #efefe
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 210deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

3. Satır Ekle

Sütun Yapısı

Zarfın altını oluşturmak için aşağıdaki sütun yapısına sahip başka bir satıra ihtiyacımız olacak:

boyutlandırma

Satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

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

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Görüntülemek

Ve satırın ana öğesine tek bir CSS kodu satırı ekleyerek her iki sütunun da yan yana görünmesine izin verin.

display: flex;

Z İndeksi

Gelişmiş sekmesinde z dizinini artırarak satır ayarlarını tamamlayın.

• Z İndeksi: 12

Sütun 1'e Görüntü Modülü Ekle

Görüntü Kutusunu Boş Bırak

Sütun 1'e bir Görüntü Modülü ekleyin ve yine görüntü kutusunu boş bırakın.

Degrade Arka Plan

Bunun yerine bir gradyan arka planı kullanın.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #efefe
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 213deg
• Başlangıç ​​Konumu: %40
• Bitiş Konumu: %40

aralık

Ve biraz üst ve alt dolgu ekleyerek modülün boyutunu artırın.

• Üst Dolgu: 20vw
• Alt Dolgu: 20vw

Görüntü Modülünü Sütun 1'e Klonla ve Çoğaltmayı Sütun 2'ye Yerleştir

1. sütundaki Görüntü Modülünü tamamladıktan sonra, onu klonlayabilir ve kopyayı 2. sütuna yerleştirebilirsiniz.

Degrade Arka Planını Değiştir

Kopyanın degrade arka planını değiştirdiğinizden emin olun.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #e8e8e8
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 147deg
• Başlangıç ​​Konumu: %40
• Bitiş Konumu: %40

1. Satıra Dikey Hareket Ekle

Şimdi, zarf animasyonunu çalıştırmanın son kısmı, bölümünüzün ilk satırına duyarlı bir dikey hareket kaydırma efekti eklemektir ve işiniz bitti!

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti:
  • Masaüstü: 0 (%68'de)
  • Tablet: 0,5 (%61'de)
  • Telefon: 0,5 (%43'te)
• Orta Ofset:
  • Masaüstü: 6.5 (%81'de)
  • Tablet ve Telefon: 21.5 (%82'de)
• Bitiş Ofseti:
  • Masaüstü: 16 (%95'te)
  • Tablet ve Telefon: 21.5 (%82'de)

Ö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

Bu gönderide, Divi'nin kaydırma efektleriyle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, bir zarf animasyonunu nasıl bir araya getireceğinizi gösterdik. Bu animasyonu, örneğin CTA bloğunuzu vurgulamak için birçok şey için kullanabilirsiniz. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

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.