Yazı tipleri Divi 5'in yazı tipi tasarım değişkenleriyle nasıl değiştirilir

Yazı tipi güncellemeleri baş ağrısı olabilir. Bir başlık yazı tipini değiştirin ve aniden, göründüğü her noktayı izlersiniz. Bir iki başlığı kaçırın ve tasarımınız hemen hissediyor. Yazı tiplerini manuel olarak güncelleme tutarsızlığı davet eder.

Divi 5 bunu yazı tipi değişkenleri ve ön ayarlarla çözer. Her örneği kovalamak yerine, yazı tiplerinizi bir kez ayarlayabilir ve sistemin gerisini halletmesine izin verebilirsiniz. Tipografi, kaç modül kullanırsanız kullanın, temiz ve birleşik kalır. Ne kadar basit olabileceğine bir göz atın.

Statik yazı tipleri neden sorun yaratabilir?

Statik yazı tipi kurulumları, zamanla daha da kötüleşen bir komplikasyon ağı oluşturur. Doğrudan her bir öğeye yazı tipleri eklediğinizde, tipografi seçeneklerini yüzlerce farklı yerde dağıtırsınız.

Vücut metni için başlıklar ve poppinler için Playfair ekranını kullanarak bir site oluşturursunuz. Birkaç ay sonra, daha modern bir yazı tipi yığınına geçmek istersiniz. Şimdi, bu yazı tiplerinin nerede yaşadığını bulmak için her modül, her ön ayar, her özel ayar avlıyorsunuz. Bir referans bölümüne derin gömülü olan bir başlık bile ve tasarımınız kırık görünebilir.

Yazı tiplerini tek tek manuel olarak güncellediğinizde, yanlışlıkla farklı boyutlar veya ağırlıklar kullanabilirsiniz. Çoğu başlığı 32 piksel olarak güncellersiniz, ancak 28 pikselde kalan birkaçını kaçırırsınız. Bir zamanlar yapışkan tasarımınız artık dengesiz hissediyor.

Bu dağınık yöntem, basit yazı tipi değişikliklerini büyük projelere dönüştürür. Dakikalar, saatlerce sıkıcı avcılık ve güncelleme içine kadar uzanır. Tipografiyi yönetmek için gerçekten tasarım yapmaktan daha fazla zaman harcıyorsunuz.

Bunun yerine ne kullanmalısınız: Divi 5'in tasarım değişkenleri ve ön ayarları

Tasarım değişkenleri, her yerde yeniden kullanabileceğiniz tasarım ayarlarınızı saklayın. Bir yazı tipi bir kez ayarlayın, tasarım değişkeni olarak kaydedin, ardından sitenizde kullanın. Değişkeni daha sonra değiştirin ve onu kullanan tüm öğeler otomatik olarak güncellenir.

Divi altı değişken türü sunar: sayılar, metin, görüntüler, bağlantılar, renkler ve yazı tipleri. İki varsayılan yazı tipi değişkeni kullanıma hazırdır: biri başlıklar için, diğeri gövde metni için. Değişken yönetici, veritabanı simgesinin altındaki sol kenar çubuğundadır.

Bu değişkenler, sayı alanları, yazı tipi alanları ve aralık ayarları gibi onları desteklemeyen alanlarda çalışır. Seçeneklerinizi görmek için desteklenen alanın yanındaki değişken simgesini tıklayın.

Hangi seçenek grup ön ayarları

Seçenek Grubu Ön Ayarları Tipografi, Sınırlar veya Aralık Gibi Belirli Stil Gruplarını Bütün Modüller Değilden Kaydet. Örneğin, yalnızca başlık yazı tipleri ve boyutları için bir ön ayar oluşturabilirsiniz.

Bir seçenek grubu ön ayarını uyguladığınızda, yalnızca bu stil alanını değiştirir. Modülünüzün geri kalanı aynı kalır. Bir öğede farklı ön ayarları sorunsuz bir şekilde birleştirebilirsiniz. Daha fazla esneklik için tasarım değişkenlerini seçenek grup ön ayarlarıyla karıştırın. Değişkenlerinizi kullanan ön ayarlar oluşturun. Bir değişkeni güncellediğinizde, onu kullanan tüm ön ayarlar da güncellenir.

Divi 5 ile dinamik bir yazı tipi sistemi oluşturmak için adım adım kılavuz

Yazı tipi değişkenlerinin ayarlanması yaklaşık yirmi dakika sürer. Çalıştıktan sonra, tüm sitenizde yazı tipi değişiklikleri anında gerçekleşir. Oraya nasıl gidileceğiniz:

1. Yeni sisteminiz için yazı tipi değişkenleri oluşturun

Sol kenar çubuğunuzdaki veritabanı simgesini tıklayarak değişken yöneticiyi açın. Yazı Tipleri sekmesine gidin. İki varsayılan değişken göreceksiniz: biri başlıklar için, diğeri vücut metni için.

• Ana yazı tiplerinizi ayarlayın: Başlık değişkenini tıklayın. Yazı tipi ailenizi ve kilonuzu seçin, sonra kaydedin. Aynı şeyi vücut metni için yapın, ancak temiz ve okunması kolay bir şey seçin.
• Gerekirse daha fazla yazı tipi ekleyin: Bazı tasarımlar tırnak, referans veya özel metin için ekstra yazı tiplerine ihtiyaç duyar. “Yeni değişken ekle” yi tıklayın ve açık bir ad verin.
• Tüm detayları doldurun: Her değişken yazı tipi ailenizi, ağırlık, stil ve diğer ayarlarınızı tutar. Başlıklar için cesur ağırlıklar, vücut metni için normal ağırlıklar ve vurgu yapmak istediğinizde italik kullanın.
• İsimlerinizi basit tutun: Etiketleri kafa karıştırmak yerine, onlara “Fanteze” veya “Yazı Tipini Vurgu” olarak adlandırın.
• Kaydetmeyi unutmayın: Kaydet düğmesine basana kadar değişiklikleriniz yapışmaz.

Çoğu web sitesi sadece başlık ve vücut yazı tiplerine ihtiyaç duyar. Sadece küçük metin ayarları değil, özel tasarım ihtiyaçları için ekstra değişkenler ekleyin. Daha az değişken yeni içerik oluşturmayı çok daha kolay hale getirir.

2. Yazı tipi boyutları için sayı değişkenleri ekleyin

Değişken Yönetici'deki Numaralar sekmesine geçin. Burada, yazı tiplerinizle çalışan boyut değişkenleri oluşturursunuz. Bunları tipografi ölçeğiniz olarak düşünün.

Başlık boyutlarınızla başlayın. H1, H2, H3 vb. Adlı değişkenler oluşturun. Her birini tasarımınız için mantıklı olan farklı bir boyuta ayarlayın. Diğer ekranlara uyum sağlayan boyutlar için 32 piksel veya CLAMP () gibi duyarlı birimler gibi normal piksel değerleri kullanabilirsiniz.

Vücut metninin boyut değişkenine de ihtiyacı var. “Vücut Boyutu” gibi bir şey deyin ve genellikle 16px ila 18px civarında rahat bir okuma boyutuna ayarlayın.

Özel metin ihtiyaçları için değişkenler de oluşturabilirsiniz. Belki altyazılar için "küçük metin" değişken veya referanslar için "büyük metin" değişkeni istersiniz. Onları açıkça adlandırın, böylece daha sonra ne için olduklarını hatırlayın.

Bu sayı değişkenleri tutarlı boyutlandırmaya ihtiyacınız olan her yerde çalışır. Bunları satır yükseklikleri, boşluklar veya sitenizde birden çok kez görünen herhangi bir ölçüm için kullanın. Bir sayı değişkeni güncellediğinizde, onu kullanan her şey otomatik olarak değişir.

Çoğu web sitesi sadece başlık ve vücut yazı tiplerine ihtiyaç duyar. Sadece küçük metin ayarları değil, özel tasarım ihtiyaçları için ekstra değişkenler ekleyin. Daha az değişken yeni içerik oluşturmayı çok daha kolay hale getirir.

3. Statik yazı tiplerini değiştirmek için bul ve değiştirin

Bul ve Değiştir seçeneğini görmek için modül ayarlarınızdaki herhangi bir yazı tipi alanını sağ tıklayın. Bu, Divi'nin geçerli yazı tipi ayarlarınızı otomatik olarak yüklediği bir panel açar. Artık bu statik yazı tipini tasarım değişkenlerinizden biriyle değiştirebilirsiniz.

Kaynak eleman alanı hangi modülden başladığınızı gösterir. Başlangıç noktanız olarak sayfanızdaki diğer öğeleri seçmek için bunu değiştirebilirsiniz.

Bul değeri, değiştirmek istediğiniz yazı tipini görüntüler. Başka bir statik yazı tipi seçmek yerine, değiştirme değerinizi yazı tipi tasarım değişkenlerinizden birine ayarlayın.

Yazı tipi boyutları için de işleri bulun ve değiştirin. Aynı yedek panele erişmek için herhangi bir yazı tipi boyutu alanına sağ tıklayın. Bu, sayı değişkenlerinizle 24 piksel gibi öğe seviyesi boyutlarını değiştirmenizi sağlar.

Yazı tipi boyutlarını manuel olarak ayarladığınız metin modüllerini arayın. Bu dağınık boyut ayarları, statik yazı tipleri ile aynı problemleri yaratır. Tipografi ölçeğinizi ayarlamak istediğinizde, her boyutu bulmak için her modülden avlanırsınız. Bu statik boyutları H1, H2, vücut boyutunuz veya diğer sayı değişkenlerinizle değiştirin.

Yedek sınırlarınızı ayarlayın

Değişikliklerin gerçekleştiği yer kontrollerini bulun ve değiştirin. Tüm düzeninizdeki yazı tiplerini güncellemek için “Tüm Sayfayı” seçin. O belirli bölümdeki değişiklikleri ve içinde iç içe olan her şeyi sınırlamak için “Mevcut Eleman ve Çocuklar” ı seçin.

Ayrıca üst kapları veya belirli sayfa alanlarını hedefleyebilirsiniz.

Eleman türü bulun ve değiştirin, belirli modüllere odaklanmanıza yardımcı olur. Tam bir yazı tipi takası için “Tüm Elemanlar” ı seçin veya kapları ve yapısal elemanları atlamak için “Modüller” i seçin. Yalnızca belirli modül türlerini hedefleyerek daha da spesifik olabilirsiniz.

Kazara değiştirmelerden kaçının

“Yalnızca aynı alanları değiştir” seçeneği istenmeyen değişiklikleri önler. Aynı değeri paylaşabilecek diğer ayarları etkilemeden yazı tiplerini değiştirmek istediğinizde bunu açın.

Bu, “10px” veya benzer bir şey olarak adlandırılan bir yazı tipini değiştirseniz bile sınır yarıçapınızı 10 pikselde tutar.

Bu ayar olmadan, her yerde hedef değerinizi bul ve değiştir. Etkinleştirildiğinde, sistem yalnızca gerçek yazı tipi alanlarını değiştirir ve diğer tasarım ayarlarını tek başına bırakır.

4. Yazı tipi sisteminizde çalışın

Farklı yazı tipi ağırlıkları ve stilleri için ayrı bulun ve değiştirme işlemlerine ihtiyacınız olacak. Siteniz aynı yazı tipi ailesini düzenli ve cesur ağırlıklarda kullanabilir. Her varyasyonu ayrı ayrı kullanın, bunları daha önce oluşturduğunuz uygun tasarım değişkenleriyle değiştirin.

Her seferinde işlem aynıdır: Yazı tipi alanını sağ tıklatın, değiştirme değerinizi bir tasarım değişkenine ayarlayın, kapsamınızı seçin ve değişiklikleri uygulayın. Güncellemesi gereken her statik yazı tipi için bunu tekrarlayın.

5. Değişkenlerinizle ön ayar oluşturun

Herhangi bir metin modülüne erişin ve tasarım sekmesine gidin. Tipografiyi bulun ve önceden ayarlanmış simgeyi tıklayın. Açılır menüden başlık yazı tipi değişkeninizi seçin. H1 numarası değişkeninizi boyutlandırma için uygulayın.

Hat yüksekliği ve boşluk değerlerini yapılandırın. Ön ayar “ana başlık” adını verin ve kaydedin. Bunu varsayılan olarak ayarlamak için Yıldız simgesini tıklayın. Yeni metin modülleri bu ayarları otomatik olarak benimser. Aynı başlık etiketi ve stilleri olmayan mevcut tüm modüller de bu ayarları devralacaktır.

Bu işlemi her başlık seviyesi için tekrarlayabilirsiniz. Önceden ayarlanan her ön ayar, farklı amaçlara hizmet ederken tutarlılığı korur.

Bu tipografi ön ayarları, metin alanları içeren herhangi bir modülle çalışır. Bulanık modüller, akordeon içeriği, referanslar ve temas formları aynı ön ayarları kabul eder. Bu çapraz modül uyumluluğu, tekrarlayan stil görevlerini ortadan kaldırır.

Seçenek grubu ön ayarları yalnızca belirli stil kategorilerini hedefleyin. Düğmenin arka planını ve sınır ayarlarını sağlam tutarken bir başlık ön ayarına düğme metnine uygulayın.

6. Yeni değişkenlerinizi tüm öğeler arasında genişletin

Yeni değişkenlerinizi kullanarak herhangi bir öğeyi sağ tıklayın. Menüden “Öznitelikleri Uzatın” ı seçin. Kaynak öğeyi yakın zamanda güncellenen modülünüz olarak yapılandırın.

Tam güncellemeler için konumu “tüm sayfa” olarak ayarlayın. Öznitelik türleri altında, yalnızca tasarım öğelerine odaklanmak için “Stiller” seçeneğini seçin.

Dolgu, kenar boşlukları veya yazı tipi boyutlarınızla eşleşebilecek diğer sayısal değerlerde istenmeyen değişiklikleri önlemek için “Yalnızca aynı alanları değiştirin”. Modülleri ve kapları güncellemek için “Tüm Öğeler” i seçin veya özellikle içerik öğelerini hedeflemek için “Modüller” i seçin.

Site çapında güncellemeler yerine daha küçük bölümlerde karmaşık sayfaları işleyin. Bir seferde bir alanda değişiklikleri sınırlamak için “Geçerli Bölüm” i seçin. Başlık bölümünüzle başlayın. Değişken uzantıları uygulayın, sonuçları gözden geçirin ve ana içerik alanlarına geçin. En son altbilgi bölümünü tamamlayın.

Bu metodik yaklaşım, biçimlendirme çatışmalarını erken tanımlar ve güncelleme sürecini kontrol eder.

Divi 5 tipografiyi kolaylaştırır

Playfair ekranından modern bir şeye geçiyor ve çoğu başlığı güncellediniz, ancak bu referansı üçüncü sayfada özlüyorsunuz. Siteniz haftalarca eğimli görünüyordu.

Divi 5'in değişkenleri web sitenizin tipografisini kolaylaştırır. Başlık değişkeninizi kenar çubuğundaki veritabanı simgesinden değiştirin ve her metin modülü anında güncellenir. Bu iletişim formu altbilgisi dahildir.

Bir dahaki sefere yeniden markalaştığınızda, elli modülü tıklamak yerine iki değişkeni güncelleyeceksiniz. Bul ve değiştir aracı normalde kaçırdığınızı yakalar. Tipografiniz sıkı kalır ve hafta sonları sizin kalır.