Web sitelerini iş canlandırmak için kullanan çeşitli kişi ve kuruluşlar için, web sitelerinde fiyatları görüntülemek vazgeçebilecekleri bir şey değildir. Online bir mağaza işletmiyorsanız ancak yine de insanlara fiyatlarınızı bildirmek istiyorsanız, bunları göstermenin tek bir iyi yolu var, o da bir fiyat listesi kullanmak.
Bazı WordPress temaları, bir fiyatlandırma listesi kısa koduyla birlikte gelir. Temanızda durum buysa – harika, tek yapmanız gereken kısa kodu bir sayfaya eklemek. Fakat her yönüyle mükemmel olan bir WordPress teması bulursanız – bir fiyatlandırma listesi yoktur – ne yapmalısınız?
Elbette bir fiyat listesi eklemek için bir eklenti kullanacaksınız.
Bu amaçla, Elementor için QI Eklentileri eklentisini oluşturduk. Yeteneklerini genişletmek ve web sitenizde kendinizi yeni ve heyecan verici yollarla ifade etmek için popüler Elementor sayfa oluşturucu ile kullanabileceğiniz 60 widget ve öğeden oluşan ücretsiz bir koleksiyondur. Eklentiye dahil olan widget’lardan biri, WordPress web sitenize harika fiyatlandırma listeleri eklemek için ihtiyaç duyduğunuz şey olan fiyatlandırma listesi widget’ıdır.
Bu makalede, fiyatlandırma listesi widget’ını kullanarak üç sütunlu bir fiyatlandırma listesini nasıl oluşturacağınızı göstereceğiz. Makaleleri okumak yerine video izlemeyi tercih ediyorsanız, aynı konuyu ele alan bir video da hazırladık.
En sevdiğiniz ortamı seçin, arkanıza yaslanın ve kendinize ait harika listeler oluşturmak için ilham almaya hazırlanın!
-
WordPress’te Fiyatlandırma Listesi Ekleme
-
İçeriği Düzenleme
-
Listeyi Şekillendirme
-
Son Dokunuşları Uygulamak
WordPress’te Fiyatlandırma Listesi Ekleme
QI Addons for Elementor, adından da anlaşılacağı gibi, Elementor ile çalışan bir eklentidir. WordPress web sitenize bir fiyatlandırma listesi eklemek için kullanmak için önce Elementor web sitesi oluşturucusunu edinmeniz gerekir. Elementor becerilerinizi tazelemeniz gerekiyorsa endişelenmeyin – sizin için kullanışlı bir kılavuzumuz var.
Bir sonraki adım için eklentiyi eklemelisiniz. Web sitenizin arka ucundan Eklentiler > Yeni Ekle’ye gidin, Elementor için QI Eklentileri’ni arayın ve eklentiyi bulduğunuzda yükleyip etkinleştirin. Elementor’u kullanarak bir sayfayı veya gönderiyi düzenlemeye çalışırsanız, öğeler panelinde tamamen yeni bir öğe ve pencere öğesi bölümü fark edeceksiniz.
Bu yüzden yeni bir sayfa veya gönderi oluşturduysanız, ilk adım olarak ilk bölümünüzdeki sütun sayısını seçmek isteyebilirsiniz. Üç sütunlu bir liste oluşturduğumuz için üçü seçtik. Ne istersen daha az veya daha fazla ekleyebilirsin.
Daha sonra fiyatlandırma listesini bulmak için widget’lar arasında gezinebilir veya öğe arama çubuğuna basitçe “fiyatlandırma listesi” yazabilirsiniz – bu daha hızlı bir seçimdir. Fiyatlandırma listesi widget’ı bulunduğunda, onu ücretsiz bir sütuna sürüklemeniz, bir fiyatlandırma listesi oluşturmaya başlamanızı sağlar.
Hatırlanması gereken önemli nokta, çok sütunlu bir liste oluştururken, bir sütun oluştururken, üzerinde temel düzenlemeleri yaparken ve ardından onu kopyalarken, kenar boşlukları ve dolgular gibi bazı küçük ayarları korumanın harika bir yoludur. İleriye dönük uyguladığımız strateji bu.
İçeriği Düzenleme
Widget, içeriği düzenlemenize ve görünümünü iki farklı panelden şekillendirmenize olanak tanır ve önce içeriği düzenlemeye odaklandık. İçerik sekmesini açtığınızda size Genel seçenekleri gösterir; düzeni seçtiğiniz, öğeleri ekleyip çıkardığınız ve içeriği ve bir dereceye kadar öğelerin görünümünü düzenlediğiniz yer.
Burada yaptığımız, standart düzeni seçip “+Öğe Ekle” butonunu kullanarak listeye yeni bir öğe eklemek oldu. İhtiyaçlarınıza daha uygunsa, bir öğeyi kaldırabilir veya iki öğe daha ekleyebilir, hatta farklı bir ilk görünüm için önce görsel düzenini kullanabilirsiniz.
Sol paneldeki herhangi bir öğeye tıkladığınızda, o öğeyi düzenlemenizi sağlayan yeni bir seçenekler grubu açılır.
Seçenekler, ona bir isim, bir resim, bir açıklama, fiyat ve indirimli fiyat vermeyi içerir. Başlık ve fiyat için bir renk seçici seçeneği de var – farklı renklerde ürün başlıkları ve fiyatlarına sahip olmak istiyorsanız veya sadece bazılarını öne çıkarmanız gerekiyorsa, bu çok kullanışlı olabilir. Fakat Stil çubuğunda tüm renkleri aynı anda değiştirme seçeneği de vardır.
Listemiz için, burada sahip olduğumuz dört öğeyi adlandırmaya, açıklamalarını kısaltmaya, görseli kaldırmaya ve fiyatlar eklemeye karar verdik.
Düğme ve Düğme Simgesi seçeneklerine geçiyoruz. Düğmenin düzenini, altı çizili düğme metni ve düğmenin boyutunu değiştirme seçeneklerinin yanı sıra, düğmenin görünüşünü özelleştirmek için pek çok yolunuz olacak.
Varsayılan düzene bağlı kalmayı, yazı ve altı çizili seçenekleri göz ardı etmeyi ve normal boyutu seçtik. Düğme metnini değiştirdik ve kullanıcıyı aynı sayfada bırakmak için Düğme Bağlantısı alanında bir hashtag kullandık. Düğmeyi istediğiniz herhangi bir sayfaya bağlayabilir ve Hedef seçeneğini kullanarak sayfanın nasıl açılmasını istediğinizi seçebilirsiniz.
Son dokunuş için buton ikon seçeneklerine gidip butonda görünecek bir ikon seçebilirsiniz. Yükleme veya simge kitaplığından bir tane seçme seçeneği vardır – biz ikincisini seçtik ve “sağ açı” simgesini seçtik. Son seçenek, simgenin konumunu seçmenize izin verir – ve biz de metnin sağında olmak için kendimizinkini seçtik.
Listeyi Şekillendirme
İçeriğimiz hazır olduğunda, Stil sekmesine gidebilir ve Fiyatlandırma Listemizin görünümünü değiştirmeye başlayabiliriz. Karşılaşacağınız ilk seçenek, kullandığınız tema tarafından tanımlanan başlık etiketini seçmenize izin verir. Varsayılan olanla sıkışıp kaldık. Daha ilginç seçenekler, başlık ve açıklama için ayarlayabileceğiniz renk ve tipografi seçenekleridir.
Stil seçeneklerinde iki değişiklik yaptık. Başlık için #df9a9a ve açıklama için #1e1e1e rengini kullandık. Fiyat listenizde istediğiniz rengi kullanmakta özgürsünüz.
Fiyat Stili altında, renk ve tipografi seçenekleri, fiyat için arka plan renginin seçilmesi ve dolgusunun ve kenarlık yarıçapının ayarlanmasının yanı sıra, Stil seçeneklerindekiyle hemen hemen aynıdır. Başlığın rengine uyması için rengi değiştirdik. Ayrıca yazının boyutunu 20 piksele ve ağırlığını 500 piksele yükselttik – öne çıkmasına yardımcı olmak istedik.
Öğe ile fiyat arasındaki çizginin nasıl göründüğünü özelleştirmek istiyorsanız, bunu yapabileceğiniz yer İçerik Stilidir. Çeşitli öğelerin belirginliğini ve aralığını etkilemek için çizgi kalınlığı ve kenar boşlukları gibi seçenekleri de kullanabileceksiniz. Bu bölümde yaptığımız ayarlamalar, çizgi renginin #e1e1e1 olarak ve üstteki açıklama kenar boşluğunun 5 olarak değiştirilmesini içerir.
Genel Stil seçeneği, öğeler arasındaki boşluğu ve ayrıca listedeki son öğe ile düğme arasındaki boşluğu ayarlayabileceğiniz yerdir. İkisini de yaptık – öğe aralığını 30 piksele ve üstteki düğme kenar boşluğunu 60’a değiştirdik.
İsterseniz öğe ayırıcıyı etkinleştirebilirsiniz – biz yapmayacağız. Bunu yaparsanız, ayırıcıların rengini, kalınlığını ve diğer öğelere göre konumunu seçmenize yardımcı olacak bazı ek seçenekler elde edersiniz.
Düğme Stili seçenekleri biraz daha karmaşık çünkü aslında iki düğmeyi şekillendiriyorsunuz – normal olan ve fareyle üzerine gelindiğinde görünen. Tipografi seçenekleri her ikisi için de aynı olacaktır. Harflerin boyutunu 16 piksel, ağırlığını ise 500 piksel olarak değiştirdik.
Normal seçeneği, düğmenin metnini, arka planını ve kenarlık rengini seçmenizi sağlar. Vurgulu seçeneği, fareyle üzerine gelme düğmesi dışında aynı şeyi yapmanızı sağlar. Düzenleme için Normal sekmesine bağlı kalarak metin rengini #ffffff ve arka plan rengini #1e1e1e olarak değiştirdik.
Daha sonra kenarlık genişliği, düğme yarıçapı ve dolguyu içeren seçenekleri fark edeceksiniz. Kenarlık yarıçapı için tüm değerleri sıfıra ayarladıktan sonra dolgu değerlerini de 14, 40, 14, 40 olarak değiştirdik.
Düğme Simge Stili seçeneklerinde, simgenin boyutunu ve kenar boşluğunu değiştirebilirsiniz. Fareyle üzerine gelindiğinde gerçekleşen küçük animasyonu bile etkileyebilirsiniz. 16 olarak değiştireceğimiz simge boyutu ve 10 piksel olarak değiştirdiğimiz sol kenar boşluğu dışında her şeyi varsayılan olarak bıraktık.
Son Dokunuşları Uygulamak
Tüm kenar boşluklarını ve seçenekleri bir sonraki sütunda tutmak için mevcut sütuna sağ tıklayıp onu çoğalttık. Kopya, mevcut sütunun altında göründü – onu sağdaki boş sütuna sürüklemek, fiyatlandırma listemizi tamamlamada ilerlememizi sağlamak için gereken tek şeydi.
Yeni başlayanlar için listenin ikinci sütununa bir madde daha ekledik ve metnimizi ekledik. Listedeki bazı öğelerin de kendi görselleri var.
Stil sekmesindeki Stil seçeneklerinde, başlık rengini açıklamayla eşleşecek şekilde değiştirdik – #1e1e1e. Fiyat rengi için Fiyat Stili seçeneklerinde de aynısını yaptık. Bütün bunlar elbette tamamen isteğe bağlıdır. Son olarak menü öğelerindeki resimler biraz farklı görünüyorsa, İçerik Stilinde kenar boşluklarında ince ayar yapabiliriz.
Üçüncü sütunu oluşturmak için, ikinci sütunu oluşturmak için kullandığımız aynı yöntemi kullandık – sağ tıklayın, çoğaltın, boş sütun alanına sürükleyin. Düzenleme ve şekillendirme, fiyatlandırma listesini oluşturmanın son adımıydı.
Son sütun için değişiklikleri yapmak için İçerik sekmesinden fazla uzaklaşmadık. Her şeyden önce, sütundaki öğe sayısını dörde çıkardık – yani üçüncü sütunda artık Singapur eriştesi yok. Üçüncü sütundaki bir ve üç numaralı öğelerden resimleri kaldırdık.
İkinci ve dördüncü öğeler için yeni resimler ekledik ve fiyatlarını indirim içerecek şekilde değiştirdik. Değişikliklerin genel olmasını istemiyorsanız tüm bunları Öğe seçeneklerinden yapabilirsiniz; bu şekilde, yalnızca seçilen öğeleri etkilerler. Ayrıca indirimli fiyatların daha da ön plana çıkması için fiyat rengini #495caf olarak belirledik.
İnce ayarın son parçası, sütunları biraz ayırmak olacaktır. Bölümü Düzenle düğmesine tıklamak ve içerik genişliğini tam genişliğe ve sütun boşluğunu daha geniş olarak değiştirmek hile yapmalıdır. Panelin altındaki önizleme değişiklikleri düğmesine tıklandığında, önizleme penceresinde buna benzer bir şey görüntülenebilir.
Çözüm Yolu
WordPress web siteniz için fiyatlandırma listeleri oluşturmaya gelince, Elementor sayfa oluşturucu ve ücretsiz QI Addons for Elementor eklentisindeki fiyatlandırma listesi öğesinin kombinasyonunu yenmek zordur. Yalnızca birkaç seçeneği değiştirerek harika fiyat listeleri oluşturabilir veya farklı yazı tipleri, renkler ve görseller seçerek listeyi tamamen kendinize ait yapabilirsiniz. Elementor eklentisi için QI Eklentileri, bu seçeneğe sahip olmanızı sağlar.