Divi's Theme Builder ile Küresel Şeffaf Kayan Menü Çubuğu Nasıl Oluşturulur

Genel başlığınızı sayfalarınızın kahraman bölümlerinin üstüne koymanın bir yolunu mu arıyorsunuz? Bugünün Divi eğitiminde, size bunu tam olarak nasıl yapacağınızı göstereceğiz. (Divi's Theme Builder'ı kullanarak) sıfırdan çarpıcı bir genel başlık oluşturacağız ve menü çubuğuna kayan bir efekt uygulayacağı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

Kayan Menü Çubuğu Küresel Başlık Şablonunu ÜCRETSİZ olarak indirin

Ellerinizi kayan menü çubuğu genel başlık şablonuna 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!

Youtube Kanalımıza Abone Olun

1. Divi Tema Oluşturucu'ya gidin ve Yeni Şablon Ekle

Divi Theme Builder'a gidin

Divi Theme Builder'a giderek başlayın.

Global Başlık Oluşturmaya Başlayın

Ardından, 'Global Başlık Ekle'yi tıklayın ve 'Global Başlık Oluştur'u seçerek devam edin.

2. Global Başlık Oluşturmaya Başlayın

Bölüm Ayarları

Arka plan rengi

Şablon düzenleyicinin içine girdikten sonra sayfada bir bölüm göreceksiniz. Bu bölümü açın ve arka plan rengini tamamen şeffaf olana değiştirin. Bu, bölümün altındaki her şeyin gösterilmesine izin verecektir.

• Arka Plan Rengi: rgba(0,0,0,0)

boyutlandırma

Sonraki bölümün tasarım sekmesine gidin ve genişliği değiştirin.

• Genişlik: %100

aralık

Tüm varsayılan üst ve alt dolguyu da kaldırın.

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

Z İndeksi

Bölümün tüm kahraman bölümü içeriğinin üstünde kalmasını sağlamak için görünürlük ayarlarında bölümün z dizinini artırmamız gerekecek.

• Z İndeksi: 99999

Yeni Satır Ekle

Sütun 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

Henüz 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 Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Daha sonra bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 2vw
• Alt Dolgu: 0vw

Ana Eleman

Ardından, gelişmiş sekmesine gidin ve satırın ana öğesine tek bir CSS kodu satırı ekleyerek daha küçük ekran boyutlarında sütunların yan yana kaldığından emin olun.

display: flex;

2. sütun

Arka plan rengi

Sütun 2 ayarlarını açarak devam edin ve arka plan rengini yarı saydam olarak değiştirin.

• Arka Plan Rengi: rgba(255,255,255,0.71)

Sınır

Sütuna da bir alt kenarlık ekleyin.

• Alt Kenar Genişliği: 2px
• Alt Kenar Rengi: #f4583f

Kutu Gölge

Ve ince bir kutu gölgesi ekleyerek kayan bir efekt yaratın.

• Kutu Gölge Dikey Konumu: 20px
• Kutu Gölge Bulanıklığı Gücü: 50px
• Kutu Gölge Yayılma Gücü: -20px
• Gölge Rengi: rgba(0,0,0,0.23)

Sütun 1'e Görüntü Modülü Ekle

Logo Yükle

Satır ve sütun ayarlarını tamamladıktan sonra, sıra 1. sütundaki Görüntü Modülü ile başlayarak modülleri eklemeye gelir. Saydam bir arka plana sahip bir logo yükleyin.

hizalama

Modülün tasarım sekmesine gidin ve hizalamayı değiştirin.

• Görüntü Hizalama : Merkez

boyutlandırma

Modülün genişliğini de boyutlandırma ayarlarında değiştirin.

• Genişlik: 8vw (Masaüstü), 14vw (Tablet), 21vw (Telefon)

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

Seçim Menüsü

Bir sonraki sütuna. 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.

Düzen

Modülün tasarım sekmesine gidin ve düzeni değiştirin.

• Stil: Merkezli
• Açılır Menü Yönü: Aşağıya

Menü Metni

Menü metin ayarlarına da stil verin.

• Menü Yazı Tipi: Muli
• Menü Metin Rengi: #6f6666
• Menü Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)

Aşağıya doğru açılan menü

Sonraki açılır menü ayarlarını değiştirin.

• Açılır Menü 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ına biraz üst ve alt dolgu ekleyerek modülün ayarlarını tamamlayın.

• Üst Dolgu: 1.5vw
• Alt Dolgu: 1.5vw

Sütun 3'e Düğme Modülü Ekle

Kopya Ekle

Bir sonraki ve son sütuna. Seçtiğiniz bir kopya ile bir Düğme Modülü ekleyin.

hizalama

Daha sonra modülün hizalamasını değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Düğmeyi buna göre şekillendirerek devam edin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 0.9vw (Masaüstü), 1.5vw (Tablet), 2.5vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #f4583f
• Düğme Kenar Genişliği: 0px
• Düğme Kenar Rengi: #f4583f
• Düğme Sınır Yarıçapı: 0px

• Düğme Yazı Tipi: Muli
• Düğme Yazı Ağırlığı: Kalın

aralık

Ve farklı ekran boyutlarına bazı özel dolgular ekleyerek modülün ayarlarını tamamlayın.

• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 2vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
• Sağ Doldurma: 2vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)

Ek Bölüm Ayarları

Varsayılan Ana Eleman

Genel tasarımı tamamladığınızda geriye yapmanız gereken bir şey kalıyor; bölümü sayfa içeriğinizin üstüne yerleştirmek. Bunu yapmak için, bölümün ana öğesine iki satır CSS kodu eklememiz gerekecek.

position: absolute;
top: 0;

Ana Elemanın üzerine gelin

Aynı CSS kod satırlarını ana öğenin üzerine gelme seçeneğine eklediğinizden emin olun. Bu, fareyle üzerine geldiğinizde bölümün titremesini önleyecektir.

position: absolute;
top: 0;

3. Oluşturucu Değişikliklerini Kaydet ve Sonucu Görüntüle

Bölümü tamamladığınızda, genel başlığı kaydedebilir ve sonucu web sitenizde görüntüleyebilirsiniz!

Ö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 yazıda, Divi's Theme Builder ile nasıl kayan bir menü çubuğu oluşturacağınızı gösterdik. Bu, başlık ve kahraman bölümlerinizi karıştırmanın harika bir yoludur. Başlık, sayfanızdaki veya yayınınızdaki ilk bölümün üstüne yerleştirilir. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!

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.