Divi’nin varsayılan animasyon ayarlarıyla ziyaretçileri sayfaya yönlendirmenin ikna edici yolu
Kahraman bölümünün temel hedeflerinden biri, insanları sayfaları kaydırmaya ve paylaştığınız daha fazla içerik ve bilgi bulmaya devam etmeye ikna etmektir. Divi’nin varsayılan animasyon seçenekleriyle, sayfanıza, ziyaretçileri sayfaya ikna edici bir şekilde yönlendirmenize yardımcı olacak etkileşimli animasyonlar ekleyebilirsiniz. Bu öğreticide, ziyaretçileri hizmet bölümüne yönlendiren ok simgesini kullanarak ziyaretçileri hizmet bölümüne kaymaya motive edeceğiz. Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, sonuçlara farklı bir ekran boyutunda bir göz atalım.
Masaüstü
Arka plan rengi: #0f0f0f Alt bölücü, o bölüme alt bölücüyü ekleyerek devam eder.
Bölme Stili: Listede bulun
Renk Renk: #ffffff
Böcek Yüksekliği: 30px
Yatay Divisor Tekrar: 10x (Masaüstü), 4x (Tablet ve Telefon) Mesafe Bazı özel dolgu değerleri de ekleyin.
Üst Pilding: 269px (masaüstü), 100 piksel (tablet ve cep telefonu)
Pilding Alt: 674px (masaüstü), 200px (tablet ve cep telefonu) Sütun yapısının bir satırını daha sonra ekleyin, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın, boyut ayarlarını açın ve ‘Bu çizgiyi tam olarak yap’ seçeneğini etkinleştirin.
Bu çizgiyi tamamen genişletin: evet Bu satırda ihtiyacımız olan tek modülün içeriğini eklemek için metin modülünü ekleyin. Lütfen ve seçilen bazı H1 içeriği ekleyin. Başlık Metin Ayarları Sonraki Başlık Metin Ayarlarını Değiştirin. Başlık yazı tipi: Didact Gothic
Başlık Mektubu Ağırlığı: Kalınlık
Hizalama Metin Başlığı: Orta
Başlık metin rengi: #ffffff
Başlık metin boyutu: 170px (masaüstü), 50px (tablet ve cep telefonu)
Yüksek çizgi başlığı: 0.8em
Dikey Uzun Gölge Metni Başlığı: 1.5EM Gölge Metin Başlığı: RGBA (0.0,0,0.0.11)
Bölüm #2 arka plan renklerini ekleyin İkinci parçayı sayfaya ekleyerek devam edin. Bölümün ayarlarındaki arka plan rengini değiştirin. Arka plan rengi: #0f0f0f
Üst bölücü, üst bölücüyü de bölüme ekleyin. Bölme Stili: Listede bulun
Renk Renk: #ffffff
Böcek Yüksekliği: 30px
Yatay Divisor Tekrar: 10x (Masaüstü), 4x (Tablet ve Telefon)
Uzaklık ve uzay düzenlemesindeki boşluk değerini artırın. Üst Pilding: 245px
Dolgu Alt: 245 piksel
Sütun Yapısı Sıraları Ekle Bölümüne aşağıdaki sütun yapısı ile yeni bir satır ekleyerek devam edin: Yapıştırıcı Satır ayarlarını açın, boyut ayarlarını açın ve bazı değişiklikler yapın. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 2
Blurb modülünü ekleyin, ilk sütunda ihtiyacımız olan ilk modül simgesini seçin Bulanıklık modülü. Modül bulanık öğesinin ihtiyacımız olan tek kısmı bir simgedir. Aşağıdaki ok simgesini seçin. Simge ayarları daha sonra tasarım sekmesini açın ve simge ayarlarını değiştirin. Ikon Color: #4ffcff
Simge Yerleştirme: Üst
Simge yazı tipi boyutu kullanın: evet
Simge yazı tipi boyutu: 150px
Mesafe Simgelerin aralığını arttırmak için bazı olumsuz marjlar eklememiz gerekir. Bu, bulanıklık modülünün önceki kısımla örtüşmesine izin verecek ve iki parça arasındaki animasyonların sorunsuz bir şekilde gerçekleşmesine izin verecektir. Özel marjı kullanmak için, geleneklere de dolgu ekleyeceğiz. Bu, simgenin daha önce olduğu gibi aynı konumda kalmasını sağlayacaktır. Değişen tek şey, tüm modülün boyutu ve erişimidir. Üst dolgu: 550px
Son fakat en az değil, aşağıdaki ayarları kullanarak bulanıklık modülüne animasyon ekleyin:
Animasyon Stili: Slayt Animasyonlu yön: aşağıda
Animasyon Süresi: 3000ms
Animasyon gecikmesi: 1200ms
Animasyon yoğunluğu:% 100
Animasyon Opaklık Başlar:% 100
Animasyon Hız Eğrisi: Kolay-Out
Animasyonlu resim/simge: animasyon olmadan
Sütun 1’e Metin Modülü #1 ekleyin İlk sütunda ihtiyacımız olan bir sonraki modülün içeriğini ekleyin Metin modülü. Biraz seçim içeriği ekleyin.
Metin ayarlarını değiştirerek metin ayarlarına devam edin. Metin yazı tipi: Didact Gothic
Metin yazı tipi ağırlığı: kalınlık
Metin Rengi: RGBA (255,255,255.0.03)
Metin Boyutu: 350px
Metin Oryantasyonu: Orta
Sütun 1’e Metin Modülü #2 ekleyin Dolgu Ekle Ekle Birkaç H3 seçilen içeriğe sahip ilk sütuna ikinci bir metin modülü ekleyin.
Başlık metni ayarları ve tasarım sekmesindeki başlık metni ayarlarını değiştirin.
Başlık 3 Renk Metni: #ffffff
Başlık 3 Metin Boyutu: 40px (masaüstü), 30px (tablet ve cep telefonu)
Başlık alanı 3 harf: -1px
Bölme modülünü Sütun 1’e ekleyin Birinci sütunda gereken bir sonraki modülün görünürlüğü bölücü modülüdür. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Bölücüyü görüntüleyin: Yawarna Tasarım sekmesindeki bölücünün renklerini değiştirerek devam edin. Renk: #ffffff
Boyut ayarlarındaki bazı değişiklikler için yapıştırıcı. Genişlik:% 59
Modül hizalaması: merkez Modüle animasyon ve animasyon ekleyin.
Animasyon Stili: Slayt
Animasyon yönü: merkez Animasyon Süresi: 2000ms
Animasyon yoğunluğu:% 10
Animasyon Hız Eğrisi: Kolay-Out
Sütun 1’e Metin Modülü #3 ekleyin Bir sonraki içeriğin içeriğini ekleyin ve son olarak birinci sütunda ihtiyacımız olan şey başka bir metin modülü. Biraz seçim içeriği ekleyin.
Metin ayarlarını değiştirerek metin ayarlarına devam edin.
Ağır metin yazı tipi: hafif Metin rengi: #b7b7b7 Metin Boyutu: 18px
Yüksek çizgi metin: 1.8em
Metin Oryantasyonu: Orta
Modüle animasyon ve animasyon ekleyin.
Animasyon Stili: Slayt
Animasyonlu yön: üst Animasyon yoğunluğu:% 20
Animasyon Hız Eğrisi: Kolay-Out
Klon Modülü 3 kez ve yinelenmeyi kalan sütuna yerleştirin Sütun 1’deki tüm modülleri değiştirmeyi bitirdikten sonra, tüm modülleri birinci sırada klonlayabilir ve kalan sütuna yinelenebiliriz.
İçerik Modülünü Değiştirin Yinelenen İçeriği Değiştirin.
Animasyonun ertelenmesini yinelenen bölücü modülüne ekleyin, her yinelenen bölücü modülüne de birkaç animasyon gecikmesi ekleyin. Sütun 2: 400ms’de bölücü modülü Sütun 3: 800ms’de bölücü modülü Sütun 4: 1200ms’de bölücü modülü
Animasyon gecikmesini #3 yinelenen metin modülüne ekleyin. Her sütundaki son metin modülü için aynısını yapın.
Sütun 2: 400ms’deki son metin modülü
Sütun 3: 800ms’deki son metin modülü Sütun 4: 1200ms’deki son metin modülü
Blurb Icon #2 renklerini ayarlayın Icon, her bir kopya için açıklama simgesinin rengini ve animasyonunu da değiştirir. Sütun 2’deki bulanıklık modülünü açın ve simgenin rengini değiştirin. Ikon Renk: #FF6B86
Animasyon ayrıca animasyon ayarlarını da değiştirir.
Animasyon türü: slayt Animasyonlu yön: aşağıda
Animasyon Süresi: 2000ms Animasyon gecikmesi: 800ms
Animasyon yoğunluğu:% 62
Animasyon Opaklık Başlar:% 100
Animasyonlu resim/simge: animasyon olmadan
Blurb Icon #3 Renk Ikon’u ayarlayın ve Sütun 3’te bulanıklık modülünü açarak devam edin ve simgenin rengini değiştirin.
Renk simgesi: #ffe500
Animasyon ayrıca animasyon ayarlarını da değiştirir.
Animasyon türü: slayt Animasyonlu yön: aşağıda
Animasyon Süresi: 1000ms Animasyon gecikmesi: 600ms
Animasyon yoğunluğu:% 69
Animasyon Opaklık Başlar:% 100
Animasyonlu resim/simge: animasyon olmadan
Bulanık simgesini ayarlayın #4 Renkler Sütun 4’teki son bulanıklık modülünü açın ve simgenin rengini değiştirin.
Renk simgesi: #00ff9d
Tasarım sekmesindeki animasyon ayarlarını değiştirerek animasyon ve eksiksiz tasarım.
Animasyon türü: slayt Animasyonlu yön: aşağıda
Animasyon Süresi: 3000ms Animasyon gecikmesi: 400ms
Animasyon yoğunluğu:% 100
Animasyon Opaklık Başlar:% 100
Animasyonlu resim/simge: animasyon olmadan
Bu yazıdaki son zihin, ziyaretçileri Divi animasyon ayarlarını kullanarak sayfaya nasıl ikna edici bir şekilde yönlendirdiğini gösterdik. Temel fikir, bulanıklık modülünü simgeleri için kullanmanız ve animasyon aralığını kahramana artırmanızdır. Bu yaklaşımı, oluşturduğunuz ve istediğiniz kadar yaratıcı olduğunuz her türlü web sitesine kullanabilirsiniz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
