Divi ile mobil için sonsuz yatay sürtünme kartları yapmak
İçeriği kaydırmak, neredeyse herkesin her gün yaptığı bir şeydir. Bu temelde bir alışkanlık haline geldi, bu nedenle web sitenize eklemenin kullanıcı deneyimini bir bütün olarak geliştirmeye yardımcı olabileceğini söylemeye gerek yok. Bu yazıda, esas olarak mobil cihazlara ve tabletlere odaklanan sonsuz bir yatay sürtünme kartının nasıl yapılacağını göstereceğiz. Bu, mobil ilk bir eğitim olmasına rağmen, sonuçlar masaüstünde de iyi çalışacaktır. İnsanlar dahil edilecek kaydırma bıçağını kullanabilir veya dokunmatik yüzeylerini kullanarak sola ve sağa ‘kaydırabilir’.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, sonuçlara farklı bir ekran boyutunda bir göz atalım. Örnek 1: Bir masaüstü sütunu satır
Bu güzel efekti yaratmak için, tüm dikey kolonun tamamını yatay bir kesme/kaydırma mekanizması mekanizmasına değiştirmemiz gerekiyor.
Bu mekanizma için dikey bir kolon kullanmak (ve yatay bir kafeye dönüştürmek) istediğiniz kadar sürtünme kartı eklemenize izin verecektir, kaç sütunun olacağını belirleyebilirsiniz.
Diğer bir deyişle; Bir aşağı modül ekleyeceksiniz ve sürtünme/kaydırma mekanizması ucu yatay sütuna yerleştirecek
İlk örnek için, bir sütun bir satır kullanacağız
Bu, sürtünme mekanizmasının tüm ekran genişliğini almasına izin verecektir
İkinci örnek, diğer taraftan, sadece iki sütundan birini bir kesme/kaydırma mekanizmasına dönüştürür ve statik bir durumda başka bir sütun bırakır. Ayrıca, kesme/parşömenin ‘sütununa’ nasıl birkaç modül ekleyeceğinizi göstereceğiz. mekanizma
Yaklaşımı anladıktan sonra, istediğiniz her türlü tasarımı gerçekten yapabilir ve onu yukarıdaki GIF’de görebileceğiniz sürtünme/kaydırma mekanizmasının bir parçası haline getirebilirsiniz.
‘Divi için ücretsiz sıvı parçaların 10 arka plan görüntüsünü indir’ yazısını açarak kullanacağımız tüm sıvı arka plan görüntülerini bulabilirsiniz.
YouTube kanalımıza abone Olun Bir Örnek #1 Yeni Bir Bölüm Ekle İlk örneği yapmaya başlayalım! Üzerinde çalıştığınız sayfaya yeni bir parça ekleyin.
Sütun yapısının yeni bir satırı ekleyin, ardından bir sütunlu bir satır ekleyin. Tüm sütunu bir kesme/kaydırma mekanizmasına dönüştüreceğiz. Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarını açın. Burada, parçalar, satırlar ve sütunlar arasındaki tüm boşlukları sileceğiz. Başka bir deyişle, sütun tüm ekran genişliğini karşılayacaktır. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Sütun CSS kodu Daha önce belirtildiği gibi, kolonun kendisini bir kesme/kaydırma kafes mekanizmasına dönüştürüyoruz. Bunu yapmak için, aşağıda bulabileceğiniz üç özel CSS kod satırına ihtiyacımız var. Lütfen ve bunu Gelişmiş sekmesindeki sütunun ana öğelerine ekleyin. Overflow-X: kaydırma; Ekran: ızgara;
Izgara-TEMPLATE-sütunlar: Tekrar (6,%70); CSS kodunun ilk satırı rulo/sürtünme sağlar. İkinci sıra, sütunu yatay bir kafeye dönüştürür. Ve CSS kodunun üçüncü satırı ızgarayı tanımlar. Temel olarak, her biri%70 genişliğe sahip 6 sütun istediğimizi söylüyoruz. Sürtünme/kaydırma mekanizmasında görüntülemek istediğiniz sürtünme kartlarının sayısına bağlı olarak, değeri değiştirmeniz gerekir. Örneğin, 10 farklı sürtünme kartının mekanizmanın bir parçası olmasını istiyorsunuz ve her sütunun genişliğini%90’a çıkarmak istiyorsunuz, bunun yerine aşağıdaki CSS kod satırını kullanmalısınız: ızgara-tövbe sütunları: Tekrar (10, %90);
CTA modülünü sütun 1’e ekleyin, satır ayarlarını değiştirmeyi bitirdikten sonra içeriği ekleyin, devam edin ve CTA modülünü sütuna ekleyin. İstediğiniz bazı içerikleri ekleyin.
Bağlantınız, düğmenin modülde görünmesi için bir düğme bağlantısı URL’si eklemelidir. Gradyan arka plan, gradyanın arka planını ekleyerek devam edin. Renk 1: #802BFF Renk 2: #001519
Bu yazı yaklaşımındaki arka plan görüntüsü, bu gönderiyi açarak ücretsiz olarak indirebileceğiniz sıvı bir arka plan görüntüsü kullanacağımızdan bahsediyoruz. Sıvı arka plan görüntüsünü indirdikten sonra, ‘sıvı-style-2.png’ görüntü dosyasını arayın ve arka plan görüntüsü sekmesine yükleyin. Uygun arka plan görüntü ayarlarını değiştirin:
Arka plan görüntü boyutu: uygun Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Arka Plan Görüntü Karışımı: Geniş
Metin Ayarları Tasarım sekmesine geçin ve aşağıdaki metin ayarlarının geçerli olduğundan emin olun:
Metin Oryantasyonu: Orta Metin Rengi: Işık
Başlık Metin Ayarları Metin Ayarlarını Değiştir Sonraki Başlık. Yazı tipi Başlık: Didact Gothic
Ağır yazı tipi başlığı: kalın Boyut Metin Başlığı: 1VW (masaüstü), 2.5VW (tablet), 4VW (Telefon)
Hat yüksekliği başlığı: 1.9em
Gövde metni ayarları içerik metin ayarlarına denk gelir.
Gövde yazı tipi: açık sans
Gövde metni boyutu: 0.6vw (masaüstü), 1.3vw (tablet), 2.5vw (telefon) Vücut yüksekliği: 2.6em (masaüstü ve tablet), 2.1em (telefon)
Düğme ayarlarımız ayrıca bu modüldeki düğmenin görüntülenmesini de değiştirir.
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 0.9VW (masaüstü), 2.1vw (tablet), 3.5vw (cep telefonu) Metin Renk Düğmesi: #000000
Arka plan renk düğmesi: #ffffff
Sınır Sınır Genişliği: 10 piksel
Düğme Sınır Rengi: #ffffff
Yazı tipi düğmesi: Didact Gothic
Önemli bir yapıştırıcı, boyut ayarlarındaki CTA modülünün genişliğini hafifçe azaltmaktır. Bu, bu modül ile kesme/kaydırma mekanizmasında bir sonraki görünen herhangi bir modül arasında her zaman bir boşluk olmasını sağlayacaktır.
Genişlik:% 95
Modül hizalaması: merkez Tabii ki, her şeyin tüm farklı ekran boyutlarında iyi görünmesini istiyoruz. Bu yüzden uzay ayarlarına çeşitli özel dolgu değerleri ekleyeceğiz.
Üst kenar boşluğu: 50 piksel
Alt kenar boşluğu: 50 piksel Üst Pilding: 12VW (masaüstü), 5VW (tablet), 14VW (Telefon)
Dolgu Alt: 12VW (masaüstü), 5VW (tablet), 14VW (Telefon)
Sol dolgu: 20VW (masaüstü), 3VW (tablet), 8VW (Telefon)
Sağ dolgu: 20VW (masaüstü), 3VW (tablet), 8VW (Telefon)
Son olarak, ancak en az değil, modülün her köşesine ’20px’ ekliyoruz.
CTA modülünü CTA modülünü ayarlamayı bitirdikten sonra istediğiniz sıklıkta klonlamak, modülü istediğiniz kadar devam edebilir ve klonlayabilirsiniz.
Gradyan Arka Planı ve Çoğaltma Arka Planını Değiştir 1 Gradyan arka planını ilk kopyadan değiştirin. Renk 1: #7A010D Renk 2: #001519 Ve bunun yerine ‘sıvı tarzı-9png’ arka plan görüntüsü kullanın. Arka Plan Görüntü Boyutu: Kapak
Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok Arka Plan Görüntü Karışımı: Geniş
Gradyan ve yinelenen arka plan görüntüsünün arka planını değiştirin 2 Gradyanın arka planını bir sonraki ikinci kopyadan değiştirin.
Renk 1: #26ccff
Renk 2: #001519
Arka plan görüntüsü olarak ‘sıvı-style-10a.png’ görüntü dosyasını yükleyin. Arka plan görüntü boyutu: uygun
Arka plan görüntü konumu: sol üst
Arka plan görüntüsünün tekrarlanması: Tekrar yok Arka Plan Görüntü Karışımı: Geniş
Gradyan Arka Planı ve Çoğaltma Arka Planı Değiştir 3 Gradyan arka planını üçüncü kopyadan değiştirin.
Renk 1: #FF21B8
Renk 2: #001519
Bir arka plan görüntüsü ‘sıvı tarzı-6.png’ yükleyin. Arka plan görüntü boyutu: uygun
Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok Arka Plan Görüntü Karışımı: Geniş
Gradyan ve yinelenen arka plan görüntüsünün arka planını değiştirin 4 Degrade arka planını dördüncü kopyadan değiştirin.
Renk 1: #4400AA
Renk 2: #001519
Arka plan görüntüsü olarak ‘sıvı tarzı -4.png’ kullanın. Arka plan görüntü boyutu: uygun
Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Gradyan Arka Planı ve Çoğaltma Arka Plan görüntüsünü Değiştir 5 Derneğinin arka planını son kopyadan değiştirin.
Renk 1: #FF2626 Boyama 2: #001519
Arka plan görüntüsü olarak ‘sıvı tarzı-7.png’ kullanın.
Arka plan görüntü boyutu: uygun Arka Plan Görüntü Pozisyonu: Sağ üst
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Arka Plan Görüntü Karışımı: Geniş CSS sütununu daha önce bahsettiğimiz modül sayısıyla ayarlayın, ancak yine, CSS kodunun sütununuzdaki modül sayısıyla eşleştiğinden emin olun.
Kaydırma çubuğunun düzenlenmesi CSS sınıfını sütununuza ekleyin, bu kesme/kaydırma ızgarası mekanizmasına dahil olan kaydırmaları da ayarlayabilir. Sütununuza aşağıdaki CSS sınıfını ekleyin:
CSS Sınıf Sütunu: Swipe-Scllolbar
Sayfalara özel CSS ekleyin, ardından sayfa ayarlarını açın, devam eden sekmeyi açın ve aşağıdaki özel CSS kodunu ekleyin:
Genişlik: 10 piksel; } .Swipe-scollbar ::-WebKit-SclolbarBar-Track {
Arka plan: #fff; }
.Swipe-scollbar ::-WebKit-Sclolbar-Thumb {
Arka plan: #333;
Border-Radius: 50px;
}
Önceki bölümün 2 #2 klonunu yeniden oluşturun Bir sonraki örneğe devam edin! Bu yazının önceki bölümünde yaptığınız kısmı klonlamak.
CTA boşluk ayarlarını değiştirin, ardından ilk CTA modülünün boşluk ayarlarını değiştirin.
Üst kenar boşluğu: 50 piksel
Alt kenar boşluğu: 50 piksel
Üst Dolgu: 5VW (Masaüstü ve Tablet), 14VW (Telefon) Aşağıda dolgu: 5VW (masaüstü ve tablet), 14VW (Telefon) Sol dolgu: 4VW (masaüstü), 3VW (tablet), 8VW (Telefon)
Sağ dolgu: 4VW (masaüstü), 3VW (tablet), 8VW (Telefon)
Alan ayarlarını sütundaki tüm modüllere genişletin Bu yeni alan ayarını sağlanarak ve ‘uzatma stillerini genişleterek ve tıklayarak genişletin.
TO: Tüm Davetiyeler Hareketleri
Boyunca: Bu sütun
Sütun yapısını değiştirin Sıra sütununun yapısını değiştirerek devam edin. Modülü ikinci sütuna taşıyın ve her modülü ikinci sütuna yerleştirin.
CSS’yi ikinci sütuna taşıyın ve değeri değiştirin, modülü bir sütundan diğerine taşıdığımız için CSS kodu için de aynısını yapmamız gerekir. Bunun yerine CSS sınıfını sütun 2’ye ekleyin. Sütun 2 Sınıf CSS: Swipe-Scrollbar CSS kod satırını sütun 2’nin ana öğesine yerleştirin. Her sütunun genişliğini ‘%80’ olarak değiştiririz. Overflow-X: kaydırma;
Ekran: ızgara; Izgara-TEMPLATE sütunları: Tekrar (%6,%80); Başlık Metin Modülünü Sütun 1’e ekleyin Dolgu Ekle, ilk sütuna yeni bir metin modülü ekleyerek devam edin. Seçtiğiniz bazı H2 içeriğini ekleyin. Başlık Metin Ayarları Tasarım sekmesini açın 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 Seviyesi: Orta
Başlık 2 Metin Boyutu: 2.5VW (Masaüstü), 5VW (Tablet), 6VW (Telefon) Mesafe Özellik üzerine bazı kenar boşlukları da ekleyin. Üst kenar boşluğu: 100 piksel
Bölücü modülünü Sütun 1 Sütun 1’de Sütun 1’de görünürlüğüne ekleyin 1 sütun modülüdür. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet
Renk bir sonraki bölücü rengini değiştirir.
Renk: #333333 Boyut ayarları ile yapıştırıcı.
Bölücü ağırlığı: 7px Yükseklik: 0px
Genişlik:% 10 Modül hizalaması: merkez
Mesafe Çeşitli ekran boyutlarında bazı özel marjlar ekleyerek bölücü modülünü tamamlayın. Üst kenar: 1.8vw (masaüstü), 2.5vw (tablet), 4VW (telefon)
İçindekiler Metin Modülünü Sütun 1’e ekleyin Bir sonraki içeriğin içeriğini ekleyin ve son olarak ilk sütunda ihtiyacımız olan şey metin modülünün açıklamasıdır. Bazı seçim içeriği ekleyin. Tasarım sekmesindeki metin ayarlarını değiştirerek metin ayarlarına devam edin.
Metin yazı tipi: SANS’ı aç
Metin Boyutu: 0.7VW (masaüstü), 1.6vw (tablet), 2.3vw (telefon)
Yapıştırıcı değişim de boyutu ayarlayın. Genişlik:% 43 (masaüstü),% 68 (tablet),% 70 (cep telefonu)
Modül hizalaması: merkez Mesafe ve bazı üst ve alt kenar boşlukları ekleyin. Üst kenar boşluğu: 50 piksel
Alt kenar boşluğu: 50 piksel
Sütun 1’deki tüm modülleri değiştirmeyi bitirdikten sonra tel kafes ekranına dönün, devam edin ve tel kafes ekranına geçin. Metin modülünü ekleyin Sütun 2’nin üstüne buraya, metin modülünü ikinci sütunun üstüne ekleyeceğiz. Eklediğimiz CSS kodu, 6 farklı sütun yapmamıza yardımcı oldu. Bu, bu 6 sütunun her birinde iki farklı modül görünmesini istiyorsanız, toplam 12 modülünüz olması gerektiği anlamına gelir. Modül yerleşimi yatay olarak gerçekleşir, böylece sütun 2’de sahip olduğunuz ilk 5 modül yan yana görünecektir. Ardından, mekanizma başka bir satıra geçecek ve kalan 6 modül ekleyecektir.
İkinci sütunun üstüne eklediğiniz yeni metin modülünü açın ve bazı seçim içeriği ekleyin.
Metin Ayarları Ardından, Tasarım sekmesini açın ve metin ayarlarını değiştirin. Metin yazı tipi: Didact Gothic
Metin yazı tipi ağırlığı: kalınlık
Metin rengi: #000000 Metin Boyutu: 1.1VW (masaüstü), 3VW (tablet), 3.5vw (telefon) 5x klon metin modülü lütfen ve bu metin modülünü 5 kez klonlayın. Şimdi, 6 farklı metin modülünüz olacak, bu da sahip olduğumuz CTA modüllerinin sayısı ile aynı. Bu nedenle, 10 CTA modülü kullanıyorsanız, sütun yapısını dengelemek için 10 metin modülü (veya diğer modüller) eklemelisiniz. Yinelenen içeriği değiştirin Her bir kopyanın içeriğini aşağıda görünecek ve tamamlayacak CTA modülüne uyacak şekilde değiştirin! Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Örnek 1: Bir masaüstü sütunu satır Hücresel
Örnek 1: İki sütun satırı + ‘Swipe Sütun’ masaüstünde birkaç modül
Hücresel
Bu yazıdaki son zihin, divi kullanmadan sonu olmadan nasıl yatay bir sürtünme kartı yapacağınızı gösterdik. Bu sürtünme kartını yapmak, yalnızca web sitenize ekstra boyutlar eklemenize yardımcı olmakla kalmaz, aynı zamanda ziyaretçilerin web siteniz tarafından sunulan tüm içerik boyunca sorunsuz bir şekilde gezinmesine yardımcı olur. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
