Bir bilgi sunma yöntemi olarak listeler ve infografikler arasında bir yere yerleştirilmiş olan veri tabloları, birçok bilgiyi basit, gezilebilir ve görsel olarak düzenli bir şekilde paylaşmak istediğinizde inanılmaz derecede faydalıdır. Tablolar sayesinde, onu okuyan herkesin fazla çaba harcamadan aradığını bulmasını sağlayabilirsiniz.
Bununla birlikte tabloların oluşturulması ve bilgilerle doldurulması zor olabilir ve WordPress’te tablolar oluşturmak yorucu bir görev olabilir. Herkesin harika tablolar oluşturmasını kolaylaştırmak için WordPress Addons for Elementor eklentimize bir veri tablosu eklentisi ekledik. Eklenti, Elementor’un yeteneklerini genişleten ve size zaman kazandıran yüzün üzerinde pencere öğesi içerir.
Gutenberg editörünü de kullanabilir ve web sitenizin herhangi bir yerine veri tabloları ekleyebilirsiniz. Gutenberg için WordPress Blocks eklentimiz size bu konuda yardımcı olacaktır. 48 ücretsiz blok ve 33 premium blok ile eklenti, web siteniz için heyecan verici öğeler oluşturmanın birçok yeni yolunu sunar. Eklenti, mükemmel sayfayı veya siteyi oluşturmak için sekmelerden karusellere ve galerilerden arama bloklarına kadar birçok seçenek sunar ve veri tabloları için de bir seçeneği vardır.
Bu makalede, eklentilerimizden biraz yardım alarak Elementor ve Gutenberg kullanarak web siteniz için nasıl güzel bir tablo oluşturacağınızı göstereceğiz.
Elementor için WordPress Eklentilerini Kullanarak Veri Tablosu Ekleme
Widget sayfamızdan veri tablosunu oluşturmaya başlamak için, öncelikle WordPress Addons for Elementor eklentisinin kurulu ve etkinleştirildiğinden emin olmanız gerekir. Aynı şey Elementor için de geçerli. Eklentileri yüklemek için web sitenizin arka ucundan Eklentiler > Yeni Ekle’ye gidin, eklentileri arayın ve ardından yükleyip etkinleştirin. Data Tables eklentisini kullanabilmek için WordPress Addons for Elementor’ın premium sürümüne ihtiyacınız olacağını unutmayın. Bu videodaki öğreticinin tamamını da takip edebilirsiniz.
İşiniz bittiğinde, yeni bir sayfa veya gönderi açabilirsiniz. Widget’ı eklemeden önce gerçekleştirdiğimiz ilk adım, arka plan görüntüsünü ve bazı metinleri ayarlayarak çalışma alanını hazırlamaktır.
Görüntüyü ayarlamak için Bölümü Düzenle seçeneklerini kullandık. Stil altında, Klasik arka plan türünü seçtik ve görüntüyü ekledik. Daha sonra Konum için Merkez Merkezi, Bağlantı için Sabit, Tekrar için Tekrarsız ve Boyut için Kapak’ı seçtik.
Oradan, sadece görüntü arka planını eklediğimiz bölüme bir sütun eklemek ve ona biraz metin eklemek meselesi – bu, Rutin Elementor işidir. Hazır olduğunuzda, sol taraftaki menüde Veri Tablosu küçük aracını arayabilir ve ardından onu bölüme eklemek için metninizin altına sürüklemeniz yeterlidir.
Eklenen Data Table ile tablonun içeriğini belirlemeye geçebiliriz. Şimdi orantısız görünüyorsa endişelenmeyin – bunu hemen düzelteceğiz.
İçeriğin Ayarlanması
İçerik > Genel altındaki seçeneklere baktığınızda, gördüğünüz ilk birkaç seçenek sayfada kaç satırın görünmesini istediğinizi, ayrıca satır sayacı alanını etkinleştirmek isteyip istemediğinizi ve varsa ne kadar geniş olmasını istediğinizi belirler. etkinleştirirsiniz. Burada sayfa başına satır sayısını altı olarak belirledik ve satır sayacı eklememeye karar verdik.
Sırada başlık seçenekleri var. Tablonun ilk satırında başlıklar yer alır. Numaralarını değiştirerek – Başlıklar altına daha fazla Öğe ekleyerek, sütun sayısını değiştirirsiniz ve ayrıca genişliklerini de değiştirebilirsiniz. Bir sütun daha ekledik ve sütun genişliğini hepsi için 20 olarak ayarladık. Sütun Başlığı alanının altına da başlığın metnini ekleyebilirsiniz.
Tablonun bu sayfasının geri kalanı, Öğeler bölümünün altındaki öğeler eklenerek doldurulur. Bunlar soldan sağa ve yukarıdan aşağıya düzenlenmiştir, yani Öğeler bölümümüzde sahip olduğumuz ilk beş öğe, fotoğrafların bulunduğu tablo hücreleridir. Her öğe, içinde olmasını istediğiniz içerik türünü seçmenize izin verir – resim veya metin, ilgili seçenekler ve öğe için bir bağlantı.
İlk beşte, öğe türleri olarak Görüntü ve görüntü boyutu için Orijinal’i seçtik – resimlerimiz bu amaç için iyi bir boyuttaydı. Hatta tıklanabilir görünmesi için bağlantı alanına bir karma işareti ekledik.
Kalan öğeler metin hücreleridir, bu nedenle içerik türü olarak metni bıraktık. Metnimizi ve hash işaretini öğe bağlantısı alanına ekledik ve tabloyu doldurmak için yirmi iki öğe daha ekledik. Her öğeye aynı metin ve hash işareti ekleme sürecini uyguladık.
Sayfa başına satır sayısını altı olarak belirlediğimiz için, tabloya hücre olarak eklediğimiz daha fazla öğe otomatik olarak bir sonraki sayfaya aktarılacaktır. Biz de öyle yaptık – başlıklar aynı kaldı ve bir sayfalandırma sayacı da ortaya çıktı.
Bununla birlikte tabloyu stillendirmeye devam etmekte özgürdük – Stil sekmesinde yapabildiğimiz bir şey.
Tabloyu Şekillendirmek
Widget’larda bulunan stil seçenekleri dört bölüme ayrılmıştır – genel Stil, Ana Başlık Stili, Hücre Stili ve Sayfalandırma Stili. En tepeden başlayacağız.
Genel Stil seçenekleri, hizalama, arka planı ayarlama, kenarlıklar ve hücre dolgusu gibi şeyleri içerir. Seçtiğimiz ilk seçenek Tablo Hizalamasını Merkez olarak ayarlamaktı. Bunu takiben, tabloya bir arka plan eklemeyi seçtik. Bunun için bir görüntü seçmek yerine – ki bu bir seçenekti – arka plan için beyaz rengi kullanmaya karar verdik. Arka planın tüm tablo için tek tip olması için başlıklar satırı veya ilk sütun için farklı bir renk seçmedik.
Kenarlık seçeneğine gelince, buna çok fazla bir şey eklemek istemedik. Fakat seçenekler size izin verdiği ölçüde renkleri, boyutları ve kenarlık türlerini değiştirmekte özgürsünüz. Kenarlık stilini Katı, genişliği 1 piksel ve rengi biraz daha koyu bir gri tonu olarak ayarladık. Hatta başlık hücreleri dolgusunu üst ve alt için 29’a ve hücre dolgusunu üst ve alt için 17’ye değiştirdik.
Bununla, ana başlık satırının veya başlıkların yanı sıra hücre stil seçeneklerinin stilini değiştirmeye hazırdık.
Başlıklar için stil seçenekleri basittir. Başlık etiketini, başlık rengini ve başlık tipografi ayarlarını seçebilirsiniz. Başlık rengi olarak siyahı seçtik ve tipografi ayarlarında birkaç şeyi düzenledik. Yazı tipi boyutunu 17 ve ağırlığı 500 olarak ayarladık. Başlıktaki metin için zaten büyük harf kullandık. Fakat kullanmasaydık, burada Dönüştür altında ayarlardık.
Stili, dekorasyonu veya satır yüksekliğini, harf aralığını veya kelime aralığı değerlerini değiştirmek istemediğimize karar verdik.
Hücre Stili seçenekleri altında, hücre metni ve bağlantılı metin için renk ve tipografi seçeneklerini ve ayrıca altı çizili bağlantı seçeneğini ayarlayabileceksiniz. Hücre metnine düz siyah bir renk verdik ve ağırlığını 500 olarak belirledik. Alt çizgili metin bağlantısını da Yok olarak ayarladık.
Bu noktada bıraktığımız son stil seçenekleri grubu, Sayfalandırma Stili altındakilerdir.
Pagination Style’da epeyce seçenek var. Sayıları ve okları şekillendirmek için ayrı seçeneklerin yanı sıra öğelerin yükseklikleri, genişlikleri ve aralarındaki mesafeler için seçeneklere sahip olacaksınız. Dolayısıyla, sayfalandırmanın hizalamasını değiştirmesek de, boyutu 16 piksele ve ağırlığı 500’e ayarlamak için sayfalandırma tipografisine girdik.
Sayfalandırma ayrıca etkin olmayan – normal – ve etkin olan veya üzerine gelinen öğeler için seçeneklere sahiptir. #c4c4c4 onaltılı kodunu kullanarak normal öğelere gri bir renk verdik ve arka plan rengi olarak beyazı seçtik. Aktif altında, öğelerin rengini düz siyah olarak değiştirdik.
Daha sonra bir simge kitaplığından seçim yapabileceğiniz veya kendi SVG dosyanızı yükleyebileceğiniz sayfalandırma oku seçenekleri vardır. Biz de öyle yaptık ve sayfalandırma oklarımızı değiştirdik. Ok boyutunu da 23px olarak ayarladık.
Son seçenek grubu, sayfalandırma öğelerinin şeklini, genişliklerini, yüksekliklerini, aralarındaki boşlukları ve üst kenar boşluğunu değiştirmenize olanak tanır. Öğelerin kare görünümünü korumak için sınır yarıçapını değiştirmedik. Fakat genişliği 39 piksel, yüksekliği 29 piksel, aradaki boşluğu 7 piksel ve üst kenar boşluğunu 17 piksel olarak değiştirdik. Ve böylece soframız tamamlanmış oldu.
Elbette, web sitenize ve temasına mükemmel şekilde uyan bir tablo oluşturmak için seçenekler ve değerlerle oynamakta özgürsünüz.
Gutenberg için WordPress Bloklarını Kullanarak Veri Tablosunu Ekleme
Gutenberg editörünü kullanarak bir tablo oluşturmanız gerekirse, istediğiniz Veri Tablosu bloğudur. Premium bloklardan biridir, bu yüzden onu almak için eklentinin premium sürümüne ihtiyacınız olacak. Bunu yaptıktan sonra, başlamak için tek yapmanız gereken editörde bir sayfa veya gönderi açmak, bloğu eklemek ve bloğun sayfasında sahip olduğumuz örneklerden birini nasıl oluşturduğumuzu görmek için bu öğreticiyi takip etmektir.
Bloğun İçeriğini Ayarlama
Bloğu eklediğinizde, varsayılan olarak başlıklar satırı, dört sütun ve iki sayfa hariç her sayfada bir satır olduğunu fark edeceksiniz. Yapmamız gereken ilk şey, yeterli satır ve sütunumuz olduğundan emin olmaktır.
Ayar Kenar Çubuğunda görebileceğiniz İçerik seçenekleri, tabloda sayfa başına olmasını istediğiniz satır sayısını ayarlamanıza ve satır sayacını açıp kapatmanıza olanak tanır. Satır sayacını istemedik ama daha fazla satıra ihtiyacımız vardı, bu yüzden sayılarını üç olarak ayarladık. Yine, başlıklar satırı sayılmaz.
Tabloya yeni sütunlar ve alanlar eklemek için blok menüsünde “+” düğmesine tıklamanız gerekir. Bir başlık, metin ve resim öğesi ekleyeceksiniz. Bir başlık eklemek bir sütun ekler ve metin ve resim öğeleri eklemek farklı alanlar ekler.
Başlık ekleyerek yeni bir sütun ekledik. Final masasında 40 öğe var, bu yüzden epeyce eklememiz gerekiyordu. İlk öğe ve sonraki her beşinci öğe, görüntü öğeleriydi. Gerisi metin öğeleriydi. Yeni sayfalar otomatik olarak oluşturulur, böylece üç satırdan oluşan iki sayfa ve ikiden oluşan son üçüncü sayfayla sonuçlandık.
Bir sonraki aşama, her öğe için içeriği ayrı ayrı eklemektir. Bir öğeye çift tıklamak, Ayarlar Kenar Çubuğunda ve bir öğe seçtiğinizde görünen menüde ek seçenekler getirecektir. Sütunlara çift tıklamak, İçerik seçeneğinde tüm sütunun genişliğini ayarlamanıza ve alandaki metni değiştirmenize olanak tanır. Metin ve resim öğelerine çift tıklamak, Ayarlar Kenar Çubuğunda öğenin türünü değiştirmenize izin verirken içeriklerini değiştirmenize olanak tanır. Öğe eklerken bir hata yaparsanız bu kullanışlı olabilir.
Tablomuzdaki sütunların boyutunu değiştirmek için sütun genişliği ayarını kullandık. Soldan sağa eklediğimiz bedenler 12.7, 17.55, 27.05, 27.05 ve 15.65 idi. Başlıklar satırındaki alanların içeriğini de değiştirdik. Son olarak tüm fotoğrafları ve metni diğer öğelere ekledik.
40 öğenin tümü için içeriği ayarladıktan sonra, bunları şekillendirmeye geçtik. Elbette, daha az veya daha fazla öğeye sahip olabilirsiniz – bu tamamen size kalmış.
Bloğu Şekillendirmek
Ayar Kenar Çubuğunda Stil > Genel’e gittikten sonra, tablo düzenini sabit veya otomatik olarak ayarlama, tablo hizalamasını seçme ve tüm bloğun minimum genişliğini ayarlama seçeneklerini göreceksiniz.
Arka plan için klasik veya degrade arka planı seçebilirsiniz. Seçim yaptığınızda, o arka plan tipine özel seçeneklere, yani gradyan arka planı seçerseniz iki renk ve gradyan tipine veya klasik seçerseniz tek bir renk veya görüntüye erişebilirsiniz. Hatta başlıklar satırı ve ilk sütun için belirli renkleri seçebilir, kenarlık stilini ve tipini ve hücre dolgusunu ayarlayabilirsiniz.
Klasik arka planı seçtiğimiz ve resim kullanmak istemediğimiz için arka plan rengini #ffffff olarak ayarladık. Daha sonra düz bir kenarlık türü seçtik, genişliğini 1 ve rengini #dbdbdb olarak ayarladık. Son olarak başlık hücrelerinin hem üstüne hem de altına 29px dolgu ekledik. Kalan hücreler için eklediğimiz dolgu değerleri soldan sağa 36px, 30px, 36px ve 30px idi.
Bir sonraki stil seçenekleri bloğu, Stil > Ana Başlık altındadır. Başlık için etiket, renk ve tipografi seçeneklerini ayarlayabilirsiniz. Tipografi seçenekleri altında, Stil > Hücre’ye geçmeden önce yazı tipi boyutunu 17 piksel ve yazı tipi ağırlığını orta 500 olarak değiştirdik.
Hücre stili seçenekleri ile normal hücre metni ve bağlantılar için kullandığınız hücre metni için renk ve tipografi seçeneklerini ayarlayabilirsiniz. Yapabilirsiniz…