Hiç bir şey için alışveriş yaptınız ve seçimlerinizin çeşitli avantajlarını ve dezavantajlarını karşılaştırmakta zorlandınız mı? Bir çift ayakkabıdan karmaşık yazılım çözümlerine, motorlu araçlara ve emlaklara kadar her şeyi karşılaştırmaya çalışıyor olabilirsiniz. Birçok veriyi bir araya getirmek ve karşılaştırmak kişinin kafasında zor olabilir ve bunu kendi başına yapması zaman alıcı olabilir. Çoğu zaman, web tasarımcıları ve online mağaza operatörleri bu sorunu bir tablo eklentisi veya mümkünse bir fiyatlandırma tablosu kullanarak çözer. Fakat bazen dikkate alınması gereken çok şey vardır ve ilgili tüm verileri sunmak için ilgi çekici bir yola ihtiyacınız vardır. WordPress Eklentileri ve karşılaştırmalı tablo widget’ının devreye girdiği yer burasıdır. Ve hepsini dakikalar içinde kurabilirsiniz.
Fakat eğitimlerinizi metin biçiminde tercih edebilirsiniz. Asla korkma, seni koruduk. Fakat WordPress Eklentileri ve Elementor’un yanı sıra karşılaştırmalı bir tablo için bazı kullanım durumları hakkında sizinle konuşmak için biraz zaman ayırmak istiyoruz.
- Karşılaştırmalı Tablo Nedir?
- Elementor için WordPress Eklentileri Nelerdir?
- WordPress Eklentilerini Kullanarak Web Sitenize Karşılaştırmalı Tablo Widget’ı Nasıl Eklenir?
- Karşılaştırmalı Tablo Widget’ınızı Doldurma
- Karşılaştırmalı Tablo Alanlarınızı Şekillendirme
- Karşılaştırmalı Tablo Metninizi ve Sembollerinizi Şekillendirme
- Karşılaştırmalı Tablo Düğmelerinizi Şekillendirme
Karşılaştırmalı Tablo Nedir?
Karşılaştırmalı tablo, okuyucunun verileri karşılaştırmasına izin veren bir tablodur.
Pekala, eğer böyle bir cümle varsa, bu işe yaramaz bir cümle, değil mi?
Biraz daha açık olmak gerekirse, karşılaştırmalı tablo bir tür karşılaştırma tablosudur: okuyucusuna farklı veri kümelerine ait farklı öğelerin birbiriyle nasıl ilişkili olabileceğine dair genel bir bakış sağlayan bir veri görselleştirme aracıdır.
Hala net değil mi?
Bir örnek düşünelim. Diyelim ki dağlarda zorlu, erkeksi bir tatil yapmayı düşünüyorsunuz ve iki veya daha fazla kır evi buna uyuyor. Taahhütte bulunmadan önce her birinin avantajlarını ve dezavantajlarıni düşünmek istersiniz. En yakın mağaza ne kadar uzakta? Kulübede su ısıtıcısı var mı yoksa soğuk duşlarla mı yetinmek zorundasın? Oda veya yatak sayısına ne dersiniz? Basitleştirilmiş, anlaşmayı bozanlar veya anlaşma yapanlar var mı?
Her kır evinin özelliklerini gösteren karşılaştırmalı bir tablonun çok kullanışlı olacağı yer burasıdır. Ve sizinle tam olarak bunun hakkında konuşacağız.
Elementor için WordPress Eklentileri Nelerdir?
WordPress Addons for Elementor, Elementor’un zaten etkileyici olan yeteneklerini genişletmek için ödüllü bir profesyonel WordPress tasarımcıları ekibi tarafından geliştirilmiş bir eklentidir. Ve ona bizim demekten gurur duyuyoruz.
WordPress Addons’u kullanmak için yapmanız gereken tek şey, Elementor’un en son sürümünü yüklemek (ücretsiz sürüm işinizi görecektir) ve ardından WordPress Addons eklentisini diğer herhangi bir eklentide yaptığınız gibi yükleyip etkinleştirmektir. Karşılaştırmalı tablo widget’ı yalnızca WordPress Addons’un premium sürümünde mevcuttur.
WordPress Eklentilerini Kullanarak Web Sitenize Karşılaştırmalı Tablo Widget’ı Nasıl Eklenir?
Size bir gönderiye nasıl karşılaştırmalı tablo ekleyeceğinizi göstereceğiz. Fakat süreç bir sayfa için tamamen aynı şekilde işliyor. Boş bir yazı ve başlık ile başladık.
Bir sayfaya karşılaştırmalı bir tablo eklemek için, onu sol taraftaki menüde bulmanız ve sayfada istediğiniz yere sürüklemeniz yeterlidir.
Öğe, bazı yer tutucu metinlerle birlikte iki sütun ve üç satırla varsayılan durumunda görünecektir.
Karşılaştırmalı Tablo Widget’ınızı Doldurma
İçerik sekmesi ve Genel bölümü varsayılan olarak açılmalıdır. Ana Sütun Başlığı alanı, tablonun sol üst köşesindeki başlığı değiştirir. Genel başlığı Otomatik aylık planlarla değiştireceğiz.
Sekmenin Başlıklar ve Sütunlar bölümleri sırasıyla satırlar ve sütunlar için kontrolleri içerir. Her başlığın altındaki +Öğe Ekle düğmesini tıklayarak bunları ekleyebilirsiniz. İki satır daha ekleyeceğiz. Başlıklar bölümündeki bir Öğeye tıklamak onu genişletecek ve istediğiniz satır başlığını girebileceksiniz. Bunu tüm satırlarımızla yapacağız.
Bir Sütun öğesini genişletmek, daha fazla seçeneği ortaya çıkaracaktır. Sütun Başlığı, sütunun üst kutusundaki metin, Satır Değerleri, bir özelliğin bulunup bulunmadığına bağlı olarak virgülle ayrılmış – ve + değerleri ve Sütun Bağlantı Metni, sütunun altındaki metindir. (kavramsal olarak) satın almaya götüren sütun. Hemen üstteki Sütun Bağlantısı alanı, bağlantıyı girmeniz gereken yerdir.
Sekmenin Düğme bölümü yalnızca bir denetime sahiptir: Düğme Metni Altı Çizili’yi Etkinleştir geçişi. Evet olarak değiştireceğiz. Satın Al düğmesine bir .svg simgesi eklemek için Düğme Simgesi bölümünü kullanabilirsiniz. Bu tasarımda kullanmayacağız.
Karşılaştırmalı Tablo Alanlarınızı Şekillendirme
Sekmenin varsayılan sürümü etkilidir. Fakat sadedir. Belki de tam olarak istediğin bu, ama yine de, belki de değil. Widget’ın Stil sekmesi, bunu yapabileceğiniz yerdir.
Stil sekmesinin Stil bölümünde birkaç temel kontrol bulunur. İlk kontrol, sütun genişliğini eşitleyen varsayılan Otomatik ve Sabit arasında seçim yapmanızı sağlayan Tablo Düzeni anahtarıdır. Minimum Genişlik kaydırıcısı, okunabilirliği artırmak için her bir sütun için minimum genişliği kontrol etmenizi sağlar. Fakat yalnızca üç sütunumuz olduğu için buna ihtiyacımız yok.
Kenarlık Stili kontrolü, dış kenarlığı açıp kapatmanızı sağlar: Tümü ayarı, tüm kenarlıkların orada olduğu anlamına gelirken, Yalnızca İç kenarlık ayarı yalnızca iç kenarlıkları bırakır. Kenarlık Türü kontrolleri, Çift, Kesikli, Yivli ve daha fazlası gibi farklı bir kenarlık türü seçmenize izin verir. Düz bir çizgi ile gideceğiz, Genişliğini 2 piksele ve Rengini açık pembe (#ffc9c9) olarak ayarlayacağız.
Stil bölümünde aşağı inerken, Sütun Başlığı Hücre Dolgusu ve Hücre Dolgusu kontrollerini bulacaksınız. Bir hücrenin metni ile sınırları arasındaki boşluğu ayarlamak için kullanılırlar. Tablonun daha güzel görünmesi için bizimkini değiştireceğiz. Fakat web sitenizin stiline en uygun olanı seçebilirsiniz. İlk Sütun Genişliği kaydırıcısı, ilk sütunun genişliğini ayarlar. Bizimkini yüzde 41’e ayarlayacağız.
Bu bölümün son kontrolleri, Arka Plan Stili ve Arka Plan Rengi’dir. Çeşitli seçenekler arasından seçim yapabilirsiniz. Fakat her satır için değişen renkler anlamına gelen Alternatif ile gideceğiz. Hatta ilk rengimizi açık gri (#f9f9f9) olarak ayarlayacağız ve diğer rengi varsayılan değerde bırakacağız. Bu durum satırların çıkarılmasını kolaylaştıracaktır.
Karşılaştırmalı Tablo Metninizi ve Sembollerinizi Şekillendirme
Sütunun Ana Başlık Stili bölümü, ilk satırdaki metni, yani sütunların başlıklarını kontrol eder. Bunun için bir HTML etiketi seçebilirsiniz. Fakat varsayılanla gideceğiz. Hatta Ana Başlık Rengini (açık turuncu ile gittik (#e85656) ve üst sıra için standart tipografi ayarlarını da ayarlayabilirsiniz. Yazı tipi boyutunu yalnızca 17 olarak değiştirdik. Fakat yapabileceğiniz birçok seçenek var. ana başlığınıza stil vermek için kullanın.
Satır Başlığı Stili, yalnızca en soldaki sütun için tamamen aynı ayarlara sahiptir. Ana Başlık Stili ile aynı ayarları kullanacağız.
İşaret Stili bölümü, sütunlardaki onay işareti ve X için alternatif bir simge kullanmanıza olanak tanır. Karşıya yükleme kitaplığından bir simge seçebilir veya bir .svg dosyası yükleyebilirsiniz. Medya kitaplığımızdan bazı simgeler seçeceğiz. Onları da metinle aynı renkte yapacağız ve boyutlarını sırasıyla 14 ve 13 piksel olarak değiştireceğiz.
Karşılaştırmalı Tablo Düğmelerinizi Şekillendirme
Son olarak alt sıradaki butonlara geliyoruz.
Düğme Stili bölümünde, düğmenizin fareyle üzerine gelme davranışı için farklı ayarlar yapmanıza izin veren Normal/Vurgulu geçişi bulunur.
Butonun Normal versiyonunda yazı tipi ağırlığını 700 olarak değiştirip daha ön plana çıkacağız ve yine aynı sebeple Transform menüsünden Büyük Harf ayarını seçeceğiz. Hatta metni tablonun geri kalanıyla aynı açık turuncu renge çevireceğiz. Düğme Doldurma kontrolleri, diğer kontrollerle aynı şekilde çalışır. Onları 22 piksele ayarlayacağız.
Son olarak Button Cell Background Color ve Button Cell Hover Background Color kontrollerini buluyoruz. Bunlar normal ve fareyle üzerine gelme modlarında arka planı değiştirmenizi sağlar. Normal modda, kenarlık için zaten kullandığımız pembeye değiştireceğiz. Fareyle üzerine gelindiğinde herhangi bir özel davranış seçmeyeceğiz. Fakat elbette istediğinizi yapmakta özgürsünüz.
Düğme Simge Stili seçenekleri, Düğme Stili seçenekleriyle aynı şekilde kullanılır. Fakat bu tasarım için bir simge kullanmadığımız için gerekli değildir.
Son olarak Düğme Altı Çizili Stili, düğmenizin altı çizili öğesinin davranışını kontrol etmenizi sağlar. Diğer düğme biçimlendirme bölümlerinde olduğu gibi, Normal/Hover geçişine sahiptir.
Hover sekmesiyle başlayacağız ve alt çizginin SATIN AL metninin tüm genişliğini kaplaması için Altı Çizili Hover Genişliğini %100 olarak ayarlayacağız. Hatta vurgulu animasyonu etkinleştirmek için Vurgulu Altı Çizili Çizmeyi Etkinleştir’i Evet olarak ayarlayacağız.
Altı Çizili Öteleme ve Altı Çizili Kalınlığı denetimleri, hem Normal hem de Fareyle Üzerine Gelme görünümü için geçerlidir. Ofset, satırı metinden kaydırır (6 piksel olarak ayarlayacağız), Kalınlık ise kalınlığını belirler (2 piksel ile gittik) Alt Çizgi Hizalaması istediğiniz herhangi bir değere ayarlanabilir. Fakat yalnızca alt çizginin olduğundan daha geniş veya daha dar olması önemlidir. düğme metni.
Konu Özeti
Gördüğünüz gibi, WordPress Addons eklentisinin premium sürümüyle, web sitenizde dakikalar içinde basit ve etkili – veya karmaşık ve göz alıcı – bir karşılaştırma tablosuna sahip olabilirsiniz. Ve neredeyse sınırsız seçenek yelpazesiyle, onu istediğiniz gibi kolaylıkla şekillendirebilirsiniz.