Divi'nin Yapışkan Seçenekleriyle Kaydırmadan Önce Başlığınızı Nasıl Gizleyebilirsiniz?

Bir kahraman bölümü, web sitenizin göz alıcısıdır. Genellikle web sitesinin geri kalanının havasını belirler ve ziyaretçilere neler bekleyebileceklerini gösterir. Bu nedenle, tüm odaklanmanın, kopya ve harekete geçirici mesaj gibi kahraman bölümünüzde paylaştığınız birkaç öğeye odaklanması yararlı olabilir. Ancak kahraman bölümünü vurgulamak istemeniz, gezinme çubuğuna da ihtiyacınız olmadığı anlamına gelmez. İnsanlar kaydırmaya başladığında başlığınızı göstermenin kullanıcı dostu bir yolunu arıyorsanız, bu gönderiyi seveceksiniz. Bugün size Divi'nin yerleşik yapışkan seçeneklerini kullanarak kaydırmadan önce başlığınızı nasıl gizleyeceğinizi gösteriyoruz. Elde ettiğimiz efekt tamamen duyarlı ve tüm ekran boyutlarında harika görünüyor. Şablon 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

ÜCRETSİZ Başlık Şablonunu İndirin

Ellerinizi ücretsiz 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!

Şablonu Divi Tema Oluşturucunuza yüklerken ve şablona girerken, bölümün görünür olmadığını fark edeceksiniz. Bunun nedeni, efekt zaten ona uygulanmış olmasıdır. Farklı öğeleri değiştirmek için, tel kafes moduna geçebilir ve oradaki öğelere erişebilir veya bölüm dönüştürme çevirisi ve ana öğe ayarlarını geçici olarak kaldırabilir ve başlık tasarımını değiştirmeyi bitirdiğinizde bunları geri koyabilirsiniz.

1. Başlık Öğesi Yapısını Yeni Bir Başlık Şablonu İçinde Oluşturma

Yeni Genel Başlık Şablonu Oluşturun

Divi Theme Builder'a giderek başlayın. Orada, yeni bir genel veya özel başlık oluşturmaya başlayın.

Bölüm Ayarları

Arka plan rengi

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #001b34

aralık

Bölümün tasarım sekmesine gidin ve sonraki tüm varsayılan üst ve alt dolguyu 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:

Arka plan rengi

Henüz modül eklemeden satır ayarlarını açın ve istediğiniz bir arka plan rengini uygulayın.

• Arka Plan Rengi: #001b34

boyutlandırma

Satırın tasarım sekmesine gidin ve boyutlandırma ayarlarını buna göre değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Dolgu değerlerini uygun şekilde değiştirerek devam edin:

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

Sütun 1 Ayarları

Arka plan rengi

Genel satır ayarlarıyla işiniz bittiğinde, 1. sütun ayarlarını açın ve bir arka plan rengi uygulayın.

• Arka Plan Rengi: #f4d5b8

Sütun 1'e Menü Modülü Ekle

Seçim Menüsü

Sütun 1'deki Menü Modülü ile başlayarak modül ekleme zamanı. İstediğiniz bir menüyü seçin.

Logo Yükle

Ardından bir logo yükleyin.

Arka plan rengi

Ardından, arka plan rengini değiştirin.

• Arka Plan Rengi: #063765

Arka plan görüntüsü

Ve seçtiğiniz bir illüstrasyon arka plan resmini yükleyin. Bu yazının başındaki freebie'yi indirerek aşağıdakini bulabilir ve kullanabilirsiniz.

• Arka Plan Resmi Boyutu: Sığdır
• Arka Plan Resmi Konumu: Merkez

Menü Metin Ayarları

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

• Menü Metin Boyutu: 18px

Açılır Menü Ayarları

Ardından, açılır menü ayarlarını uygun şekilde 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

Simge Ayarları

Simge ayarlarındaki simge renklerini de beyaz olarak değiştirin.

• Alışveriş Sepeti Simge Rengi: #ffffff
• Arama Simgesi Rengi: #ffffff
• Hamburger Menü Simge Rengi: #ffffff

boyutlandırma

Ardından, boyutlandırma ayarlarında logo maksimum genişliğini değiştirin.

• Logo Maksimum Genişliği: 70px

aralık

Daha sonra bazı özel dolgu değerleri uygulayın.

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

Kutu Gölge

Bazı özel kutu gölgesi ile birlikte.

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

Dönüştür Çeviri

Ve transform translate ayarlarını aşağıdaki gibi değiştirerek modül ayarlarını tamamlayın:

• Doğru:
  • Masaüstü: 20 piksel
  • Tablet ve Telefon: 0px

2. Sütun'a Düğme Modülü Ekle

Kopya Ekle

2. sütunda ihtiyacımız olan tek modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Hizalama

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

• Düğme Hizalama: Sağ

Düğme Ayarları

Ardından, düğmeyi buna göre biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 16px
• Düğme Metin Rengi: #2a2a2a
• Düğme Arka Plan Rengi: #ffffff
• Düğme Kenar Genişliği: 0px
• Düğme Kenar Rengi: rgba(0,0,0,0)

• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Özel dolguyu da kullanarak düğmenize biraz şekil verin.

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

Kutu Gölge

Ardından, bir kutu gölgesi uygulayın.

• Kutu Gölge Bulanıklığı Gücü: 30 piksel
• Gölge Rengi: rgba(0,0,0,0.18)

Dönüştür Çeviri

Ve transform translate değerlerini uygun şekilde değiştirerek modül ayarlarını tamamlayın:

• Doğru:
  • Masaüstü: 50 piksel
  • Tablet ve Telefon: 0px

2. Kaydırma Etkisinden Önce Gizle'yi Elde Etmek İçin Özel Yapışkan Efektler Uygulayın

Satırı Mutlak Konumlandır

Artık başlığımızın temelini oluşturduğumuza göre, kaydırma efektinden önce hide başlığını uygulayabiliriz. Aşağıdaki adımları uyguladığınız sürece, bu efekti oluşturduğunuz herhangi bir başlığa uygulayabilirsiniz. İlk adım, satır ayarlarını açmak ve satırı mutlak hale getirmektir. Bu, sayfamızın üst kısmındaki başlığın yer kaplamasını önlememize yardımcı olacaktır.

• Pozisyon: Mutlak
• Konum: Sol Üst

Bölümü Yapışkan Yap

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

• Yapışkan Konum: En Üstte Yapış
• Alt Yapışkan Limit: Yok
• Çevredeki Yapışkan Öğelerden Ofset: Evet
• Geçiş Varsayılanı ve Yapışkan Stiller: Evet

Bölüm Animasyonu

Bölümümüze bir animasyon da ekleyeceğiz. Bu animasyon, sayfanız yüklenirken başlığın gösterilmesini önlemeye yardımcı olacaktır.

• Animasyon Stili: Soluk

Bölüm Geçiş Süresi

Bölümün gelişmiş sekmesinde geçiş süresini değiştirerek, kaydırmaya başladığınızda başlığın ne kadar yavaş veya hızlı aşağı kayacağına kendiniz karar verebilirsiniz. Süre ne kadar yüksek olursa, başlık o kadar yavaş aşağı kayar.

• Geçiş Süresi: 800ms

Bölüm Dönüştürme Çevirisi

Şimdi, varsayılan durumda başlığın görünür olmasını istemiyoruz. Bunu başarmanın ilk adımı, bölümün dönüştürme ayarlarına gitmek ve Y ekseni için negatif bir değer kullanmaktır.

• Sağ: -300 piksel

Bu değeri yapışkan durumda sıfıra getireceğiz. Bu, kaydırmaya başlar başlamaz başlığın tekrar görünür hale geleceği anlamına gelir.

• Sabit Sağ: 0px

Kesit Görünürlüğü CSS Özelliği

Bu öğreticinin sonraki ve son adımı, efekti elde etmek için teorik olarak gerekli değildir, ancak kullanılmayan öğeleri gizlemek iyi bir uygulamadır. Bu yüzden bölümün gelişmiş sekmesine gideceğiz ve ana öğe kutusuna aşağıdaki CSS kodu satırını ekleyeceğiz:

• Ana Eleman:

  visibility: hidden

İçeriğimizi yapışkan bir durumda görünür hale getireceğiz. Bu kadar!

• Yapışkan Ana Eleman:

  visibility: visible;

Ö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, insanlar sayfanıza girer girmez kahraman bölümünüzün sayfanızın odak noktası olmasını nasıl sağlayacağınızı gösterdik. Daha spesifik olarak, kaydırmadan önce başlığınızı nasıl gizleyeceğinizi gösterdik. Bu, ziyaretçilerinizin gezinme yeteneği sunulmadan önce kahraman bölümü bilgilerini işlemelerine olanak tanır. 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.