Divi ile tam yatay sürtünme sayfası nasıl yapılır
Hiç gezinmek için sürtünme ve çapa kullanan tamamen yatay bir sayfa yapmayı düşündünüz mü? Peki, tam olarak nasıl yaklaşacağınızı ve tam olarak bilmiyorsanız, bu sizin için ideal bir gönderidir. Divi kullanarak tam yatay sürtünme sayfası nasıl yapacağınızı göstereceğiz. Bu teknik gerçekten web sitenizi diğerlerinden öne çıkarmanıza yardımcı olur ve 2019 web tasarım trendiyle eşleşir. Yapacağımız sonuçlar tüm ekran boyutlarında iyi görünecektir. Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.
Masaüstü
Tüm sayfayı yalnızca bir parça kullanacağız
Bu kısmı, öğreticinin sonunda birkaç CSS kod hattı kullanarak yatay bir kafes olarak değiştirdik
Yatay kafes, her satırı yatay olarak yerleştirilen bir sütuna yerleştirecektir.
Kaç tane yatay sütunun parça içerdiğine karar vermelisiniz
Bu durumda, her biri 2 satırdan oluşan 4 farklı sütun kullanacağız
Yaptığınız yatay sütun sayısını değiştirebilir ve her bölüm sütununda kaç satırın bulunduğunu belirleyebilirsiniz.
Ayrıca, insanların farklı bir bölüm sütunundan geçmesine yardımcı olmak için bir çapa bağlantısı kullanıyoruz
Ayrıca, ziyaretçilerinizin gezinmesini kolaylaştıracak ince bir kaydırma ve kaydırma çıtçıtının etkisi ekliyoruz
Yeni bir sayfa için arka plan renginin yeni bir kısmını ekleyerek yaratıcı yaratıcı başlayalım ve ona normal kısmı ekleyin. Ayarları açın ve arka plan rengini değiştirin.
Arka plan rengi: #ffffff Mesafe, o zaman, alan ayarlarını açık ve çeşitli ekran boyutlarında bazı özel rulmanlar ekleyin. Dolgu Up: 10.5VW (masaüstü), 15VW (tablet), 10VW (telefon)
Aşağıda dolgu: 3VW (masaüstü ve tablet), 10vw (telefon)
Sıra #1 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın ekranın tüm genişliğini karşılamasına izin verin. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Bir sonraki alan ayarlarına açılış mesafesi ve tüm farklı ekran boyutlarında bazı değişiklikler yapın. Üst dolgu: 0px
Aşağıda dolgu: 0px
Sol dolgu: 6VW (tablet ve cep telefonu)
Sağ dolgu: 6VW (tablet ve cep telefonu)
Sütun 1 Pilding Alt: 15VW (Tablet ve Cep Telefonu)
Sütun 2 Solda Sol: 4VW (Masaüstü), 0VW (Tablet ve Cep Telefonu)
CSS ID CSS kimliğini yaptığımız her bölüm sütununun ilk satırına ayarlamalıyız. Bu, bu yazıda daha sonra çapa okları yapmamıza yardımcı olacaktır. Kimlik CSS: Slayt-1
Özel CSS Bu yazı yaklaşımında belirtildiği gibi, kaydırma ve pürüzsüz blöflerin etkilerini mekanizmaya da uygularız. Bunu yapabilmek için, yaptığımız her yatay sütunun ilk satırına bir satır CSS kodu eklememiz gerekir. Kaydırma-SNAP-High: Start;
Blurb modülünü Sütun 1’e ekleyin, simgeyi seçin Şimdi modül eklemeye başlayabiliriz! Sütun 1’deki bulanıklık modülü ile başlayın. Modül ayarlarını açın ve sol ok simgesini seçin. Simge ayarları daha sonra tasarım sekmesini açın ve simge ekranında bazı değişiklikler yapın. Ikon Renk: RGBA (255,255,255.0)
Resim Yerleştirme/Simge: Üst
Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 5VW (masaüstü), 13VW (tablet), 21VW (Telefon) Bir sonraki özel marj değerlerinden bazılarına mesafe ekleyin.
Üst kenar: 14VW (masaüstü), -11vw (tablet), -17vw (telefon) Sol kenar boşluğu: 60VW (tablet ve cep telefonu)
Görünürlüğümüz ayrıca modülleri daha küçük ekran boyutlarında gizler.
Metin modülünü sütun 2’ye ekleyin İhtiyacımız olan bir sonraki H2 içeriğini ekleyin. H2 Metin Ayarları Ardından, Tasarım sekmesini açın ve H2 metin ayarlarını değiştirin. Başlık 2 Yazı Tipi: Sumber Serif Pro Başlık 2 Metin Seviyesi: Sol
Başlık 2 Metin Boyutu: 3VW (Masaüstü), 7VW (Tablet ve Cep Telefonu)
Bir sonraki boyut ayarlarında yapışkan değişim genişliği.
Genişlik:% 77 Mesafe ve daha küçük ekran boyutlarına bazı alt kenar boşlukları ekleyin.
Alt kenar boşluğu: 15VW (tablet ve cep telefonu) Düğme Modülünü Sütun 2’ye Ekleyin Ekle, eklediğiniz metin modülünün hemen altına ekleyin, devam edin ve düğme modülünü ekleyin. Birkaç kopya girin.
TEZ düğmesini ayarlayın, tasarım sekmesini açın ve düğme ayarlarının etrafında değiştirin. Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 0.9VW (Masaüstü), 2VW (Tablet), 3.5VW (Telefon)
Metin Renk Düğmesi: #000000
Sınır sınır genişliği: 1px
Düğme Sınır Rengi: #000000
Sınır sınır yarıçapı: 0px Yazı tipi düğmesi: Mukta
Mektup Ağırlığı: Kalın
Yazı tipi stili: büyük harf
Mesafe Bazı özel kenar boşlukları ve bir sonraki dolgu ekleyin.
Üst kenar: 6VW (masaüstü), 4VW (tablet ve cep telefonu) Üst dolgu: 15px
Dolgu Alt: 15 piksel
Sol dolgu: 50 piksel
Sağ dolgu: 50px
Blurb modülünü Sütun 3’e ekleyin Bu satırda ihtiyacımız olan bir sonraki ve son olarak modül simgesini seçin. Sütun 3’teki başka bir Blurb modülüdür. Seçtiğiniz simgeyi seçin.
Son bağlantı, bağlantı ayarlarını açın ve ziyaretçileri bölümün ikinci yatay sütununa yönlendirecek bağlantılar ekleyin. Ayarlar simgesi lütfen ve simge ayarlarını da değiştirin. Renk simgesi: #333333
Görüntü simgesinin yerleştirilmesi: üst Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 5VW (masaüstü), 13VW (tablet), 21VW (Telefon)
Çeşitli ekran boyutlarına bazı özel üst ve sol kenar boşlukları ekleyerek daha fazla mesafe.
Üst kenar: 14VW (masaüstü), -11vw (tablet), -17vw (telefon)
Sol kenar boşluğu: 60VW (tablet ve cep telefonu) Satırlar #2 ekleyin İhtiyacımız olan ikinci sıra sütun yapısı aşağıdaki sütun yapısını kullanır:
Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve arka plan rengini değiştirin.
Arka plan rengi: #f7f7f7 Yapıştırıcı Bir sonraki boyut ayarlarını değiştirin. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Uzay ayarlarında dolgu ve özel marj değeri ile birlikte mesafe.
Üst kenar: -3.5vw (masaüstü), -10vw (tablet), -17vw (telefon)
Üst Dolgu: 8VW (masaüstü), 15VW (tablet), 20VW (Telefon)
Sol dolgu: 24VW (masaüstü), 5VW (tablet ve cep telefonu)
Sağ dolgu: 24VW (masaüstü), 5VW (tablet ve cep telefonu)
Sütun 1 Dolgu Sağ: 2VW (Masaüstü), 0VW (Tablet ve Cep Telefonu)
Sütun 2 Solda Sol: 2VW (Masaüstü), 0VW (Tablet ve Cep Telefonu)
Metin modülünü sütun 1’e ekleyin, içerikleri lütfen ekleyin ve metin modülünü ilk sütuna ekleyin. İstediğiniz bazı kopyaları girin (H3 başlığı dahil).
Metin Ayarları Tasarım sekmesini açın ve metin ayarlarını değiştirin.
Metin yazı tipi: SANS’ı aç Metin Boyutu: 0.65VW (masaüstü), 1.8VW (tablet), 2.7vw (Telefon) Yüksek çizgi metin: 1.8EM H3 metin ayarları H3 metin ayarlarıyla çakışır.
Başlık 3 Yazı Tipi: Mukta
Başlık 2 yazı tipi ağırlığı: kalın
Başlık 3 yazı tipi stili: büyük harf Başlık 3 Metin Boyutu: 0.8VW (Masaüstü), 3VW (Tablet), 4VW (Telefon)
3 satır yüksekliği: 1.8em
Mesafe Daha küçük ekran boyutları için de alt kenar boşlukları ekleyin.
Alt kenar boşluğu: 5VW (tablet ve cep telefonu)
Klon Metin Modülü ve Sütun 2’ye Yer Metin modülünü Sütun 1’deki değiştirmeyi bitirdikten sonra klonlayabilir ve kopyayı ikinci sütuna yerleştirebilirsiniz.
İçeriği Değiştirin İçeriği değiştirdiğinizden emin olun. Row Clone #1 Üç kez iki hattınız bittikten sonra, ilk satırı 3 kez klonlayabilirsiniz.
Değiştir #1 CSS Kimliğini Değiştir CSS kimliğini ilk kopyadan değiştirmeliyiz. Kimlik CSS: Slayt-2 İlk bulanıklık modülünün rengine uygun bulanıklık modülü simgesinin (sütun 1) rengini değiştirin. Renk simgesi: #333333 Çapa bağlantısı işlevini yapmak için bulanık modülün ikinci bağlantısını değiştirin, uygun olan her okun bağlantılarını değiştirmelisiniz:
URL bağlantı modülü: https://www.yourwebsite.com/page/#swipe-1 URL bağlantı modülü: https://www.yourwebsite.com/page/#swipe-3
DEĞİŞTİRİCİ #2 Değiştir Id CSS satırını değiştirme kimliği CSS’yi ikinci kopyadan değiştirin. Kimlik CSS: Slayt-3
İlk bulanıklık modülü simgesinin rengine uygun bulanıklık modülü simgesinin (sütun 1) rengini değiştirin. Renk simgesi: #333333 Blurb modülünün ikinci bağlantısını değiştirin ve bir kez daha uygun olan her bir bulanıklık modülünün bağlantısını değiştirin:
URL bağlantı modülü: https://www.yourwebsite.com/page/#swipe-2 URL bağlantı modülü: https://www.yourwebsite.com/page/#swipe-4
DEĞİŞTİRİCİ #3 Değiştir ID CSS, ID CSS’yi üçüncü satır kopyasından da değiştirin. Kimlik CSS: Slayt-4
Simgeyi değiştirin (sütun 2) Blurb modülünü değiştirin ve sütun 3’teki bulanıklık modülü için başka bir simge seçin. Bulanık modül bağlantısını değiştirin (sütun 2) Tıklamada ziyaretçilerin değiştirerek sütunun ilk bölümüne yönlendirileceğinden emin olun Uygun URL bağlantı modülü: URL bağlantı modülü: https://www.yourwebsite.com/page/#swipe-1 Bir sonraki satıra üç kez #2 satır. Bu satır klonlaması da üç kat.
Yinelenen Satır #1’in arka plan rengini değiştirin Birinci yinelenen arka plan rengini değiştirin. Arka plan rengi: #dcded Yinelenen Satır #2’nin arka plan rengini değiştirin İkincisi aşağıdaki arka plan rengini kullanır:
Arka plan rengi: #ffeed1 Yinelenen Satır #3’ün arka plan rengini değiştirin Üçüncü satırın da kopyasının arka plan rengini değiştirin. Arka plan rengi: #d6ffe5
İhtiyacımız olan tüm satırlara sahip olduğumuz mevcut bölüme CSS ID & CSS kodu ekleyin, bir mucizeyi gerçekleştirebiliriz. Tüm parçalara CSS kimliği ekleyin. Bu yazının ilerleyen saatlerinde, Scrollbar’ı gizlemek için bu CSS kimliğini kullanacağız. ID CSS: Bilah Bölümü’nü kaydırın
Ardından, özel CSS seçeneğini açın ve ana öğeye birkaç sıra CSS kodu ekleyin. Taşma-y: kaydırma; Ekran: ızgara;
Izgara-TEMPLATE sütunları: Tekrar (4,%100); Kaydırma-davranışları: pürüzsüz;
Kaydırma-SNAP tipi: x zorunlu; Ne kadar çok sütun yapmak isterseniz, CSS koduna daha fazla sütun eklemeniz gerekir. Bu nedenle, örneğin aynı yapıya sahip olmak istersiniz, ancak 4 yerine 7 sürtünmeye izin verirsiniz, uygun CSS şablonu sütun kodunu değiştirmelisiniz: ızgara tesplate sütunları: tekrar (7,%100); Ancak, sütun sayısını artırırsanız daha fazla satır eklemeniz gerektiğini unutmayın. Bu durumda, bölüm sütunu başına iki satır görünmesini istiyorsanız, 14 satıra ihtiyacınız var. Kaydırma bıçağını gizleme, CSS kimliği bölümünü kullanarak kaydırma çubuğunu gizlemeyi ve sayfa ayarlarına aşağıdaki CSS kod satırını eklemeyi seçebilirsiniz. : #bölüm-scllolbar ::-webkit-scllolbar { Görüntü yok;
}
Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Masaüstü
Hücresel
Son zihin Divi ile bir web sitesi tasarlarken, yapılacak en kolay şey inşa etmektir. Ancak sadece en kolay şey olduğu için, bu seçimle sınırlı olduğunuz anlamına gelmez. Ayrıca tam bir yatay sürtünme sayfası yapabilirsiniz. Bu öğreticide, divi kullanarak bazı şaşırtıcı yatay sürtünme web tasarımları nasıl elde edileceğinizi gösterdik. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
