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 öne çıkan kutular oluşturmanın en basit yollarını paylaşacağız.

Neden Simgelerle Öne Çıkan Kutular Eklenir?

Simgelerle öne çıkan kutular, önemli bilgilerin taranmasını kolaylaştırır ve görsel olarak ilgi çekici hale getirir. Ziyaretçilerin çoğu, en önemli şeyleri bulmak için hızlıca taradıkları için metin ağırlıklı bir sayfadaki her kelimeyi okumaz.

Öne çıkan kutular, genellikle simgelerle eşleştirilen temel noktaları vurgular, böylece kullanıcılar ürününüzü veya hizmetinizi bir bakışta anlayabilir. Belirli bir özellik hakkında daha fazla bilgi edinmeleri için kullanıcıları teşvik etmek üzere bir eylem çağrısı düğmesi de ekleyebilirsiniz.

İşte WPForms en büyük satış noktalarını sergilemek için öne çıkan kutuları nasıl kullanıyor:

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:

• Method 1: Add Feature Boxes With Icons Using the WordPress Block Editor (Free Method)
• Method 2: Add Feature Boxes With Icons Using a Page Builder Plugin (Recommended)
• Simgeli Bir Öne Çıkan Kutu Ekleme Hakkında Sıkça Sorulan Sorular

Yöntem 1: WordPress Blok Düzenleyiciyi Kullanarak Simgelerle Öne Çıkan Kutular Ekleyin (Ücretsiz Yöntem)

WordPress sitenize standart içerik düzenleyicisini ve sütun bloğunu kullanarak simgelerle özellik kutuları ekleyebilirsiniz.

Sayfa oluşturucu kullanmadan basit bir düzen oluşturmak istiyorsanız bu harika bir seçenektir.

Adım 1: Sayfayı Açın ve Sütunlar Bloğunu Ekleyin

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.

Adım 2: Sütunlara Simgeler Ekleyin

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 simgeli yazı tiplerini ekledikten sonra, kısa kod kullanarak bunları 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. Simgeleri arama motorları ve ekran okuyucular için açıklamak üzere uygun Alt Metni eklemeyi unutmayın.

Adım 3: Özellik Kutusu'na Metin Ekleyin

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.

Adım 4: Birden Fazla Satır Oluşturun (İsteğe Bağlı)

Ö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.

Adım 5: Özellik Kutunuzu Yayınlayın

Ö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.

Adım 1: SeedProd'u Yükleyin ve Etkinleştirin

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.

Adım 2: Profesyonel Tasarımlı 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.

Adım 3: Özellik Kutusu Düzeninizi 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.

Adım 4: Özellik Metnini Ekleyin

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.

Adım 5: Satırları Çoğaltın ve Yayınlayın

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.

Simgeli Bir Öne Çıkan Kutu Ekleme Hakkında Sıkça Sorulan Sorular

WordPress'te simgelerle bir özellik kutusu ekleme hakkında okuyucularımızın sıkça sorduğu bazı sorular şunlardır:

WordPress'e nasıl simge eklerim?

Simgeleri eklemenin en kolay yolu, Font Awesome gibi bir eklenti yüklemek veya SeedProd gibi bir sayfa oluşturucu kullanmaktır. Bir eklenti kullanmak istemiyorsanız, standart Resim bloğunu kullanarak SVG simge dosyalarını doğrudan yükleyebilirsiniz.

WordPress'e nasıl sembol eklerim?

Sembol eklemek için Özel Karakterleri Ekle
eklentisini yükleyip etkinleştirmeniz gerekir. Etkinleştirildikten sonra araç, WordPress blok araç çubuğuna bir 'Ω' (omega) düğmesi ekleyecektir.

Özel karakterler menüsüne erişmek için kullanabilirsiniz. Daha fazla bilgi için, WordPress gönderilerine özel karakter ekleme eğitimimize bakın: WordPress gönderilerine özel karakter ekleme.

WordPress'e eklenti olmadan menü simgesi nasıl eklenir?

Eklenti olmadan menü simgeleri eklemek için, Görünüm » Menüler sayfasının üst kısmındaki Ekran Seçenekleri sekmesinde ‘CSS Sınıfları’nı etkinleştirin. Ardından, menü öğenize belirli bir CSS sınıfı ekleyin ve simge arka plan görüntüsünü görüntülemek için Özelleştirici'de özel CSS kodu kullanın.

WordPress'e özel sosyal simgeler nasıl eklenir?

Sosyal simgeler eklemek için, WordPress düzenleyicisindeki yerel ‘Sosyal Simgeler’ bloğunu kullanın. Facebook veya Twitter gibi ağları seçmek için blok içindeki ‘+’ düğmesine tıklayın ve ardından profil bağlantılarınızı doğrudan alanlara yapıştırın.

WordPress menüsüne bir sosyal medya simgesi nasıl eklerim?

Bir gezinme menüsüne sosyal simgeler eklemek için, simgeleri doğrudan menü öğelerine yüklemek üzere Menü Resmi gibi bir eklenti kullanmanızı öneririz. Alternatif olarak, menüye ‘Özel Bağlantı’ ekleyin ve Gezinme Etiketi alanına yazı tipi simgesi HTML kodunu yapıştırın.

İlgileniyorsanız, WordPress menülerine sosyal medya simgeleri ekleme kılavuzumuza göz atın: WordPress menülerine sosyal medya simgeleri ekleme.

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.