Divi ile Tek Sayfalayıcılar için Özel Sütun Yan Gezinme Oluşturma

Tek sayfalık bir cihaz oluşturmaya karar verdiğinizde, gezinme kullanıcı deneyimi tamamen farklı hale gelir. İnsanların sayfadan ayrılmaları amaçlanmasa da, onların konaklamalarını kullanıcı dostu hale getirmek istiyorsunuz. Bu nedenle, çoğu tek sayfalayıcı, sayfa içi bağlantı bağlantılarını kullanır. Bu bağlantı bağlantılarını geleneksel bir üst menüye yerleştirebilir veya bunun yerine yan gezinmeyi seçebilirsiniz. Bu öğreticide, Divi'nin yeni sütun seçeneklerini kullanarak sayfanız için güzel bir sütun yan gezinme tasarımının nasıl oluşturulacağını göstereceğiz. Tam ekran bir deneyim yaratmak için tüm öğeleri 100 görüntü alanı yüksekliğine sığdıracağız. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

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

Sütun Tarafı Gezinme Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz sütun tarafı gezinme düzenine koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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!

Yeniden Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Boş Sayfa Oluştur

Yapmanız gereken ilk şey, yeni bir boş sayfa oluşturmaktır. Bunu yaptıktan sonra Visual Builder'a geçin.

Yeni Bölüm Ekle

Arka plan rengi

Tüm sayfa içeriğimizi bir bölüm, bir satır ve iki sütuna sığdıracağız. Beyaz arka plan rengiyle sayfanıza yeni bir normal bölüm ekleyin.

• Arka Plan Rengi: #FFFFFF

aralık

Bölümün tüm varsayılan üst ve alt dolgularını kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni 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 boyutlandırma ayarlarını buna göre değiştirin:

• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100
• Yükseklik: 100vh

aralık

Aralık ayarlarına geçin ve tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütun 1 Ayarları

Genel satır ayarlarını tamamladıktan sonra, sütun 1 ayarlarını açın.

Arka plan rengi

Beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #FFFFFF

Kutu Gölge

İnce bir kutu gölgesi ile birlikte.

• Kutu Gölgesi Yatay Konumu: 80px
• Kutu Gölge Bulanıklığı Gücü: 75 piksel
• Gölge Rengi: rgba(0,0,0,0.07)

Ölçeği Dönüştür

Ayrıca masaüstündeki sütunun boyutunu küçültüyoruz.

• Alt: %75 (Masaüstü), %100 (Tablet ve Telefon)
• Sağ: %75 (Masaüstü), %100 (Tablet ve Telefon)

Dönüştür Çeviri

Sonraki bazı özel dönüştürme çevirme ayarlarını kullanarak sütunun konumunu değiştirin.

• Alt: -5vw (Masaüstü), 0px (Tablet ve Telefon)
• Sağ: 0 piksel

Sütun 2 Ayarları

Sütun 2 ayarlarını açarak devam edin.

aralık

Tasarım sekmesine gidin ve farklı ekran boyutlarına aşağıdaki sol ve sağ dolgu değerlerini ekleyin:

• Sol Dolgu: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)
• Sağ Doldurma: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)

CSS Sınıfı

Gönderinin ilerleyen kısımlarında, düzgün bir kaydırma ekleyeceğiz ve kaydırma çubuğunu gizleyeceğiz. Bunu yapmak için, sütuna özel bir CSS sınıfı eklememiz gerekecek.

• CSS Sınıfı: kaydırma sütunu

görünürlük

İkinci sütunda eklediğimiz modüller sayfa içeriğimizi temsil edecektir. Kaydırmaya izin vermek için taşma ayarlarını değiştireceğiz.

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

Sütun 1'e Menü Öğesi Metin Modülü Ekle

Kopya Ekle

Modülleri eklemeye başlayalım! Seçtiğiniz bazı içerikle sütun 1'e bir ilk menü öğesi Metin Modülü ekleyin.

Link ekle

Menü öğesine bir bağlantı bağlantısı ekleyin.

• Modül Bağlantı URL'si: www.yourwebsite.com/yourpage/#home

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Montserrat
• Metin Hizalama: Merkez
• Metin Rengi: #383838
• Metin Boyutu: 3vw
• Metin Harf Aralığı: -3px (Masaüstü), -2px (Tablet), -1px (Telefon)

aralık

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

• Üst Marj: 23vw (Masaüstü), 3vw (Tablet ve Telefon)
• Alt Kenar Boşluğu: 3vw (Masaüstü), 2vw (Tablet), 1vw (Telefon)

Menü Öğesini İki Kez Klonla

İlk menü öğesini tamamladıktan sonra iki kez klonlayın.

Her İki Kopyaların İçeriğini Değiştirin

Her iki kopyanın da menü öğesi içeriğini değiştirin.

Her İki Çoğaltmanın Bağlantılarını Değiştirin

Çapa bağlantıları ile birlikte.

• Kopya 1: /#hakkında
• 2. kopya: /#services

Her İki Çoğaltmanın Aralığını Değiştirin

Boşluk değerlerini uygun şekilde değiştirerek kopyaları tamamlayın:

• Üst Marj: 3vw (Masaüstü), 2vw (Tablet), 1vw (Telefon)
• Alt Kenar Boşluğu: 3vw (Masaüstü), 2vw (Tablet), 1vw (Telefon)

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

görünürlük

Sütun 1'deki birinci ve ikinci Metin Modülleri arasına bir Bölücü Modülü ekleyin. ' Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Hat

Sonraki çizgi rengini değiştirin.

• Çizgi Rengi: #ffebc9

boyutlandırma

Boyutlandırma ayarlarıyla birlikte.

• Bölücü Ağırlığı: 1vw
• Yükseklik: 0 piksel

Klon Bölücü Modülü

Bölücü Modülünü klonlayın ve kopyayı ikinci Metin Modülünün altına yerleştirin.

Sosyal Medya Takip Modülünü Sütun 1'e Ekleyin

Sosyal Ağlar Ekle

Sütun 1'de ihtiyacımız olan sonraki ve son modül bir Sosyal Medya Takip Modülüdür. Seçtiğiniz sosyal ağları ekleyin.

hizalama

Ardından tasarım sekmesine gidin ve modül hizalamasını değiştirin.

• Modül Hizalaması: Merkez

aralık

Sonraki marj değerlerini değiştirin.

• Üst Marj: 12vw (Masaüstü), 5vw (Tablet ve Telefon)
• Alt Kenar Boşluğu: 3vw (Tablet ve Telefon)

Sınır

Ve dairesel bir şekil oluşturmak için köşelerin her birine '50vw' ekleyin.

Sütun 2'ye Görüntü Modülü Ekle

Fotoğraf yükleniyor

İkinci sütuna geç! İstediğiniz tüm modülleri ekleyin, ancak bağlantı bağlantısının başvurmasını istediğiniz her modüle bir CSS kimliği eklemeyi unutmayın. Bu gönderinin önizlemesinde gösterilen tasarımın aynısını yeniden oluşturmak istiyorsanız, bir Görüntü Modülü ekleyerek başlayın ve istediğiniz bir görüntüyü yükleyin.

hizalama

Tasarım sekmesine gidin ve sol görüntü hizalamasını seçin.

• Görüntü Hizalama: Sol

boyutlandırma

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

• Tam Genişliği Zorla: Evet

aralık

Ve biraz sağ dolgu ekleyin.

• Sağ Dolgu: 20vw

CSS kimliği

Son olarak, gelişmiş sekmeye gidin ve ilk CSS kimliğini ekleyin. Bunun, ilk menü öğesinin bağlantı bağlantısıyla eşleştiğinden emin olun.

• CSS Kimliği: Ana Sayfa

Sütun 2'ye Başlık Metin Modülü Ekle

H2 İçeriği Ekle

Bir Metin Modülü olan bir sonraki modüle geçin. Seçtiğiniz bazı H2 içeriğini girin.

H2 Metin Ayarları

Tasarım sekmesine gidin ve H2 metin ayarlarını buna göre değiştirin:

• Başlık 2 Yazı Tipi: Montserrat
• Başlık 2 Metin Hizalama: Sol
• Başlık 2 Metin Rengi: #383838
• Başlık 2 Metin Boyutu: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)
• Başlık 2 Harf Aralığı: -1px

aralık

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

• Üst Marj: 6vw (Masaüstü), 10vw (Tablet), 12vw (Telefon)
• Alt Kenar Boşluğu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)

Sütun 2'ye Bölücü Modülü Ekle

görünürlük

İhtiyacımız olan bir sonraki modül bir Bölücü Modül. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Hat

Çizgi rengini değiştirin.

• Çizgi Rengi: #ffebc9

boyutlandırma

Ve boyutlandırma ayarlarını buna göre değiştirin:

• Bölücü Ağırlığı: 15px
• Genişlik: %16
• Modül Hizalama: Sol

Sütun 2'ye Gövde Metni Modülü Ekle

İçerik Ekle

Seçtiğiniz bazı paragraf içeriğiyle ikinci sütuna başka bir Metin Modülü ekleyin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Roboto
• Metin Hizalama: Yasla
• Metin Rengi: #a8a8a8
• Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Metin Harf Aralığı: 1px
• Metin Satır Yüksekliği: 2vw (Masaüstü), 3.5vw (Tablet), 4.5vw (Telefon)

aralık

Daha sonra bazı özel boşluk değerleri ekleyin.

• Üst Marj: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)
• Alt Kenar Boşluğu: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)
• Sağ Kenar Boşluğu: 20vw (Masaüstü ve Tablet), 5vw (Telefon)

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

İçerik Ekle

Seçtiğiniz bir kopya ile bir Düğme Modülü ekleyerek devam edin.

hizalama

Tasarım sekmesinde sol düğme hizalamasını seçin.

• Düğme Hizalama: Sol

Buton

Düğme ayarlarını buna göre değiştirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #0072ff
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Montserrat
• Düğme Yazı Ağırlığı: Yarı Kalın

aralık

Ve boşluk değerleriyle de oynayın.

• Üst Marj: 4vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)
• Alt Kenar Boşluğu: 4vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)
• Üst Dolgu: 1.5vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
• Alt Dolgu: 1.5vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
• Sol Dolgu: 3vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)

2. Sütundaki Tüm Modülleri İki Kez Klonla ve Aynı Sırada Yerleştir

2. sütundaki tüm modülleri tamamladıktan sonra, onları iki kez klonlayabilir ve doğru sıraya yerleştirebilirsiniz.

Yinelenen Görüntü Modülü #1 CSS Kimliğini Değiştir

İlk yinelenen Görüntü Modülünün CSS kimliğini değiştirin.

• CSS kimliği: hakkında

Yinelenen Görüntü Modülü #2 CSS Kimliğini Değiştir

İkinci kopya Görüntü Modülü için de aynısını yapın.

• CSS kimliği: hizmetler

Kaydırma Çubuğunu Gizle ve Düzgün Kaydırma Ekle

Sayfa Ayarlarını Aç

Şimdi, düzgün bir kaydırma efekti oluşturmak ve 2. sütun kaydırma çubuğunu gizlemek için birkaç satır CSS kodu ekleyeceğiz. Sayfa ayarlarını açın.

Özel CSS Ekle

Ardından, gelişmiş sekmeye gidin ve biraz CSS kodu ekleyin. Bu adımı tamamladığınızda işiniz bitti!

.scroll-column::-webkit-scrollbar {
display: none;
}

.scroll-column {
scroll-behavior: smooth;
}

Ön izleme

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

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi'nin yeni sütun seçenekleriyle tek sayfalık cihazınız için nasıl güzel sütun yan navigasyonu oluşturabileceğinizi gösterdik. Bu, sayfanıza web sitenizin kullanıcı deneyimini iyileştirmeye yardımcı olacak bağlantı bağlantıları eklemenin harika bir yoludur. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.