Divi’de 3 muhteşem monospace yazı tipi tasarımı nasıl yapılır

Monospace yazı tipi, web tasarımı için eğlenceli bir varlıktır. Güzel simetri ve dengeye sahip tasarımlar yapmak için çok yararlıdırlar. Monospace yazı tipi, her biri aynı genişliğe (veya yatay boşluğa) sahip harf ve karakterlerden oluşur. Böylece, metni görüntülemek için tutarlı ve zarif bir yapı sağlarlar. Monospace yazı tipleri bu nedenle kodlamada yaygın olarak kullanılmaktadır. Bu öğreticide, Divi’de üç şaşırtıcı Monospace yazı tipi tasarımı yapacağız. Metin modülünün Monospace yazı tipini oldukça benzersiz bir şekilde ve daha fazlasını konumlandırmak ve tasarlamak için doğru şekilde nasıl ayarlayacağını tartışacağız.
Başlayalım. Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarımın bir bakış. Monospace Font Tasarım #1: Logo Stili

Yapılmaya Başlayın Tasarım #1 Monospace Yazı Türü Tasarımı #2: Budge Budge Block

İnşa Tasarımı #2 Monospace Yazı Tipi Tasarımı #3: Bulmaca

Bina Tasarımına Başlayın #3 Ücretsiz Monospace Yazı Tipi Tasarımının Düzenini İndir Bu öğreticinin tasarımını almak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.
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!
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. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakileri yapmanız gerekiyor:
Değilse, yüklü Divi temasını (veya Divi temasını kullanmıyorsanız Divi Builder eklentisini) yükleyin ve etkinleştirin.
WordPress’te yeni bir sayfa oluşturun ve ön taraftaki sayfaları düzenlemek için Divi Builder’ı kullanın (görsel yapımcı).
Öğreticiler için kullanılacak medya kütüphanesine bazı yapay görüntüler yükleyin. HVAC düzen paketinden 200px 200px görüntü logosunu ve kek üreticisi ve ev onarım düzeni paketinden alınan iki arka plan görüntüsünü (en az 1920px) kullanacağız.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak.
Monospace Font Tasarım #1: Logo Stili
Harflerin simetrik dengesini vurgulayan basit bir Monospace yazı tipi tasarımıyla başlayalım. Harfler alanı eşit olarak dağıtıldığından, Monospace yazı tipi grafikler ve logolar için çok iyidir. İşte iyi bir grafik oluşturmak için Monospace yazı tipini basit bir görüntü simgesiyle nasıl birleştirebileceğinizin hızlı bir örneği. İlk olarak, bir satır bir sütunu içeren normal bir bölüm oluşturun. Metin modülünü eklemeden önce bu bölüme arka plan ekleyeceğiz. Arka plan, koyu gri arka plana sahip ortada bir simge görüntüsünden oluşacaktır. Kullanacağımız simge görüntüsü HVAC düzen paketinden alınır. Gerçek boyutu arka plan görüntüsü olarak kullanacağımız için görüntü simgesinin 200px kat 200px ölçtüğünden emin olun.

Aşağıdaki bölüm ayarlarını açın:

Arka plan rengi: #121212
Arka plan görüntüsü: [200px 200px resim simgesini girin]
Arka Plan Görüntü Boyutu: Gerçek Boyut
Arka Plan Görüntü Pozisyonu: Orta
Metin modülünü ekleyin Bölüm tamamlandıktan sonra metin modülünü bir sütun satırına ekleyin.
Monospace yazı tipi ile metin ekliyoruz. Monospace harflerinin rahat yönü, her harf aynı genişliğe sahip olduğundan, metnin orta harfini sayfaya kolayca odaklayabilirsiniz. Bu, o bölüme eklediğimiz arka plan görüntüsü simgesiyle uyumlaştırmayı kolaylaştıracaktır.

Metin modülü ayarlarını açın ve içeriği “zarif” kelimesiyle güncelleyin. Aslında, tek sayıda harfe sahip olan neredeyse tüm kelimeleri kullanabilirsiniz, bu nedenle kuyu arkası bir görüntü simgesiyle örtüşmek için orta harflerimiz vardır.

Monospace Divi yazı tipi tasarımının eklenmesi, seçebileceğimiz Divi Builder’a dahil edilen yaklaşık 12 farklı Monospace yazı tipine sahiptir. Görmek için metin yazı tipini seçmek için tıklayabilir ve arama çubuğuna “Mono” girebiliriz. Bu, mevcut Monospace yazı tiplerinin bir listesini görüntüler. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Metin yazı tipi: droid sans mono
Metin Boyutu Metin: 5VW

Uzay Metin Mektubu: 1.3EM
Hat yüksekliği metni: 1em
Metin boyutu için VW uzun birimi ve harfler ve satır yüksekliği boşlukları için EM uzunluğu birimi kombinasyonu, tüm tarayıcı boyutlarına tam duyarlı metin sağlayacaktır. Yazı tipi hazır olduktan sonraki mesafe, metnin mükemmel bir şekilde ortada olduğundan emin olmak için metin modülüne bazı boşluklar ekleyin. Uzay alanı nedeniyle metnin biraz huzursuzluğu görebiliriz. Mektup alanına eklediğimiz değerle aynı sol dolgu ekleyerek kolayca düzeltebiliriz. Aşağıdakileri güncelleyin:
Marj: 0px aşağıda
Dolgu: Top 2EM, Alt 2em, sol 1.3em

Orta harfin rengini değiştir Divi’deki bir harfin rengini değiştirmenin basit yolu, ön uçta bir yapımcı kullanırken bir dizi stil seçenekleri kullanmaktır. Değiştirmek istediğiniz harfleri vurgulayın ve menü çubuğundaki Metin Renk simgesini tıklayın.
Sonra aşağıdaki renk kodunu ekleyin: RGBA (248, 142, 96, 0.54)! Geniş bir çizgi oluşturun Metnin eklenmesi için biraz yer açmalıyız, bu nedenle satır ayarlarını açarak ve aşağıdakileri güncelleyerek devam edin ve tam genişlik yapın:
Genişlik:% 100

Maksimum genişlik:% 100

Buradaki nihai sonuç nihai sonuçtur.
Ve isterseniz, boş alan için arka plan görüntüsü simgesini kullanmak için metindeki orta karaktere boşluklar ekleyebilirsiniz. Böyle görünecek. Monospace yazı tipi tasarımları #2: Budge Budge Block
Bu sonraki tasarım, monospace yazı tiplerinde mümkün olan bloklar gibi yazı tipi yapılarına sahiptir. Sıradan yazı tiplerinin (değişkenler) aksine, monospace yazı tipleri modern ve hoş bir dengeli tasarım için birbirleriyle yığılır. İşte nasıl yapılacağı. Bir satır bir sütunu içeren yeni bir düzenli bölüm oluşturun.

Herhangi bir modül eklemeden önce, parçayı aşağıdaki arka plan tasarımı ile güncelleyin:

Gradyan arka planın sol rengi: #fcd1e5

Sağ renk gradyan arka planı: RGBA (255,255,255.0)

Gradyan yönü: 135deg

Başlangıç ​​Pozisyonu:% 50
Son pozisyon:% 76
Ardından bir arka plan görüntüsü ekleyin. Kek üreticilerinden birini kullanıyorum.
Bir sonraki satırın genişliğini ekleyin, hattın genişliğini aşağıdaki gibi güncelleyin:
Genişlik:% 100
Maksimum genişlik:% 100

Metin Modülünü Ekleyin Tam geniş bir satıra sahip olduktan sonra metin modülünü satıra ekleyin.

Ardından, vücut içeriğini aşağıdakilerle güncelleyin:
dividesign öğrenme
Sonra paragraf metin gücü aşağıdaki gibi:
Metin yazı tipi: üst geçit mono

Metin yazı tipi stili: TT

Metin Renk Metni: #2E298F

Metin Boyutu Metin: 15VW
Uzay Metin Mektubu: 0.16EM
Hat yüksekliği metni: 1em
Bağlantı metnine aşağıdaki gibi farklı bir stil ekleyeceğiz:
Bağlantı yazı tipi stili: alt çizgiler
Renkli Metin Bağlantısı: #2E298F
Bağlantı Metin Boyutu: 3.5VW

Bağlantı Mektubu Alanı: 0EM
Metin düzenlendikten sonra, alanı aşağıdaki gibi güncelleyin:
Marj: 0px aşağıda
Dolgu: 0.16em sol, 3em sağ
Bundan sonra ayarları kaydedin. Ardından, önceki yazıdaki ilk tasarım örneğinde yaptığımız gibi harflerin rengini değiştirmek için bir dizi stil seçenek kullanın. Bunu yapmak için, üst dört harfini vurgulayın ve rengi beyaza değiştirin. İkinci harfin rengini aşağıdakilere değiştirin: #F34A43

Son olarak, bağlantının metnindeki ilk beş harfini vurgulayın (“öğrenme”) ve rengi aşağıdakilere güncelleyin: #F34A43.
Son tasarım şimdi doğrudan sayfadaki sonucuna bakalım.
Monospace Yazı Tipi Tasarımı #3: Bulmaca

Bu son tasarım, metniniz için bir tür çapraz bulmaca oluşturmak için Monospace yazı tipini kullanır. İşte nasıl yapılacağı. İlk olarak, bir sütun satırı ile yeni bir düzenli bölüm oluşturun.

Herhangi bir modül eklemeden önce, bölüm ayarlarını açın ve arka plan görüntüsünü gradyanla aşağıdaki gibi ekleyin:

Arka plan görüntüsü: [Resmi girin]

Arka plan gradyanının sol rengi:

Arka plan gradyanının doğru rengi:

Gradyan yönü: 90deg

Başlangıç ​​Pozisyonu:% 25
Son pozisyon:% 0
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Satır Ayarları Bölümün arka planı tamamlandıktan sonra, satır ayarlarını yeni bir genişlik ve bazı boşluklarla açın.
Genişlik:% 100
Maksimum genişlik:% 100
Dolgu: 22VW’nin üstünde, 5VW’den ayrıldı
Metin modülünü ekleyin Satır güncellendikten sonra, içerik içeriği olarak “mono” kelimesi ile satıra yeni bir metin modülü ekleyin.

Ardından tasarım modülü tasarımını aşağıdaki gibi güncelleyin:
Metin yazı tipi: Rubik Mono One
Metin Renk Metni: #FAAC00
Metin Boyutu Metin: 8VW

Uzay Metin Mektubu: 0.15EM

Hat yüksekliği metni: 1em
Bir sonraki iki metin bloğunun tasarımını hızlandırmak için metin modülünü iki katına çıkarın, birbirinizle istiflenmiş toplam üç metin modülünüz olması için iki kez tasarladığımız metin modülünü çoğaltalım. İkinci metin (orta) ve İçerik metnini “yazı tipi” kelimesine değiştirin. Ardından aşağıdakileri güncelleyin:
Body: “Yazı Tipi”
Arka plan rengi: #ddddd
Metin Renk Metni: #930565
Genişlik: 0.86EM

Marj: -3em yukarıdaki, 2em sol

Metnin dikey olarak görüntülenmesine neden olan metin modülünün genişliğinin nasıl değiştirileceğine dikkat edin. Ve bu bir Monospace yazı tipi olduğu için eşit olarak yığıldılar. Ve her harf bloğunun boyutuyla aynı genişliğe sahip, metin modülünü 1em ekleyerek hareket ettirebiliriz. Böylece -3EM Üst kenar boşluğu tam metni 3 harf taşıyacaktır. Ve 2EM’in sol kenar boşluğu metin modülünü 2 blokun hemen üzerinde sağa taşıyacaktır. Bu, öğeleri böyle bulmacaların düzenine yerleştirmeyi kolaylaştırır. Kutunun Gölgesi Metin modülünün arkasındaki arka plan boyutunu artırmak için kutunun gölgesini ekleyelim.
Gölge Kutusu: Ekran yakalamaya bakın
Dikey Konum Gölge Kutusu: 0px
Bulanık Güç Gölgesi Kutusu: 0px
Gölge kutularının dağılımının gücü: 0.08em
Gölge Renk: #DDDDDD (arka plan rengi ile aynı)

Dizin Z Bu metin bloğunun diğer metin modüllerinin üzerinde kalmasını sağlamak için Z index’ini aşağıdaki gibi güncelleyin:
Dizin Z: 11
#3 metin modülünü güncelleyin #2 metin modülü tamamlandıktan sonra, üçüncü metin modülü için ayarları açın ve içerik metnini “boşluk” kelimesine değiştirin. Ardından Magic EM marj değerini kullanarak modülü yerine taşıyın:
Marj: -1em yukarıdaki, 2em sol
Son tasarım
Hücresel Bu tasarım bir birim VW ve EM uzunluğu kullanılarak yapıldığından, tasarım tüm tarayıcı boyutlarında tutarlı kalacaktır.İşte tablet ve cep telefonu ekranındaki tasarım ekranı. Not: Tek tepkisiz öğe, ilk tasarımdaki arka plan görüntüsü simgesidir.Ancak, bunları düzeltmek için tabletlere ve cep telefonlarına kolayca daha küçük arka plan görüntüleri ekleyebilirsiniz.Son zihin, Divi’de Monospace yazı tipi tasarımını yapmanın en iyi yanı, yazı tipi stilinin esnekliğidir.Sadece birkaç küçük dokunuş büyük bir fark yaratabilir.Ayrıca uygulama herhangi bir web sitesi için oldukça pratiktir.En umut verici olan bu üç örnekten hangisi?Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir