WordPress'e Simgelerle Öne Çıkan Kutular Nasıl Eklenir

Başarılı herhangi bir işletme web sitesine bakın ve muhtemelen temel tekliflerini vurgulayan simgelerle özellik kutuları göreceksiniz.

It’s a proven design pattern we’ve used countless times because it works. It helps visitors to quickly see what makes your business special without reading large blocks of text.

Birçok WordPress kullanıcısına site iyileştirmeleri konusunda rehberlik ettikten sonra, bu profesyonel görünümlü özellik kutularını oluşturmanın zahmetli görünebileceğini biliyoruz.

Ancak çoğu insanın fark etmediği şey şu: Sitenize güzel öne çıkan kutular eklemek için tasarımcı veya geliştirici olmanıza gerek yok.

Bu kılavuzda, WordPress'te simgelerle özellik kutuları oluşturmanın en basit yollarını paylaşacağız. Ben

Simgeli Özellik Kutuları Nedir?

Çoğu insan WordPress web sitenizdeki her kelimeyi okumayacaktır, özellikle de bir sayfa çok fazla metin içeriyorsa.

Bunun yerine, ziyaretçiler aradıkları bilgiyi hızlı bir şekilde bulmak için sayfayı tarayacaktır. Bu, önemli bilgileri taranabilir ve ilgi çekici bir şekilde sunmanız gerektiği anlamına gelir, bu yüzden birçok web sitesi özellik kutuları kullanır.

Aşağıdaki resimde, WPForms'un eklentinin en büyük satış noktalarını vurgulamak için özellik kutularını nasıl kullandığını görebilirsiniz.

Kullanıcıların belirli bir özellik hakkında daha fazla bilgi edinmesi için bir harekete geçirici mesaj düğmesi bile ekleyebilirsiniz.

Bunu göz önünde bulundurarak, WordPress'te simgelerle özellik kutuları eklemeyi size gösterelim. Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:

• Yöntem 1: WordPress Blok Düzenleyiciyi Kullanarak Simgelerle Özellik Kutuları Ekleme (Eklenti Gerekmez)
• Yöntem 2: Sayfa Oluşturucu Eklentisi Kullanarak Simgeli Özellik Kutuları Ekleme (Önerilir)

Yöntem 1: WordPress Blok Düzenleyiciyi Kullanarak Simgelerle Özellik Kutuları Ekleme (Eklenti Gerekmez)

Standart içerik düzenleyici ve sütun bloğunu kullanarak WordPress sitenize simgelerle özellik kutuları ekleyebilirsiniz. Bu, yeni bir WordPress eklentisi yüklemeniz gerekmediği anlamına gelir, bu nedenle hızlı ve kolay bir yöntemdir.

Başlamak için, bir özellik kutusu eklemek istediğiniz sayfayı açın. Ardından, ‘+’ blok ekle simgesine tıklayın.

Ardından, arama kutusuna 'Sütunlar' yazın.

Doğru blok göründüğünde, sayfaya eklemek için tıklayın.

WordPress artık farklı sütun bloklarının tümünü gösterecektir. Sayılar, her sütunun blokta ne kadar yer kapladığını gösterir. Örneğin, '50/50', mevcut genişliğin her biri %50'sini kaplayan iki sütun oluşturur.

Örnek olarak, '33/33/33' sütun bloğunu seçeceğiz çünkü bu bize eşit genişlikte üç sütun verir, ancak istediğiniz herhangi bir düzeni kullanabilirsiniz.

Bundan sonra, sütunlara simge eklemeye hazırsınız.

Bunu yapmanın en kolay yolu, web sitenizi yavaşlatmayacak yeniden boyutlandırılabilir semboller olan öne çıkan simge yazı tipleridir. En büyük ücretsiz simge koleksiyonlarından birine sahip oldukları için Font Awesome kullanmanızı öneririz.

WordPress temanıza ikon yazı tipleri ekledikten sonra, bunları kısa kod kullanarak sütunlarınızda göstermek kolaydır.

Sütun'un '+' simgesine tıklayın ve 'Shortcode' yazın. Doğru blok göründüğünde, düzeninize eklemek için tıklayın.

Bundan sonra, aşağıdaki kısa kodu girebilirsiniz, ancak kullanmak istediğiniz simgenin adıyla 'bus' kelimesini değiştirdiğinizden emin olun:

[icon name="bus"]

Mevcut tüm simgelerin tam listesini görmek için Font Awesome simge kütüphanesine gidin.

Beğendiğiniz bir simge bulduğunuzda, simgenin adını görmek için üzerine tıklayın.

Örneğin, aşağıdaki resimde ‘address-book’ adlı bir simgeye bakıyoruz.

Artık bu adı kısakoda ekleyebilirsiniz.

Kısa kodlarla çalışma hakkında daha fazla bilgi edinmek için lütfen kısa kod ekleme konusundaki başlangıç kılavuzumuza bakın: WordPress'e kısa kod ekleme.

WordPress medya kütüphanesinden bir resim kullanmayı tercih ederseniz, bir simge yazı tipi kullanmak yerine bir resim bloğu ekleyebilirsiniz.

Bunu yapmak için ilk sütundaki '+' işaretine tıklayın ve ardından kısa kod bloğu yerine bir 'Resim' bloğu ekleyin.

Artık medya kitaplığından bir resim seçebilir veya bilgisayarınızdan yeni bir dosya yükleyebilirsiniz.

Tüm simgelerinizi ekledikten sonraki adım, özellik kutusuna metin eklemektir.

Bunu yapmak için Sütunlar bloğunun içindeki '+' düğmesine tıklayın. Ardından bir Paragraf bloğu ekleyin.

Ardından, metninizi paragraf bloğuna yazmanız yeterlidir.

Aynı işlemi tekrarlayarak diğer sütunlara simgeler ve metin ekleyebilirsiniz.

Özellik kutunuzun birden fazla satırı olmasını ister misiniz?

Sütunlar bloğuna tıklayın ve ardından araç çubuğundaki üç noktayı seçin. Ardından 'Çoğalt'ı seçebilirsiniz.

Bu, Sütunlar bloğunun bir kopyasını oluşturacaktır.

Şimdi, ikinci satıra içerik eklemek için yukarıda açıklanan aynı işlemi izleyin.

Özellik kutusundan memnun kaldığınızda, ürüne ait bir görsel veya kategoriler ve etiketler gibi diğer içerikleri sayfaya ekleyebilirsiniz.

Özellik kutusunu canlıya almak için 'Güncelle' veya 'Yayınla' düğmesine tıklamanız yeterlidir.

Özellik simge kutusunu çalışırken görmek için artık web sitenizi, blogunuzu veya online mağazanızı ziyaret edebilirsiniz.

WordPress blogunuzu ziyaret edenler şunları görecektir:

Yöntem 2: Sayfa Oluşturucu Eklentisi Kullanarak Simgeli Özellik Kutuları Ekleme (Önerilir)

Basit bir özellik kutusu oluşturmak istiyorsanız, WordPress blok düzenleyicisi iyi bir seçenektir. Ancak, tamamen özel tasarıma sahip daha gelişmiş bir kutu oluşturmak istiyorsanız, bir sayfa oluşturucu eklentisine ihtiyacınız olacaktır.

SeedProd, sürükle ve bırak düzenleyicisini kullanarak özel sayfalar oluşturmanıza olanak tanıyan, piyasadaki en iyi WordPress sayfa oluşturucusudur.

Hızlı bir şekilde güzel sayfalar oluşturmak için kullanabileceğiniz 300'den fazla profesyonelce tasarlanmış şablona sahiptir. Ayrıca tek bir tıklamayla özellik kutularınıza ekleyebileceğiniz eksiksiz bir simge kitaplığına sahiptir.

İşte SeedProd'un hazır blokları ve simgeleri kullanılarak oluşturulmuş bir özellik kutusu örneği.

Ortak markalarımızın bu aracı web sitelerini oluşturmak için kullandıklarını gördük ve mükemmel bir deneyim yaşadılar. Ayrıntılar için SeedProd incelememize bakın.

Yapmanız gereken ilk şey SeedProd eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, WordPress eklentisinin nasıl kurulacağına dair başlangıç rehberimize bakın.

Etkinleştirdikten sonra, SeedProd » Ayarlar bölümüne gidin ve lisans anahtarınızı girin.

Bu bilgiyi SeedProd hesabınıza giriş yaparak bulabilirsiniz.

Profesyonelce Tasarlanmış Bir Şablon Seçin

Başlamak için SeedProd » Açılış Sayfaları'na gidin ve 'Yeni Açılış Sayfası Ekle'ye tıklayın.

Sonraki ekranda bir şablon seçebilirsiniz. Bu şablonların tümünü SeedProd'un sürükle ve bırak oluşturucusu ile özelleştirebilirsiniz, ancak hedeflerinize uygun bir şablon seçmek hala iyi bir fikirdir.

SeedProd'un tüm şablonları, açılış sayfası ve potansiyel müşteri sıkıştırma kampanyaları gibi farklı kampanya türlerine göre düzenlenmiştir. Hatta SeedProd'un şablonlarını 404 sayfanızı iyileştirmek için bile kullanabilirsiniz.

Bu kılavuz için 'Boş Şablon' kullanacağız, ancak istediğiniz herhangi bir şablonu kullanabilirsiniz.

Bir şablon seçmek için üzerine gelin ve 'Onay İşareti' simgesine tıklayın.

Bu, sayfaya bir ad verebileceğiniz bir açılır pencere getirir. SeedProd, sayfa adını URL'de kullanır, ancak isterseniz bu bağlantıyı değiştirebilirsiniz. Örneğin, bazı ilgili anahtar kelimeleri dahil ederek WordPress SEO'nuzu iyileştirmek isteyebilirsiniz.

Bundan sonra, 'Kaydet ve Sayfayı Düzenlemeye Başla' düğmesine tıklayın.

Bu, şablonu SeedProd'un sürükle ve bırak sayfa düzenleyicisinde açar.

Öne Çıkan Kutunuzu Tasarlayın

Boş şablonu kullandığınız için ilk adım bir düzen seçmektir. Bunu yapmak için herhangi bir sütun düzenine tıklamanız yeterlidir.

Bundan sonra, sol menüde 'Simge' bloğunu bulun.

Bu bloğu şimdi ilk boş sütuna sürükleyip bırakabilirsiniz.

Bu, varsayılan bir simge zaten seçilmiş olarak, Simgeler bloğunu düzeninize ekler.

Simgeyi değiştirmek için üzerine tıklayın ve ardından ‘Resim Seç’ düğmesini seçin.

Bu, yüzlerce simge arasından seçim yapabileceğiniz simge kitaplığını getirir. Belirli bir simgeyi aramak için arama çubuğunu kullanabilir veya tüm listeyi göz atabilirsiniz.

Kullanmak istediğiniz bir görsel bulduğunuzda, üzerine gelin ve sayfanıza eklemek için '+' düğmesine tıklayın.

Simgeyi özelleştirmek için üzerine tıklayarak seçin.

Artık bu simgeyi, hizalamasını, boyutunu, rengini ve daha fazlasını değiştirmek de dahil olmak üzere sol taraftaki menüdeki ayarları kullanarak ince ayar yapabilirsiniz.

Daha fazla seçenek görmek için 'Gelişmiş' sekmesine tıklayın.

Burada boşlukları değiştirebilir, kenarlık ekleyebilir ve hatta CSS animasyon efektleri ekleyebilirsiniz.

Bunu yaptıktan sonra, simgenin altına bir 'Metin' bloğu ekleyin.

Sol menüdeki 'Metin' bloğunu bulun ve ardından sürükle ve bırak kullanarak simgenizin altına yerleştirin.

Metin eklemek için bloğu seçmek üzere tıklayın. Ardından sol taraftaki menüdeki küçük metin düzenleyiciye yazabilirsiniz.

Burada bağlantılar ekleyebilir, metin hizalamasını, metin rengini ve daha fazlasını değiştirebilirsiniz.

Diğer sütunları özelleştirmek için yukarıdaki adımları izlemeniz yeterlidir.

Simgelerle başka bir özellik kutusu satırı eklemek isterseniz, fare imlecini bölümün üzerine getirin ve ardından 'Satırı Çoğalt' düğmesine tıklayın.

Daha fazla simgeli özellik kutusu oluşturmak için bölümü istediğiniz kadar çoğaltabilirsiniz.

Daha sonra, yukarıda açıklanan aynı işlemi izleyerek yeni simgeler ve metin ekleyebilirsiniz.

Sol menüde daha fazla blok ekleyerek ve bu blokları özelleştirerek sayfada çalışmaya devam edebilirsiniz.

Sayfanın görünümünden memnun kaldığınızda 'Kaydet' düğmesine tıklayın. Ardından sayfayı yayına almak için 'Yayınla'yı seçebilirsiniz.

Bu makalenin, WordPress'te simgelerle özellik kutuları eklemeyi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca, WordPress sitenizin renklerini nasıl özelleştireceğiniz ve mobil uyumlu bir WordPress sitesi oluşturmanın yolları hakkındaki rehberimize de göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.