Divi ile Tamamen Yatay Kaydırma Sayfası Nasıl Oluşturulur

Gezinmek için kaydırma ve bağlantı bağlantılarını kullanan tamamen yatay bir sayfa oluşturmayı hiç düşündünüz mü? Peki, buna nasıl yaklaşacağınızı tam olarak bilmiyorsanız, bu sizin için ideal bir yazıdır. Divi kullanarak tamamen yatay bir kaydırma sayfasının nasıl oluşturulacağını göstereceğiz. Bu teknik, web sitenizi diğerlerinden öne çıkarmanıza gerçekten yardımcı olur ve 2019'un web tasarım trendleriyle eşleşir. Yaratacağımız sonuç, tüm ekran boyutlarında harika görünecektir.

Hadi hadi bakalım!

Ön izleme

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

masaüstü

Mobil

Yaklaşmak

• Tüm sayfayı yalnızca bir bölümü kullanarak oluşturacağız
• Eğitimin sonunda birkaç CSS kod satırı kullanarak bu bölümü yatay bir ızgaraya dönüştürüyoruz.
• Yatay ızgara, satırların her birini yatay olarak yerleştirilmiş bir sütuna yerleştirecektir.
• Bir bölümün kaç tane yatay sütun içerdiğine siz karar verirsiniz.
• Bu durumda, her biri 2 satırdan oluşan 4 farklı sütun kullanacağız.
• Oluşturduğunuz yatay sütunların sayısını değiştirebilir ve bölüm sütunlarının her birinin kaç satır içerdiğini belirleyebilirsiniz.
• İnsanların farklı bölüm sütunlarında gezinmesine yardımcı olmak için bağlantı bağlantıları da kullanıyoruz
• Bunun da ötesinde, ziyaretçileriniz için gezinmeyi kolaylaştıracak düzgün kaydırma ve bölüm kaydırma yakalama efekti ekliyoruz

Yeniden Oluşturmaya Başlayalım

Yeni Bölüm Ekle

Arka plan rengi

Yeni bir sayfa oluşturun ve ona normal bir bölüm ekleyin. Bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

aralık

Ardından, boşluk ayarlarına gidin ve farklı ekran boyutlarına bazı özel dolgular ekleyin.

• Üst Dolgu: 10.5vw (Masaüstü), 15vw (Tablet), 10vw (Telefon)
• Alt Dolgu: 3vw (Masaüstü ve Tablet), 10vw (Telefon)

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın ekranın tüm genişliğini kaplamasına izin verin.

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

aralık

Sonraki boşluk ayarlarına gidin ve tüm farklı ekran boyutlarında bazı değişiklikler yapın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sol Dolgu: 6vw (Tablet ve Telefon)
• Sağ Dolgu: 6vw (Tablet ve Telefon)
• Sütun 1 Alt Dolgu: 15vw (Tablet ve Telefon)
• Sütun 2 Sol Dolgu: 4vw (Masaüstü), 0vw (Tablet ve Telefon)

CSS kimliği

Oluşturduğumuz bölüm sütunlarının her birinin ilk satırına bir CSS kimliği atamamız gerekecek. Bu, bu gönderide daha sonra çapa okları oluşturmamıza yardımcı olacaktır.

• CSS kimliği: kaydırma-1

Özel CSS

Bu yazının yaklaşım bölümünde bahsedildiği gibi, mekanizmaya yumuşak kaydırma ve yakalama efekti de uyguluyoruz. Bunu yapabilmek için, oluşturduğumuz yatay sütunların her birinin ilk satırına tek bir CSS kodu satırı eklememiz gerekecek.

scroll-snap-align: start;

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

Simge Seç

Artık modül eklemeye başlayabiliriz! Sütun 1'deki Blurb Modülü ile başlayın. Modül ayarlarını açın ve bir sol ok simgesi seçin.

Simge Ayarları

Ardından, tasarım sekmesine gidin ve simgenin görünümünde bazı değişiklikler yapın.

• Simge Rengi: rgba(255,255,255,0)
• Resim/Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 5vw (Masaüstü), 13vw (Tablet), 21vw (Telefon)

aralık

Daha sonra bazı özel kenar boşluğu değerleri ekleyin.

• Üst Marj: 14vw (Masaüstü), -11vw (Tablet), -17vw (Telefon)
• Sol Kenar Boşluğu: 60vw (Tablet ve Telefon)

görünürlük

Modülü daha küçük ekran boyutlarında da saklıyoruz.

Sütun 2'ye Metin Modülü Ekle

H2 İçeriği Ekle

İhtiyacımız olan sonraki modül 2. sütundaki bir Metin Modülü. Biraz H2 içeriği ekleyin.

H2 Metin Ayarları

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

• Başlık 2 Yazı Tipi: Kaynak Serif Pro
• Başlık 2 Metin Hizalama: Sol
• Başlık 2 Metin Boyutu: 3vw (Masaüstü), 7vw (Tablet ve Telefon)

boyutlandırma

Sonraki boyutlandırma ayarlarında genişliği değiştirin.

• Genişlik: %77

aralık

Ve daha küçük ekran boyutları için biraz alt kenar boşluğu ekleyin.

• Alt Marj: 15vw (Tablet ve Telefon)

Sütun 2'ye Düğme Modülü Ekle

İçerik Ekle

Eklediğiniz Metin Modülünün hemen altına bir Düğme Modülü ekleyin. Bir kopya girin.

Düğme Ayarları

Ardından, tasarım sekmesine gidin ve düğme ayarlarını değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 0.9vw (Masaüstü), 2vw (Tablet), 3.5vw (Telefon)
• Düğme Metin Rengi: #000000
• Düğme Kenar Genişliği: 1px

• Düğme Kenar Rengi: #000000
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Mukta
• Yazı Ağırlığı: Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Daha sonra biraz özel kenar boşluğu ve dolgu ekleyin.

• Üst Marj: 6vw (Masaüstü), 4vw (Tablet ve Telefon)
• Üst Dolgu: 15px
• Alt Dolgu: 15px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Sütun 3'e Blurb Modülü Ekle

Simge Seç

Bu satırda ihtiyacımız olan sonraki ve son modül, 3. sütundaki başka bir Blurb Modülüdür. İstediğiniz bir simgeyi seçin.

Bağlantı

Ardından, bağlantı ayarlarına gidin ve ziyaretçileri bölümün ikinci yatay sütununa yönlendirecek bir bağlantı ekleyin.

• Modül Bağlantı URL'si: https://www.yourwebsite.com/page/#swipe-2

Simge Ayarları

Devam edin ve simge ayarlarını da değiştirin.

• Simge Rengi: #333333
• Görüntü Simgesi Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 5vw (Masaüstü), 13vw (Tablet), 21vw (Telefon)

aralık

Farklı ekran boyutlarına bazı özel üst ve sol kenar boşlukları ekleyerek devam edin.

• Üst Marj: 14vw (Masaüstü), -11vw (Tablet), -17vw (Telefon)
• Sol Kenar Boşluğu: 60vw (Tablet ve Telefon)

2. Satır Ekle

Sütun Yapısı

İhtiyacımız olan ikinci satır aşağıdaki sütun yapısını kullanır:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #f7f7f7

boyutlandırma

Sonraki boyutlandırma ayarlarını değiştirin.

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

aralık

Boşluk ayarlarındaki özel dolgu ve kenar boşluğu değerleriyle birlikte.

• Üst Marj: -3.5vw (Masaüstü), -10vw (Tablet), -17vw (Telefon)
• Üst Dolgu: 8vw (Masaüstü), 15vw (Tablet), 20vw (Telefon)
• Alt Dolgu: 8vw (Masaüstü), 15vw (Tablet), 20vw (Telefon)
• Sol Dolgu: 24vw (Masaüstü), 5vw (Tablet ve Telefon)
• Sağ Doldurma: 24vw (Masaüstü), 5vw (Tablet ve Telefon)
• Sütun 1 Sağ Dolgu: 2vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sütun 2 Sol Dolgu: 2vw (Masaüstü), 0vw (Tablet ve Telefon)

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

İçerik Ekle

Devam edin ve ilk sütuna bir Metin Modülü ekleyin. Seçtiğiniz bir kopyayı girin (bir H3 başlığı dahil).

Metin Ayarları

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

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 0.65vw (Masaüstü), 1.8vw (Tablet), 2.7vw (Telefon)
• Metin Satır Yüksekliği: 1.8em

H3 Metin Ayarları

H3 metin ayarlarıyla birlikte.

• 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)
• Başlık 3 Çizgi Yüksekliği: 1.8em

aralık

Daha küçük ekran boyutları için de biraz alt kenar boşluğu ekleyin.

• Alt Marj: 5vw (Tablet ve Telefon)

Klon Metin Modülü ve Sütun 2'deki Yeri

1. sütundaki Metin Modülünü değiştirmeyi tamamladığınızda, onu klonlayabilir ve kopyayı ikinci sütuna yerleştirebilirsiniz.

İçeriği Değiştir

İçeriği değiştirdiğinizden emin olun.

Klon Satır #1 Üç Kez

Her iki sıranız da bittiğinde, ilk satırı 3 kez klonlayabilirsiniz.

Kopyalama #1'i Değiştir

Satır CSS Kimliğini Değiştir

İlk kopyanın CSS kimliğini değiştirmemiz gerekecek.

• CSS kimliği: kaydırma-2

Blurb Modülünün (Sütun 1) Simge Rengini Değiştirin

İlk Blurb Modülünün rengiyle birlikte.

• Simge Rengi: #333333

Her İki Blurb Modülünün Bağlantılarını Değiştirin

Bağlantı bağlantılarının çalışmasını sağlamak için okların her birinin bağlantısını uygun şekilde değiştirmeniz gerekir:

• Modül Bağlantı URL'si: https://www.yourwebsite.com/page/#swipe-1

• Modül Bağlantı URL'si: https://www.yourwebsite.com/page/#swipe-3

2. Kopyaları Değiştir

Satır CSS Kimliğini Değiştir

İkinci kopyanın CSS kimliğini değiştirin.

• CSS kimliği: kaydırma-3

Blurb Modülünün (Sütun 1) Simge Rengini Değiştirin

İlk Blurb Modülünün simge rengiyle birlikte.

• Simge Rengi: #333333

Her İki Blurb Modülünün Bağlantılarını Değiştirin

Ve yine, her Blurb Modülünün bağlantılarını buna göre değiştirin:

• Modül Bağlantı URL'si: https://www.yourwebsite.com/page/#swipe-2

• Modül Bağlantı URL'si: https://www.yourwebsite.com/page/#swipe-4

Kopyaları Değiştir #3

CSS kimliğini değiştir

Üçüncü satır kopyasının CSS kimliğini de değiştirin.

• CSS kimliği: kaydırma-4

Blurb Modülünün (Sütun 2) Simgesini Değiştirin

Ve 3. sütundaki Blurb Module için başka bir simge seçin.

Blurb Modülünün (Sütun 2) Bağlantısını Değiştirin

Tıklandığında, Modül Bağlantı URL'sini uygun şekilde değiştirerek ziyaretçinin ilk bölüm sütununa yönlendirileceğinden emin olun:

• Modül Bağlantı URL'si: https://www.yourwebsite.com/page/#swipe-1

Klon Satır #2 Üç Kez

Bir sonraki satıra. Bu satırı da üç kez klonlayın.

Yinelenen #1'in Satır Arka Plan Rengini Değiştir

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

• Arka Plan Rengi: #dcdced

Yinelenen #2 Satır Arka Plan Rengini Değiştir

İkinci kopya, aşağıdaki arka plan rengini kullanır:

• Arka Plan Rengi: #ffeed1

Yinelenen #3'ün Satır Arka Plan Rengini Değiştir

Üçüncü satır kopyasının arka plan rengini de değiştirin.

• Arka Plan Rengi: #d6ffe5

Bölüme CSS Kimliği ve CSS Kodu Ekle

Artık ihtiyacımız olan tüm satırlara sahip olduğumuza göre, sihri gerçekleştirebiliriz. Tüm bölüme bir CSS kimliği ekleyin. Bu gönderide daha sonra kaydırma çubuğunu gizlemek için bu CSS kimliğini kullanacağız.

• CSS Kimliği: bölüm kaydırma çubuğu

Ardından, Özel CSS seçeneklerine gidin ve ana öğeye bazı CSS kodu satırları ekleyin.

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

Ne kadar çok bölüm sütunu oluşturmak isterseniz, CSS koduna o kadar çok sütun eklemeniz gerekir. Örneğin, aynı yapıya sahip olmak istediğinizi ancak 4 yerine 7 kaydırmaya izin verdiğinizi söyleyin, ızgara şablonu sütunlarını CSS kod satırını buna göre değiştirmeniz gerekecek:

grid-template-columns: repeat(7, 100%);

Ancak sütun numarasını artırıyorsanız daha fazla satır eklemeniz gerekeceğ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 olacaktır.

Kaydırma çubuğunu gizle

Ayrıca, CSS Kimliği bölümünü kullanarak ve sayfa ayarlarına aşağıdaki CSS kodu satırlarını ekleyerek kaydırma çubuğunu gizlemeyi de seçebilirsiniz:

#section-scrollbar::-webkit-scrollbar {
display: none;
}

Ön izleme

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

masaüstü

Mobil

Son düşünceler

Divi ile web siteleri tasarlarken yapılacak en basit şey aşağı doğru inşa etmektir. Ancak yapılacak en basit şey olduğu için, bu seçenekle sınırlı olduğunuz anlamına gelmez. Tamamen yatay bir kaydırma sayfası da oluşturabilirsiniz. Bu eğitimde, Divi kullanarak çarpıcı bir yatay kaydırma web tasarımının nasıl elde edileceğini gösterdik. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!