Divi'de Yatay Kaydırma ile Duyarlı Tablo Nasıl Oluşturulur

Duyarlı bir tablo oluşturmak, özellikle çok sayıda sütun içeren bir tablonuz varsa zor olabilir. Bu sorunu çözmenin harika bir yolu, tabloya yatay kaydırma özelliği eklemektir. Yatay kaydırmalı bir tablo iki ana sorunu çözer. İlk olarak, tasarımcının tablo içeriği için gerekli olan boşluğu korumasını sağlar (gerçekten dar sütunlar, içeriğin çok fazla sıkışmasına neden olur). İkincisi, kullanıcının mobil cihazlarda okunması kolay tablo içeriğini görüntülemesini sağlar.

Bu eğitimde, yatay kaydırma ile tamamen özel bir tablo oluşturmak için Divi'yi nasıl kullanacağınızı göstereceğiz. Tablo kapsayıcısını taşan sütunlara yatay kaydırma işlevini nasıl ekleyeceğinizi göstereceğiz. Ayrıca, UX'i artırmak için tabloya bazı yatay kaydırma düğmeleri bile ekleyeceğiz. Bütün bunlar bir eklenti olmadan!

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız yatay kaydırmalı duyarlı tabloya hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Yatay Kaydırma ile Duyarlı Bir Tablo Oluşturma

Bölüm 1: Tablo Sütunlarını Oluşturma

Bu tablo tasarımı için satırları kullanarak tablo sütunlarımızı oluşturacağız. Bunu yapmak için, satırları sütunlar gibi yatay olarak hizalamak için flex özelliğini (özel CSS) kullanacağız.

Bölüm Ayarlarını Güncelle

Bir satır eklemeden önce, varsayılan normal bölümün bölüm ayarlarını açın ve Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

display:flex;
overflow-y:scroll !important;

Bu, bölümün yatay taşmasını kaydırma işlevine sahip olmaya zorlayacak ve bize satırlarımızı dikey yerine yatay olarak düzenlemek için gereken esnek özelliği verecektir.

Satır ekle

Artık CSS bölümü yerinde olduğuna göre, bölüm içinde tek sütunlu bir satır oluşturun.

Satır Ayarları

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100

Bu, tablo öğelerimiz için ekleyeceğimiz metin modülleri arasında tablo sütunlarımızda fazladan boşluk kalmamasını sağlayacaktır.

Ardından, satıra aşağıdaki gibi bir sağ kenarlık verin:

• Sağ Kenar Genişliği: 1px
• Sağ Kenar Rengi: #cccccc

Ardından dolguyu güncelleyin:

• Dolgu: 0 piksel üst, 0 piksel alt

Gelişmiş sekmesi altında, satıra aşağıdaki gibi özel bir CSS Sınıfı verin:

• CSS Sınıfı: et-kaydırma-tablo-sütun

Daha sonra özel kod için buna ihtiyacımız olacak.

Metin Modülleriyle Tablo Öğeleri Oluşturma

Her satırda (veya tablo sütununda) tablo öğeleri oluşturmak için metin modüllerini kullanacağız.

Metin Modülü Ekle

Metin içeriği

Ardından, metin modülünün gövde içeriğine “Tablo Öğesi” metnini ekleyin.

Metin Tasarımı

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Metin Hizalama: orta
• Yükseklik: 80 piksel

• Sağ Kenar Genişliği: 1px
• Alt Kenarlık Rengi: #cccccc

Bu kenarlık, satırın sağ kenarlığıyla eşleşecektir.

Metin CSS'si

Modül içindeki metnin dikey ve yatay olarak ortalandığından emin olmak için, gelişmiş sekmesi altındaki Ana Öğeye aşağıdaki CSS'yi ekleyin:

display:flex;
align-items:center;
justify-content: center;

Daha Fazla Tablo Öğesi için Yinelenen Metin Modülü

Artık ilk tablo öğemiz oluşturulduğuna göre, satır içinde ek tablo öğeleri oluşturmak için metin modülünü (gerektiği kadar çok) çoğaltın.

Tablo Sütununun Başlığını Oluşturma

En üstteki metin modülünü tablo sütununun başlığına çevirmemiz gerekiyor. Bunu yapmak için, üst metin modülünün ayarlarını açın, Katmanlar görünümündeki etiketi “Başlık” olarak güncelleyin ve gövde içeriğiyle birlikte “Başlık” metnini ekleyin.

Ardından arka plan rengini güncelleyin.

• Arka plan: #333333

Ve metnin tasarımını aşağıdaki gibi güncelleyin:

• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Yazı Tipi Stili: TT
• Metin Metin Rengi: #ffffff

Daha Fazla Tablo Sütunu için Satırı Çoğalt

Artık ilk satır tamamlandığında, tablo için gerektiği kadar tablo sütunu oluşturmak için satırı çoğaltabiliriz. Bu tasarım için, toplam dokuz satır oluşturmak için satırı sekiz kez çoğaltacağız.

Bölüm 2: Dikey Başlıklı Yapışkan Tablo Sütununun Tasarlanması

En soldaki sıra (veya ilk sıra), tablomuz için dikey başlıklar olarak hizmet edecektir. İlk olarak, satır arka planını ve metin modüllerinin her birini, her sütunun üstündeki başlıklarla aynı tasarıma sahip olacak şekilde güncellememiz gerekiyor. Ardından, kullanıcı gizli tablo sütunlarını görüntülemek için yatay olarak kaydırırken yerinde kalması için tüm satırı yapışkan hale getireceğiz.

Satır Arka Planını Güncelle

Bunu yapmak için ilk satırın ayarlarını açın ve arka plan rengini güncelleyin:

• Arka Plan Rengi: #333333

Metin Modüllerini Güncelle

Ardından, Başlığı içeren üst metin modülünün ayarlarını açın. Metin seçeneği grubuna sağ tıklayın ve Metin Stillerini Genişlet'i seçin. Stilleri Genişlet açılır penceresinde, metnin stillerini Bu Sütun boyunca Tüm Metinlere genişletmeyi seçin. Ardından Genişlet düğmesini tıklayın.

Ardından satır içindeki tüm metin modüllerini çoklu seçin (ctrl (veya cmd) tuşunu basılı tutun ve her birine tıklayın) ve gövde içeriğini “Başlık” metni ile güncelleyin.

Logo Ekle

Bu sütunda en üstteki başlığa ihtiyacımız olmadığı için tabloya bir logo ekleyeceğiz.

İlk satırdaki en üstteki metin modülünün ayarlarını açın.

Ardından gövde metnini silin.

Ardından logoyu arka plan görüntüsü olarak ekleyin (yaklaşık 40 piksele 40 piksel olduğundan emin olun). Arka plan resmi boyutunun “Gerçek Boyut” olarak ayarlandığından emin olun.

Dikey Başlıklar Satırını Yapışkan Yapmak

Satırı yapışkan hale getirmek için Ana Öğeye aşağıdaki Özel CSS'yi ekleyin:

min-width: 150px;
position: -webkit-sticky !important;
position: sticky !important;
left: 0;

(Yapışkan özelliğini kullanarak gösterilecek kod hatalarından herhangi birini yok sayabilirsiniz.)

Yapışkan satırın diğer satırların üzerinde göründüğünden emin olmak için Z İndeksini güncelleyin:

• Z İndeksi: 13

Bölüm 3: Tablo Bölümünün Güncellenmesi

Artık tablo öğelerinin hepsi yerinde olduğuna göre, bölümü (tablo kabı) belirli bir boyut ve taşma ile güncelleyebiliriz.

Bölüm ayarlarını açın ve bir arka plan rengi ekleyin:

• Arka Plan Rengi: #ffeaef

Ardından boyutu ve aralığı aşağıdaki gibi güncelleyin:

• Genişlik: %100
• Maksimum Genişlik: 900 piksel
• Marj: 10vh üst
• Dolgu: 0 piksel üst, 0 piksel alt

Ardından aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: et-kaydırma tablosu

Ve taşmayı güncelleyin:

• Yatay Taşma: Kaydır
• Dikey Taşma: Gizli

(Not: Kaydırma işlevinin görsel oluşturucu üzerinde de etkin olması için bölüme özel CSS olarak zaten "taşma: kaydırma" ekledik.)

Bölüm 4: Yatay Kaydırma Düğmelerini Ekleme

Yatay kaydırma işlevi masaüstünde kolayca görülebildiğinden, daha iyi UX için yatay kaydırma düğmeleri ekleyeceğiz.

Bölüm Ekle

Bunu yapmak için yeni bir normal bölüm oluşturun.

Bölüm ayarlarını açın ve varsayılan dolguyu çıkarın:

• Dolgu: 0 piksel üst, 0 piksel alt

Satır ekle

Bölüme tek sütunlu bir satır verin.

Ve satır ayarlarını aşağıdaki gibi güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: 900 piksel
• Dolgu: 10 piksel üst, 10 piksel alt, 10 piksel sağ

Sol Kaydırma Düğmesini Oluşturun

Sol kaydırma düğmesini oluşturmak için sütuna/satıra bir tanıtım yazısı modülü ekleyin.

Varsayılan başlığı ve gövde içeriğini çıkarın ve bir sol ok simgesi ekleyin.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Simge Rengi: #333333
• Görüntü/Simge Hizalama: orta
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 40px
• İçerik Genişliği: %100
• Genişlik: 50 piksel

Ardından tanıtım yazısına bir CSS Sınıfı verin:

• CSS Sınıfı: et-kaydırma-sola

Bu, daha sonra kodumuzla birlikte bulanıklığa/düğmeye tıklamada kaydırma işlevini eklemek için gereklidir.

Sağ Kaydırma Düğmesini Oluşturun

Sağ kaydırma düğmesini oluşturmak için tanıtıcı metni çoğaltın ve simgeyi sağ okla güncelleyin.

Ardından CSS Sınıfını güncelleyin:

• CSS Sınıfı: et-scroll-sağa

Düğmeyi yatay olarak hizalamak için sütun ayarını açın ve aşağıdaki özel CSS'yi ekleyin:

display:flex;
justify-content:flex-end;

Bölüm 5: Özel Kodu Ekleme

Bu öğreticinin son bölümünde, satırlar (aslında tablo sütunlarımızdır) için bir minimum genişlik ayarlamak için gereken CSS'yi ve düğmelere kaydırma işlevini eklemek için gereken JS kodunu eklememiz gerekiyor.

Kodu eklemek için ikinci tanıtım yazısının altına bir kod modülü ekleyin.

Kod kutusuna, kodu gerekli stil etiketlerine sardığınızdan emin olarak aşağıdaki CSS'yi yapıştırın.

.et-scroll-left:hover, .et-scroll-right:hover{
cursor:pointer;
}
.et-scroll-table-column {
min-width: 150px;
}

@media all and (max-width: 980px) {
.et-scroll-table::-webkit-scrollbar {
display: none;
}
.et-scroll-table {
-webkit-overflow-scrolling: touch; 
-ms-overflow-style: -ms-autohiding-scrollbar; 
}
}

CSS kodunun altına, kodu gerekli komut dosyası etiketleriyle sardığınızdan emin olarak aşağıdaki jQuery'yi yapıştırın.

(function($) {
$(document).ready(function(){
var $scrollTable = $(".et-scroll-table");
var $rightButton = $(".et-scroll-right");
var $leftButton = $(".et-scroll-left");
var singleColumnWidth = $(".et-scroll-table-column").width();
var scrollByColumnNumber = (singleColumnWidth + 1) * 2;

$rightButton.click(function () {
$scrollTable.animate({scrollLeft: "+=" + scrollByColumnNumber}, 300);
});
$leftButton.click(function () {
$scrollTable.animate({scrollLeft: "-=" + scrollByColumnNumber}, 300);
});
});
})( jQuery );

Sütun Genişliğini Güncelleme

Tablo sütunlarının her birinin minimum genişliğini güncellemek istiyorsanız, minimum genişliğin değerini CSS'de değiştirebilirsiniz.

Scroll'daki Sütun Sayısını Güncelleme

Şu anda, düğmelere tıklamak, iki sütun genişliğine eşit bir mesafeyi yatay olarak (sola veya sağa) kaydıracaktır. Kaydırmadaki sütun sayısını değiştirmek için, scrollByColumnNumber değişkeninin değerindeki en sağdaki sayıyı (şu anda 2 sayısı) güncelleyin .

Alternatif Sütun Renkleri Ekleme

Şu anda bölüm arka plan rengi, tüm tablo sütunlarının (veya satırlarının) rengini belirliyor. Bu sütunlar için alternatif renkler oluşturmak istiyorsanız, diğer tüm satırları seçmek için çoklu seçimi kullanın ve her birine beyaz bir arka plan rengi ekleyin.

Son sonuç

Şimdi nihai sonucu kontrol edin!

İşte masanın masaüstündeki son tasarımı.

Ve işte masaüstü ve mobil cihazlarda yatay kaydırma işlevi.

Son düşünceler

Web tasarım dünyasında ne kadar ilerlesek de, masaların her zaman bir yeri var gibi görünüyor. İçeriği, kullanıcıların anlayacağı şekilde düzenlemek için değerli bir çözüm sunmaya devam ediyorlar. Yatay kaydırmalı bu tablo, çok çeşitli kullanım durumları için kullanışlı olmalıdır. Ve belki de en iyi yanı, tablo içeriğini güncelleyebilmeniz (Divi'nin yerleşik satır içi düzenleyicisi aracılığıyla) ve görsel oluşturucuyu kullanarak tabloyu sayısız yaratıcı yolla biçimlendirebilirsiniz.

WordPress'te duyarlı tablolar oluşturma hakkında daha fazla bilgi için WordPress'te Duyarlı Tablolar Nasıl Oluşturulur başlıklı yazımıza göz atın.

Yorumlarda sizden haber bekliyorum.

Şerefe!