Divi ile Tasarım Öğelerine Çarpışan Animasyonlar Nasıl Uygulanır?

Sayfanızdaki tasarım öğelerine animasyon eklemek, etkileşimi artırmanıza kesinlikle yardımcı olabilir. Divi's Visual Builder'da birçok animasyon seçeneği mevcuttur ve bunların kullanımı oldukça basittir. Ancak bu animasyonlarla yaratıcı olabilir ve bunları benzersiz bir şekilde kullanabilirsiniz. Bu yazıda, yalnızca Divi'nin yerleşik seçeneklerini kullanarak adım adım yeniden oluşturacağımız çarpışan animasyonların üç örneğini ele alacağız.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, bu eğitimde yeniden oluşturacağımız üç örneğe hızlıca bir göz atalım.

Örnek 1: Metin Çarpışması

Örnek 2: Çarpışan Bölücüler

Örnek #3: Çarpışan Izgara

üzerine gelin

Youtube Kanalımıza Abone Olun

Örnek 1: Çarpışan Metin

Özel Bölüm Ekle

Yapı

İlk örnekle başlayalım! Yeni veya mevcut bir sayfa açın ve aşağıdaki yapıyı kullanarak yeni bir uzmanlık bölümü ekleyin:

boyutlandırma

Herhangi bir modül veya satır eklemeden, bölüm ayarlarını açın ve boyutlandırma ayarlarında 'Bu Bölümü Tam Genişlik Yap' seçeneğini etkinleştirin.

1. Satır Ekle

Sütun Yapısı

Uzmanlık bölümüne bir satır ekleyerek devam edin:

boyutlandırma

Satır ayarlarını açın ve boyutlandırma ayarlarında bazı değişiklikler yapın.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Boşluk ayarlarındaki özel dolgu değerlerini de değiştirin.

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

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

Satırın ilk sütununa bir Metin Modülü ekleyerek devam edin ve biraz içerik ekleyin.

Başlık Metni Ayarları

Sonraki başlık metni ayarlarını değiştirin.

• Başlık Yazı Tipi: Montserrat
• Başlık Yazı Tipi Ağırlığı: Hafif
• Başlık Metni Boyutu: 4.4vw (Masaüstü), 8.2vw (Tablet), 40px (Telefon)
• Başlık Çizgisi Yüksekliği: 0.7em

Sütun 1'e Bölücü Modülü Ekle

görünürlük

Sütun 1'de ihtiyaç duyulan ikinci modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğini etkinleştirerek ayırıcının göründüğünden emin olun.

• Bölücüyü Göster: Evet

Renk

Tasarım sekmesine gidin ve ayırıcı rengini değiştirin.

• Renk: #000000

boyutlandırma

Bölücünün genişliğini de azaltın.

• Genişlik: %91

aralık

Ve Bölücü Modülü ile Metin Modülü arasında boşluk oluşturmak için bir miktar üst kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: 30 piksel

Animasyon

Son olarak, Bölücü Modüle ince bir animasyon ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol

Sütun 2'ye Metin Modülü Ekle

İçerik Ekle

İkinci sütuna geçin ve seçtiğiniz içerikle ikinci Metin Modülünü ekleyin.

Başlık Metni Ayarları

Sonraki başlık metni ayarlarını değiştirin.

• Başlık Yazı Tipi: Montserrat
• Başlık Yazı Tipi Ağırlığı: Hafif
• Başlık Metni Rengi: #3f46ff
• Başlık Metni Boyutu: 3.8vw (Masaüstü), 6.5vw (Tablet), 40px (Telefon)
• Başlık Çizgisi Yüksekliği: 0.8em

Animasyon

Ve bu modüle bir animasyon da ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol
• Animasyon Gecikmesi: 600ms
• Animasyon Yoğunluğu: %10

2. Satır Ekle

Sütun Yapısı

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

Kalan Modülleri Ekle

Bu yeni satırda görünmesini istediğiniz diğer modülleri ekleyin ve ihtiyaçlarınıza göre değiştirin.

Örnek 2: Çarpışan Bölücüler

Özel Bölüm Ekle

Yapı

Bir sonraki örneğe geçelim! Aşağıdaki yapıyı kullanarak yeni bir uzmanlık bölümü ekleyin:

boyutlandırma

Herhangi bir satır veya modül eklemeden bölüm ayarlarını açın ve 'Bu Bölümü Tam Genişlik Yap' seçeneğini etkinleştirin.

• Bu Bölümü Tam Genişlikte Yapın: Evet

1. Satır Ekle

Sütun Yapısı

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

aralık

Satır ayarlarını açın ve özel dolgu ayarlarını değiştirin.

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

Metin Modülü Ekle

İçerik Ekle

Ardından, seçilen içeriğe sahip satıra bir Metin Modülü ekleyin.

Başlık Metni Ayarları

Tasarım sekmesine gidin ve başlık metni ayarlarını değiştirin.

• Başlık Yazı Tipi: Montserrat
• Başlık Yazı Tipi Ağırlığı: Hafif
• Başlık Metni Boyutu: 70px (Masaüstü), 50px (Tablet), 40px (Telefon)
• Başlık Çizgisi Yüksekliği: 0.8em

2. Satır Ekle

Sütun Yapısı

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

boyutlandırma

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

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %53 (Masaüstü), %100 (Tablet ve Telefon)

aralık

Özel dolgu değerlerini de değiştirin.

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

Sütun 1'e Bölücü Modülü Ekle

görünürlük

Satır ayarlarını değiştirmeyi bitirdikten sonra, devam edin ve ilk sütuna bir Bölücü Modül ekleyin ve 'Bölücüyü Göster' seçeneğini etkinleştirerek bölücünün göründüğünden emin olun.

• Bölücüyü Göster: Evet

Renk

Sonraki ayırıcı rengini değiştirin.

• Bölücü Rengi: #3f46ff

Stiller

Ve stil ayarlarında bölücü stilini değiştirin.

• Bölücü Tarzı: Çift

boyutlandırma

Boyutlandırma ayarlarında da bölücü ağırlığını artırın.

• Bölücü Ağırlığı: 8px

Animasyon

Son olarak, Divider Module'e bir animasyon ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sağ

Klon Bölücü Modülü ve Sütun 2'deki Yeri

Bölücü Modül ayarlarını değiştirmeyi bitirdikten sonra devam edin ve modülü klonlayın. Kopyayı satırın ikinci sütununa yerleştirin.

Animasyonu Değiştir

Çarpışma efekti oluşturmak için yinelenen Bölücü Modülünün animasyon yönünü değiştirin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol

3. Satır Ekle

Sütun Yapısı

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

Kalan Modülleri Ekle

Ve bölüm tasarımını bitirmek istediğiniz kadar modül ekleyin.

Yeniden Oluştur Örnek #3: Çarpışan Izgara

Yeni Bölüm Ekle

aralık

Bir sonraki ve son örneğe geçelim! Normal bir bölüm ekleyin ve ayarları açın. Boşluk ayarlarına gidin, bazı özel dolgu değerleri ekleyin:

• Üst Dolgu: 300px
• Alt Dolgu: 200px

1. Satır Ekle

Sütun Yapısı

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

Sütuna Resim Modülü Ekle

Şekilli Görüntü Bindirme Yükle

Sağ tıklayarak aşağıdaki şekilli görüntü bindirmesini masaüstünüze kaydedin:

Şekillendirilmiş görüntü bindirmesini kaydettikten sonra Divi web sitenize geri dönün ve satıra bir Görüntü Modülü ekleyin. İndirme klasörünüzde bulabileceğiniz şekilli görüntü bindirme dosyasını yükleyin.

Degrade Arka Plan

Ardından, modüle bir degrade arka planı ekleyin.

• Renk 1: #aa2bff
• Renk 2: #09f7eb

hizalama

Görüntü hizalamasını da değiştirin.

• Görüntü Hizalama: Merkez

boyutlandırma

Ve boyutlandırma ayarlarında 'Force Fullwidth' seçeneğini etkinleştirin.

• Tam Genişliği Zorla: Evet

aralık

Modüle de bazı özel kenar boşlukları ekleyin.

• Sol Kenar Boşluğu: 200 piksel
• Sağ Kenar Boşluğu: 200px

Animasyon

Son olarak, modüle bir animasyon ekleyin.

• Animasyon Stili: Yakınlaştır
• Animasyon Yönü: Merkez
• Animasyon Süresi: 3000ms
• Animasyon Yoğunluğu: %100

2. Satır Ekle

Sütun Yapısı

İkinci sıraya. Aşağıdaki sütun yapısını kullanın:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarında bazı değişiklikler yapın.

• Özel Genişlik Kullan: Evet
• Birim: PX
• Özel Genişlik: 944 piksel
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Sütun 1'e Blurb Modülü Ekle

İçerik Ekle

İlk sütuna bir Bulanıklık Modülü ekleyerek devam edin. Seçtiğiniz bazı içeriği girin.

Simge

Sonraki bir simge seçin.

Arka plan rengi

Ve modüle bir arka plan rengi de ekleyin.

• Arka Plan Rengi: rgba(255,255,255,0.83)

Simge Ayarları

Tasarım sekmesine gidin ve simge ayarlarını değiştirin.

• Simge Rengi: #000000
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 73px

Başlık Metni Ayarları

Başlık metni ayarlarını da değiştirin.

• Başlık Yazı Tipi: Açık Sans
• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metin Boyutu: 15px
• Başlık Harf Aralığı: -1px
• Başlık Satırı Yüksekliği: 1.8em

boyutlandırma

Ve boyutlandırma ayarlarında içerik genişliğini azaltın.

• İçerik Genişliği: 183 piksel

aralık

Bazı özel üst ve alt dolgular da ekleyeceğiz.

• Üst Dolgu: 50px
• Alt Dolgu: 50px

Kutu Gölge

Blurb Module'e ince bir kutu gölgesi vererek devam edin.

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

geçişler

Ve gelişmiş sekmesinde geçiş süresini artırın.

• Geçiş Süresi: 600ms

Blurb Modülünü 8 Kez Klonla ve Kalan Her Sütuna 3 Kopya Yerleştir

Şimdi, ilk Blurb Modülünü değiştirmeyi tamamladığınızda, devam edip 8 kez klonlayabilirsiniz. İkinci sütuna üç kopya ve üçüncü sütuna üç kopya yerleştirin. Bu öğreticinin sonraki bölümünde, Blurb Modüllerinin her birinde benzersiz değişiklikler yapacağız. Bunu yapmak için aşağıdaki numaralandırmayı takip edeceğiz:

Blurb Modülünü Değiştir #1

aralık

İlk Blurb Modülünü açın ve bir miktar negatif üst kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: -340px (Masaüstü), 0px (Tablet ve Telefon)

Vurgu Aralığı

Fareyle üzerine gelindiğinde kenar boşluğu değerlerini değiştirin.

• Üst Kenar Boşluğu: -380px
• Alt Kenar Boşluğu: 40px
• Sol Kenar Boşluğu: -40px
• Sağ Kenar Boşluğu: 40px

Yuvarlatılmış köşeler

Modülün sol üst köşesine '30px' ekleyerek devam edin.

Animasyon

Ve bir animasyon ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol
• Animasyon Gecikmesi: 200ms

Blurb Modülü #2'yi Değiştirin

Arka plan rengi

İkinci Blurb Modülünü açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: rgba(255,255,255,0.93)

aralık

Modüle bir miktar negatif üst kenar boşluğu ekleyerek devam edin.

• Üst Kenar Boşluğu: -340px (Masaüstü), 0px (Tablet ve Telefon)

Vurgu Aralığı

Fareyle üzerine gelindiğinde bu kenar boşluğu değerlerini değiştirin.

• Üst Kenar Boşluğu: -380px
• Alt Kenar Boşluğu: 40px

Animasyon

Ve modüle bir animasyon ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol
• Animasyon Gecikmesi: 400ms

Blurb Modülü #3'ü Değiştirin

aralık

Üçüncü Blurb Modülüne geçiyoruz. Negatif üst kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: -340px (Masaüstü), 0px (Tablet ve Telefon)

Vurgu Aralığı

Fareyle üzerine gelindiğinde kenar boşluğu değerlerini değiştirin.

• Üst Kenar Boşluğu: -380px
• Alt Kenar Boşluğu: 40px
• Sol Kenar Boşluğu: 40px
• Sağ Kenar Boşluğu: -40px

Yuvarlatılmış köşeler

Modülün sağ üst köşesine de '30px' ekleyin.

Animasyon

Ve bir animasyon ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol
• Animasyon Gecikmesi: 600ms

Blurb Modülü #4'ü Değiştirin

Arka plan rengi

Dördüncü modüle geçiyoruz. Ayarları açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: rgba(255,255,255,0.93)

Vurgu Aralığı

Sonra bazı vurgulu kenar boşluğu değerleri ekleyin.

• Sol Kenar Boşluğu: -40px
• Sağ Kenar Boşluğu: 40px

Animasyon

Ve ayrıca bir animasyon ekleyin.

• Animasyon Stili: Soluk
• Animasyon Gecikmesi: 800ms

Blurb Modülü #5'i Değiştirin

Animasyon

Beşinci modüle geçiyoruz. Burada yapmanız gereken tek şey bir animasyon eklemek.

• Animasyon Stili: Soluk
• Animasyon Gecikmesi: 1000ms

Blurb Modülü #6'yı Değiştirin

Arka plan rengi

Altıncı modülü açarak devam edin ve arka plan rengini değiştirin.

• Arka Plan Rengi: rgba(255,255,255,0.93)

Vurgu Aralığı

Fareyle üzerine gelindiğinde boşluk değerlerini de değiştirin.

• Sol Kenar Boşluğu: 40px
• Sağ Kenar Boşluğu: -40px

Animasyon

Ve bir animasyon ekleyin.

• Animasyon Stili: Soluk
• Animasyon Gecikmesi: 1200ms

Blurb Modülü #7'yi Değiştirin

Vurgu Aralığı

Yedinci modüle geçiyoruz. Boşluk ayarlarına bazı vurgulu kenar boşluğu değerleri ekleyin.

• Üst Kenar Boşluğu: 40px
• Sol Kenar Boşluğu: -40px
• Sağ Kenar Boşluğu: 40px

Yuvarlatılmış köşeler

Modülün sol alt köşesine '30px' kenarlık yarıçapı ekleyerek devam edin.

Animasyon

Ve bir animasyon ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sağ
• Animasyon Gecikmesi: 1400ms

Blurb Modülü #8'i Değiştirin

Arka plan rengi

Sekizinci modülü açarak devam edin ve arka plan rengini değiştirin.

• Arka Plan Rengi: rgba(255,255,255,0.93)

Vurgu Aralığı

Bir sonraki modüle fareyle üzerine gelindiğinde bazı özel kenar boşlukları ekleyin.

• Üst Kenar Boşluğu: 40px

Animasyon

Bu Blurb Module'e de bir animasyon ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sağ
• Animasyon Gecikmesi: 1600ms

Blurb Modülü #9'u Değiştirin

Vurgu Aralığı

Dokuzuncu ve son modüle geçiyoruz! Aralık ayarlarına gidin ve bazı özel vurgulu kenar boşluğu değerleri ekleyin.

• Üst Kenar Boşluğu: 40px
• Sol Kenar Boşluğu: 40px
• Sağ Kenar Boşluğu: -40px

Yuvarlatılmış köşeler

Sağ alt köşeye de '30px' kenarlık yarıçapı ekleyin.

Animasyon

Ve bir animasyon ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sağ
• Animasyon Gecikmesi: 1800ms

1. Satırdaki Görüntü Modülüne Negatif Alt Kenar Boşluğu Ekle

Şimdi, bu örneğin ilk bölümünde oluşturduğumuz daireyi ve ızgarayı çarpışmak için, Görüntü Modülüne (şekilli görüntü bindirmesini içeren) bir miktar negatif alt kenar boşluğu vereceğiz.

• Alt Kenar Boşluğu: -520px

Ön izleme

Şimdi tüm adımlardan geçtik, şimdi elde ettiğimiz sonuca son bir göz atalım.

Örnek 1: Çarpışan Bölücüler

Örnek 2: Metin Çarpışması

Örnek #3: Çarpışan Izgara

üzerine gelin

Son düşünceler

Sayfalarınıza animasyon eklemek, ziyaretçileriniz ve sizin aranızda daha fazla etkileşim oluşturmanıza yardımcı olabilir. Elbette, Visual Builder'da sahip olduğunuz animasyon ayarlarını kullanabilirsiniz, ancak çarpıcı sonuçlar elde etmenize yardımcı olacak tasarım öğelerine çarpışan animasyonlar uygulayarak bunu bir adım daha ileri götürebilirsiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!