Divi'de Kaydırmada Arka Plan Animasyonlu Metin Maskesi Nasıl Tasarlanır
Yayınlanan: 2020-08-16Metin Maskesi tasarımları, Divi'nin yerleşik seçeneklerini kullanarak şaşırtıcı derecede kolaydır. Oluşturucu, metin stilleri, arka planlar ve karışım modları için seçenekler de dahil olmak üzere bir metin maskesi efekti oluşturmak için tüm bileşenlere sahiptir. Aslında, daha önce karışım modlarını kullanarak metin maskesi tasarımları oluşturduk. Ancak kaydırma efektleriyle metin maskesi tasarımlarını yepyeni bir düzeye taşıyabiliriz.
Bu eğitimde, size Divi'de kaydırmada arka plan animasyonlu bir metin maskesi tasarlamayı göstereceğiz. Tasarım benzersiz ve kaydırma efekti onu gerçekten canlandırıyor.
Başlayalım!
Gizlice Bakış
İşte bu eğitimde oluşturacağımız tasarımlara hızlı bir bakış.
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!
Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.
İçe Aktar düğmesini tıklayın.
Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.
Ardından içe aktar düğmesini tıklayın.
Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.
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 Arka Plan Animasyonlu Metin Maskesi Tasarlama
Satır ekle
İşleri başlatmak için varsayılan normal bölüme iki sütunlu bir satır ekleyin.
Bölüm Ayarlarını Güncelle
Herhangi bir modül eklemeden önce, bölüm ayarlarını açın ve arka plan rengini ve dolguyu aşağıdaki gibi güncelleyin:
- Arka Plan Rengi: #750046
- Dolgu: 0 piksel üst, 0 piksel alt
Satır Ayarlarını Güncelle
Bölüm ayarları yapıldıktan sonra, satır için ayarları açın ve aşağıdaki tasarım ayarlarını güncelleyin:
- Oluk Genişliği: 1
- Genişlik: %100
- Maksimum Genişlik: %100
- Dolgu: 0 piksel üst, 0 piksel alt
Metin maskesi tasarımını oluştururken metnimiz için vw uzunluk birimini kullanacağımız için cilt payı genişliğini 1 ve genişliği %100 olarak ayarlamak önemlidir. vw uzunluk birimi tarayıcının genişliğini temel aldığından, ana kapların (bölüm ve satır) tarayıcı ile aynı genişliğe sahip olması önemlidir, yani %100.
Sütun 1 Ayarlarını Güncelle
Metin maskemiz ve resmimiz sol sütuna (sütun 1) eklenecek. Resim ve metne eklediğimiz karışım modlarının bu rengi harmanlaması/ortaya çıkarması için sütuna bir arka plan rengi eklememiz gerekiyor. Ayrıca taşmayı gizli olarak ayarlamamız gerekir, böylece kaydırmadaki görüntüyü canlandırdığımızda taşan görüntüyü sütunun dışında görmeyiz.
Sütun 1 için ayarları açın ve aşağıdakileri güncelleyin:
- Arka Plan Rengi: #750046
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
Metin Maskesini Oluşturma
Metin maskesini oluşturmak için sütun 1'e bir metin modülü ekleyin.
Metin İçeriği
Ardından gövde içeriğine “divi” kelimesini ekleyin. Kare bir tasarım için eşit şekilde istiflenmesi için 4 harfli bir kelime kullanıyoruz.
Metin Arka Planı
Ardından, metin modülüne beyaz bir arka plan rengi ekleyin.
- Arka Plan Rengi: #ffffff
Metin Tasarımı
Ardından, tasarım sekmesi altında aşağıdakileri güncelleyin:
- Metin Yazı Tipi: Rubik Mono One
- Metin Yazı Tipi stili: TT
- Metin Metin Rengi: #000000
- Metin Metin Boyutu: 25vw (masaüstü), 50vw (tablet ve telefon)
- Metin Satırı Yüksekliği: 0.8em
- Metin Hizalama: orta
- Dolgu: 8vw üst, 8vw alt
Metin Karışım Modu
Metin maskesi tasarımını tamamlamak için aşağıdaki karışım modunu ekleyin:
- Karışım Modu: Ekran
Şimdiye kadar, bu metin maskesi efekti için dört temel bileşen aşağıdaki gibidir:
- Sütun Arka Planı
- Beyaz Metin Arka Planı
- Siyah Metin
- Metin Modülünde Ekran Karıştırma Modu
Ekran harmanlama modu, katmanları çoğaltır ve karışımın daha hafif bir versiyonunu üretir. Ekran harmanlama moduyla, siyah metin tamamen şeffaf hale gelir ve bu durumda arka plan rengi olan arkasında ne olduğunu ortaya çıkarır.
Arka Plan Resmi Ekle
Arka plan resmini metin maskesine eklemek için yeni bir resim modülü oluşturun ve kabaca 1700 piksele 2500 piksel boyutunda bir resim yükleyin. Görüntünün boyutu, görüntünün sütunun yüksekliğini ve genişliğini kapsayabilmesi için önemlidir.
Görüntü Tasarımı
Ardından aşağıdaki tasarım ayarlarını güncelleyin:
- Tam Genişliği Zorla: EVET
- Karışım Modu: Ekran
Bu karışım modu, metin maskesi efekti için gerekli değildir, ancak tasarıma daha iyi uyması için görüntüyü arka plan rengiyle karıştırır.
Görüntü Konumu
Ardından, görüntüye mutlak bir konum verin ve metin modülünün arkasına oturması için Z İndeksini güncelleyin.
- Pozisyon: Mutlak
- Z İndeksi: -1
Görüntü Kaydırma Efektleri
Görüntü tasarımı hazır olduğunda, gelişmiş sekmesine gidin ve kaydırma efekti seçeneklerini aşağıdaki gibi güncelleyin:
Dikey Hareket sekmesi altında,
- Başlangıç Ofseti: -1 (%0'da)
- Orta Ofset: 0 (%50'de)
- Bitiş Ofseti: 1 (%100'de)
Yatay Hareket sekmesi altında,
- Başlangıç Ofseti: -0.5 (%0'da)
- Orta Ofset: 0 (%50'de)
- Bitiş Ofseti: 0,5 (%100'de)
Yukarı ve Aşağı Ölçekleme sekmesi altında,
- Başlangıç Ölçeği: %110 (%0'da)
- Orta Ölçek: %125 (%50'de)
- Bitiş Ölçeği: %140 (%100'de)
Sonuç
Şimdiye kadar sonucu kontrol edebilmeniz için bölüme biraz üst ve alt kenar boşluğu ekleyebilirsiniz.
Sahte Metin Oluşturma
Sağ sütunda yeni bir metin modülü ekleyin.
Gövde içeriğini aşağıdakilerle güncelleyin:
<h2>Lorem Ipsum Dolor Sit Amet</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
Ardından, aşağıdaki metin tasarımı ayarları reklamını güncelleyin:
- Metin Rengi: Açık
- Başlık 2 Yazı Tipi: Rubik
- Başlık 2 Metin Boyutu: 4vw
- Dolgu (masaüstü): 16vw üst, 5vw sol, 5vw sağ
- Dolgu (tablet): 16vw üst, 16vw alt, 5vw sol, 5vw sağ
Sonuç
İsteğe Bağlı Düzenlemeler
Siyah Arka Plan / Beyaz Metin
Metin maskesi için siyah bir arka plan kullanmak istiyorsanız, tek yapmanız gereken metin maskeleme efektini oluşturan üç temel seçeneği güncellemektir.
Metin modülü ayarlarını açın ve aşağıdakileri değiştirin:
- Arka plan rengi: #000000 (siyah)
- Metin Metin Rengi: #ffffff (beyaz)
- Karışım Modu: Çarpma
Ve işte sonuç…
PNG Görüntüsünü Döndürme
Ve başka bir harika efekt için animasyonlu görüntüyü saydam bir arka plana (PNG) sahip olanla değiştirebilirsiniz. Dönen kaydırma efekti eklenmiş olarak kullandığım bir PNG görüntüsü örneği.
Nihai sonuçlar
İşte tüm tasarımlara başka bir bakış.
Son düşünceler
Umarım, kaydırmada arka plan animasyonlu bu metin maskesi tasarımları, sitenizin ihtiyaç duyduğu yaratıcı kenarı sağlayacaktır. Metin maskeleme efektini yaratmanın temel bileşenlerini öğrendikten sonra, bu tasarımın ihtiyaçlarınıza uygun sayısız versiyonunu oluşturmakta sorun yaşamayacaksınız.
Yorumlarda sizden haber bekliyorum.
Şerefe!