Divi'de 3 Çarpıcı Tek Aralıklı Yazı Tipi Tasarımı Nasıl Oluşturulur
Yayınlanan: 2019-09-02Tek aralıklı yazı tipleri, web tasarımı için keyifli bir varlıktır. Özellikle güzel simetriye ve dengeye sahip tasarımlar oluşturmak için kullanışlıdırlar. Tek aralıklı bir yazı tipi, her biri aynı genişliğe (veya yatay boşluğa) sahip harflerden ve karakterlerden oluşur. Bu nedenle, metni görüntülemek için tutarlı ve zarif bir yapı sağlarlar. Tek aralıklı yazı tipleri bu nedenle kodlamada yaygın olarak kullanılmaktadır.
Bu derste, Divi'de üç çarpıcı tek aralıklı yazı tipi tasarımı oluşturacağız. Tek aralıklı yazı tiplerini oldukça benzersiz şekillerde konumlandırmak ve tasarlamak için metin modüllerinin nasıl uygun şekilde özelleştirileceğini ve çok daha fazlasını gözden geçireceğiz.
Başlayalım.
Gizlice Bakış
İşte bu eğitimde oluşturacağımız tasarımlara hızlı bir bakış.
Tek Aralıklı Yazı Tipi Tasarımı #1: Logo Stili
1. Bina Tasarımına Başlayın
Tek Aralıklı Yazı Tipi Tasarımı #2: Büyük Harf Blokları
Bina Tasarımına Başlayın #2
Tek Aralıklı Yazı Tipi Tasarımı #3: Bulmaca Bulmaca
Bina Tasarımına Başlayın #3
Tek Aralıklı Yazı Tipi Tasarımları Düzenini Ü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!
Youtube Kanalımıza Abone Olun
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, olur mu?
Başlamak için Gerekenler
Başlamak için aşağıdakileri yapmanız gerekir:
- Henüz yapmadıysanız, kurulu Divi Temasını (veya Divi Temasını kullanmıyorsanız Divi Builder Eklentisini) 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).
- Eğitim için kullanılacak medya kitaplığına birkaç sahte resim yükleyin. HVAC düzen paketinden 200 piksele 200 piksel görüntü logosu ve Cake Maker Düzen Paketi ve Ev Geliştirme Düzen Paketinden alınan iki arka plan görüntüsü (en az 1920 piksel genişliğinde) kullanacağız.
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Tek Aralıklı Yazı Tipi Tasarımı #1: Logo Stili
Harflerin simetrik dengesini vurgulayan basit bir tek aralıklı yazı tipi tasarımıyla başlayalım. Harfler eşit aralıklarla yerleştirildiğinden, tek aralıklı yazı tipleri grafikler ve logolar için mükemmeldir. Güzel bir grafik oluşturmak için tek aralıklı yazı tipini basit bir görüntü simgesiyle nasıl birleştirebileceğinize dair hızlı bir örnek.
İlk olarak, tek sütunlu bir satır içeren normal bir bölüm oluşturun.
Metin modülünü eklemeden önce bölüme bir arka plan ekleyeceğiz. Arka plan, koyu gri arka plana sahip ortalanmış bir simge görüntüsünden oluşacaktır. Kullanacağımız simge görüntüsü HVAC Layout Pack'ten alınmıştır. Arka plan resmi olarak gerçek boyutu kullanacağımızdan, resim simgesinin yaklaşık 200 piksele 200 piksel olduğundan emin olun.
Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
- Arka Plan Rengi: #121212
- Arka Plan Resmi: [200 piksele 200 piksel resim simgesi ekleyin]
- Arka Plan Resmi Boyutu: Gerçek Boyut
- Arka Plan Resmi Konumu: Merkez
Metin Modülünü Ekleyin
Bölüm tamamlandıktan sonra, tek sütunlu satıra bir metin modülü ekleyin.
Bu, metni tek aralıklı bir yazı tipiyle eklediğimiz yerdir. Tek aralıklı harflerin kullanışlı yanı, her harf aynı genişlikte olduğu için metnin orta harfini kolayca sayfada ortalayabilmenizdir. Bu, bölüme eklediğimiz arka plan resmi simgesi ile hizalamayı kolaylaştıracaktır.
Metin modülü ayarlarını açın ve gövde içeriğini “zarif” kelimesiyle güncelleyin. Aslında tek sayıda harfi olan herhangi bir kelimeyi kullanabilirsiniz, böylece arka plan resmi simgesiyle güzel bir şekilde örtüşecek bir orta harfe sahip oluruz.
Tek Aralıklı Yazı Tipi Tasarımını Ekleme
Divi, aralarından seçim yapabileceğimiz Divi oluşturucuda bulunan yaklaşık 12 farklı tek aralıklı yazı tipine sahiptir. Bunları görmek için bir metin yazı tipi seçmek için tıklayıp arama çubuğuna “mono” yazabiliriz. Bu, mevcut tek aralıklı yazı tiplerinin listesini gösterecektir.
Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:
- Metin Yazı Tipi: Droid Sans Mono
- Metin Metin Boyutu: 5vw
- Metin Harf Aralığı: 1.3em
- Metin Satırı Yüksekliği: 1em
Metin boyutu için vw uzunluk birimi ve harf aralığı ve satır yüksekliği için em uzunluk biriminin bu kombinasyonu, metnin tüm tarayıcı boyutlarına mükemmel şekilde yanıt vermesini sağlayacaktır.
aralık
Yazı tipi hazır olduktan sonra, metnin mükemmel bir şekilde ortalandığından emin olmak için metin modülüne biraz boşluk ekleyin. Harf aralığı nedeniyle metnin biraz ortalanmış olduğunu görebiliriz. Harf aralığı için eklediğimiz değere eşit bir sol dolgu ekleyerek bunu kolayca düzeltebiliriz.
Aşağıdakileri güncelleyin:
- Kenar boşluğu: 0 piksel alt
- Dolgu: 2em üst, 2em alt, 1,3em sol
Orta harfin rengini değiştirin
Divi'de tek bir harfin rengini değiştirmenin basit bir yolu, oluşturucuyu ön uçta kullanırken satır içi stil seçeneklerini kullanmaktır.
Değiştirmek istediğiniz harfi vurgulayın ve menü çubuğundaki metin rengi simgesine tıklayın.
Ardından şu renk kodunu ekleyin: rgba(248, 142, 96, 0.54)
Bu kadar!
Satırı Tam Genişlik Yap
Eklenecek metin için biraz yer açmamız gerekiyor, bu yüzden devam edin ve satır ayarlarını açıp aşağıdakileri güncelleyerek satırı tam genişlikte yapın:
- Genişlik: %100
- Maksimum Genişlik: %100
Son sonuç
İşte nihai sonuç.
Ve isterseniz, boş alan için arka plan resmi simgesini kullanmak için metinde ortadaki karakter için bir boşluk ekleyebilirsiniz. İşte böyle görünecek.
Tek Aralıklı Yazı Tipi Tasarımı #2: Büyük Harf Blokları
Bu sonraki tasarım, tek aralıklı yazı tipleriyle mümkün olan blok benzeri yazı tipi yapısını sergiliyor. Normal (değişken genişlikli) yazı tiplerinin aksine, tek aralıklı yazı tipleri, modern ve göze hoş gelen dengeli bir tasarım için birbirinin üzerine yığılır.
İşte nasıl yapılacağı.
Tek sütunlu bir satırla yeni bir normal bölüm oluşturun.
Herhangi bir modül eklemeden önce, bölümü aşağıdaki gibi bir arka plan tasarımı ile güncelleyin:
- Arka Plan Gradyanı Sol Renk: #fcd1e5
- Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0)
- Gradyan Yönü: 135deg
- Başlangıç Konumu: %50
- Bitiş Konumu: %76
Ardından bir arka plan resmi ekleyin. Cake Maker Layout Pack'ten bir tane kullanıyorum.
Satır Genişliği Ekle
Ardından, satır genişliğini aşağıdaki gibi güncelleyin:
- Genişlik: %100
- Maksimum Genişlik: %100
Metin Modülünü Ekleyin
Tam genişlikte bir satırınız olduğunda, satıra bir metin modülü ekleyin.
Ardından gövde içeriğini aşağıdakilerle güncelleyin:
<p>dividesign<a href="#">learnmore</a></p>
Ardından paragraf metnini aşağıdaki gibi biçimlendirin:
- Metin Yazı Tipi: Üst Geçiş Mono
- Metin Yazı Tipi Stili: TT
- Metin Metin Rengi: #2e298f
- Metin Metin Boyutu: 15vw
- Metin Harf Aralığı: 0.16em
- Metin Satırı Yüksekliği: 1em
Bağlantı metnine aşağıdaki gibi farklı bir stil ekleyeceğiz:
- Bağlantı Yazı Tipi Stili: Altı Çizili
- Bağlantı Metni Rengi: #2e298f
- Bağlantı Metni Boyutu: 3.5vw
- Bağlantı Harf Aralığı: 0em
aralık
Metne stil verildikten sonra, aralığı aşağıdaki gibi güncelleyin:
- Kenar boşluğu: 0 piksel alt
- Dolgu: 0.16em sol, 3em sağ
Bundan sonra, ayarları kaydedin. Ardından, yazıdaki ilk tasarım örneğinde yaptığımız gibi harflerin rengini değiştirmek için satır içi stil seçeneklerini kullanın.
Bunu yapmak için, ilk dört harfi vurgulayın ve rengi beyaz olarak değiştirin.
İkinci harf rengini şu şekilde değiştirin: #f34a43
Son olarak, bağlantı metnindeki ilk beş harfi vurgulayın (“öğrenin”) ve rengi şu şekilde güncelleyin: #f34a43.
Son tasarım
Şimdi canlı bir sayfada nihai sonucu kontrol edelim.
Tek Aralıklı Yazı Tipi Tasarımı #3: Bulmaca Bulmaca
Bu son tasarım, metniniz için bir çapraz bulmaca türü düzeni oluşturmak için tek aralıklı yazı tiplerinden yararlanır. İşte nasıl yapılacağı.
İlk olarak, tek sütunlu bir satırla yeni bir normal bölüm oluşturun.
Herhangi bir modül eklemeden önce, bölüm ayarlarını açın ve aşağıdaki gibi gradyanlı bir arka plan resmi ekleyin:
- Arka Plan Resmi: [resim ekle]
- Arka Plan Gradyanı Sol Renk:
- Arka Plan Gradyanı Sağ Renk:
- Gradyan Yönü: 90deg
- Başlangıç Konumu: %25
- Bitiş Konumu: %0
- Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET
Satır Ayarları
Bölüm arka planı tamamlandıktan sonra, satır ayarlarını yeni bir genişlik ve biraz boşlukla açın.
- Genişlik: %100
- Maksimum Genişlik: %100
- Dolgu: 22vw üst, 5vw sol
Metin modülü ekle
Satır güncellendikten sonra, gövde içeriği olarak “mono” kelimesi ile satıra yeni bir metin modülü ekleyin.
Ardından metin modülü tasarımını aşağıdaki gibi güncelleyin:
- Metin Yazı Tipi: Rubik Mono One
- Metin Metin Rengi: #faac00
- Metin Metin Boyutu: 8vw
- Metin Harf Aralığı: 0.15em
- Metin Satırı Yüksekliği: 1em
Metin modülünü çoğaltın
Sonraki iki metin bloğumuzun tasarımını hızlandırmak için, az önce tasarladığımız metin modülünü iki kez çoğaltalım, böylece üst üste yığılmış toplam üç metin modülünüz olur.
Metin Modülünü Güncelle #2
Metin modülünü çoğalttıktan sonra, ikinci (orta) metin modülünün ayarlarını açın ve gövde metnini “fontlar” kelimesiyle değiştirin.
Ardından aşağıdakileri güncelleyin:
- Gövde: "yazı tipleri"
- Arka Plan Rengi: #dddddd
- Metin Metin Rengi: #930565
- Genişlik: 0.86em
- Kenar boşluğu: -3em üst, 2em sol
Metin modülünün genişliğini değiştirmenin metnin dikey olarak görüntülenmesine nasıl neden olduğuna dikkat edin. Ve tek aralıklı yazı tipi olduğu için eşit şekilde yığılırlar. Ve her harf bloğunun boyutuna eşit genişlikte, metin modülünü 1em'lik artışlarla hareket ettirebiliriz. Böylece -3em üst kenar boşluğu metni tam olarak 3 harf bloğu kadar getirecektir. Ve 2em sol kenar boşluğu, metin modülünü tam olarak 2 harf bloğu üzerinde sağa hareket ettirecektir. Bu, öğeleri böyle bir çapraz bulmaca düzeninde konumlandırmayı kolaylaştırır.
Kutu Gölge
Metin modülünün arkasına arka plan boyutunu artırmak için bir kutu gölgesi ekleyelim.
- Kutu Gölgesi: ekran görüntüsüne bakın
- Kutu Gölge Dikey Konumu: 0px
- Kutu Gölge Bulanıklığı Gücü: 0px
- Kutu Gölge Yayılma Gücü: 0.08em
- Gölge Rengi: #dddddd (arka plan rengiyle aynı)
Z İndeksi
Bu metin bloğunun diğer metin modüllerinin üzerinde kaldığından emin olmak için z dizinini aşağıdaki gibi güncelleyin:
- Z İndeksi: 11
Metin Modülünü Güncelle #3
Metin modülü #2 tamamlandıktan sonra, üçüncü metin modülünün ayarlarını açın ve gövde metnini "boşluklu" kelimesiyle değiştirin.
Ardından, sihirli em kenar boşluğu değerlerimizi kullanarak modülü yerine taşıyın:
- Kenar boşluğu: -1em üst, 2em sol
Son tasarım
Mobil
Bu tasarımlar vw ve em uzunluk birimleri kullanılarak oluşturulduğundan, tasarım tüm tarayıcı boyutlarında tutarlı kalacaktır. İşte tasarımın tablet ve telefon ekranında nasıl göründüğü.
Not: Yanıt vermeyen tek öğe, ilk tasarımdaki arka plan resmi simgesidir. Ancak, bunu düzeltmek için tablete ve telefona kolayca daha küçük bir arka plan resmi ekleyebilirsiniz.
Son düşünceler
Divi'de tek aralıklı yazı tipi tasarımları oluşturmanın belki de en iyi yanı, yazı tipi stillerinin çok yönlülüğüdür. Sadece birkaç küçük dokunuş büyük bir fark yaratabilir. Ayrıca uygulamalar herhangi bir web sitesi için oldukça pratiktir.
Bu üç örnekten hangisini en umut verici buldunuz?
Yorumlarda sizden haber bekliyorum.
Şerefe!