Divi Eklentisi Vurgusu: Divi Yazı Tipi Harika

Divi birçok simgeyle dolu olarak gelir. 400'e yakın simgeye sahip olsa da bazen listede olmayan bir simge istersiniz. Birçok kullanıcı, en popüler ücretsiz simge kaynaklarından biri olan Font Awesome'e yöneliyor. Font Awesome simgelerini Divi'ye getirmenin birkaç yolu vardır, ancak gördüğüm en kolay yöntemlerden biri Divi Font Awesome adlı bir üçüncü taraf eklentisidir.

Divi Font Awesome, yeni modüller veya özellikler eklemez. Zaten simgeleri olan herhangi bir modüle Font Awesome simgeleri ekler. Bu makalede, bu modüllerle nasıl çalıştığına bir göz atacağız ve bunun birkaç örneğini çalışırken göreceğiz.

Divi Yazı Tipi Harika Ayarlama

Eklentiyi kurup etkinleştirdikten sonra kurmanız gerekir. Pano menüsünde, Ayarlar > Divi Font Awesome'e gidin. Burada lisans anahtarınızı, CDB yerleştirme kodu kimliğinizi girebilir ve formatı seçebilirsiniz (JavaScript ve CSS arasında seçim yapın). CDN yerleştirme kodu kimliğinizi almak için, buradaki Font Awesome CDN hesabı etiketli bağlantıya tıklayın.

Bu sizi, kodunuzu almak için oturum açabileceğiniz Font Awesome CDN web sitesine götürür.

Kimlik, CDN yerleştirme kodu kimliği alanına yapıştıracağınız koddur. Önce bazı parametreleri sağlamanız gerekecek. Koda bir ad verin ve JavaScript ile CSS arasındaki sürümü seçin. JavaScript'i seçerseniz, otomatik erişilebilirlik en iyi uygulamalarını ve eşzamansız simge yüklemeyi de seçebilirsiniz. Kimliği kopyalayın ve işiniz bittiğinde kaydedin. İsterseniz daha sonra düzenleyebilirsiniz.

Not – Her iki formatı da birden çok seçenekle denedim. Divi içindeki sonuç aynı görünüyor.

Kimliği yapıştırın ve kimliği ayarlarken seçtiğinizle eşleşen biçimi seçin. Kimliği oluştururken JavaScript kullandım, bu yüzden eşleşmesi için burada JavaScript'i seçtim. Değişiklikleri kaydedin ve Divi Font Awesome'i kullanmaya hazırsınız.

Divi Yazı Tipini Kullanmak Harika

Divi Font Awesome, yeni modüller oluşturmak yerine mevcut modüllerinize Font Awesome simgeleri ekler. Yukarıdaki resim, Divi Font Awesome içermeyen standart düğme modülüdür. Bu yaklaşık 380 yazı tipidir. Aslında kötü değil.

İşte Divi Font Awesome'in kurulu olduğu aynı düğme modülü. Küçük kaydırmalı çizgi (teknik terim) çok daha küçüktür, bu da kaydırılacak daha fazla simgeye sahip olduğunu gösterir. Artık, toplamı 1000'e yaklaştıran 600'den fazla simgemiz var.

Simgeler, Divi simgeleri listesinin altına eklenir. Bu, hangi simgelerin varsayılan Divi olduğunu ve hangilerinin Font Awesome'den olduğunu bilmenize yardımcı olur. Yeni simgeler, orijinal simgelerle birlikte tasarlanmıştır. Tüm ayarların, ayarlamaların, CSS'nin vb., sizin tarafınızdan herhangi bir ek çalışma olmaksızın Font Awesome simgeleri için geçerli olduğu anlamına gelir.

Divi Yazı Tipi Harika Örnekler

İşte harekete geçirme modülündeki simgeler. İlk birkaç örnek için, sağ ok kullanan birçok düğme içeren SEO Ajansı açılış sayfasını kullanacağım. Bunu harekete geçirici mesaj modülünde görebilirsiniz.

İşte düğmenin içindeki orijinal simge. Güzel görünüyor. İşlevsel ve anlaşılması kolaydır. Divi Font Awesome ile düğmelerin herkesinkinden farklı görünmesini kolayca sağlayabiliriz.

Bunu bununla değiştiriyorum – okla aynı yönü gösteren bir parmak.

Aynı işlevi yerine getirir ancak benzersiz bir görünüme sahiptir.

İşte SEO Ajansı açılış sayfasının hizmetler bölümü. Simgeler yerine resimler kullanır (ki bu son derece çok yönlü bir seçenektir) ve metin ve daha fazla düğme için eylem çağrı modülleri kullanır. Font Awesome simgelerini kullanabilmek için görüntüleri tanıtım yazılarıyla değiştirmek istiyorum.

Burada, tanıtım yazılarını kullanan aynı düzen var. Bu simgeler Divi'de yerleşik olanlardır. Önce onları kullanıyorum, böylece Font Awesome simgelerinin aynı stili koruyup korumadığını görmek için stillendirebiliyorum.

Orijinal görüntülerdeki bölümleri eşleştirmek için rengi #7676ff ile şekillendirdim. Yerleşimi sola ayarladım ve simge yazı tipi boyutunu 26 piksele ayarladım. Sonra simgeleri Font Awesome'dekilerle değiştireceğim.

İşte Font Awesome simgelerini kullanan düzen. Üslupta herhangi bir değişiklik yapmadım. Bu simgeler, Divi simgeleriyle aynı stili kullanır.

Şimdi #a6a6ff kullanarak bir kenarlık ekledim. Konumu en üste değiştirdim ve simge yazı tipi boyutunu 32 olarak ayarladım. Ortaya hizalamaya yardımcı olması için harekete geçirici mesajın metin yönünü ve düğme hizalamasını ortaladım. Ayrıca üst satırın altına dolgu için 40 piksel yerleştirdim, böylece iki tanıtım yazısı sırası birbirinden ayrı duruyor.

Bu, simgeyi beyaz yapar, #a6a6ff renkli daireyi kullanır ve dairenin kenarlığını kaldırır. Boyutları önceki örnekle aynı bıraktım.

Bu sefer düzeni biraz değiştirdim. Simgeleri sağdaki metinle sola yerleştirdim. Simge rengini #8b21bb olarak ayarladım, daireyi kaldırdım ve simge yazı tipi boyutunu 64 piksele ayarladım. Ayrıca, harekete geçirici mesaj düğmesinin ok simgesini Font Awesome'den bir simgeyle değiştirdim. Yeni simge, Divi simgesi için ayarlanan stili otomatik olarak aldı. Bu simgede hiçbir değişiklik yapmadım.

Bu, Restoran yerleşim paketindeki mağaza sayfasıdır. Düğmelerin her birine simgeler ekledim. Stilde herhangi bir değişiklik yapmadım çünkü zaten orada olan tasarımla uyum sağlamalarını istedim, ancak Düğme için Fareyle Üzerine Geldiğinde Yalnızca Simgeyi Göster seçeneğini devre dışı bıraktım.

Bu, Photo Marketplace düzen paketindeki fiyatlandırma sayfasıdır. Ziyaretçilerin ödeme yapabileceği çeşitli yolları göstermek için kredi kartları ve ödeme ağ geçitleri için simgeler kullanır.

Burada, filtrelenmiş bir portföyün yer paylaşımı içindeki Harika Yazı Tipi simgelerine bir örnek verilmiştir.

İşte bir blog yerleşimi içinde Divi Font Awesome. Bu, Seyahat Acentası düzen paketindeki blog sayfası.

Tema Özelleştiricide Divi Font Awesome'i Kullanma

Font Awesome simgelerine Tema Özelleştirici'den de erişebilirsiniz. 600+ Font Awesome simgelerinin tümü bu menüden kullanılabilir. Burada düğme menüsünü seçtim ve varsayılan olarak kullanmak için bir simge seçtim.

Divi Font Awesome'i Ekstra ile Kullanma

Divi Font Awesome, Divi Builder'a eklendiğinden, Extra ile çalışacağı mantıklıdır. Bu, Kategori Oluşturucu'daki Dergi Ana Sayfası düzenidir. Font Awesome simgelerinin tümü, simgeleri içeren modüllerde bulunur.

Divi Font Müthiş Lisans ve Belgeler

Eklenti, kendiniz veya müşterileriniz için oluşturduğunuz sınırsız sitelere kurulabilir. 6 aylık destek ve ömür boyu güncellemeleri içerir. Belgeler, ayarlarda size yol gösteren ve kullanımda olan eklenti örneklerini gösteren bir video olarak sağlanır.

Eklenti hakkında daha fazla bilgiyi geliştiricinin web sitesinde görebilirsiniz.

Biten Düşünceler

Divi Font Awesome'in kurulumu ve kullanımı kolaydır. Nasıl yapıldığını görmek istiyorsanız, video size adım adım anlatmaktadır. Divi modüllerine simgeler eklediğinden, simgelerinizi seçmek normal Divi simgeleriyle aynı şekilde çalışır. Tek özelliği, mevcut simgeler listenize 600'den fazla Font Awesome simgesi eklemesidir. Fark edeceğiniz tek fark, mevcut simgelerin sayısıdır.

Ayrıca Tema Özelleştirici, Ekstra ile harika çalıştı ve hatta Divi simgelerini kullanan üçüncü taraf eklentilerle çalışmasını sağladım. Ek özellikler arıyorsanız, aradığınız şey bu eklenti değil. Font Awesome simgelerini eklemenin kolay bir yolunu istiyorsanız, Divi Font Awesome bir göz atmaya değer.

Senden duymak istiyoruz. Divi Font Awesome'i denediniz mi? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

Alex Gorka / Shutterstock.com aracılığıyla Öne Çıkan Görsel