2022'de Elementor Web Sitelerine Özel Yazı Tipleri Nasıl Eklenir

Tipografi, web tasarımcılarının mektupları ve metinleri güzel bir şekilde yerleştirme konusundaki en büyük endişelerinden biridir. Doğru tipografi, tüm tasarım yapısının okuyucular için okunabilir, net ve görsel olarak dikkat çekici olmasını sağlamaktan son derece sorumludur.

"Web sitesi yazı tipleri tasarımın %90'ını oluşturuyor."

eleman

WordPress sitenizde, 800'den fazla yerleşik yazı tipinden oluşan varsayılan bir koleksiyon alabilirsiniz. Ancak zorluk, markanız için kendi özelleştirilmiş tipografiniz varsa veya web sitenize benzersiz bir görünüm kazandırmak istiyorsanız ortaya çıkar. Elementor özel yazı tipi özelliği sizi kurtarabilir. WordPress sitenize farklı özelleştirilmiş yazı tipi stilleri, boyutları ve varyasyonları eklemenize olanak tanır.

Bugünün eğitiminde, Elementor özel yazı tipi özelliğini kullanarak WordPress sitenize nasıl yazı tipi ekleyebileceğinizi göstereceğiz.

Elementor Özel Yazı Tipi Özelliği Açıklaması

Özel (özelleştirilebilir), herhangi bir sektör için arzunuza veya gereksinimlerinize bağlı olarak oluşturabileceğiniz veya üretebileceğiniz belirli bir şey anlamına gelir. Özel Elementor yazı tipi, size kolayca özelleştirilebilir bazı yazı tipi biçimleri sağlar. Normal veya varsayılan yazı tiplerini kullanmak yerine ek işlevleri verimli bir şekilde oluşturmanıza, düzenlemenize veya ayarlamanıza olanak tanır.

Elementor sitenizde beş tür özel yazı tipi biçimi bulacaksınız, işte bunlar:

1. Web Açık Yazı Tipi Biçimi (WOFF) – WOFF, tüm modern tarayıcılar tarafından desteklendiğinden, kullanılması en çok önerilen biçimdir.
2. Web Açık Yazı Tipi Formatı (WOFF 2.0) – WOFF 1.0'dan daha iyi sıkıştırma sağlayan TrueType veya OpenType yazı tipi
3. TrueType Yazı Tipleri (TTF) – Bu yazı tipi 1980'lerin sonlarında Apple ve Microsoft tarafından geliştirilmiştir.
4. SVG Yazı Tipleri/Şekilleri – SVG yazı tipleri, metin görüntülerken SVG'nin glifler olarak kullanılmasına izin verir. iPhone'un eski sürümlerini desteklemek için bu biçimi kullandığınızdan emin olun.
5. Gömülü OpenType Yazı Tipleri (EOT) – Bu yazı tipi dosyası IE'de çalışır, ancak diğer tarayıcılarda çalışmaz. IE'nin önceki sürümlerini desteklemek için bu biçimi kullandığınızdan emin olun.

Not: Avrupa Birliği, GDPR'ye yeni bir kural ekliyor. Web sitelerinde doğrudan barındırılan Google yazı tiplerini kullanan herkes GDPR kurallarını ihlal eder. Ve Google bu web sitesine 100 Euro ceza kesecek. Bu nedenle, Google Yazı Tipleriniz varsa, yerel olarak barındırılmalıdır veya kendi özel yazı tiplerinizi kullanabilirsiniz.

Ancak, Perfmatters eklentisini kullanarak web sitenizin Google yazı tiplerini de yönetebilirsiniz. Google Yazı Tiplerinin WordPress'te yerel olarak nasıl barındırılacağına ilişkin belgelere göz atın.

Elementor sitesine yazı tiplerini nasıl ekleyeceğinizi öğrenmek için aşağıya göz atalım:

WordPress'te Elementor Destekli Web Sitelerine Yazı Tipi Nasıl Eklenir

Özel yazı tipini iki basit yolla ekleyebilirsiniz.

1. Yöntem 1: Kodları İçererek Elementor'a Yazı Tipi Ekleme
2. Yöntem 2: Elementor'un Özel Yazı Tipi Özelliğini Kullanın

Elementor'da yeniyseniz, Elementor'u doğru şekilde nasıl kullanacağınızla ilgili bu kullanışlı bloga bakın.

Yöntem 1: Kodları Kullanarak Elementor'a Yazı Tipi Ekleme

Manuel bir işlemin ardından Elementor sitenize Yazı Tiplerini nasıl ekleyebileceğinizi görelim.

• Bir FTP istemcisi veya cPanel kullanarak temanızın klasörüne yeni bir “fontlar” klasörü ekleyin. Yeni klasör wp-content/themes/fonts içinde bulunmalıdır.
• Bir kez, yeni "fontlar" klasörünü eklediniz, tüm yazı tipi dosyalarını ona ekleyin
• Şimdi temanın stil sayfasını (style.css) açın ve buna aşağıdaki kodu ekleyin:

 @font-face { font-family: 'nameofnewfont'; src: url("/fonts/nameofnewfont.woff2") format("woff2"), url("/fonts/nameofnewfont.woff") format("woff"); font-weight: normal; font-style: normal; }

• Bu yazı tipini kullanacak öğeleri aynı stil sayfasına ekleyerek yapılandırın.
• Bu yöntem yeni başlayanlar için bir acı olabilir. “italik” veya “kalın” gibi konfigürasyonlar eklemek istediğinizde, aynı süreçten geçmeniz ve bu parametreleri eklemeniz gerekecektir. Çok fazla kodlama var.

Bu teknik süreçle uğraşmak istemeyenler için, Elementor sitenize başarılı bir şekilde özel yazı tipleri eklemek için aşağıdaki süreci takip edebilirsiniz.

Yöntem 2: Elementor'un Özel Yazı Tipi Özelliğini Kullanın

Özel yazı tipi, Elementor'un profesyonel bir özelliğidir. Bu nedenle, web sitenize hem Elementor (Ücretsiz) hem de Elementor Pro eklentilerini yüklediğinizden ve etkinleştirdiğinizden emin olun.

Adım 01: Sitenize Özel Yazı Tipi Ekleyin

İlk önce Elementor>Özel Yazı Tipleri'ne gidin

Burada özel yazı tipleri oluşturabilirsiniz. Örneğin, özel bir yazı tipi yapısı oluşturmak için Yeni ekle'ye tıklayın.

Fontunuza bir başlık verin. Ardından Yazı Tipi Varyasyonu Ekle'ye tıklayın.

Adım 02: Bir Yazı Tipi Varyasyonu Ekleyin ve Yazı Tipi Dosyalarını Yükleyin

Burada Yazı Tipine bazı ek seçenekler ekleyebilirsiniz. Yazı tipi ağırlığı, stili ve yazı tipi dosyaları gibi.

Bir TTF özel yazı tipi dosyası yükleyelim. Bunun için yükle butonuna tıklayın .

Yazı tipi dosyasını cihazınızdan veya bulunan klasörden yükleyin.

Not : Tercih ettiğiniz Yazı Tipi dosyalarını buraya yüklemeden önce cihazınızda sakladığınızdan emin olun!

İşiniz bittiğinde, yazı tipi ayrıntılarını buradan görebilirsiniz.

Aynı işlemin ardından her format için Yazı Tipi Dosyası Yükleme işlemine devam edin. Başka bir yazı tipi varyasyonu yükleyelim. Örneğin, Yazı Tipi Varyasyonu Ekle düğmesine tıklayın ve yazı tipi ağırlığını ve stilini ayarlayın.

Yazı tipi ağırlığını 100 olarak ayarlayın ve tekrar yükle düğmesine tıklayın.

Dosyayı yükledikten sonra medya galerisinden ekleyebilirsiniz.

Adım 03: Son Özel Yazı Tipini Yayınlayın

Aynı işlemi yaparak sitenize farklı Font varyasyonları ekleyin. İşiniz bittiğinde, Yayınla düğmesine basmanız yeterlidir .

Adım 04: Elementor Tasarımınızda Özel Yazı Tipini Kullanın

Şimdi bu özel yazı tipini nasıl kullanacağınızı düşünüyor olabilirsiniz. Doğru? Bu özel yazı tipini nasıl bulacağınıza ve kullanacağınıza bakalım, Elementor tasarım panelinde herhangi bir Elementor sayfası açmanız gerekiyor. Ardından, paneldeki metin widget'larından herhangi birini ekleyin.

Elementor Düzenleme Paneline Riskten Korunma Widget'ı ekleyin.

Metin widget'ını (başlık) ekledikten sonra,

• Stil bölümüne gidin
• Tipografiye tıklayın
• Ve burada daha önce oluşturduğunuz yazı tipini ( My Font ) bulabilirsiniz. Sadece yazı tipini seçin

Yazı tipini ekledikten sonra, Metin veya Yazı Tipinizin daha iyi ve çekici görünmesini sağlamak için diğer Tipografi seçeneklerini deneyimleme zamanı geldi. Yazı tipi boyutu, ağırlık, dönüştürme, stil, dekorasyon, çizgi ağırlığı ve daha fazlası gibi!

Sıra dışı bir tasarım, basit bir tasarımdan çok müşterinin dikkatini çekebilir. Yani web sayfanızın başlığını daha akıllı ve keyifli hale getirmek istiyorsanız, bir sonraki bölüm tam size göre. Burada, Mutlu Eklentiler Animasyonlu Metin widget'ını kullanarak başlığınızı nasıl stilize edebileceğinizi göstereceğiz.

Özel Elementor Başlığını Nasıl Tasarlayacağınızı Öğrenelim

Mutlu Eklentiler Metin Animasyonu Widget'ı ile Yazı Tipinizi Stilize Edin

Animasyonlu Metin widget'ı, Happy Addons'un profesyonel bir özelliğidir. Bu harika widget'ı kullanarak metninizi çok ilginç ve çekici hale getirebilirsiniz. Ekstra çaba ve zorluklarınızı azaltmak için önceden oluşturulmuş 10 tasarım düzenine sahiptir. Bu nedenle, Elementor tasarım panelinize eklediğinizde, doğru tasarım düzenini seçmeniz ve web sayfanızın yapısına göre özelleştirmeniz yeterlidir.

Pratik olarak, WordPress sitenizde sıradan bir metin veya yazı tipi yerine Animasyonlu Metin widget'ını nasıl kullanabileceğinizi görelim.

Başlamak için şu eklentileri yüklemeniz ve etkinleştirmeniz gerekir:

1. Elementor Ücretsiz
2. Mutlu Eklentiler Ücretsiz ve Pro

1. Adım: Animasyonlu Metin Widget'ı ekleyin

İlk olarak, widget'ı widget galerisinden sürükleyip bırakın.

Widget'ın ilk görünümünü ekranda göreceksiniz.

Daha önce oluşturduğunuz özel yazı tipi metnini kullanın. Seçmek için stil düğmesine, tipografiye dokunun ve Yazı Tiplerim'i seçin.

2. Adım: Metninize Tasarımlar Ekleyin

Şimdi içerik bölümüne bir kez daha dokunun. Ve en çok beğendiğiniz tasarımı seçin.

Tasarımı onayladıktan sonra, şimdi animasyon stilini ayarlama zamanı. Bunu yapmak için İçeriğe tıklayın ve orada Animasyon türünü bulun. Web siteniz için daha iyi bir çıktı elde etmek için her türü tek tek keşfedin.

Not: Milisaniye cinsinden Animasyon Gecikmesi. Min 1000 ve Maks 30000.

Adım 3: Hareketli Metninizin Web Sayfasındaki Son Çıktısını Görün

Fontunuzdaki Animasyonlu metin widget'ını özelleştirdikten sonra nihai çıktıyı görelim.

İşte Happy Addons'un Animasyonlu Metin widget'ı sıkıcı görünen yazı tiplerinizi veya metinlerinizi denetlemenize bu şekilde yardımcı olur. Ancak, bu widget'ın ayrıntılı bir incelemesini almak istiyorsanız, bu widget'ın resmi belgelerine göz atabilirsiniz.

Veya daha iyi görselleştirme için aşağıdaki Animasyon Metni video eğitimine göz atabilirsiniz.

Elementor Özel Yazı Tipleri Hakkında Bazı Genel Sorgular

Elementor Özel Yazı Tipi Özelliğini Keşfetmeye Hazır mısınız?

Özel yazı tipleri çeşitli olanaklara sahiptir. Benzersiz bir marka stili oluşturmaktan daha fazla müşteri edinmeye kadar, özel yazı tipleri her zaman pazarlamacıları, tasarımcıları veya web sitesi sahiplerini destekler. Normal Google yazı tiplerini kullanmanın yanı sıra, özel yazı tipleri, çevrimiçi işletmenizin benzersiz stili ve görünümü ile daha fazla müşteri çekmesine yardımcı olabilir.

Bu nedenle, bu Elementor eğitim gönderisinin, WordPress sitenizde özel yazı tiplerini akıllıca kullanmak için bilginizi zenginleştireceğini umuyoruz. Ayrıca, Happy Addons'un animasyonlu metin widget'ı, metni bir sonraki seviyeye değiştirmenize ve genel web sitesi tasarımına ekstra değer eklemenize yardımcı olacaktır.

Bu öğreticiyi beğendiyseniz, WordPress öğreticisi, Elementor öğreticisi, ipuçları ve püf noktaları ve en son güncellemeler gibi daha ilginç makaleleri okumak için bültenimize abone olabilirsiniz!