Divi Kaydırma Efektlerini Kullanarak Metin Nasıl Yığınlanır ve Canlandırılır
Yayınlanan: 2020-02-22Divi'nin kaydırma efektlerini kaydırmada metin yığınlamak ve canlandırmak için kullanmak, sayfa başlıklarınıza hayat vermek için kullanılabilecek benzersiz bir tasarım tekniğidir. İşin püf noktası, harfleri kesinlikle üst üste gelecek şekilde istiflemek için Divi'nin konum seçeneklerini kullanmaktır. Ardından kaydırma efektlerini kullanarak harfleri yatay ve dikey olarak hareket ettirebilirsiniz.
Bunu kontrol et!
Gizlice Bakış
İşte bu eğitimde oluşturacağımız metin animasyonuna hızlı bir bakış.
Youtube Kanalımıza Abone Olun
Düzeni ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Builder'a sürüklemeniz yeterlidir.
Hadi öğreticiye geçelim, olur mu?
Başlamak için Gerekenler
Başlamak için aşağıdakileri yapmanız gerekir:
- Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
- WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
- “Sıfırdan Oluştur” seçeneğini seçin.
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'de Metin Nasıl Yığınlanır ve Canlandırılır
Bölüm ve Satırı Ayarlama
İlk olarak, normal bölüme tek sütunlu bir satır oluşturun.
Bölüm Ayarları
Herhangi bir modül eklemeden önce bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
- Arka Plan Rengi: rgba(201,245,255,0,35)
- Dolgu: 14vw üst, 14vw alt
Satır Ayarları
Ardından, satır ayarlarını açın ve aşağıdakileri güncelleyin:
- Maksimum Genişlik: %60
- Satır Hizalama: Merkez
- Yükseklik: 20vw
Metin modüllerini kesinlikle satır içinde konumlandıracağımız için yüksekliği belirli bir değere ayarlıyoruz.
Stroll'da Canlandırılan Yığılmış Metin Modüllerini Ekleme
Artık bölüm ve satır kurulumda olduğuna göre, başlık tasarımımızı oluşturacak metin modüllerini eklemeye başlayabiliriz. İlk metin modülü ana başlık metnini içerecektir. Sonraki üç metin modülü, başlığın ilk izinin üstüne yığmak ve ardından kaydırmada canlandırmak için kullanılacak tek bir harf içerecektir.
Ana başlık ile metin modülünü ekleyerek başlayalım.
Metin Modülü #1 Ekle
Satıra yeni bir metin modülü ekleyin.
Ardından metin modülünü aşağıdaki içerikle güncelleyin.
<h2><span style="color: rgba(83,144,193,0.1)">D</span>esign</h2> that jumps off the page
- Metin Yazı Tipi: Bungee Saç Çizgisi
- Metin Yazı Tipi Ağırlığı: Kalın
- Metin Metin Boyutu: 4vw
- Metin Satırı Yüksekliği: 1.5em
- Başlık 2 Yazı Tipi: Bungee Shade
- Başlık 2 Yazı Tipi Ağırlığı: Kalın
- Başlık 2 Metin Rengi:
- Başlık 2 Metin Boyutu: 12vw
- Genişlik: %100
- Pozisyon: Mutlak
Metin Modülü #2 Ekle
Bir sonraki metin modülü, başlığın ilk harfiyle örtüşen ilk harf olarak kullanılacaktır. Metin modülünün tasarımını hızlı bir şekilde başlatmak için ilk metin modülünü çoğaltın.
Ardından, yinelenen metin modülünün içeriğini başlık metninin ilk harfiyle ("D") güncelleyin.
Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:
- Metin Yazı Tipi: Bungee Shade
- Metin Yazı Tipi Ağırlığı: Kalın
- Metin Metin Rengi: rgba(83,144,193,0.3)
- Metin Metin Boyutu: 12vw
- Metin Satırı Yüksekliği: 1em
Kaydırma Efektleri
“D” harfine sahip metin modülü, şimdi doğrudan ilk metin modülündeki “D” harfinin üzerine yığılmıştır. Dikey ve yatay hareketin bir kombinasyonunu kullanarak harfi kaydırma üzerinde biraz hareket ettireceğiz.
Dikey Hareket
Gelişmiş sekmesi altında dikey hareket sekmesini seçin ve aşağıdakileri güncelleyin:
- Dikey Hareketi Etkinleştir: EVET
- Başlangıç Ofseti: 0 (%20'de)
- Orta Ofset: -0.5 (%40 ile %60 arasında)
- Bitiş Ofseti: 0 (%80'de)
Divi'deki kaydırma efekti seçeneklerinde yeniyseniz, en üst yüzde değerleri tarayıcı penceresindeki konum noktalarını gösterir. Her yüzde değeri aşağıdaki ofsetlere karşılık gelir (başlangıç, orta ve bitiş). Böylece, kullanıcı kaydırdıkça, "D" harfi, görünümün altından %20'ye ulaştığında canlandırmaya ("0" başlangıç uzaklığından) başlayacaktır. Görüntü alanının altından %40'a ulaşana kadar (yukarı doğru) canlandırmaya devam edecek ve ardından görünümün altından %60'a ulaşana kadar “-0.5” ofsetinde tutulacaktır. %60 noktasına ulaştığında, orijinal “0” ofsetine geri dönmeye başlayacak ve görünümün altından %80'e ulaştığında animasyonu durduracaktır.
Yatay Hareket
Metin modülüne yatay hareket vermek için yatay hareket sekmesini seçin ve aşağıdakileri güncelleyin (değerler dikey hareket ile aynı olacaktır):
- Yatay Hareketi Etkinleştir: EVET
- Başlangıç Ofseti: 0 (%20'de)
- Orta Ofset: -0.5 (%40 ile %60 arasında)
- Bitiş Ofseti: 0 (%80'de)
Metin Modülü #3 Ekle
Önceki metin modülünü çoğaltarak üçüncü metin modülünü (veya “D” harfini) oluşturun.
Kaydırma Efektlerini Güncelle
Ardından aşağıdaki kaydırma efektlerini güncelleyin.
Dikey Hareket
- Orta Ofset: -1
Yatay Hareket
- Orta Ofset: 1
Metin Rengini Güncelle
Metin rengini aşağıdaki gibi güncelleyin:
- Metin Metin Rengi: rgba(83,144,193,0.5)
Metin Modülü #4 Ekle
Masaüstü görünümünde bu noktada seçim yapmak zorlaşabilir. Tel kafes görünüm modunu dağıtın ve son mektubumuzu oluşturmak için önceki metin modülünü çoğaltın.
Metin Rengini Güncelle
Metin rengini aşağıdaki gibi güncelleyin:
- Metin Metin Rengi: #5390c1
Kaydırma Efektlerini Güncelle
Ardından gelişmiş sekmeye geçin ve kaydırma efektlerini aşağıdaki gibi ayarlayın:
Dikey Hareket
- Orta Ofset: -1.5
Yatay Hareket
- Orta Ofset: 1.5
Test için Bölüme Kenar Boşluğu Ekle
Tasarımı canlı bir sayfada test etmek için kaydırmak için biraz alana ihtiyacınız olacak. Bunu, bölüme biraz üst ve alt kenar boşluğu ekleyerek kolayca yapabiliriz. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
- Marj: 40vw üst, 40vw alt
Son sonuç
Artık nihayet canlı bir sayfada nihai sonucu kontrol edebiliriz.
İşte mobilde.
Divi'nin bul ve değiştir özelliğini kullanarak farklı yazı tiplerini denemekten çekinmeyin.
Son düşünceler
Bu gönderi, kaydırmadaki metni canlandırmanın yeni yolları için yaratıcı meyve suyunuzu çalıştırmanızı sağlamalıdır. Kullanıcının bölüm boyunca (yukarıdan aşağıya) kaydırması ve kaydırma efektinin tam süresini deneyimlemesi gerekeceğinden, bu, bölüm başlıkları için iyi sonuç verecektir.
Ve bir düşününce, aynı konsept resimler ve ikonlar için de işe yarayabilir.
Aşağıdaki yorumlarda sizden haber bekliyorum.
Şerefe!