Divi'de Eğri Metin Tasarımları Nasıl Oluşturulur

Bir web sayfasında metin sergilemenin benzersiz bir yolunu arıyorsanız, Divi'de kavisli metin tasarımlarının nasıl oluşturulacağını bilmek işinize yarayabilir. Bu tür bir tasarım, Divi'de bir fotoğraf düzenleyici kullanmak zorunda kalmadan özel grafikler veya yaratıcı başlık tasarımları oluşturmak için işe yarar. Genellikle bu, başarmak için daha eksiksiz html ve css gerektirir, ancak Divi ile minimal düzeyde özel CSS ve metninizi benzersiz şekillerde kolayca tasarlamak için çok daha fazla yerleşik seçeneğiniz vardır.

Bu öğreticide, kendi amaçlarınız için yararlı bir şablon olarak kullanabileceğiniz birkaç kavisli harf tasarımını nasıl oluşturacağınızı göstereceğiz. Bir şey olursa, gelecek için tasarım araç kutunuza yeni bir şey ekleyebilirsiniz.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız kavisli metin tasarımlarına bir göz atın.

Harf Animasyon Tasarım Örnekleri Düzenini ÜCRETSİZ İndirin

Bu eğitimdeki kavisli metin tasarımlarına 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.

Dosyaları İndirin

Ü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.

İNDİRMEK

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ı çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Hadi öğreticiye geçelim mi?

Divi'de Eğri Metin Oluşturmanın Arkasındaki Temel Fikir

Bu öğreticideki yöntemi kullanarak eğri metin oluşturmak için, metninizin her harfini ayrı bir metin modülüne eklemeniz gerekir (en iyi sonuçlar için tek aralıklı bir yazı tipi kullanmak isteyeceksiniz). Metin modülüne belirli bir yükseklik verin. Ardından, her metin modülüne, hepsinin birbirinin üzerine yığılması için ortalanmış bir mutlak konum vermeniz gerekir.

Bu önemlidir çünkü her harfin aynı merkez noktasından dönmesini istiyoruz. Bundan sonra, eğri metni oluşturmak için her harfi z ekseni boyunca döndürmek için Divi'nin dönüştürme seçeneklerini kullanabilirsiniz (bir daire çizmek için matematik dersinde bir pusula kullanmayı düşünün). Ayrıca, her metin modülünün yüksekliğinin, dairenin çevresini de artıracak ve bunun sonucunda harfler arasında daha fazla boşluk bırakacak daire yarıçapını belirlediğine dikkat edin.

Burada, metin için mükemmel bir daire düzeni oluşturmak üzere 45 derecelik artışlarla döndürülen 8 metin modülünün bir örneği verilmiştir. Döndürmeyi kolayca görebilmeniz için her modülün etrafına beyaz bir kenarlık ekledim.

Ve burada, 20 derecelik artışlarla döndürülen aynı metin modüllerine bir örnek.

Başlarken

Youtube Kanalımıza Abone Olun

Başlamak için Divi'de yeni bir sayfa oluşturun. Ardından sayfanıza bir başlık verin ve Divi oluşturucuyu ön uçta dağıtın. "Sıfırdan inşa et" seçeneğini seçin. Artık gitmeye hazırsınız!

Eğri Metin Tasarımını Oluşturma

Bölüm ve Satır Oluşturma

İlk önce tek sütunlu bir satır içeren normal bir bölüm oluşturun.

Modüllerimizi eklemeden önce, devam edin ve bölüm ayarlarını aşağıdaki gibi güncelleyin:

• Arka Plan Gradyanı Sol Renk: #1e003d
• Arka Plan Gradyanı Sağ Renk: #121212
• Gradyan Türü: Radyal

• Arka Plan Resmi: [logonun resmini 100 piksele 100 piksel civarında ekleyin]
• Arka Plan Resmi Boyutu: Gerçek Boyut

Ayarları kaydedin ve ardından satır ayarlarına geçin ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Minimum Yükseklik: 400 piksel
• Yükseklik: 40vw
• Maksimum Yükseklik: 600 piksel
• Özel Dolgu: 0 piksel üst, 0 piksel alt

Ardından, tüm metin modüllerinin yatay olarak ortalandığından emin olmak için Sütun Ana Öğesine aşağıdaki özel CSS'yi ekleyin:

Sütun Ana Öğe CSS'si:

display:flex;
justify-content:center;

Her Harf için Metin Modülleri Oluşturma

Artık ilk harfimizle ilk metin modülümüzü eklemeye hazırız. Bunu yapmak için satır sütununa yeni bir metin modülü ekleyin ve aşağıdakileri güncelleyin:

• İçerik: d (sadece tek harf)
• Metin Yazı Tipi: Ubuntu Mono (herhangi bir tek aralıklı yazı tipi yapacaktır)
• Metin Metin Rengi: #ffffff
• Metin Metin Boyutu: 5vw (masaüstü), 40px (telefon)
• Metin Yönü: orta
• Minimum Yükseklik: 200 piksel
• Yükseklik: 20vw
• Maksimum Yükseklik: 300 piksel

Ardından, transform Origin'i aşağıya güncelleyin. Bu, metnin dönüşünün nerede olduğunu belirlemek için önemli olacaktır. Metin modülünün modülün alt noktasında dönmesini istiyoruz. Bu ilk metin modülünün döndürülmesi gerekmese de, ek harfler için metin modülünü her çoğalttığımızda bu seçeneği devam ettirebilmemiz için onu buraya eklemek önemlidir.

• Kökeni Dönüştür: %100 (veya alt)

Ardından, metin modülüne mutlak bir konum vermek için aşağıdaki özel CSS'yi Ana Öğeye ekleyin.

position: absolute !important;

Diğer Metin Modüllerini Oluşturma ve Döndürme

Harflerin geri kalanını oluşturmak için metin modülünü çoğaltacağız. Metin modülünü çoğalttığımızda, tek yapmamız gereken harfi güncellemek ve ardından her yeni modülle dönüşü 45 derece artırmak.

Metin modülleri ön uçta üst üste yığılacağından, bu güncellemeleri yapmak için tel kafes görünüm modunu kullanmak en iyisidir.

Devam edin ve metin modülünü çoğaltın ve ardından aşağıdakileri güncelleyin:

• içerik: ben
• Dönüştürme z ekseni: 45deg

Metin modülünü çoğaltma ve ardından metin modülünü yeni bir harfle güncelleme ve dönüşüm dönüşünü 45 derece artırma işlemine devam edin. Kalan 6 metin modülü güncellemesinin dökümü:

Metin Modülü 3

• içerik: v
• Dönüştürme z ekseni: 90deg

Metin Modülü 4

• içerik: ben
• Dönüştürme z ekseni: 135deg

Metin Modülü 5

• içerik: d
• Dönüştürme z ekseni: 180deg

Metin Modülü 6

• içerik: ben
• Dönüştürme z ekseni: 225deg

Metin Modülü 7

• içerik: v
• Dönüştürme z ekseni: 270deg

Metin Modülü 8

• içerik: ben
• Dönüştürme z ekseni: 315deg

Bu kadar! Şimdi nihai sonucu kontrol edin.

Son sonuç

Daha Uzun Metin için Metin boyutunu ve döndürme derecesini ayarlama

Daha büyük metin tasarımı seçenekleri için eğri metni ayarlamak isterseniz, metin boyutunu değiştirebilir ve her metin modülünün dönüşünü dönüştürebilirsiniz.

Tel çerçeve görünüm modunu devreye alın ve ardından kavisli harfleri içeren tüm metin modüllerini seçmek için Divi'nin çoklu seçim özelliğini kullanın. Ardından, seçilen tüm modülleri bir kerede güncelleyecek olan öğe ayar modunu açmak için seçilen metin modüllerinden birinin ayarlarını açmak için tıklayın.

Öğe ayarları altında, metin metni boyutunu masaüstünde 40 piksel olarak değiştirin.

Ayarları kaydedin ve ardından her bir metin modülü için ayarları açın ve her biri için harfleri ve dönüşü güncelleyin. İlk metin modülünü 0 derecelik bir dönüşle bırakın ve ardından takip eden her metin modülü için z ekseni dönüşünü 10 derece artırın. Ardından, gerektiğinde daha fazla harf için metin modülünü çoğaltın. Bu örnekte, “elegant.themes” kelimesini heceleyeceğim.

Her metin modülü için gereken içerik mektubunun ve döndürmenin dökümü burada.

• Metin Modülü 1
  • içerik: e
  • Dönüştürme z ekseni: 0deg
• Metin Modülü 2
  • içerik: l
  • Dönüştürme z ekseni: 10deg
• Metin Modülü 3
  • içerik: e
  • Dönüştürme z ekseni: 20deg
• Metin Modülü 4
  • içerik: g
  • Dönüştürme z ekseni: 30deg
• Metin Modülü 5
  • içerik: bir
  • Dönüştürme z ekseni: 40deg
• Metin Modülü 6
  • içerik: n
  • Dönüştürme z ekseni: 50deg
• Metin Modülü 7
  • içerik: t
  • Dönüştürme z ekseni: 60deg
• Metin Modülü 8
  • içerik: .
  • Dönüştürme z ekseni: 70deg
• Metin Modülü 9
  • içerik: t
  • Dönüştürme z ekseni: 80deg
• Metin Modülü 10
  • içerik: h
  • Dönüştürme z ekseni: 90deg
• Metin Modülü 10
  • içerik: e
  • Dönüştürme z ekseni: 100deg
• Metin Modülü 11
  • içerik: m
  • Dönüştürme z ekseni: 110deg
• Metin Modülü 12
  • içerik: e
  • Dönüştürme z ekseni: 120deg
• Metin Modülü 13
  • içerik: s
  • Dönüştürme z ekseni: 130deg

İşte şimdiye kadarki sonuç.

Tüm metnin dönüşünü ayarlamanın kolay bir yolu, satıra bir dönüşüm döndürme uygulamaktır. Satır ayarlarını açın ve eğri metni istediğiniz yere konumlandırmak için z-endeksi kontrol kadranını kullanın.

İşte son tasarım.

Harfler arasında doğru aralığı elde etmek için daha fazla metin eklemeyi ve döndürme derecesini değiştirmeyi keşfetmekten çekinmeyin. Yarıçapı azaltmak veya artırmak için metin modüllerinin yüksekliğini de ayarlayabilirsiniz.

Son düşünceler

Divi'de kavisli metin tasarımları oluşturmak, nasıl çalıştığını anladıktan sonra oldukça basit bir işlemdir. Bu makale, metin modüllerinin bir eğri üzerinde dönecek şekilde ayarlanmasıyla ilgili geometriyi anlamanıza yardımcı olacaktır. Kurulumu doğru yaptıktan sonra, birkaç özel css parçacığının yanı sıra, oldukça yaratıcı olmak için Divi'nin yerleşik tasarım ayarlarını kullanabilirsiniz. Umarım bu size kendi benzersiz kavisli metin tasarımlarınızı yapmak için biraz ilham verir.

Ve kavisli harflerinize biraz animasyon eklemek istiyorsanız, harflerin nasıl canlandırılacağıyla ilgili makalemize göz atın.

Yorumlarda sizden haber bekliyorum.

Şerefe!