Divi ile Web Siteniz için Kaydırma Menü Çubuğu Nasıl Oluşturulur

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, Mortgage Broker Layout Pack'i kullanarak web siteniz için bir kaydırma menü çubuğunun nasıl oluşturulacağını göstereceğiz. Bu, web sitenize etkileşim eklemenin harika bir yoludur. Tüm ekran boyutlarında aynı kullanıcı deneyimine sahip olacaksınız ve bu tekniği, oluşturduğunuz her tür web sitesi için kullanabilirsiniz.

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

Divi Tema Seçeneklerinde Sabit Gezinmeyi Devre Dışı Bırak

Divi Tema Seçeneklerine Git

Başlayalım! Yapmanız gereken ilk şey, WordPress web sitenizdeki Divi tema seçeneklerine gitmek.

Sabit Gezinmeyi Devre Dışı Bırak

Burada, sabit gezinme çubuğunu devre dışı bırakacağız. Bu öğreticide daha sonra sayfamızdaki birincil menü çubuğundan tamamen kurtulmak için bu seçeneği devre dışı bırakmamız gerekiyor.

• Sabit Gezinme Çubuğu: Devre Dışı

Sayfadaki Birincil Menü Çubuğunu Gizle

Mortgage Broker Düzen Paketi Açılış Sayfasında Visual Builder'ı Etkinleştirin

Mortgage Broker Layout Pack'in açılış sayfasını kullanarak oluşturduğunuz sayfaya giderek devam edin ve Visual Builder'ı etkinleştirin.

Sayfa Ayarlarını Aç

Bazı CSS kodları ekleyerek sayfamızdaki birincil menü çubuğunu gizleyeceğiz. Bu kodu eklemek için sayfa ayarlarını açın.

Birincil Menü Çubuğunu Gizlemek için Özel CSS Kodu Ekle

Ardından, gelişmiş sekmesine gidin ve aşağıdaki CSS kod satırlarını Özel CSS kutusuna yerleştirin:

#main-header {
display: none;
}

Bu kodu eklemek, birincil menü çubuğunun sayfada görünmesini engellemeye yardımcı olur.

Divi ile Özel Menü Tasarımı Oluşturun

Tüm Ekran Boyutlarında Kahraman Bölümünde Yeterli Üst Dolgu Olduğundan Emin Olun

Artık sayfamızdaki birincil menü çubuğundan kurtulduğumuza göre, bunun yerine kaydırma menü çubuğunu eklemeye başlayabiliriz! Yapmanız gereken ilk şey, kaydırma menü çubuğunun mevcut herhangi bir içerikle çakışmaması için sayfanızın üst kısmında yeterli dolgu bulunduğundan emin olmaktır. Özellikle Mortgage Broker Düzen Paketi'nin açılış sayfası için bu, sütun 1 özel dolgusunun tüm ekran boyutlarında '180 piksel' kalmasını sağlamak anlamına gelir.

• Üst Dolgu: 180px

Sayfanın Altına Yeni Normal Bölüm Ekle

Özel kaydırma menü çubuğunu oluşturmaya başlama zamanı! Sayfanızın altına normal bir bölüm ekleyin.

aralık

Bölüm ayarlarını açın ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

Satır ekle

Sütun Yapısı

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

Arka plan rengi

Satır ayarlarını açın ve satır arka plan rengini beyaz olarak değiştirin.

• Arka Plan Rengi: #ffffff

boyutlandırma

Ardından, satır ayarlarını açın ve satırın ekranın tüm genişliğini kaplamasına izin vermek için boyutlandırma ayarlarını değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Sonraki tüm üst ve alt dolguyu çıkarın.

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

Kutu Gölge

Kaydırmalı menü çubuğu ile sayfanın kendisi arasında yeterli derinlik olduğundan emin olmak için bir kutu gölgesi ekleyeceğiz.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.55)

Resim Modülü Ekle

Şirket Logosu Yükle

Bir Görüntü Modülü ile başlayarak, kaydırma menü çubuğunda göstermek istediğimiz tüm modülleri eklemeye başlama zamanı. 226 piksel genişliğinde ve 100 piksel yüksekliğinde bir resim dosyası kullanarak logonuzu yükleyin.

hizalama

Ardından, Görüntü Modülünün tasarım sekmesine gidin ve görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Merkez

boyutlandırma

Sonraki görüntünün boyutlandırma ayarlarını değiştirin.

• Maksimum Genişlik: %75 (Masaüstü), %100 (Tablet ve Telefon)

aralık

Ve görüntüye de bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 15px (Tablet), 25px (Telefon)
• Alt Dolgu: 15px (Tablet), 25px (Telefon)

Düğme Modülü Ekle

Kopya Ekle

İhtiyacımız olan ikinci modül bir Düğme Modülü. Seçtiğiniz bir kopyayı ekleyin.

hizalama

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

• Düğme Hizalama: Merkez

Düğme Ayarları

Sonraki düğmenin görünümünü değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 0.8vw (Masaüstü), 1.4vw (Tablet), 2.1vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #40eccc
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 50px
• Düğme Harf Aralığı: 2px
• Düğme Yazı Tipi: Lato
• Yazı Tipi Ağırlığı: Ağır
• Yazı Tipi Stili: Büyük Harf

aralık

Ve özel kenar boşluğu ve dolgu değerlerini kullanarak istediğiniz şekli oluşturun.

• Üst Kenar Boşluğu: 15px
• Alt Kenar Boşluğu: 15px
• Üst Dolgu: 15px
• Alt Dolgu: 15px
• Sol Dolgu: 40px
• Sağ Dolgu: 40px

Metin Modülü #1 Ekle

İçerik Kutusuna Menü Öğesi Ekle

Kaydırma menü çubuğumuzda ihtiyacımız olan bir sonraki modül bir Metin Modülüdür. Burada, içerik kutusuna sayfa başlığını ekleyeceğiz.

Link ekle

Bağlantı ayarlarına gidin ve Metin Modülüne doğru bağlantıyı ekleyin.

Arka plan rengi

Sonraki arka plan rengini değiştirin.

• Arka Plan Rengi: #f2f2f2

Metin Ayarları

Ardından, metin ayarlarını değiştirin.

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #000000
• Metin Boyutu: 0.9vw (Masaüstü), 1.9vw (Tablet), 2.4vw (Telefon)
• Metin Yönü: Merkez

aralık

Ayrıca modüle bazı özel üst ve alt dolgular da ekleyin.

• Üst Dolgu: 30 piksel
• Alt Dolgu: 30px

Metin Modülünü x5 Kez Klonla

Metin Modülünü değiştirmeyi bitirdikten sonra, devam edip 5 kez klonlayabilirsiniz.

Kopyayı Değiştir

Bu kopyaların her birinde sayfa başlığını değiştirdiğinizden emin olun.

Bağlantıları Değiştir

Bağlantılarla birlikte.

Arka Plan Renklerini Değiştir

Sonraki ikinci, dördüncü ve altıncı menü öğesinin arka plan renklerini değiştirin.

• Arka Plan Rengi: #ffffff

Satıra Özel CSS Ekle

Ana Eleman

Şimdi, kaydırma menü çubuğunun sayfanın en üstüne yapıştığından emin olmak için satırın ana öğesine birkaç satır CSS kodu eklememiz gerekecek.

position:fixed;
top: 0px;
z-index: 99;

Sütun Ana Elemanı

Ayrıca sütunu kaydırmamıza izin veren bir ızgaraya dönüştürüyoruz. Aşağıdaki CSS kodunda görebileceğiniz yüzdeler, her bir modülün ızgarada ne kadar yer kapladığını gösterir. Izgaranızın farklı görünmesini istiyorsanız bu değerleri değiştirebilirsiniz.

overflow-x: scroll;
display: grid;
grid-template-columns: 15% 45% 25% 25% 25% 25% 25% 25%;

Sütun CSS Sınıfı

Ve kaydırma çubuğundan kurtulmak için satıra bir CSS sınıfı da ekleyeceğiz.

Kaydırma çubuğunu kaldır

Sayfada

Sayfa ayarlarını açıp Özel CSS kutusuna aşağıdaki CSS kodu satırlarını ekleyerek kaydırma çubuğunu sayfanın kendisinde kaldırabilirsiniz:

.swipe-menu::-webkit-scrollbar {
display: none;
}

Tüm Web Sitesinde

Kaydırma çubuğunu her sayfada tek tek gizleme adımını tekrarlamak istemiyorsanız, Divi tema seçeneklerine gidebilir ve genel sekmeyi aşağı kaydırıp aşağıdaki satırları ekleyerek CSS kodunun tüm web sitesine uygulanmasını sağlayabilirsiniz. Özel CSS kutusuna CSS kodu:

.swipe-menu::-webkit-scrollbar { display: none; }

Genel Öğe Olarak Bölüm Olarak Kaydet

Kaydırma menü çubuğunuz düzgün çalıştığında, onu Divi kitaplığınıza global bir öğe olarak kaydedebilir ve diğer sayfalarda da kullanabilirsiniz!

Ö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 kullanarak oluşturduğunuz herhangi bir web sitesi için kaydırma menü çubuğunun nasıl oluşturulacağını gösterdik. Bu, web sitenize başka bir boyut eklemek için harika bir tekniktir. Bu eğitim, devam eden Divi tasarım girişimimizin bir parçasıdır ve her hafta tasarım araç kutunuza fazladan bir şey koymaya çalışıyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!