Divi ile Mobil Cihazlar için Sonsuz Yatay Geçişli Kartlar Oluşturma

İçeriği kaydırmak, neredeyse herkesin günlük olarak yaptığı bir şeydir. Temelde ikinci doğa haline geldi, bu yüzden onu web sitenize eklemenin genel kullanıcı deneyimini iyileştirmeye yardımcı olabileceğini söylemeye gerek yok. Bu gönderide, dokunmanın söz konusu olduğu, çoğunlukla mobil ve tablet cihazlara odaklanan sonsuz yatay kaydırmalı kartların nasıl oluşturulacağını göstereceğiz. Bu, mobil öncelikli bir eğitim olmasına rağmen, sonuç masaüstünde de harika sonuç verecektir. İnsanlar dahil edilecek kaydırma çubuğunu kullanabilir veya dokunmatik yüzeylerini kullanarak sola ve sağa 'kaydırabilir'.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

Örnek 1: Tek Sütunlu Satır

masaüstü

Mobil

Örnek 2: İki Sütunlu Satır + 'Kaydırma Sütunu'nda Çoklu Modüller

masaüstü

Mobil

Yaklaşmak

• Bu güzel efekti yaratmak için, sadece birkaç CSS kod satırı kullanarak tüm dikey sütunu yatay kaydırma/kaydırma ızgara mekanizmasına dönüştürmemiz gerekecek.
• Bu mekanizma için dikey bir sütun kullanmak (ve onu yatay bir ızgaraya dönüştürmek), istediğiniz kadar kaydırma kartı eklemenize izin verir, kaç sütun olacağını belirleyebilirsiniz.
• Diğer bir deyişle; modülleri aşağıya doğru ekleyeceksiniz ve kaydırma/kaydırma mekanizması hem yatay bir sütuna yerleştirecek
• İlk örnek için tek sütunlu bir satır kullanacağız
• Bu, kaydırma mekanizmasının ekranın tüm genişliğini kaplamasını sağlar.
• İkinci örnek ise, iki sütundan yalnızca birini kaydırma/kaydırma mekanizmasına dönüştürür ve diğer sütunu statik durumda bırakır.
• Ayrıca, kaydırma/kaydırma mekanizmasının bir 'sütununa' birden çok modülü nasıl ekleyeceğinizi de göstereceğiz.
• Yaklaşımı anladığınızda, istediğiniz herhangi bir tasarımı tam anlamıyla oluşturabilecek ve yukarıdaki GIF'lerde görebileceğiniz kaydırma/kaydırma mekanizmasının bir parçası olmasını sağlayabilirsiniz.
• Kullanacağımız tüm akıcı arka plan resimlerini 'Divi için 10 ÜCRETSİZ Akışkan Bölümü Arka Plan Resmini İndir' gönderisine giderek bulabilirsiniz.

Youtube Kanalımıza Abone Olun

Örnek 1'i Yeniden Oluştur

Yeni Bölüm Ekle

İlk örneği oluşturmaya başlayalım! Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyin.

Yeni Satır Ekle

Sütun Yapısı

Ardından, bir sütunlu bir satır ekleyin. Bu sütunun tamamını bir kaydırma/kaydırma mekanizmasına dönüştüreceğiz.

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarına gidin. Burada bölüm, satır ve sütun arasındaki tüm boşluğu kaldıracağız. Başka bir deyişle, sütun ekranın tüm genişliğini kaplayacaktır.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Sütun CSS Kodu

Daha önce de belirtildiği gibi, sütunun kendisini bir kaydırma/kaydırma ızgara mekanizmasına dönüştürüyoruz. Bunu yapmak için, aşağıda bulabileceğiniz üç satırlık özel CSS koduna ihtiyacımız olacak. Devam edin ve bunları satırın gelişmiş sekmesindeki Sütun Ana Öğesine ekleyin.

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 70%);

CSS kodunun ilk satırı kaydırmayı/kaydırmayı sağlar. İkinci satır, sütunu yatay bir ızgaraya dönüştürür. Ve CSS kodunun üçüncü satırı ızgarayı tanımlar. Temel olarak, her biri %70 genişliğe sahip olacak 6 sütun istediğimizi söylüyoruz. Kaydırma/kaydırma mekanizmasında görünmesini istediğiniz kaydırma kartlarının sayısına bağlı olarak, değerleri değiştirmeniz gerekecektir. Örneğin, 10 farklı kaydırma kartının mekanizmanın bir parçası olmasını istediğinizi ve her sütunun genişliğini %90'a çıkarmak istediğinizi varsayalım, bunun yerine aşağıdaki CSS kodu satırını kullanmanız gerekecek:

grid-template-columns: repeat(10, 90%);

Sütun 1'e CTA Modülü Ekle

İçerik Ekle

Satır ayarlarını değiştirmeyi bitirdikten sonra devam edin ve sütuna bir CTA Modülü ekleyin. Seçtiğiniz bazı içeriği ekleyin.

Bağlantı

Düğmenin modülde görünmesi için bir düğme bağlantı URL'si de eklemeniz gerekir.

Degrade Arka Plan

Gradyan arka planı ekleyerek devam edin.

• Renk 1: #802bff
• Renk 2: #001519

Arka plan görüntüsü

Bu yazının yaklaşım bölümünde, bu yazıya giderek ücretsiz olarak indirebileceğiniz akıcı arka plan görsellerini kullanacağımızdan bahsetmiştik. Akışkan arka plan resimlerini indirdikten sonra, ' akışkan-style-2.png ' resim dosyasını arayın ve arka plan resmi sekmesine yükleyin. Arka plan görüntüsü ayarlarını uygun şekilde değiştirin:

• Arka Plan Resmi Boyutu: Sığdır
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Yer Paylaşımı

Metin Ayarları

Tasarım sekmesine gidin ve aşağıdaki metin ayarlarının geçerli olduğundan emin olun:

• Metin Yönü: Merkez
• Metin Rengi: Açık

Başlık Metni Ayarları

Sonraki başlık metni ayarlarını değiştirin.

• Başlık Yazı Tipi: Didact Gothic
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Boyutu: 1vw (Masaüstü), 2.5vw (Tablet), 4vw (Telefon)
• Başlık Satırı Yüksekliği: 1.9em

Gövde Metni Ayarları

Gövde metni ayarlarıyla birlikte.

• Gövde Yazı Tipi: Açık Sans
• Gövde Metni Boyutu: 0.6vw (Masaüstü), 1.3vw (Tablet), 2.5vw (Telefon)
• Gövde Çizgisi Yüksekliği: 2,6em (Masaüstü ve Tablet), 2,1em (Telefon)

Düğme Ayarları

Bu modülde de butonun görünümünü değiştiriyoruz.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 0.9vw (Masaüstü), 2.1vw (Tablet), 3.5vw (Telefon)
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi: #ffffff
• Düğme Kenar Genişliği: 10px
• Düğme Kenar Rengi: #ffffff
• Düğme Yazı Tipi: Didact Gothic

boyutlandırma

Boyutlandırma ayarlarında CTA Modülünün genişliğini biraz azaltmak da önemlidir. Bu, bu modül ile kaydırma/kaydırma mekanizmasında bir sonraki modül arasında her zaman bir boşluk olmasını sağlayacaktır.

• Genişlik: %95
• Modül Hizalaması: Merkez

aralık

Elbette her şeyin farklı ekran boyutlarında harika görünmesini istiyoruz. Bu nedenle, aralık ayarlarına çeşitli özel dolgu değerleri ekleyeceğiz.

• Üst Kenar Boşluğu: 50px
• Alt Kenar Boşluğu: 50px
• Üst Dolgu: 12vw (Masaüstü), 5vw (Tablet), 14vw (Telefon)
• Alt Dolgu: 12vw (Masaüstü), 5vw (Tablet), 14vw (Telefon)
• Sol Dolgu: 20vw (Masaüstü), 3vw (Tablet), 8vw (Telefon)
• Sağ Doldurma: 20vw (Masaüstü), 3vw (Tablet), 8vw (Telefon)

Sınır

Son olarak, modülün her bir köşesine '20px' ekliyoruz.

CTA Modülünü İstediğiniz Kadar Klonlayın

CTA Modülünü özelleştirmeyi tamamladığınızda, devam edip modülü istediğiniz kadar klonlayabilirsiniz.

Kopya 1'in Gradyan Arka Planını ve Arka Plan Resmini Değiştir

İlk kopyanın gradyan arka planını değiştirin.

• Renk 1: #7a010d
• Renk 2: #001519

Bunun yerine ' fluid-style-9.png ' arka plan resmini kullanın.

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Yer Paylaşımı

Kopya 2'nin Gradyan Arka Planını ve Arka Plan Resmini Değiştir

Sonraki ikinci kopyanın degrade arka planını değiştirin.

• Renk 1: #26ccff
• Renk 2: #001519

'fluid-style-10a.png' resim dosyasını arka plan resmi olarak yükleyin.

• Arka Plan Resmi Boyutu: Sığdır
• Arka Plan Resmi Konumu: Sol Üst
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Yer Paylaşımı

Yinelenen 3'ün Degrade Arka Planını ve Arka Plan Resmini Değiştir

Üçüncü kopyanın degrade arka planını değiştirin.

• Renk 1: #ff21b8
• Renk 2: #001519

' fluid-style-6.png ' arka plan resmini yükleyin .

• Arka Plan Resmi Boyutu: Sığdır
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Yer Paylaşımı

Yinelenen 4'ün Degrade Arka Planını ve Arka Plan Resmini Değiştir

Dördüncü kopyanın degrade arka planını değiştirin.

• Renk 1: #4400aa
• Renk 2: #001519

Arka plan resmi olarak ' fluid-style-4.png ' kullanın.

• Arka Plan Resmi Boyutu: Sığdır
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Yer Paylaşımı

Yinelenen 5'in Gradyan Arka Planını ve Arka Plan Resmini Değiştir

Son kopyanın degrade arka planını değiştirin.

• Renk 1: #ff2626
• Renk 2: #001519

Arka plan resmi olarak ' fluid-style-7.png ' kullanın.

• Arka Plan Resmi Boyutu: Sığdır
• Arka Plan Resmi Konumu: Sağ Üst
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Yer Paylaşımı

Sütun CSS'sini Modül Sayısına Göre Ayarlayın

Bundan daha önce bahsetmiştik ama yine de CSS kodunun sütununuzdaki modül sayısıyla eşleştiğinden emin olun.

Kaydırma Çubuğuna Şekil Verme

Sütuna CSS Sınıfı Ekle

Bu kaydırma/kaydırma ızgara mekanizmasıyla birlikte gelen kaydırma çubuğunu da biçimlendirebilirsiniz. Sütununuza aşağıdaki CSS sınıfını ekleyin:

• Sütun CSS Sınıfı: kaydırma çubuğu

Sayfa Ayarlarına Özel CSS Ekle

Ardından sayfa ayarlarını açın, gelişmiş sekmesine gidin ve aşağıdaki özel CSS kodunu ekleyin:

.swipe-scrollbar::-webkit-scrollbar {
width: 10px;
}
.swipe-scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.swipe-scrollbar::-webkit-scrollbar-thumb {
background: #333;
border-radius: 50px;
}

Örnek 2'yi Yeniden Oluştur

Önceki Bölümü Klonla

Bir sonraki örneğe geçelim! Bu gönderinin önceki bölümünde oluşturduğunuz bölümü klonlayın.

CTA Aralığı Ayarlarını Değiştir

Ardından, ilk CTA Modülünün boşluk ayarlarını değiştirin.

• Üst Kenar Boşluğu: 50px
• Alt Kenar Boşluğu: 50px
• Üst Dolgu: 5vw (Masaüstü ve Tablet), 14vw (Telefon)
• Alt Dolgu: 5vw (Masaüstü ve Tablet), 14vw (Telefon)
• Sol Dolgu: 4vw (Masaüstü), 3vw (Tablet), 8vw (Telefon)
• Sağ Doldurma: 4vw (Masaüstü), 3vw (Tablet), 8vw (Telefon)

Aralık Ayarlarını Sütundaki Tüm Modüllere Uzat

Bu yeni boşluk ayarlarını, sağ tıklayıp 'Aralık Stillerini Genişlet'e tıklayarak genişletin.

• Kime: Tüm Eylem Çağrısı
• Boyunca: Bu Sütun

Sütun Yapısını Değiştir

Satırın sütun yapısını değiştirerek devam edin.

Modülleri İkinci Sütuna Taşı

Ve modüllerin her birini bunun yerine ikinci sütuna yerleştirin.

CSS'yi İkinci Sütuna Taşı ve Değerleri Değiştir

Modülleri bir sütundan diğerine taşıdığımızdan, aynı şeyi CSS kodu için de yapmamız gerekecek. Bunun yerine CSS sınıfını 2. sütuna ekleyin.

• Sütun 2 CSS Sınıfı: kaydırma çubuğu

CSS kod satırlarını Sütun 2 Ana Öğesine yerleştirin. Ayrıca her sütunun genişliğini '%80' olarak değiştiriyoruz.

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 80%);

Sütun 1'e Başlık Metin Modülü Ekle

İçerik Ekle

İlk sütuna yeni bir Metin Modülü ekleyerek devam edin. Seçtiğiniz bazı H2 içeriğini ekleyin.

Başlık Metni Ayarları

Tasarım sekmesine gidin ve H2 metin ayarlarını değiştirin.

• Başlık 2 Yazı Tipi: Didact Gothic
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Boyutu: 2.5vw (Masaüstü), 5vw (Tablet), 6vw (Telefon)

aralık

Bazı özel üst kenar boşluğu da ekleyin.

• Üst Kenar Boşluğu: 100 piksel

Sütun 1'e Bölücü Modülü Ekle

görünürlük

Sütun 1'de ihtiyacımız olan bir sonraki modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Renk

Sonraki ayırıcı rengini değiştirin.

• Renk: #333333

boyutlandırma

Boyutlandırma ayarlarıyla birlikte.

• Bölücü Ağırlığı: 7px
• Yükseklik: 0 piksel
• Genişlik: %10
• Modül Hizalaması: Merkez

aralık

Farklı ekran boyutlarına bazı özel üst kenar boşlukları ekleyerek Bölücü Modülünü tamamlayın.

• Üst Marj: 1.8vw (Masaüstü), 2.5vw (Tablet), 4vw (Telefon)

Sütun 1'e Gövde Metni Modülü Ekle

İçerik Ekle

İlk sütunda ihtiyacımız olan sonraki ve son modül bir açıklama Metin Modülüdür. Seçtiğiniz bazı içeriği ekleyin.

Metin Ayarları

Tasarım sekmesindeki metin ayarlarını değiştirerek devam edin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 0.7vw (Masaüstü), 1.6vw (Tablet), 2.3vw (Telefon)

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Genişlik: %43 (Masaüstü), %68 (Tablet), %70 (Telefon)
• Modül Hizalaması: Merkez

aralık

Ve bazı özel üst ve alt kenar boşlukları ekleyin.

• Üst Kenar Boşluğu: 50px
• Alt Kenar Boşluğu: 50px

Tel Çerçeve Görünümüne geçin

Sütun 1'deki tüm modülleri değiştirmeyi bitirdikten sonra devam edin ve tel kafes görünümüne geçin.

2. Sütunun Başına Metin Modülü Ekle

Burada, ikinci sütunun üstüne bir Metin Modülü ekleyeceğiz. Eklediğimiz CSS kodu 6 farklı kolon oluşturmamıza yardımcı oldu. Bu, bu 6 sütunun her birinde iki farklı modülün görünmesini istiyorsanız, toplamda 12 modülünüz olması gerektiği anlamına gelir. Modül yerleşimi yatay olarak gerçekleşir, bu nedenle 2. sütundaki ilk 5 modül yan yana görünecektir. Ardından mekanizma başka bir sıraya geçecek ve kalan 6 modülü ekleyecektir.

İçerik Ekle

İkinci sütunun en üstüne eklediğiniz yeni Metin Modülünü açın ve istediğiniz içeriği ekleyin.

Metin Ayarları

Ardından tasarım sekmesine gidin ve metin ayarlarını değiştirin.

• Metin Yazı Tipi: Didact Gothic
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #000000
• Metin Boyutu: 1.1vw (Masaüstü), 3vw (Tablet), 3.5vw (Telefon)

Klon Metin Modülü 5x

Devam edin ve bu Metin Modülünü 5 kez kopyalayın. Şimdi 6 farklı Metin Modülünüz olacak, bu da sahip olduğumuz CTA modüllerinin sayısına eşittir. Bu nedenle, bunun yerine 10 CTA Modülü kullanıyorsanız, sütun yapısını dengelemek için 10 Metin Modülü (veya başka herhangi bir modül) eklemeniz gerekir.

Yinelenenlerin İçeriğini Değiştir

Yinelenenlerin her birinin içeriğini, altında görünecek olan CTA Modülü ile eşleşecek şekilde değiştirin ve işiniz bitti!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Örnek 1: Tek Sütunlu Satır

masaüstü

Mobil

Örnek 1: İki Sütunlu Satır + 'Kaydırma Sütunu'nda Çoklu Modüller

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi kullanarak sonsuz yatay kaydırma kartlarının nasıl oluşturulacağını gösterdik. Bu kaydırma kartlarını oluşturmak yalnızca web sitenize ekstra bir boyut eklemenize yardımcı olmakla kalmaz, aynı zamanda ziyaretçilerin web sitenizin sunduğu tüm içerikte sorunsuz bir şekilde gezinmesine yardımcı olur. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!