Divi animasyon ayarlarıyla başlığınızı nasıl yapabilirsiniz?
Başlığınız genellikle insanların web sitenizi ziyaret ettiklerinde ilk okuduğu şeydir. Çok iyi bir başlığa sahip olmanın yanı sıra, insanların dikkat etmesini ve onlara gösterdiğiniz her şeyi gerçekten okumasını sağlamak da önemlidir. Başlık genellikle kahramandaki merkezi büyüklüğü ve konumu nedeniyle dikkatden kaçmaz, ancak daha ileri gitmek ve başlığı gerçekten öne çıkarmak istiyorsanız, bu öğretici sizin için uygundur. Önemli bir başlık yapmak ve ziyaretçilerinizin dikkatini çekmek için Divi’nin animasyon ayarlarını birleştireceğiz. Başlığı 5 parçaya böler ve ziyaretçilerinizin hareketi takip etmesini ve paylaşılanları okumasını isteyecek bir flaş efekti oluşturacağız.
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: #ededed Mesafe o zaman, parçanın mesafesini ayarlamaya gidin ve gelenek altına birkaç minder ekleyin.
Dolgu Alt: 10VW Sıra #1 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve satırın arka plan rengini değiştirin.
Arka plan rengi: #c9c9c9 Yapıştırıcı bir sonraki boyut ayarlarını açar ve satırın tüm ekran genişliğini karşılamasına izin verir.
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Varsayılan dolgunun üst ve alt kısmını satırdan da çıkarın.
Üst Dolgu: 0pxpadding Aşağıda: 0px
Metin Modülü Ekle #1 İçerikleri Ekle Modül eklemeye başlamanın zamanı geldi! İhtiyacımız olan ilk modül metin modülü. Paragraf metin stilini kullanarak başlığınızın ilk bölümünü içerik kutusuna girin. Arka plan rengi daha sonra, modülün arka plan ayarlarını açın ve arka plan rengini ekleyin. Arka plan rengi: #c9c9c9
Tasarım sekmesindeki metin ayarlarını da değiştirin. Metin yazı tipi: Didact Gothic
Metin yazı tipi ağırlığı: kalınlık
Metin rengi: #000000
Metin Boyutu: 10VW
Hat yüksekliği metni: 0.9em
Metin Oryantasyonu: Orta
Mesafe ve özel bir üst ve alt ped kullanarak istediğiniz şekli yapın. Üst Dolgu: 10VW
Dolgu Alt: 3VW
Son fakat en az değil animasyon, animasyon ekleyeceğiz. Animasyon süresinin ve ilk opaklığın sıfır olmasını sağlamak çok önemlidir. Bu, metin modülünün flaş efektiyle görünmesine izin verecektir. Animasyon Stili: Fades
Animasyon tekrarlama: bir kez
Animasyon süresi: 0ms
Animasyon gecikmesi: 1000ms
X4 Klon Metin Modülü İlk metin modülünü değiştirmeyi bitirdikten sonra, başlığınızın uzunluğuna bağlı olarak modülü istediğiniz kadar devam edebilir ve klonlayabilirsiniz. Flash efektiyle görüntülemek istediğiniz başlığın her bir bölümü için ayrı bir metin modülüne ihtiyacınız var. Bu örnek için 4 ek modüle ihtiyacımız var. Değiştir #1 Dolgu Dolgu ilk yinelenen kopyayı değiştirin. Arka plan rengi ile birlikte arka plan rengi. Arka plan rengi: #5900ff
Metin rengi metin rengini beyaza değiştirin. Metin rengi: #ffffff
Animasyon ayarlarında animasyon ve animasyon gecikmesini artırın. Bu, ziyaretçilerinizin bu modül görünmeden önce önceki metin modülünü okumak için yeterli zamana sahip olmalarını sağlayacaktır. Animasyon gecikmesi: 1500ms
Yinelenen #2 Dolgu Değiştir İkinci yinelenen içeriği bir sonraki değiştirin. Arka plan rengi ile birlikte arka plan rengi. Arka plan rengi: #ffb200
Metin rengi ve ayrıca metnin rengi. Metin rengi: #ffffff
Animasyon bir kez daha, animasyonun ertelenmesinin önceki iki modül için kullanılan animasyonun ertelenmesinden daha yüksek olmasını sağlayacağız. İnsanlara okumak için yeterli zaman vermek için her biri arasında 500 MD bıraktık. Animasyon gecikmesi: 2000ms
Üçüncü yinelenen içeriği değiştirerek yinelenen #3 dolgusunu değiştirin. Animasyon ile birlikte animasyonun ertelenmesi. Animasyon gecikmesi: 2500ms
Yinelenen #4’ü değiştirin ve son olarak çoğaltın. İçeriği değiştirin. Arka plan rengi ile birlikte arka plan rengi. Arka plan rengi: #000000
Metin Rengi Metin rengini de değiştirin. Metin Rengi: #3A3A3A
Animasyon ayarlarında animasyon ve animasyon gecikmesini artırın. Animasyon gecikmesi: 3000ms
Tüm metin modüllerini ayarlamayı bitirdikten sonra ilk metin modülüne negatif kenar boşlukları ekleyin, devam edebilir ve üst üste gelebilirsiniz. Bu örtüşmeyi yapmak için, her bir yinelenen metin modülüne bazı negatif marjlar ekleyeceğiz. Başka bir deyişle, ilk modülden sonra gelen tüm modüllerin ilk metin modülünün üzerinde göründüğünden emin oluruz. Üst Marj: -21.98VW
Dönüştürme Hatını Değiştirme Çeviri Çeviri ayarlarını değiştirerek başlayarak tüm satırı değiştirerek devam edin. Aşağıda: -35vw
Değiştir dönme ayrıca dönüş dönüşüm değerini değiştirin. Sol: 320 derece
İkinci sıraya satırlar #2 sütun yapısı ekleyin! Artık bir başlık efektimiz olduğuna göre, kalan modülleri eklemeye başlayabiliriz. 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 ve satırın boyut ayarlarında tüm ekran genişliğini karşılamasına izin verin: Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Bir sonraki satırdan varsayılan olarak dolgu mesafesini silin.
Üst dolgu: 0px Başlık metin modülünü Sütun 2’ye ekleyin H1 içeriği ekleyin, modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül başlık metin modülüdür. Seçtiğiniz bazı H1 içeriğini ekleyin.
H1 Metin Ayarları Ardından, Tasarım sekmesini açın ve H1 metin ayarlarını değiştirin. Yazı tipi başlığı: Didact Gothic Başlık Mektubu Ağırlığı: Kalınlık
Başlık Metin Boyutu: 1.8VW (Masaüstü), 3.8VW (Tablet), 4VW (Telefon)
Mesafe Uzay ayarlarına bazı özel marj değerleri ekleyin.
Üst kenar boşluğu: -4vw Alt marj: 2VW
Sol kenar boşluğu: 30vw
Sağ kenar boşluğu: 30VW (masaüstü), 15VW (tablet ve cep telefonu)
Bölücü modülünü, ihtiyacımız olan bir sonraki modülün Sütun 2 görünürlüğüne ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet O zaman renk tasarım sekmesini açın ve bölücünün rengini değiştirin.
Renk: #000000 Yapıştırıcı değişim de boyutu ayarlayın.
Bölücü ağırlığı: 8px Genişlik:% 7
Uzay ayarları ile uyumlu mesafe.
Alt marj: 1VW Sol kenar boşluğu: 30vw
Açıklama Metin Modülünü Sütun 2’ye Ekleyin İhtiyacımız olan bir sonraki modülün içeriğini ekleyin Başka bir metin modülü. İstediğiniz bazı içerikleri girin.
Metin Ayarları Ardından, Tasarım sekmesindeki metin ayarlarını değiştirin. Metin Boyutu: 0.8VW (masaüstü), 1.3vw (tablet), 1.6vw (telefon) Yüksek çizgi metin: 2.2mest Uzay ayarlarına da bazı özel marj değerleri ekleyin.
Alt marj: 3VW
Sol kenar boşluğu: 30vw Sağ kenar boşluğu: 30VW (masaüstü), 15VW (tablet ve cep telefonu)
Düğme modülünü sütun 2 düğmesi ayarlarına ekleyin Bir sonraki ve son modül olan düğme modülüne. Seçtiğiniz bazı kopyaları ekleyin ve uygun düğme ayarlarını değiştirin:
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 1VW (Masaüstü), 1.5VW (Tablet), 2VW (Telefon) Düğmenin sınır genişliği: 0px
Yazı tipi düğmesi: Poppins
Mektup Ağırlığı: Kalın
Yazı tipi stili: büyük harf
Alan ayarları için açık boşluk ve bazı özel marjlar ve dolgu değerleri ekleyin ve bitti!
Sol kenar boşluğu: 30vw
Üst Dolgu: 1VW Dolgu Alt: 1VW
Sol dolgu: 3VW
Doğru dolgu: 3VW
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Bu yazıdaki son zihin, size yalnızca varsayılan Divi seçeneğini kullanarak başlığınızı nasıl görünmenizi sağlayacağınızı gösterdik. Bu, ziyaretçilerinizin dikkatini çekmek ve mesajınızı orijinal bir şekilde iletmek için iyi bir tekniktir. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
