Divi ile Gecikmede Çakışan Animasyonlar Nasıl Oluşturulur

Web sitenizin başarısının büyük bir kısmı, ziyaretçilerinizi etkileyip etkilemediğinize bağlıdır. Yalnızca ürünleriniz veya hizmetlerinizle değil, aynı zamanda iletişim biçiminizle ve web sitenizin ne kadar iyi tasarlanmış olduğuyla da ilgilenin. Kabul edelim ki, web siteleri genellikle ilk izlenimdir. Ve diğer herhangi bir ilk izlenim gibi, bunun da iyi bir tat bırakmasını istersiniz.

Şimdi, içeriğinizin bir kısmını ön plana çıkarmanın benzersiz bir yolunu arıyorsanız, incelikle örtüşen animasyonlar oluşturmak tam da aradığınız şey olabilir. Bu ince örtüşen animasyonlar, ziyaretçileriniz için bir tür slayt gösterisi gibidir. Hiçbir şeyi kaydırmaları veya tıklamaları gerekmez, içerik yalnızca zarif bir şekilde görünür.

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

Yaklaşmak

• İhtiyacımız olan tüm tasarım öğelerini üst üste binmeden dikey bir sırayla ekleyerek başlayacağız.
• Tüm tasarım öğelerini eklerken, belirli bir animasyon gecikmesine sahip özel animasyonlar da ekleyeceğiz.
• Bu animasyon gecikmeleri, yalnızca öğreticinin çakışmalara odaklanan son bölümünü geçtikten sonra anlamlı olacaktır.
• Bu öğreticinin önemli bir kısmı, satır içeriğinin gecikmeyle 'kaybolmasını' sağlamak için bölümle aynı arka plan rengine sahip şekilli Bölücü Modülleri kullanmaktır.
• Yaklaşımın işe yaraması için gerekli olan farklı adımları anladıktan sonra, bu tekniği üzerinde çalıştığınız her türlü tasarıma uygulayabilirsiniz.

Hadi Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Arka plan rengi

Yeni bir sayfa oluşturarak veya mevcut bir sayfayı açarak başlayın ve ona normal bir bölüm ekleyin. Bölüm ayarlarını açın ve bir arka plan ekleyin.

• Arka Plan Rengi: #f3f3ec

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölümünüze 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. Bunu yapmamızın nedeni, tüm varsayılan piksel boşluklarından kurtulmaktır. İlerleyen adımlarda, bunun yerine bir görünüm birimi kullanarak ihtiyacımız olan tüm alanı ekleyeceğiz.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Sütuna Metin Modülü Ekle

H2 İçeriği Ekle

Modülleri eklemeye başlayalım! İhtiyacımız olan ilk modül, bazı H2 içeriğine sahip bir Metin Modülü. Bu modülün birkaç saniye sonra 'kaybolacağını' unutmayın, bu nedenle kısa, alakalı ve hatırlanabilir tutmak istersiniz.

H2 Metin Ayarları

Ardından tasarım sekmesine gidin ve H2 metin ayarlarını değiştirin.

• Başlık 2 Yazı Tipi: Poppins
• Başlık 2 Metin Rengi: #333333
• Başlık 2 Metin Boyutu: 5vw

aralık

Aralık ayarlarında biraz sol ve sağ dolgu kullanarak istediğiniz alanı oluşturun.

• Sol Dolgu: 15vw
• Sağ Dolgu: 39vw

Sütuna Ayırıcı Modül Ekle

görünürlük

Bir Bölücü Modül olan bir sonraki modüle geçin. Metin Modülünü 'kaybolmak' için bu modülü kullanıyoruz. Bunun için ihtiyacımız olacak dört şey var; bir arka plan rengi (bunu fark edememeniz için bölümle aynı renktedir), yeterli dolgu (önceki modüldeki tüm içeriğin üst üste gelmesini sağlamak için), dikey bir örtüşme (tüm modülü örtmek için) alan) ve bir animasyon gecikmesi (ilk modüle devralmadan önce parlaklığını göstermesi için zaman vermek için). Bölücü Modülünü ekledikten sonra, 'Bölücüyü Göster' seçeneğini devre dışı bıraktığınızdan emin olun.

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

Arka plan rengi

Ardından, arka plan ayarlarına gidin ve bir arka plan rengi ekleyin. Bölümün pürüzsüz bir efekt oluşturması için kullandığınız arka plan rengini kullandığınızdan emin olun.

• Arka Plan Rengi: #f3f3ec

aralık

Aralık ayarlarında bir miktar üst ve alt dolgu ekleyerek ayırıcı modüle daha büyük bir boyut vererek devam edin.

• Üst Dolgu: 9vw
• Alt Dolgu: 9vw

Animasyon

Ve gecikmeli bir animasyon ekleyerek bölücünün ayarlarını tamamlayın.

• Animasyon Stili: Slayt
• Animasyon Yönü: Yukarı
• Animasyon Süresi: 1200ms
• Animasyon Gecikmesi: 1500ms
• Animasyon Yoğunluğu: %50
• Animasyon Başlatma Opaklığı: %50

2. Satır Ekle

Sütun Yapısı

İkinci sıraya! Aşağıdaki sütun yapısını seçin:

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.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Ardından, boşluk ayarlarında satırın soluna ve sağına biraz dolgu ekleyin.

• Sol Dolgu: 10vw (Masaüstü), 2vw (Tablet ve Telefon)
• Sağ Dolgu: 10vw (Masaüstü), 2vw (Tablet ve Telefon)

Görüntülemek

Ayrıca, satırın ana öğesine tek bir CSS kodu satırı ekleyerek, daha küçük ekran boyutlarında sütunların yan yana görünmesini sağlıyoruz.

display: flex;

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

İçerik Ekle

Modül eklemeye başlama zamanı! Sütun 1'e bir Blurb Modülü ekleyin ve istediğiniz içeriği girin.

Simge Seç

İstediğiniz bir simgeyi seçerek devam edin.

Simge Ayarları

Sonraki simgenizin görünümünü değiştirin.

• Simge Rengi: #dbd6bd
• Daire Simgesi: Evet
• Daire Simgesi: #ffffff
• Resim/Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 2.5vw (Masaüstü), 1.7vw (Tablet), 1.9vw (Telefon)

Başlık Metni Ayarları

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

• Başlık Yazı Tipi: Kaynak Serif Pro
• Başlık Metni Hizalama: Orta
• Başlık Metin Boyutu: 1.7vw (Masaüstü), 2.1vw (Tablet), 2.5vw (Telefon)
• Başlık Satırı Yüksekliği: 1.9em

Gövde Metni Ayarları

Gövde metni ayarlarıyla birlikte.

• Gövde Yazı Tipi: Açık Sans
• Gövde Metni Hizalama: Orta
• Gövde Metni Boyutu: 0.8vw (Masaüstü), 1.2vw (Tablet), 1.6vw (Telefon)
• Gövde Çizgisi Yüksekliği: 2.5em

boyutlandırma

Bu modül ile ikinci ve üçüncü sütunlara ekleyeceğimiz modüller arasında yeterli boşluk olduğundan emin olmak için modülün boyutunu biraz küçültüyoruz.

• Genişlik: %91,7
• Modül Hizalaması: Merkez

aralık

Ayrıca özel dolgu değerleri kullanarak modüle fazladan boşluk ekleyeceğiz.

• Üst Dolgu: 2vw
• Alt Dolgu: 2vw
• Sol Dolgu: 1vw
• Sağ Dolgu: 1vw

Sınır

Ardından, kenarlık ayarlarına gidin ve modülü tanımlamak için ince bir kenarlık ekleyin.

• Kenar Genişliği: 1px
• Kenar Rengi: #333333

Animasyon

Gecikmeli bir animasyon ekleyerek Blurb Module tasarımını tamamlayın. Fark edebileceğiniz gibi, ne kadar çok tasarım öğesi eklersek, animasyon gecikmesi o kadar yüksek olur.

• Animasyon Stili: Slayt
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Yukarı
• Animasyon Süresi: 1000ms
• Animasyon Gecikmesi: 2000ms
• Animasyon Yoğunluğu: %16
• Animasyon Opaklığı Başlatma: %0

Blurb Modülünü İki Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

Blurb Module tasarımını tamamladığınızda, devam edip iki kez klonlayabilirsiniz. Kopyaları satırın kalan iki sütununa yerleştirin.

1 Numaralı Kopyanın Animasyonunu Değiştir

İlk kopyanın animasyon gecikmesini değiştirin.

• Animasyon Gecikmesi: 2200ms

Kopya #2'nin Animasyonunu Değiştir

Ardından, ikinci kopyayı açın ve oradaki animasyon gecikmesini de değiştirin.

• Animasyon Gecikmesi: 2400ms

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

görünürlük

Bu satırda ihtiyacımız olan sonraki ve son modül bir Bölücü Modüldür. Bu modülü, Blurb Modüllerinin 'ortadan kaybolmasına' yardımcı olacak gecikmeli örtüşmeyi oluşturmak için tekrar kullanıyoruz. Bölücü Modülünü sütun 3'e ekledikten sonra, '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

Ayırıcıya bir arka plan rengi ekleyerek devam edin. Bölüm arka planı için kullandığınız rengin aynısını kullandığınızdan emin olun.

• Arka Plan Rengi: #f3f3ec

aralık

Ardından, boşluk ayarlarına gideceğiz ve bölücü modülün boyutunu artıracağız, böylece bu yazının ilerleyen bölümlerinde Blurb Modüllerinin üçünü de üst üste getirebilir.

• Sol Kenar Boşluğu: -60vw (Masaüstü), -64vw (Tablet ve Telefon)
• Üst Dolgu: 17vw (Masaüstü), 27vw (Tablet), 30vw (Telefon)
• Alt Dolgu: 17vw (Masaüstü), 27vw (Tablet), 34vw (Telefon)

Animasyon

Son olarak, gecikmeli bir animasyon ekleyin.

• Animasyon Stili: Slayt
• Animasyon Tekrarı: Bir kez
• Animasyon Yönü: Sağ
• Animasyon Süresi: 650ms
• Animasyon Gecikmesi: 4500ms
• Animasyon Yoğunluğu: %24
• Animasyon Opaklığı Başlatma: %0

Klon Satır #2

İkinci satırı ve tüm modüllerini tamamladığınızda, devam edip klonlayabilirsiniz.

Yeni Satırdaki Bölücü Modülü Kaldır

Yinelenen satırdaki Bölücü Modülü çıkarın.

Blurb Modülü #1 Animasyon Gecikmesini Değiştir

Ardından, ilk Blurb Modülünü açın ve animasyon gecikmesini değiştirin.

• Animasyon Gecikmesi: 5200ms

Blurb Modülü #2'nin Animasyon Gecikmesini Değiştir

Sütun 2'deki Blurb Modülü için de aynı şeyi yapın.

• Animasyon Gecikmesi: 5400ms

Blurb Modülü #3'ün Animasyon Gecikmesini Değiştir

Ayrıca 3. sütundaki Blurb Module için animasyon gecikmesini de değiştirin.

• Animasyon Gecikmesi: 5600ms

Örtüşme Ekle

Bölücü Modül #1'e Örtüşme Ekle

Artık ihtiyacımız olan tüm tasarım öğelerine sahip olduğumuza göre, örtüşmeleri oluşturmaya başlayabiliriz! Bu örtüşmeler, eğitim boyunca eklediğimiz animasyon gecikmelerine anlam katacaktır. Oluşturduğunuz ilk satırdaki Divider Module ile başlayın.

• Üst Marj: -15vw

2. Sıraya Örtüşme Ekle

Ardından, ikinci satırı açın ve ona bir miktar negatif üst kenar boşluğu ekleyin.

• Üst Marj: -10vw

2. Satırdaki Blurb Modüllerine Örtüşme Ekleme

İkinci satırdaki Blurb Modüllerinin her birini açın ve bunlara bazı özel kenar boşluğu değerleri ekleyin.

• Üst Marj: -10vw
• Alt Marj: 7vw

Bölücü Modül #2'ye Örtüşme Ekle

İkinci satırın üçüncü sütununda bulabileceğiniz Bölücü Modülüne geçin ve örtüşmeyi oluşturun.

• Üst Kenar Boşluğu: -35vw (Masaüstü), -47vw (Tablet), -72vw (Telefon)

3. Sıraya Örtüşme Ekle

Üçüncü satırın ayarlarını açarak devam edin ve bir miktar negatif üst kenar boşluğu ekleyin.

• Üst Marj: -10vw

3. Satırdaki Blurb Modüllerine Örtüşme Ekleme

Son olarak, üçüncü satırdaki Blurb Modüllerinin her birine bazı özel kenar boşluğu değerleri ekleyin. Visual Builder'dan çıktığınızda, animasyonun gerçek zamanlı olarak gerçekleştiğini görebileceksiniz!

• Üst Marj: -22vw (Masaüstü), -46vw (Tablet), -70vw (Telefon)
• Alt Marj: 7vw

Son düşünceler

Bu gönderide, size ince örtüşen animasyonların nasıl oluşturulacağını gösterdik. Bu, paylaştığınız içerikte ziyaretçilere rehberlik etmenin ve web sitenize daha iyi bir görünüm ve his kazandırmanın harika bir yoludur. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!