Divi ve Divi Builder 'ı kullanarak güzel WordPress web siteleri oluşturun.

Divi'de kaydırırken başlığı gizlemek nasıl

Rifat Divi Eğitimleri May 12, 2021

Bir başlık, bir web sitesinin özünü yakalar çünkü kullanıcılar bu web sitesinden başlıktan ne alacaklarını anlayabilirler. Ziyaretçilerin çekilmesine yardımcı olan bir tür davetiye aramak yanlış olmaz. Üst navigasyon çubuğunun dikkat dağıtıcı yarattığı web sitemizin kahraman bölümünü vurgulamak istiyorsak, navigasyon çubuğunu atmalıyız mı? asla!

İki'ün yapışkan seçeneğiyle, web sitemizin kahraman bölümünün web sitesi yüklendikten sonra navigasyon çubuğu olmadan görüntüleneceğini ve kaydırma başlık çubuğunu açığa çıkaracağını tasarlayabiliriz. Bu kazan-kazan durumu. Ama nasıl tasarlanır? Bugün göreceğimiz şey bu.

Gizlice

Ana bölüme atlamadan önce tasarım sonucumuza bir göz atacağız.

Yapı: Başlık Yapısı

Dashboard'dan Global Başlık Oluşturun

Kontrol panelinizden Divi altındaki "Tema Builder" seçeneğine gidin ve resimde gösterilen seçenekten "Global Başkanı Oluşturun" seçeneğini seçin.

Harika Web Siteleri Oluşturun

En iyi ücretsiz sayfa oluşturucu Elementor ile

Şimdi başla

Ayarlar: Global başlık bölümü

Arka plan rengi

Başlık şablonunu seçtikten sonra, "sıfırdan inşa" ile gidin. Ardından katman seçeneğini açın ve önceden oluşturulan bir bölüm göreceksiniz. Bölüm için ayarları açın ve arka planı değiştirin.

  • Arka plan rengi: # 002854

Boşluk

Tasarım sekmesinin altında, bazı boşluk değerlerini değiştirin.

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

Yeni satır ekleme

Sütun yapısı

Sütun yapısı işaretli olan aşağıdaki satırı bölüme ekleyin.

Arka plan rengi

Bu satıra herhangi bir modül eklemeden önce, bazı ayarlamalar yapalım. Arka plan rengiyle başlayın.

  • Arka plan rengi: # 002854

Boyutlandırma

Tasarım sekmesinin altında, satırın boyutlandırma değerlerini değiştirin.

  • Özel oluk genişliğini kullanın: Evet
  • Oluk genişliği: 1
  • Sütun yüksekliklerini eşitleyin: Evet
  • Genişlik: 100%
  • Maksimum genişlik:% 100

Boşluk

Şimdi, dolgu değerlerini de değiştirin.

  • Üst Dolgu: 0px
  • Alt dolgu: 0px
  • Sol Dolgu: Tablet ve Telefon: 5%
  • Sağ Dolgu: Tablet ve Telefon: 5%

Ayarlar: Sütun 1

Arka plan rengi

Tüm satırı tasarladıktan sonra, Sütun 1'i tasarlamaya başlayacağız. Önce arka plan rengini ekleyeceğiz.

  • Arka plan rengi: # 85A8B2

Ekle: Menü modülü sütun 1

Menü Seçimi

Şimdi Sütun 1'e bir menü modülü ekleyeceğiz. Seçtiğinize göre bir menü seçin.

Logo

Şimdi, başlığınıza bir logo ekleyin.

Arka plan rengi

Şimdi bir arka plan rengini ekleyin.

  • Arka plan rengi: # 063765

Arka plan görüntüsü

Şimdi istediğiniz bir görüntü ekleyin ve aşağıdaki düzeltmeleri yapın.

  • Arka plan Resim Boyutu: Fit
  • Arka plan Görüntü Konum: Merkez

Ayarlar: Menü metni

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

  • Metin rengi: #ffffff
  • Menü Metin Boyutu: 18px

Ayarlar: Açılır menü

Şimdi, açılır menü ayarlarını aşağıdaki gibi değiştirin:

  • Açılır menü satırı rengi: RGBA (0,0,0,0)
  • Mobil menü arka plan rengi: # DDC1A7
  • Mobil menü metin rengi: # 063765

Ayarlar: Simge

Şimdi, tüm simgeleri beyaz çevirin.

  • Alışveriş Sepeti Simgesi Renk: #FFFFFF
  • Arama simgesi Renk: #FFFFFF
  • Hamburger Menü Simgesi Renk: #FFFFFF

Boyutlandırma

Ardından, logo boyutlandırma ayarlarını değiştirin.

  • Logo Max Genişliği: 70px

Boşluk

Dolguya bazı değişiklikler yapın.

  • Üst dolgu:% 1
  • Alt dolgu: 1%
  • Sol Dolgu:% 5
  • Sağ Dolgu: 5%

Kutu gölge

Özel kutu gölgesine bazı değişiklikler ekleyin.

  • Kutu Gölge Bulanıklık Gücü: 50px
  • Gölge Renk: RGBA (0,0,0,0.3)

Translation Translate

Şimdi, Dönüştürme Translate Ayarlarını aşağıdaki gibi değiştirerek modül ayarlarını bitirin:

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

Düğme Modülü Ayarı

Sütun 2'ye düğme modülü ekleyin ve istediğiniz bir metni ekleyin.

Düğme Hizalama

Tasarım sekmesinden, düğme hizalamasını değiştirin.

  • Düğme Hizalama: Sağ

Düğme ayarları

Ardından, düğme stilini buna göre değiştirin.

  • Düğme için özel stilleri kullanın: Evet
  • Düğme Metin Boyutu: 16px
  • Düğme Metin Rengi: # 2A2A2A
  • Düğme Arka Plan Rengi: #FFFFFF
  • Düğme Sınır Genişliği: 0px
  • Düğme sınır rengi: RGBA (0,0,0,0)
  • Düğme Yazı Tipi Ağırlığı: Kalın
  • Düğme Yazı Tipi Stili: Büyük Harf

Boşluk

Düğmeye şekil vermek için bazı özel dolgu ekleyin.

  • Üst Dolgu: 20px
  • Alt dolgu: 20px
  • Sol Dolgu: 40px
  • Sağ Dolgu: 40px

Kutu gölge

Şimdi bir kutu gölge ekleyeceğiz (işaretli bir).

  • Kutu gölge bulanıklık gücü: 30px
  • Gölge Renk: RGBA (0,0,0,0.18)

Translation Translation

Neredeyse modülle bitti. Dönüştürme bölümündeki bazı ayarlamalarla bitirin.

Ekle: Başlık için yapışkan efektler

Satır ayarları

Bizim başlık bölümü yapısının yapımını tamamladık. Şimdi ona yapışkan bir etki ekleyeceğiz. Bunun için, satır ayarlarından bazı değerleri değiştirmemiz gerekir.

Durum

İlk önce, pozisyon ayarlarını yapın.

  • Pozisyon: Mutlak
  • Yer: sol üst

Yapışkan Ayarlar - Kaydırma Efektleri

Sonra, bölüm ayarlarını açacağız ve üste yapışmasına izin vereceğiz.

  • Yapışkan Konum: Üste Sopa
  • Alt Yapışkan Sınırı: Yok
  • Çevreleyen yapışkan elemanlardan ofset: Evet
  • Geçiş Varsayılan ve Yapışkan Stiller: Evet

Animasyon

Şimdi ziyaretçilerin sayfa yükleme sırasında başlığını görmeyecek şekilde bir animasyon ekleyeceğiz.

  • Animasyon tarzı: solmaya

Geçiş süresi

Geçiş aralığının değerini değiştirerek, kaydırma sırasında başlığın ne kadar hızlı veya yavaş görüneceğini seçeceğiz.

  • Geçiş Süresi: 800m

Translation Translation

Başlıklarımızı başlangıçta göstermek istemedik, çünkü Y ekseni için dönüşüm ayarlarından negatif bir değer ekleyeceğiz.

  • Sağ: -300px

Şimdi yapışkan ayarlardan, değeri tekrar yapın. Araç, kaydırmaya başladığımız anda bize menüyü gösterecektir.

  • Yapışkan sağ: 0px

Görünürlük için CSS özelliği

Bu bölümde, kullanılmayan unsurları gizlemek için bir CSS özelliği ekleyeceğiz. Bunun zorunlu bir görev olmadığı belirtilmelidir, ancak bunu yapmak iyi bir fikirdir.

visibility: hidden;

Şimdi tekrar menüyü yapışkan bir durumda görünür kılacağız.

visibility: visible;

Son sonuç

Tüm adımları başarıyla yaptığımızdan beri, burada nihai sonucumuz.

Son sözler

Bugünün eğitiminde, ziyaretçilerin kahraman bölümüne nasıl odaklanacağını ve görünürlük konusunda navigasyon çubuğu üzerinde çalışmayı nasıl gördük. Divi, eşsiz ve eğlenceli bir şey tasarlamamıza izin veren yerleşik özelliklere sahip harika bir tema. Umarım bugünün gönderisini beğeneceğinizi ve herhangi bir sorunuz ve sorunuz varsa, lütfen Yorum bölümünde sormaktan çekinmeyin.