İhtiyaç şeffaf bir kayan menü oluşturmak için Divi ?
Genel başlığınızı sayfalarınızın ana bölümlerinin üzerine yerleştirmenin bir yolunu mu arıyorsunuz? öğreticide Divi Bugün size bunu tam olarak nasıl yapacağınızı göstereceğiz.
Sıfırdan çarpıcı bir küresel başlık oluşturacağız (yapıcısını kullanarak) temalar de Divi) ve menü çubuğuna kayan bir efekt uygulayacağız.
Gidelim.
anket
Bu öğreticiye dalmadan önce, elde etmek istediğimiz sonuca hızlıca bir göz atalım.
Divi's Theme Builder'a gidin ve yeni bir şablon ekleyin
Allez Divi > Tema Oluşturucu'da.
Genel başlığı oluşturun Divi Tema Oluşturucu ile
'Global Başlık Ekle'yi tıklayın ve 'Global Başlık Oluştur'u seçerek devam edin.
Bölüm ayarları
Arka plan rengi
Şablon düzenleyiciye girdikten sonra sayfada bir bölüm göreceksiniz. Bu bölümü açın ve arka plan rengini tamamen şeffaf bir renge değiştirin. Bu, bölümün altındaki her şeyin gösterilmesine izin verecektir.
- Arka plan: rgba(0,0,0,0)
boyutlandırma
Ardından Bölüm Stili sekmesine gidin ve maksimum genişliği değiştirin.
- Maksimum genişlik (Ekran görüntüsüne bakın): %100
aralık
Ayrıca tüm varsayılan Üst ve Alt iç kenar boşluklarını da kaldırın.
- İç Kenar Boşluğu Tepe Noktası: 0px
- Alt İç Kenar Boşluğu: 0px
Z-endeksi
Ve bölümün her şeyin üstünde kalmasını sağlamak için içindekiler Hero kısmından görünürlük ayarlarında z-index'i arttırmamız gerekecek.
- Z-endeksi: 99999
Yeni bir satır ekle
Sütunun yapısı
Bölüm ayarlarını tamamladıktan sonra aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyebilirsiniz:
boyutlandırma
Herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:
- Sütun yüksekliklerini uyumlu hale getirin: Evet
- Maksimum genişlik: %100
- Maksimum genişlik: %100
aralık
Ardından özel iç kenar boşlukları ekleyin (Üst ve Alt).
- En yüksek iç marj: 2vw
- Alt İç Marj: 0vw
Ana eleman
Ardından, Gelişmiş sekmesine gidin ve ana satır öğesine tek bir CSS kodu satırı ekleyerek daha küçük ekran boyutlarında sütunların yan yana durduğundan emin olun.
display: flex;
Sütun 2
Arka plan rengi
Sütun 2 ayarlarını açarak devam edin ve arka plan rengini yarı saydam bir renge değiştirin.
- Arka plan rengi: rgba (255,255,255,0.71)
sınır
Ayrıca sütuna bir alt kenarlık ekleyin.
- Alt kenarlık genişliği: 2 piksel
- Düğme ve alt kenarlık rengi: #f4583f
Gölge kutusu
Ve ince bir kutu gölgesi ekleyerek kayan bir efekt yaratın.
- Gölge Kutusu: [Yakalamayı Görüntüle]
- Başlangıç Konumu: 20px
- Yay Gölge Bulanıklığı Gücü: 50px
- Kutu Gölge Yayılma Gücü: -20px
- Altyazı yazı tipi rengi: rgba(0,0,0,0.23)
Sütun 1'e bir Görüntü modülü ekleyin
Logoyu indir
Satır ve sütun ayarlarını tamamladıktan sonra sıra, sütun 1'deki Resim modülünden başlayarak modülleri eklemeye gelir. Saydam bir arka plana sahip bir logo yükleyin.
hizalanma
Modül Stili sekmesine geçin ve hizalamayı değiştirin.
- Görüntü Hizalama: Ortalanmış
boyutlandırma
Ayrıca boyutlandırma ayarlarında modülün genişliğini değiştirin.
- Maksimum genişlik: 8 vw (masaüstü), 14 vw (tablet), 21 vw (telefon)
Menü modülünü sütun 2'ye ekleyin
Bir Menü Seçin
Bir sonraki sütuna geçelim. Orada ihtiyacımız olan tek modül bir Menü modülü. İstediğiniz bir menü seçin.
Arka plan rengini kaldır
Ardından arka plan ayarlarına gidin ve arka plan rengini kaldırın.
hüküm
Modül Stili sekmesine geçin ve düzeni değiştirin.
- Stil: Merkezli
- Açılır menü: aşağı
Menü metni
Ayrıca menü metin ayarlarına stil verin.
- Menü Yazı Tipi: Mulish
- Menü metin rengi: #6f6666
- Metin Boyutu menüsü: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
Açılır menü
Ardından, açılır menüden ayarları değiştirin.
- Açılır satır rengi: #f4583f
simgeler
Simge ayarlarında hamburger menüsü simgesi rengi için aynı rengi kullanın.
- Hamburger Menü Simgesi Rengi: #f4583f
aralık
Aralık ayarlarında Üst ve Alt dolgu ekleyerek modül ayarlarını tamamlayın.
- Tepe iç marjı: 1,5 vw
- Alt iç kenar boşluğu: 1,5 vw
Düğme modülünü sütun 3'ye ekleyin
Düğmeye metin ekle
Bir sonraki ve son sütuna geçelim. Seçtiğiniz bir metinle bir Düğme modülü ekleyin.
hizalanma
Ardından modülün hizalamasını değiştirin.
- Düğme hizalaması: ortalanmış
Düğme ayarları
Düğmeyi buna göre özelleştirerek devam edin:
- Düğme için özel stiller kullanın: Evet
- Düğme Metin Boyutu: 0,9 vw (masaüstü), 1,5 vw (tablet), 2,5 vw (telefon)
- Düğme metin rengi: #ffffff
- Arka plan düğmesi: #f4583f
- Düğme Kenar Genişliği: 0 piksel
- Düğme Kenar Rengi: #f4583f
- Kenar Yarıçapı düğmesi: 0 piksel
- Düğme Yazı Tipi: Mulish
- Loş Işık Düğmesi: Kalın Metin
aralık
Farklı ekran boyutlarına özel dolgu ekleyerek modül ayarlarını tamamlayın.
- Üst ve Alt İç Kenar Boşluğu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
- Sol ve Sağ iç kenar boşluğu: 2vw (masaüstü), 3vw (tablet), 4vw (telefon)
Ek Bölüm Parametreleri
Varsayılan ana öğe
Genel özelleştirmeyi tamamladıktan sonra yapmanız gereken bir şey daha var; bölümü yukarıya yerleştirin içindekiler sayfanızın. Bunu yapmak için bölümün ana öğesine iki satır CSS kodu eklememiz gerekecek.
position: absolute;
top: 0;
Vurgulu ana öğe
Aynı CSS kodu satırlarını ana öğenin üzerine gelme seçeneğine eklediğinizden emin olun. Bu, üzerine geldiğinizde bölümün titremesini önleyecektir.
position: absolute;
top: 0;
Yapıcı değişikliklerini kaydedin ve sonucu görüntüleyin
Bölümü tamamladığınızda, genel başlığı kaydedebilir ve sonucu sitenizde görüntüleyebilirsiniz!
anket
Tüm adımların üzerinden geçtik, şimdi sonuca son bir göz atalım.
DIVI'yı Şimdi İndirin !!!
Sonuç
Yani ! Bu makale için bu kadar. Divi's Theme Builder ile kayan ve şeffaf bir menü çubuğunun nasıl oluşturulacağını gösterdik. Başlık, sayfanızın veya yayınınızın ilk bölümünün üstüne yerleştirilir.
Divi's Theme Builder'ı tanımak için şu makalemizi de okuyabilirsiniz. Divi's Theme Builder ile Global Başlık Nasıl Oluşturulur
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
