Divi Eklentisi Vurgusu: Divi Icon King

Divi, tanıtım yazıları, bindirmeler, düğmeler vb. içinde kullanılabilen yaklaşık 380 adet yerleşik simgeyle birlikte gelir. Bu kadar çok, her zaman daha fazlasına ihtiyaç vardır. Ücretsiz simgeler için en iyi kaynaklardan bazıları, Harika Yazı Tipi ve Google'ın Malzeme Simgeleridir. Neyse ki, bu simgeler Divi Icon King adlı üçüncü taraf bir eklenti ile Divi'ye kolayca eklenebilir.

Bu yazıda Divi Icon King'e bir göz atacağız (1.1.0 sürümünü inceliyorum) ve bu simgeleri Divi'ye eklemenin ne kadar kolay olduğunu ve Divi Builder'ın tüm özelliklerine eklediği yeni bir özelliği göreceğiz. simgeleri kullanan modüller.

Divi Icon King'i Yükleme, Etkinleştirme ve Ayarlama

Eklentiyi normal şekilde yükleyin ve etkinleştirin. Eklenti etkinleştirildiğinde, ayarlara gitmeniz ve simge kitaplıklarınızı seçmeniz gerekir.

Pano menüsünde Ayarlar , Divi Icon King'e gidin . Burada Harika Yazı Tipi ve Malzeme Simgelerini etkinleştirebilirsiniz. Etkinleştirmek istediklerinizin kutularını tıklayın ve Değişiklikleri Kaydet'i seçin. Bu, Divi Builder'da bulunan simge setlerinin sayısını neredeyse 2000'e çıkarır (1987 civarında, ama ben onları saymadım).

Harika Yazı Tipi Simgeleri – 675 ölçeklenebilir vektör simgesi ekler.

Malzeme Simgeleri – 931 hafif Google web simgesi yazı tipi ekler.

Eklenen simgeler sunucunuzda saklanmaz. Bunun yerine, bir CDN'de saklanırlar ve siz yükledikçe getirilirler. Yalnızca kontrol ettiğiniz şeyi yükler. Başka bir deyişle, her şeyi yüklemiyor ve yalnızca kontrol ettiğiniz şeyi size gösteriyor. İşaretli değilse yüklenmez.

Eklentinin kodu Divi'ye eklenir ve simgeleri kullanan tüm modüllerle çalışır. Bu, kullanmanız gereken özel bir modül olmadığı anlamına gelir. Artık simgeleri kullanan her Divi modülünde tüm yeni simgeleri göreceksiniz.

Normal Divi Simgeleri

Divi, yaklaşık 380 simgeyle birlikte gelir. Yukarıdaki görüntü, Divi Icon King'i kurmadan önceki bir Blurb modülüdür. İçerik sekmesinde, kullanılabilir simgeleri görmek için Simge Kullan'ı seçin.

Divi Simgesi Kral Filtreleri

Divi Icon King, simge seçimlerine bir filtre ekler. Filtreleri görmek için Filtre Simgeleri etiketli düğmeyi tıklayın.

Bu, aradığınızı girebileceğiniz bir arama kutusu açar. Ayrıca arama kutusunun altındaki metne tıklayıp Zarif Temalar, Anahat, Düz, Tümü'nden simgeleri görebilir veya Kapat'ı seçerek filtreyi kapatabilirsiniz. Bu noktada Harika Yazı Tipi veya Malzeme Simgelerini etkinleştirmedim.

Harika Yazı Tipi ve Malzeme Simgelerini etkinleştirdikten sonra, bunlar artık filtre içinde bir seçenek. Şimdi neredeyse 2000 ikonum var ve tek çaba eklentiyi kurmak ve eklemek istediğim iki ikon markasını etkinleştirmek oldu.

FontAwesome'a tıklamak yalnızca Font Awesome'deki simgeleri gösterir.

Malzemeye tıklamak yalnızca Google'dan Malzeme Simgelerini gösterir.

Bunlar ana hatları olan simgelerdir.

Bunlar sağlam simgeler.

Simge Arama

Aramanın sonuçları tamamen simgelerin nasıl etiketlendiğine bağlıdır. Bu, bazı aramaların diğerleri kadar iyi çalışmayabileceği anlamına gelir. Pizza yazarak bir şeyler bulabilirsin ama yemekte hiçbir şey yazamazsın .

Ayrıca kelimelerin bölümlerini de bulur (yukarıdaki resimde görebileceğiniz gibi). Ayrıca, aradığınız kelimenin bölümünü içeren simgeleri de içerecektir. Örneğin, araba yazdım ve arabaların yanı sıra cart , card , vb. simgeleri de içeriyordu.

Burada alışveriş sepetini aradım ve bana sadece alışveriş sepetleri veriyor.

Simgeyi hangi simge kümesinin sağladığını bulmak için aramayı da kullanabilirsiniz. Kaydırırken Star Wars Rebellion simgesini gördüm. Asi aradım ve bana ilk denemede simgeyi verdi. Hangi simge setinin bunu sağladığını bilmek istedim, bu yüzden FontAwesome'a ​​tıkladım ve asi simgesinin vurgulandığını bulana kadar kaydırdım.

Filtreyi FontAwesome ve Material Icons kullanmadan bile faydalı buldum çünkü geliştirme süresini hızlandıran Elegant Themes simgelerini sıralamaya ve bulmaya yardımcı oluyor. Arama yaparken enter tuşuna basmayın. Bu, modülü kapatacaktır.

Divi Simgesi Kral Örnekleri

İşte birkaç örnek. Çoğu, orijinalleri Font Awesome veya Material Icons'dakilerle değiştirdiğim tanıtım yazıları, düğmeler ve kaplama simgeleridir.

İsyan simgesini bulduğumdan beri onu kullanmaktan kendimi alamadım. İşte Geno Quiroz'un ücretsiz DiviStar düzen paketini kullanan bir örnek. Font Awesome'den tanıtım yazıları ve asi simgesi ekledim – her biri farklı renkte. Onları olabildiğince büyük yaptım. Kontroller, normal Zarif Temalar simgeleriyle aynıdır.

Bu, Elegant Themes'in ücretsiz Code School düzen paketini kullanıyor. İlk iki simgeyi değiştirdim (aslında simgeler yerine görüntüleri kullanan Web Geliştirme ve Javascript tanıtım yazıları), renklerini ve boyutlarını değiştirdim ve diğer simgelerle eşleşmesi için bir daire ekledim. Birincisi Malzeme Simgelerinden. İkincisi Font Awesome'den.

Bu, Tasarım Ajansı adlı ücretsiz ET düzen paketini kullanır. Fareyle üzerine gelindiğinde görüntülenen oklu bir düğme içerir. Oku, Font Awesome'den bir işaret parmağı ile değiştirdim.

Bu düzen paketi ayrıca görüntüler için vurgulu yer paylaşımı simgelerini kullanır. Simgeleri Malzeme Simgelerinden gelenlerle değiştirdim.

Blurbs, birkaç metin satırı üzerinde küçük simgeler görüntüledi. Metni kaldırdım ve simgeleri hem Font Awesome hem de Material Icons'tan simgelerle değiştirdim. Renkleri korudum ancak simgeleri 120 pikselde tam boyutta yaptım.

Bu, Elegant Themes'in ücretsiz Restoran düzeni paketinden. Blog yazısı resimlerine ikonlu bir bindirme ekledim ve Material Icons'dan (ortadaki resimde görebileceğiniz gibi) bir çatal ve kaşık ikonu yerleştirdim.

Divi Icon King'i Ekstra ile Kullanma

Divi Icon King, Extra ile harika çalışır ve hatta Kategori Oluşturucu ile çalışır. İşte Font Awesome'deki düğmenin içinde bir YouTube simgesi bulunan Tasarım Ajansı düzen paketine bir bakış.

Bu, Gönder düğmesi için Malzeme Simgelerinden bir posta kutusu simgesi kullanır.

Kategori Oluşturucu ile nasıl çalıştığına bir göz atın. Bu görüntü, Kategori Oluşturucu'daki Posta Modülünü, görüntü katmanındaki simge olarak Font Awesome'den bir kahve simgesiyle gösterir.

Extra ve Kategori Oluşturucu ile çalıştığını görmekten memnunum. Ekstra genellikle üçüncü taraf geliştiriciler tarafından atlanır, ancak bir blog ve yayın platformu olarak Extra'yı seviyorum ve en popüler web sitem Extra ile oluşturuldu.

Divi Icon King'i Üçüncü Taraf Eklentilerle Kullanma

Divi Icon King, simgeleri kullanan üçüncü taraf eklentilerle çalışır. İşte Content Intense'e bir bakış.

Content Intense, blogu seçimlerime göre görüntüler (bindirmeye izin veren Alpler'i seçtim). Ortadaki resimde görebileceğiniz blog yerleşimindeki Malzeme Simgelerinden bir simge ekledim.

Dokümantasyon ve Destek

Belgeler geliştiricinin web sitesinde sağlanır. Bir video gösterimi, kurulum bilgileri ve hızlı bir demo içerir.

Destek, geliştiricinin web sitesinde sağlanır. Sahip olduğum tek sorun kendi test sitemle ilgiliydi (Simgelerin Extra'nın Kategori Oluşturucusunda düzgün görüntülenmesi için önbelleğimi temizlemem gerekiyordu). Destek ile iletişime geçtim ve sorun dakikalar içinde çözüldü.

• Eklenti, Divi pazaryerlerinin çoğunda satın alınabilir.

Biten Düşünceler

Divi Icon King, tanıtım yazılarında, bindirmelerde, düğmelerde veya simgeleri kullanan diğer modüllerde kullanılmak üzere Divi'ye yüzlerce ücretsiz simge eklemenin kolay bir yoludur. Extra ile çalışır ve hatta ET'nin kodlama standartlarına uydukları sürece üçüncü taraf eklentilerle çalışır. Font Awesome ve Material Icons'dan Divi'ye ücretsiz simgeler eklemenin kolay bir yolunu arıyorsanız, Divi Icon King bir göz atmaya değer.

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

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