Ana sayfanıza bir simge içeren bir özellik kutusu eklemek ister misiniz?

Bu özellik, ürünleriniz ve hizmetleriniz hakkında önemli bilgileri görüntüler. Potansiyel müşterilere ürün sunmada ilgi çekici bir teknik olduğu kanıtlanmıştır.

Bu derste size bu özelliği WordPress blogunuza nasıl ekleyeceğinizi göstereceğim.

Ama daha önce, eğer WordPress keşfi hiç kurmadıysanız Bir WordPress blog 7 adımlarını nasıl yüklenir et Nasıl bulmak yüklemek ve blogunuzda bir WordPress tema etkinleştirmek için 

O zaman neden burada olduğumuza dönelim.

simgeli bir özellik kutusu ekleyin

Simgelerin bulunduğu özellik kutusu nedir?

Çoğu kişi bir web sitesini ziyaret ettiğinde onu tam olarak okumaz. İnsanlar olarak profesyonel tarayıcılar haline geliyoruz.

Bu, çevrimiçi bir işletmenin sahibi olarak, önemli bilgileri analiz etmesi oldukça kolay bir şekilde ve ilgi çekici bir şekilde sunmanız gerektiği anlamına gelir.

Bu nedenle, çoğu kurumsal web sitesinde genellikle kaydırıcıda harekete geçirici mesaj düğmesiyle birlikte bir resim bulunur.

Bunun hemen altında, ürün ve hizmetlerinizle ilgili önemli bilgileri görüntülemenizi sağlayan bir özellik kutusu kullanabilirsiniz. Her özellik kutusunun, kullanıcıların daha fazla bilgi edinmesini sağlamak için kendi harekete geçirici mesaj düğmesi olabilir.

İşte somut bir örnektir:özellik kutuları wordpress simgesi nasıl eklenir

WordPress blogunuzun ana sayfasına bir özellik kutusu nasıl eklenir?

Yapmanız gereken ilk şey eklentiyi kurmak ve etkinleştirmek. Gelişmiş WP Sütunlar. Daha fazla ayrıntı için kılavuzumuza bakın. WordPress'e nasıl eklenti kurulur veya eklenir

Eklentiyi etkinleştirdikten sonra, " Ayarlar> Gelişmiş WP Sütunları Eklentiyi yapılandırmak için.

Sadece seçeneğe kaydırmanız yeterli " kolon Sınıf Ve 'sütunlarım' gibi bir metin girin (Biz dönecektir). Ayarlarınızı kaydetmek için kaydet düğmesine tıklamayı unutmayın.

colclass

O zaman yapmanız gereken tek şey, özellik kutularınıza SVG simgeleri eklemektir. Bunu yapmak için sizi eklentiyi kurmaya ve etkinleştirmeye davet ediyorum WP SVG Simgeler.

Artık özellik kutularınızı oluşturmaya hazırsınız. İşlevsellik kutusunun görünmesini istediğiniz sayfayı değiştirerek başlayabilirsiniz.

Yazı düzenleyicide iki yeni seçenek göreceksiniz. İlki, bir simge eklemenize izin verir ve düzenleyici araç çubuğunun üzerinde bulunur. İkincisi, görsel düzenleyici araç çubuğunda bulunur.

Bu seçeneği göremiyorsanız, araç çubuğu düğmelerini genişletmeniz gerekir.

newbuttons

Yapmanız gereken ilk şey "" düğmesine tıklamak. Gelişmiş WP Sütunlar". Bu, tıklayabileceğiniz bir açılır pencere görüntüler "Boş" ve eklemek istediğiniz sütun sayısını seçin.

Oluşturma-sütunlarHer alana tıklayabilir ve istediğiniz herhangi bir metni ekleyebilirsiniz. Şimdi metin eklemezseniz, daha sonra sütunlar arasındaki farkı göremezsiniz. Bitirdiğinizde, " Sütun ekle Alt kısmında.

Görsel düzenleyiciye sütunların eklendiğini fark edeceksiniz. Sonraki adım, metnin üzerine simgeler eklemektir.

İmlecinizi alın ve metin kutusunun başına ekleyin, ardından yeni bir satır sonu ekleyin. Bu, simgeyi ekleyebileceğiniz yeni bir alan ekleyecektir. Şimdi düğmeye tıklayın " Yeni Simgesi ekleme", Ve bir simge seçebileceğiniz yeni bir pencere göreceksiniz.

addingicons

Bu pencereden eklemek istediğiniz simgeyi seçebilirsiniz. Ardından, içeriğinizin " " öğesine eklenmesi için "aralık" düğmesini tıklayın .

Sonunda, düğmesine tıklayın insert icon", SVG simgesinin düzenleyicide eklendiğini fark edeceksiniz. Simgenin adına bağlı olarak kısa kod şöyle görünecektir:

[wp-svg-icons icon = "roket" wrap = "span"]

Diğer kutularda her seferinde işlemi tekrarlayın. İşiniz bittiğinde ayarlarınızı kaydetmeyi unutmayın.

İşi bitirmeye hazırsınız, ancak simgelerin çok küçük olduğunu fark ederseniz.

featureboxes-SmallIcons

Tek yapmanız gereken, sorunu düzeltmek için CSS kodu eklemektir. Aşağıda, alt temanızın stil dosyasına ekleyebileceğiniz bir CSS kodu örneği verilmiştir.

span.wp-svg-rocket.rocket {yazı tipi boyutu: 100px; Span.wp-svg-cloud.cloud} {yazı tipi boyutu: 100px; } Span.wp-svg-headphones.headphones {yazı tipi boyutu: 100px; .mycolumns} {sınır: Katı 1px #eee; dakika-yüksekliği: 250px; padding-top:! 20px önemli; }

Simge sınıfının eklediğiniz sınıfla eşleşmesi gerektiğini unutmayın. Bu durumda şu simgeleri kullandım: roket, bulut, kulaklık.

featureboxesfinal

Size izin verecek bir eğitim yazdığımızı unutmayın. CSS becerilerinizi geliştirin. Yazıcımız olan Visual Composer gibi daha gelişmiş bir oluşturucu sayfasını da kullanabilirsiniz. oldukça ayrıntılı öğretici.

Bu eğitim için bu kadar. Umarım WordPress blogunuzda bazı iyi özellik kutuları oluşturmanıza yardımcı olur. Bu öğreticiyi arkadaşlarınızla paylaşmaktan çekinmeyin. Bu fırsatı size tüm BlogPasCher ekibinden en iyi dileklerini göndermek için kullanıyorum.

2 hisseleri
hisse
cıvıltı
Enregistrer2