Divi’de kavisli bir metin tasarımı nasıl yapılır
Bir web sayfasında metin görüntülemenin benzersiz bir yolunu arıyorsanız, Divi’de kavisli bir metin tasarımının nasıl oluşturulacağını bilmek faydalı olabilir. Bu tür bir tasarım, bir fotoğraf editörü kullanmak zorunda kalmadan Divi’de özel bir grafik veya yaratıcı başlık tasarımı oluşturmak için çalışacaktır. Genellikle bu, daha fazla tam HTML ve CSS’nin tamamlanmasını içerir, ancak Divi, CSS özel minimal ve metninizi benzersiz bir şekilde kolayca tasarlamak için daha fazla varsayılan seçenekleriniz vardır. Bu öğreticide, kendi amacınız için kullanışlı bir şablon olarak kullanabileceğiniz birkaç kavisli harf tasarımının nasıl yapılacağını göstereceğiz. Varsa, gelecek için tasarım ekipmanı kutunuza yeni bir şeyler ekleyebilirsiniz.
Başlayalım. Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız kavisli metin tasarımından gizlice bir bakış.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Divi’de kavisli bir metin oluşturmanın arkasındaki temel fikir Bu öğreticideki yöntemi kullanarak kavisli bir metin oluşturmak için, metin harflerinizin her birini ayrı bir metin modülüne eklemeniz gerekir (Monospace yazı tipini en iyi sonuçlar için kullanmak isteyeceksiniz) . Belirli bir yükseklik metin modülü verin. O zaman her mutlak konum metni modülünü merkezi bir şekilde vermeniz gerekir, böylece her şey birbiriyle yığılır.
Bu önemlidir, çünkü her harfin aynı orta noktadan dönmesini istiyoruz. Bundan sonra, kavisli bir metin yapmak için her harfi Z ekseni boyunca döndürmek için Divi Dönüşüm seçeneğini kullanabilirsiniz (bir daire çizmek için matematik sınıfında bir pusula kullanmayı düşünün). Ayrıca, her bir metin modülünün yüksekliğinin, dairenin çevresini de artıracak dairenin yarıçapını ve sonuç olarak harfler arasında daha fazla alan belirlediğini unutmayın. Aşağıda, metin için mükemmel bir daire düzeni oluşturmak için 45 derecelik bir artışla oynanan 8 metin modülü örneğidir. Her modül etrafına beyaz bir sınır ekledim, böylece dönmeyi kolayca görebilirsiniz. Ve işte 20 derece artışla oynanan aynı metin modülünün bir örneği.
Başlamak için YouTube kanalımıza abone olmaya başlayın, Divi’de yeni bir sayfa oluşturun. Ardından size bir sayfa başlığı verin ve ön uçta bir divi üreticisi kullanın. “Başından Uyan” seçeneğini seçin. Şimdi ayrılmaya hazırsın! Kavisli bir metin tasarımı yapmak ilk parçayı yapar ve satır bir sütun satırı ile normal bölümü yapar. Modülümüzü eklemeden önce, ayar ayarlarını aşağıdaki gibi devam ettirip güncelleyin: Gradyan Arka Plan Sol Renk: #1E003D Doğru renk gradyan arka plan: #121212
Gradyan Türü: Radyal
Arka plan görüntüsü: [100 piksel kez 100 piksel logo görüntüsünü girin]
Arka Plan Görüntü Boyutu: Gerçek Boyut Ayarları kaydedin, ardından satır ayarlarına atlayın ve aşağıdakileri güncelleyin:
Talang genişliği: 1 Genişlik:% 100
Yükseklik min: 400 piksel
Yükseklik: 40VW
Maksimum Yükseklik: 600 piksel
Pilding Custom: 0px üst, 0px aşağıda
Ardından, tüm metin modüllerinin yatay ortasında kalmasını sağlamak için sütunun ana öğelerine aşağıdaki özel CSS ekleyin:
CSS Ana Eleman Sütunu: Ekran: Flex;
Gerekçelendirme: Merkez;
Her harf için bir metin modülü yapın Şimdi ilk mektup modülümüzü ilk harfimizle 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 bir harf) Metin Yazı Tipi: Ubuntu Mono (herhangi bir Monospace yazı tipi kullanılabilir)
İçerik: Ben
Z ekseninin dönüşünün dönüşümü: 45deg Metin modülünün çoğaltma işlemine devam edin ve ardından metin modülünü yeni harflerle güncelleyin ve dönüşümün dönüşünü 45 derece artırın. İşte kalan 6 metin modülü reformunun ayrıntıları: Metin Modülü 3
İçerik: V
Z ekseninin dönüşünün dönüşümü: 90deg Metin Modülü 4
İçerik: Ben
Z ekseninin dönüşünün dönüşümü: 135deg
Metin Modülü 5
İçerik: D.
Z ekseninin dönüşünün dönüşümü: 180deg
Metin Modülü 6
İçerik: Ben
Z ekseninin dönüşünün dönüşümü: 225deg
Metin Modülü 7
İçerik: V
Z ekseninin dönüşünün dönüşümü: 270deg
Metin Modülü 8
İçerik: Ben
Z ekseninin dönüşünün dönüşümü: 315 SO! Şimdi sonucuna bakın. Nihai sonuç
Daha uzun bir metin için metnin boyutunu ve dönme derecesini ayarlama Daha büyük bir metin tasarımı seçeneği için kavisli metni ayarlamak istiyorsanız, metnin boyutunu değiştirebilir ve her metin modülünün dönüşünü değiştirebilirsiniz. Çerçeve görüntü görüntüleme modunu uygulayın ve ardından kavisli harfler içeren tüm metin modüllerini seçmek için çoklu seçici divi özelliğini kullanın. Ardından, seçilen tüm modülleri aynı anda güncelleyecek öğe için sermaye ayarlarını açmak için seçilen metin modüllerinden birinin ayarlarını açmak için tıklayın.
Eleman ayarlarının altında, metin boyutunu masaüstünde 40 piksel olarak değiştirin.
Ayarları kaydedin ve ardından her metin modülü için ayarları açın ve her biri için harfleri ve dönüşleri güncelleyin. İlk metin modülünü 0 derecelik bir dönüşle bırakın ve ardından her bir sonraki metin modülü için Z ekseninin 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, “zarif.themes” i heceleyeceğim. Her metin modülü için gereken harfin içeriğinin ve rotasyonun ayrıntıları aşağıdadır. Metin Modülü 1 İçerik: e Z ekseninin dönüşünün dönüşümü: 0deg Metin Modülü 2
İçerik: L
Z ekseninin dönüşünün dönüşümü: 10deg
Metin Modülü 3
İçerik: e
Z ekseninin dönüşünün dönüşümü: 20deg
Metin Modülü 4
İçerik: G
Z ekseninin dönüşünün dönüşümü: 30deg
Metin Modülü 5
İçerik: A
Z ekseninin dönüşünün dönüşümü: 40deg
Metin Modülü 6
İçerik: N
Z ekseninin dönüşünün dönüşümü: 50deg
Metin Modülü 7
İçerik: T
Z ekseninin dönüşünün dönüşümü: 60deg
Metin Modülü 8
İçindekiler:.
Z ekseninin dönüşünün dönüşümü: 70deg
Metin Modülü 9
İçerik: T
Z ekseninin dönüşünün dönüşümü: 80deg
Metin Modülü 10
İçerik: H
Z ekseninin dönüşünün dönüşümü: 90degmodul metin 10
İçerik: e
Z ekseninin dönüşünün dönüşümü: 100deg
Metin Modülü 11
İçerik: m
Z ekseninin dönüşünün dönüşümü: 110deg
Metin Modülü 12
İçerik: e
Z ekseninin dönüşünün dönüşümü: 120deg
Metin Modülü 13
İçindekiler: S
Z ekseninin dönüşünün dönüşümü: 130deg
Şimdiye kadar sonuç bu.
Tüm metnin dönüşünü ayarlamanın kolay yolu, dönüş dönüşümünü satıra uygulamaktır. Satır ayarlarını açın ve kavisli metni istediğiniz yere konumlandırmak için INDEX-Z kontrol düğmesini kullanın.
İşte son tasarım.
Daha fazla metin ekleyin ve harfler arasındaki doğru mesafeyi elde etmek için dönme seviyesini ayarlamaktan çekinmeyin. Yarıçapı azaltmak veya artırmak için metin modülünün yüksekliğini de ayarlayabilirsiniz. Son zihin, nasıl çalıştığını anladıktan sonra Divi’de kavisli bir metin tasarımını oldukça basit bir süreçtir. Bu makale, metin modülünün eğriye dönecek şekilde ayarlanmasında yer alan geometriyi anlamanıza yardımcı olacaktır. Doğru ayarları aldıktan sonra, bazı özel CSS parçalarına ek olarak, Divi’nin varsayılan tasarım ayarlarını oldukça yaratıcı olmak için kullanabilirsiniz. Umarım bu, kendi benzersiz kavisli metin tasarımlarınızı yapmanız için biraz ilham verebilir. Ve kavisli harflerinize bazı animasyonlar eklemek istiyorsanız, harfleri nasıl açacağınızla ilgili makalemize bakın. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Divi’de kavisli bir metin oluşturmanın arkasındaki temel fikir Bu öğreticideki yöntemi kullanarak kavisli bir metin oluşturmak için, metin harflerinizin her birini ayrı bir metin modülüne eklemeniz gerekir (Monospace yazı tipini en iyi sonuçlar için kullanmak isteyeceksiniz) . Belirli bir yükseklik metin modülü verin. O zaman her mutlak konum metni modülünü merkezi bir şekilde vermeniz gerekir, böylece her şey birbiriyle yığılır.
Bu önemlidir, çünkü her harfin aynı orta noktadan dönmesini istiyoruz. Bundan sonra, kavisli bir metin yapmak için her harfi Z ekseni boyunca döndürmek için Divi Dönüşüm seçeneğini kullanabilirsiniz (bir daire çizmek için matematik sınıfında bir pusula kullanmayı düşünün). Ayrıca, her bir metin modülünün yüksekliğinin, dairenin çevresini de artıracak dairenin yarıçapını ve sonuç olarak harfler arasında daha fazla alan belirlediğini unutmayın. Aşağıda, metin için mükemmel bir daire düzeni oluşturmak için 45 derecelik bir artışla oynanan 8 metin modülü örneğidir. Her modül etrafına beyaz bir sınır ekledim, böylece dönmeyi kolayca görebilirsiniz. Ve işte 20 derece artışla oynanan aynı metin modülünün bir örneği.
Başlamak için YouTube kanalımıza abone olmaya başlayın, Divi’de yeni bir sayfa oluşturun. Ardından size bir sayfa başlığı verin ve ön uçta bir divi üreticisi kullanın. “Başından Uyan” seçeneğini seçin. Şimdi ayrılmaya hazırsın! Kavisli bir metin tasarımı yapmak ilk parçayı yapar ve satır bir sütun satırı ile normal bölümü yapar. Modülümüzü eklemeden önce, ayar ayarlarını aşağıdaki gibi devam ettirip güncelleyin: Gradyan Arka Plan Sol Renk: #1E003D Doğru renk gradyan arka plan: #121212
Gradyan Türü: Radyal
Arka plan görüntüsü: [100 piksel kez 100 piksel logo görüntüsünü girin]
Arka Plan Görüntü Boyutu: Gerçek Boyut Ayarları kaydedin, ardından satır ayarlarına atlayın ve aşağıdakileri güncelleyin:
Talang genişliği: 1 Genişlik:% 100
Yükseklik min: 400 piksel
Yükseklik: 40VW
Maksimum Yükseklik: 600 piksel
Pilding Custom: 0px üst, 0px aşağıda
Ardından, tüm metin modüllerinin yatay ortasında kalmasını sağlamak için sütunun ana öğelerine aşağıdaki özel CSS ekleyin:
CSS Ana Eleman Sütunu: Ekran: Flex;
Gerekçelendirme: Merkez;
Her harf için bir metin modülü yapın Şimdi ilk mektup modülümüzü ilk harfimizle 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 bir harf) Metin Yazı Tipi: Ubuntu Mono (herhangi bir Monospace yazı tipi kullanılabilir)
Metin Rengi Metin: #fffffff
Metin Boyutu: 5VW (masaüstü), 40px (Cep Telefonu) Metin Oryantasyonu: Orta
Yükseklik min: 200px
Yüksek: 20VW
Maksimum Yükseklik: 300 piksel
Ardından dönüşümün kökenini aşağı güncelleyin. Bu, metnin dönüşünün nerede meydana geldiğini belirlemek için önemli olacaktır. Metin modülünün modülün altında dönmesini istiyoruz. Bu ilk metin modülünün çalınması gerekmese de, ek harfler için metin modülünü her çoğalttığımızda bu seçeneği taşıyabilmemiz için buraya eklemek önemlidir.
Dönüşüm Kökeni:% 100 (veya en düşük)
Ardından, mutlak bir konum metin modülü sağlamak için ana öğeye aşağıdaki özel CSS ekleyin. Pozisyon: Mutlak! Önemli;
İçerik: Ben
Z ekseninin dönüşünün dönüşümü: 45deg Metin modülünün çoğaltma işlemine devam edin ve ardından metin modülünü yeni harflerle güncelleyin ve dönüşümün dönüşünü 45 derece artırın. İşte kalan 6 metin modülü reformunun ayrıntıları: Metin Modülü 3
İçerik: V
Z ekseninin dönüşünün dönüşümü: 90deg Metin Modülü 4
İçerik: Ben
Z ekseninin dönüşünün dönüşümü: 135deg
Metin Modülü 5
İçerik: D.
Z ekseninin dönüşünün dönüşümü: 180deg
Metin Modülü 6
İçerik: Ben
Z ekseninin dönüşünün dönüşümü: 225deg
Metin Modülü 7
İçerik: V
Z ekseninin dönüşünün dönüşümü: 270deg
Metin Modülü 8
İçerik: Ben
Z ekseninin dönüşünün dönüşümü: 315 SO! Şimdi sonucuna bakın. Nihai sonuç
Daha uzun bir metin için metnin boyutunu ve dönme derecesini ayarlama Daha büyük bir metin tasarımı seçeneği için kavisli metni ayarlamak istiyorsanız, metnin boyutunu değiştirebilir ve her metin modülünün dönüşünü değiştirebilirsiniz. Çerçeve görüntü görüntüleme modunu uygulayın ve ardından kavisli harfler içeren tüm metin modüllerini seçmek için çoklu seçici divi özelliğini kullanın. Ardından, seçilen tüm modülleri aynı anda güncelleyecek öğe için sermaye ayarlarını açmak için seçilen metin modüllerinden birinin ayarlarını açmak için tıklayın.
Eleman ayarlarının altında, metin boyutunu masaüstünde 40 piksel olarak değiştirin.
Ayarları kaydedin ve ardından her metin modülü için ayarları açın ve her biri için harfleri ve dönüşleri güncelleyin. İlk metin modülünü 0 derecelik bir dönüşle bırakın ve ardından her bir sonraki metin modülü için Z ekseninin 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, “zarif.themes” i heceleyeceğim. Her metin modülü için gereken harfin içeriğinin ve rotasyonun ayrıntıları aşağıdadır. Metin Modülü 1 İçerik: e Z ekseninin dönüşünün dönüşümü: 0deg Metin Modülü 2
İçerik: L
Z ekseninin dönüşünün dönüşümü: 10deg
Metin Modülü 3
İçerik: e
Z ekseninin dönüşünün dönüşümü: 20deg
Metin Modülü 4
İçerik: G
Z ekseninin dönüşünün dönüşümü: 30deg
Metin Modülü 5
İçerik: A
Z ekseninin dönüşünün dönüşümü: 40deg
Metin Modülü 6
İçerik: N
Z ekseninin dönüşünün dönüşümü: 50deg
Metin Modülü 7
İçerik: T
Z ekseninin dönüşünün dönüşümü: 60deg
Metin Modülü 8
İçindekiler:.
Z ekseninin dönüşünün dönüşümü: 70deg
Metin Modülü 9
İçerik: T
Z ekseninin dönüşünün dönüşümü: 80deg
Metin Modülü 10
İçerik: H
Z ekseninin dönüşünün dönüşümü: 90degmodul metin 10
İçerik: e
Z ekseninin dönüşünün dönüşümü: 100deg
Metin Modülü 11
İçerik: m
Z ekseninin dönüşünün dönüşümü: 110deg
Metin Modülü 12
İçerik: e
Z ekseninin dönüşünün dönüşümü: 120deg
Metin Modülü 13
İçindekiler: S
Z ekseninin dönüşünün dönüşümü: 130deg
Şimdiye kadar sonuç bu.
Tüm metnin dönüşünü ayarlamanın kolay yolu, dönüş dönüşümünü satıra uygulamaktır. Satır ayarlarını açın ve kavisli metni istediğiniz yere konumlandırmak için INDEX-Z kontrol düğmesini kullanın.
İşte son tasarım.
Daha fazla metin ekleyin ve harfler arasındaki doğru mesafeyi elde etmek için dönme seviyesini ayarlamaktan çekinmeyin. Yarıçapı azaltmak veya artırmak için metin modülünün yüksekliğini de ayarlayabilirsiniz. Son zihin, nasıl çalıştığını anladıktan sonra Divi’de kavisli bir metin tasarımını oldukça basit bir süreçtir. Bu makale, metin modülünün eğriye dönecek şekilde ayarlanmasında yer alan geometriyi anlamanıza yardımcı olacaktır. Doğru ayarları aldıktan sonra, bazı özel CSS parçalarına ek olarak, Divi’nin varsayılan tasarım ayarlarını oldukça yaratıcı olmak için kullanabilirsiniz. Umarım bu, kendi benzersiz kavisli metin tasarımlarınızı yapmanız için biraz ilham verebilir. Ve kavisli harflerinize bazı animasyonlar eklemek istiyorsanız, harfleri nasıl açacağınızla ilgili makalemize bakın. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
