Divi'nin Yerleşik Animasyon Ayarlarıyla Ziyaretçileri İkna Edici Bir Şekilde Sayfanın Aşağısına Nasıl Yönlendirebilirsiniz?

Kahraman bölümlerinin ana amaçlarından biri, insanları sayfayı aşağı kaydırmaya ve paylaştığınız daha fazla içerik ve bilgiyi keşfetmeye ikna etmektir. Divi'nin yerleşik animasyon seçenekleriyle, sayfanıza, ziyaretçileri ikna edici bir şekilde sayfada aşağı yönlendirmenize yardımcı olacak etkileşimli animasyonlar ekleyebilirsiniz. Bu eğitimde, onları hizmetler bölümüne yönlendiren ok simgelerini kullanarak ziyaretçileri hizmetler bölümüne kaydırmaya motive edeceğiz.

Hadi hadi bakalım!

Ön izleme

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

masaüstü

Mobil

Hadi Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

1. Bölüm Ekle

Arka plan rengi

Yeni bir sayfa oluşturun ve ona normal bir bölüm ekleyin. Bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #0f0f0f

Alt Bölücü

Bölüme bir alt ayırıcı ekleyerek devam edin.

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #ffffff
• Bölücü Yüksekliği: 30px
• Bölücü Yatay Tekrar: 10x (Masaüstü), 4x (Tablet ve Telefon)

aralık

Bazı özel dolgu değerleri de ekleyin.

• Üst Dolgu: 269px (Masaüstü), 100px (Tablet ve Telefon)
• Alt Dolgu: 674px (Masaüstü), 200px (Tablet ve Telefon)

Satır ekle

Sütun Yapısı

Ardından, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın, boyutlandırma ayarlarına gidin ve 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin.

• Bu Satırı Tam Genişlikte Yap: Evet

Metin Modülü Ekle

İçerik Ekle

Bu satırda ihtiyacımız olan tek modül bir Metin Modülüdür. Devam edin ve seçtiğiniz H1 içeriğini ekleyin.

Başlık Metni Ayarları

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

• Başlık Yazı Tipi: Didact Gothic
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu: 170px (Masaüstü), 50px (Tablet ve Telefon)
• Başlık Çizgisi Yüksekliği: 0.8em

• Başlık Metni Gölge Dikey Uzunluğu: 1.5em
• Başlık Metni Gölge Rengi: rgba(0,0,0,0.11)

2. Bölüm Ekle

Arka plan rengi

İkinci bölümü sayfaya ekleyerek devam edin. Bölüm ayarlarında arka plan rengini değiştirin.

• Arka Plan Rengi: #0f0f0f

Üst Bölücü

Bölüme bir üst bölücü de ekleyin.

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #ffffff
• Bölücü Yüksekliği: 30px
• Bölücü Yatay Tekrar: 10x (Masaüstü), 4x (Tablet ve Telefon)

aralık

Ve boşluk ayarlarında boşluk değerlerini artırın.

• Üst Dolgu: 245px
• Alt Dolgu: 245px

Satır ekle

Sütun Yapısı

Bölüme aşağıdaki sütun yapısına sahip yeni bir satır ekleyerek devam edin:

boyutlandırma

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

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

Bulanıklık Modülü Ekle

Simge Seç

İlk sütunda ihtiyaç duyacağımız ilk modül bir Blurb Modülü. Blurb Module öğesinin ihtiyacımız olan tek parçası simgedir. Aşağıyı gösteren ok simgesini seçin.

Simge Ayarları

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

• Simge Rengi: #4ffcff
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 150px

aralık

Simgenin erişimini artırmak için bir miktar negatif üst kenar boşluğu eklememiz gerekecek. Bu, Blurb Modülünün önceki bölümle örtüşmesine ve iki bölüm arasındaki animasyonun sorunsuz bir şekilde gerçekleşmesine izin verecektir. Özel kenar boşluğunu telafi etmek için özel üst dolgu da ekleyeceğiz. Bu, simgenin öncekiyle aynı konumda kalmasını sağlayacaktır. Değişen tek şey, tüm modülün boyutu ve erişimidir.

• Üst Kenar Boşluğu: -550px
• Üst Dolgu: 550px

Animasyon

Son olarak, aşağıdaki ayarları kullanarak Blurb Module'e bir animasyon ekleyin:

• Animasyon Stili: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Süresi: 3000ms
• Animasyon Gecikmesi: 1200ms
• Animasyon Yoğunluğu: %100
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış
• Resim/Simge Animasyonu: Animasyon Yok

Metin Modülü #1'i Sütun 1'e ekleyin

İçerik Ekle

İlk sütunda ihtiyacımız olan sonraki modül bir Metin Modülüdür. Seçtiğiniz bazı içeriği ekleyin.

Metin Ayarları

Metin ayarlarını değiştirerek devam edin.

• Metin Yazı Tipi: Didact Gothic
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: rgba(255,255,255,0.03)
• Metin Boyutu: 350px
• Metin Yönü: Merkez

Metin Modülü #2'yi Sütun 1'e ekleyin

İçerik Ekle

Seçim bazı H3 içeriği ile ilk sütuna ikinci bir Metin Modülü ekleyin.

Başlık Metni Ayarları

Ve tasarım sekmesinde başlık metni ayarlarını değiştirin.

• Başlık 3 Yazı Tipi: Didakt Gotik
• Başlık 3 Metin Hizalama: Merkez
• Başlık 3 Metin Rengi: #ffffff
• Başlık 3 Metin Boyutu: 40px (Masaüstü), 30px (Tablet ve Telefon)
• Başlık 3 Harf Aralığı: -1px

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

görünürlük

İlk sütunda ihtiyaç duyulan sonraki modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Renk

Tasarım sekmesindeki ayırıcı rengini değiştirerek devam edin.

• Renk: #ffffff

boyutlandırma

Boyutlandırma ayarlarında da bazı değişiklikler yapın.

• Genişlik: %59
• Modül Hizalaması: Merkez

Animasyon

Ve modüle bir animasyon da ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Merkez
• Animasyon Süresi: 2000ms
• Animasyon Yoğunluğu: %10
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış

Sütun 1'e Metin Modülü #3'ü ekleyin

İçerik Ekle

Birinci sütunda ihtiyacımız olan sonraki ve son modül başka bir Metin Modülü. Seçtiğiniz bazı içeriği ekleyin.

Metin Ayarları

Metin ayarlarını değiştirerek devam edin.

• Metin yazı tipi Ağırlık: Hafif
• Metin Rengi: #b7b7b7
• Metin Boyutu: 18px
• Metin Satır Yüksekliği: 1.8em
• Metin Yönü: Merkez

Animasyon

Ve modüle bir animasyon ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Yukarı
• Animasyon Yoğunluğu: 20%
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış

Modülleri 3 Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

Artık 1. sütundaki tüm modülleri değiştirmeyi bitirdiğimize göre, bir sütundaki tüm modülleri 3 kez klonlayabilir ve kopyaları kalan sütunlara yerleştirebiliriz.

Modül İçeriğini Değiştir

Kopyaların içeriğini değiştirin.

Yinelenenlerin Bölücü Modüllerine Animasyon Gecikmesi Ekleme

Bölücü Modül kopyalarının her birine de biraz animasyon gecikmesi ekleyin.

• 2. Sütundaki Bölücü Modül: 400ms
• 3. Sütundaki Bölücü Modül: 800ms
• Sütun 4'teki Bölücü Modül: 1200ms

Metin Modülü #3 Çoğaltmaya Animasyon Gecikmesi Ekleme

Her sütundaki son Metin Modülü için aynı şeyi yapın.

• 2. Sütundaki Son Metin Modülü: 400ms
• 3. Sütundaki Son Metin Modülü: 800ms
• 4. Sütundaki Son Metin Modülü: 1200ms

Bulanıklık Simgesini Özelleştir #2

Simge Rengi

Ayrıca, kopyaların her biri için tanıtım yazısı simgesinin rengini ve animasyonunu değiştiriyoruz. 2. sütundaki Blurb Modülünü açın ve simge rengini değiştirin.

• Simge Rengi: #ff6b86

Animasyon

Animasyon ayarlarını da değiştirin.

• Animasyon Türü: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Süresi: 2000ms
• Animasyon Gecikmesi: 800ms
• Animasyon Yoğunluğu: %62
• Animasyon Opaklığı Başlatma: %100
• Resim/Simge Animasyonu: Animasyon Yok

Bulanıklaştırma Simgesini Özelleştir #3

Simge Rengi

3. sütundaki Blurb Modülünü açarak devam edin ve simge rengini değiştirin.

• Simge Rengi: #ffe500

Animasyon

Animasyon ayarlarını da değiştirin.

• Animasyon Türü: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Süresi: 1000ms
• Animasyon Gecikmesi: 600ms
• Animasyon Yoğunluğu: %69
• Animasyon Opaklığı Başlatma: %100
• Resim/Simge Animasyonu: Animasyon Yok

Bulanıklaştırma Simgesini Özelleştir #4

Simge Rengi

4. sütundaki son Blurb Modülünü açın ve simge rengini değiştirin.

• Simge Rengi: #00ff9d

Animasyon

Ve tasarım sekmesinde animasyon ayarlarını değiştirerek tasarımı tamamlayın.

• Animasyon Türü: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Süresi: 3000ms
• Animasyon Gecikmesi: 400ms
• Animasyon Yoğunluğu: %100
• Animasyon Opaklığı Başlatma: %100
• Resim/Simge Animasyonu: Animasyon Yok

Son düşünceler

Bu gönderide, Divi'nin animasyon ayarlarını kullanarak ziyaretçileri nasıl ikna edici bir şekilde sayfaya yönlendireceğinizi gösterdik. Temel fikir, simgeleri için Blurb Modüllerini kullanmanız ve animasyonlarının kahraman bölümüne erişimini artırmanızdır. Bu yaklaşımı, oluşturduğunuz her tür web sitesinde kullanabilir ve istediğiniz kadar yaratıcı olabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!