Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor.

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, bu özelliği bilgisayarınıza nasıl ekleyeceğinizi göstereceğim. WordPress blog.

Ama daha önce, eğer WordPress keşfi hiç kurmadıysanız nasıl kurulur WordPress blog 7 adımda 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

Elementor ile web sitenizi kolayca oluşturun

Elementor oluşturmanıza izin verir Kolay ve Ücretsiz profesyonel bir görünüme sahip herhangi bir web sitesi veya blog tasarımı. Kendiniz yapabileceğiniz bir web sitesi için çok fazla ödeme yapmayı bırakın.

Eklentiyi etkinleştirdikten sonra, " konumuna gitmeniz gerekir. 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.

Ürünlerinizi internet üzerinden mi satmak istiyorsunuz?

Fiziksel ve dijital ürünlerinizi WordPress'te satmak ve çevrimiçi mağazanızı kolayca oluşturmak için en iyi e-ticaret eklentileri olan WooCommerce'i ücretsiz indirin. Yeni başlayanlar için mükemmel.

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. Ayrıca bir sayfa oluşturucu olarak daha başarılı Görsel Besteci hangimiz için yazdık 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.

%d bu sayfayı beğendi blogcular: