Divi'de Eğik Metin Kaydırma Efekti Nasıl Oluşturulur

Eğik Metin Efekti oluşturmak, içeriğinize hayat vermenin eğlenceli bir yoludur. Buradaki fikir, metnin yarıya bölündüğü ve kullanıcı sayfayı aşağı kaydırdıkça parçalandığı yanılsamasını vermektir. Bu eğitimde, size bu tasarımın Divi'de ne kadar kolay yapıldığını göstereceğiz!

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma 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.

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:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Bölüm 1: Bölümü Tasarlamak

Bu ilk bölümde, bölüm düzenimiz için bölüm arka planını tasarlayacağız.

Arka plan rengi

Başlamak için, varsayılan bölüme aşağıdaki gibi bir arka plan rengi ekleyin:

• Degrade Arka Plan Sol Renk: #29c4a9
• Degrade Arka Plan Sağ Renk: #2b87da

bölücü

Tasarım sekmesinin altına aşağıdaki gibi bir üst ayırıcı ekleyin:

• Üst Bölücü Stili: ekran görüntüsüne bakın
• Bölücü Rengi: beyaz
• Bölücü Çevirme: dikey

aralık

Tasarımın kaydırma efektlerini test etmeye yardımcı olması için, bölümün üstüne ve altına bir miktar geçici kenar boşluğu ekleyelim. Bölümü başka bir sayfaya eklerken her zaman çıkarabiliriz. Ayrıca üst ve alt kısımlara eşit miktarda dolgu eklememiz gerekiyor.

• Marj: 80vh üst, 80vh alt
• Dolgu: 200 piksel üst, 200 piksel alt

Ekstra Alt Alan için Kutu Gölgesi

Bölümün gerçek alanından ödün vermeden bölümün alt kısmında ekstra tasarım rengi/boşluğu elde etmek için aşağıdaki gibi bir kutu gölgesi ekleyebiliriz:

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölgesi Dikey Konumu: 100px
• Gölge Rengi: #2b87da

Görünürlük Gizli

Ardından, bölümün dışına çıkarken kaydırma efektlerimizin görünmemesi için taşmayı gizli olarak ayarlayın.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Bölüm 2: Eğik Metin Efekti Oluşturma

Bu sonraki bölümde, eğik çizgi metin efekti oluşturacağız. Her biri aynı metin içeriğini tutan bir metin modülüne sahip iki satırı üst üste yığacağız. Ardından, negatif bir kenar boşluğu kullanarak, metnin alt yarısını gizleyerek üst metni aşağı doğru iteceğiz. Ardından, metnin üst yarısını gizleyerek alttaki metni yukarı itmek için negatif bir kenar boşluğu kullanacağız. Bittiğinde, metnin eğik çizgi yanılsamasını yaratmak için kaydırma efektini kullanarak üst satırı/sütununu hareket ettirebiliriz.

Metnin Üst Yarısı için Satır Ekle

İlk önce, tek sütunlu bir satır ekleyelim.

Ardından satır ayarlarını aşağıdaki gibi güncelleyin:

• Oluk Genişliği: 1
• Dolgu: 0 piksel üst, 0 piksel alt

Sütun Görünürlüğü Gizli

Ardından, sütun ayarlarını açın ve taşmayı gizli olarak güncelleyin:

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Metin Modülü Ekle

Sütuna yeni bir metin modülü ekleyin.

Metin içeriği

İçerik gövdesi alanına "Slash" kelimesini ekleyin.

Metin Tasarımı

Tasarım sekmesine geçin ve metin stilini aşağıdaki gibi güncelleyin:

• Metin Yazı Tipi: B612 Mono
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Yazı Tipi Stili: TT
• Metin Metin Rengi: #ffffff
• Metin Metin Boyutu: 150px (masaüstü), 100px (tablet), 60px (telefon)
• Metin Harf Aralığı: 0.1em
• Metin Hizalama: orta

Metin Kenar Boşluğu

Burada emin olmamız ve metnin tam olarak yarısı kadar bir alt kenar boşluğu eklememiz gerekiyor.

• Kenar boşluğu: -75 piksel alt (masaüstü), -50 piksel (tablet), -30 piksel (telefon)

Metnin Alt Yarısı için Satır Ekle

Satırı Çoğalt

Metni içeren ilk satırdan biri yerinde, alt satırı oluşturmak için tüm satırı çoğaltın.

Metin Modülü Kenar Boşluğunu Güncelle

Ardından, metnin üst yarısını gizlemek için yinelenen satırdaki metin modülü kenar boşluğunu alt kenar boşluğu yerine negatif üst kenar boşluğuyla güncelleyin.

• Kenar boşluğu: -75 piksel üst (masaüstü), -50 piksel üst (tablet), -30 piksel üst (telefon)

Üst Satır Sütuna Kaydırma Efektleri Ekle

Ardından, üst satırdaki sütuna kaydırma efekti eklemeye hazırız. Metnin alt kısmını gizleyen sütunun taşma gizli değeri nedeniyle metin gizleneceğinden metin modülüne kaydırma efekti ekleyemiyoruz.

En üst sıra için sütun ayarlarını açın ve aşağıdakileri güncelleyin:

Dikey hareket sekmesinin altında…

• Dikey Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 0 (%0'da)
• Orta Ofset: 0 (%50'de)
• Bitiş Ofseti: -.02 (%75'te)

Yatay Hareket sekmesi altında…

• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 0 (%0'da)
• Orta Ofset: 0 (%50'de)
• Bitiş Ofseti: 0,2 (%75'te)

Döndürme sekmesi altında…

• Döndürmeyi Etkinleştir: EVET
• Rotasyonun Başlatılması: 0 (%0'da)
• Orta Dönüş: 0 (%50'de)
• Bitiş Dönüşü: 1 derece (%75'te)

Şimdi eğik metin efektimiz tamamlandı!

Bölüm 3: Hareketli Bölücüyü Oluşturma

Eğik çizgili metin efektimiz tamamlandığında, ek bir eğlenceli öğe ekleyebiliriz – metni kesen küçük bir uçan ayırıcı! Bunu oluşturmak için, metin modülünün tam olarak bölündüğü yerde bölümün sayfa merkezi boyunca hareket eden bir ayırıcı modül kullanacağız.

İşte nasıl yapılacağı.

Satır ekle

İkinci satırın altına tek sütunlu bir satır ekleyin.

Bölücü Modülü Ekle

Sütunda yeni bir ayırıcı modül ekleyin.

bölücü arka plan

Ardından ayırıcıyı göstermek için NOT'u seçin. Bunun yerine, ayırıcıya aşağıdaki gibi bir arka plan rengi verin:

• Arka Plan Gradyanı Sol Renk: şeffaf
• Arka Plan Gradyanı Sağ Renk: #29c4a9

Ölçeği Dönüştür

Ardından yüksekliği güncelleyin ve transform translate seçeneğini kullanarak sola hareket ettirin.

• Yükseklik: 4 piksel
• Dönüştürme X Eksenini Çevir: -%100

Kaydırma Efekti

Şimdi ayırıcıyı sağa hareket ettirmek için kaydırma efektini ekleyin.

Yatay hareket sekmesinin altında…

• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: -18 (%25'te)
• Orta Ofset: 0 (%50'de)
• Bitiş Ofseti: 13 (%75'te)

Satır Ayarları

Ayırıcının metnin ortasından "eğik çizgi" geçtiğinden emin olmak için satır ayarlarını aşağıdaki gibi güncellememiz gerekiyor:

• Genişlik: %100
• Maksimum Genişlik: %100
• Dolgu: 0 piksel üst, 0 piksel alt
• Pozisyon: Mutlak
• konum: sol orta
• Z İndeksi: 9

Şimdi ayırıcı, metnin ortasından geçerek soldan sağa doğru hareket edecektir.

Bölüm 4: Gövde Metni Ekleme

Bu son kısım için, düzeni tamamlamak için bir metin bloğu ekleyeceğiz.

Satır ekle

Ayırıcı ile satırın altına yeni bir tek sütunlu satır ekleyin.

Metin Modülü Ekle

Ardından satıra yeni bir metin modülü ekleyin.

Metin içeriği

Ardından aşağıdaki HTML'yi gövde alanına yapıştırın:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<a href=""> | Learn More ></a>

Metin Tasarımı

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Metin Metin Rengi: #ffffff
• Bağlantı Metni Rengi: #121212
• Bağlantı Metni Boyutu: 20px

Satır Ayarları

Üst satır için ayarları açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Maksimum Genişlik: 400 piksel
• Pozisyon: Mutlak
• yer: alt merkez
• Dikey Ofset: 20 piksel (masaüstü ve tablet), -25 piksel (telefon)

Son sonuç

İşte nihai sonuç.

Son düşünceler

Bu tasarım için, eğik çizgiyle kesilecek metin miktarıyla sınırlı kalmanız için metni tüm cihazlarda tek satırda tutmak önemlidir. Ancak, bu eğik kaydırma efekti tekniği, metinden daha fazlasına uygulanabilir. Görüntüleri de kolayca kesebilirsiniz!

Yorumlarda sizden haber bekliyorum.

Şerefe!