Divi'de Yapışkan Başlık için Geçiş Sekmesi Nasıl Oluşturulur

Yapışkan başlıklar, menünüzü ve diğer önemli CTA'ları kullanıcılar için erişilebilir tutmak için etkili olabilir. Ancak bazen yapışkan başlıklar, özellikle daha küçük ekran boyutlarındaki büyük başlıklar için dikkat dağıtıcı olabilir. Genellikle, içerik için daha fazla alan yaratmak için başlığı küçültmeye ve/veya yapışkan durumda öğeleri gizlemeye başvururuz. Ancak, bu yapışkan başlıklar için bir geçiş sekmesi oluşturmak harika bir alternatif olabilir. Yapışkan başlığın altına küçük bir geçiş sekmesi eklemek, kullanıcılara istedikleri zaman bu yapışkan başlığı gizleme/gösterme seçeneği sunar. Bu eğitimde, Divi'de yapışkan bir başlık için nasıl geçiş sekmesi oluşturacağınızı göstereceğiz.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız Yapışkan Başlık Geçiş Sekmesine hızlı bir bakış. Kullanıcı başlığın yüksekliğinin ötesine geçtiğinde geçiş sekmesinin nasıl görünür hale geldiğine dikkat edin. Daha sonra kullanıcı sekmeyi tıklayarak yapışkan başlığı değiştirebilir. Kullanıcı sayfanın en üstüne geri döndüğünde, başlık görünür hale gelir ve sekme gizlenir.

Ve işte aynı kavramı gösteren bir kod kalemi.

ÜCRETSİZ Yapışkan Başlık Şablonu için Geçiş Sekmesini İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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 Kitaplığınıza aktarmak için aşağıdakileri yapın:

1. Divi Tema Oluşturucu'ya gidin.
2. Sayfanın sağ üst kısmındaki Taşınabilirlik Simgesine tıklayın.
3. Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin.
4. İndireceğiniz dosyayı bilgisayarınızdan seçin.
5. Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, şablon Divi Theme Builder'da mevcut olacaktır.

Buradan, şablon ayarlarını açabilir ve sonuçları test etmek için şablonu web sitenizin herhangi bir veya tüm sayfalarına atayabilirsiniz. Veya şablon düzenini düzenlemek için başlık şablonu düzenleyicisini aç'a tıklayabilirsiniz.

Hadi öğreticiye geçelim, olur mu?

Bölüm 1: Premade Header Template'i Divi Theme Builder'a Yükleme

Bu eğitimin yapım sürecini hızlandırmak için blogumuzdan ücretsiz olarak indirilebilen hazır bir başlık kullanacağız.

Şablonu İndir

Hazır başlık şablonunu almak için Divi'nin Tercüman Düzen Paketi için ÜCRETSİZ Üstbilgi ve Altbilgi Şablonumuzu içeren gönderiye gidin.

Ardından e-posta seçeneğinin içine e-posta adresinizi girin. Tamamlandığında, “Dosyaları İndir” düğmesini göreceksiniz. Dosyayı indirmek için butona tıklayın.

Dosya indirildikten sonra JSON dosyasını açın.

Şablonu İçe Aktar

Ardından Divi > Tema Oluşturucu'ya gidin. Ve sayfanın sağ üst köşesindeki taşınabilirlik simgesini tıklayın.

İçe Aktar sekmesini seçin, az önce açtığınız JSON dosyasını seçin, seçeneklerin işaretini kaldırın ve içe aktar düğmesini tıklayın.

Ardından, “Statik düzenler olarak içe aktar…” seçeneğini seçin ve tekrar İçe Aktar düğmesini tıklayın.

Başlık Şablonu Düzenleyicisini Açın

Şablon tema oluşturucuya yüklendikten sonra şablonun alt bilgisini silin ve değişiklikleri kaydet'i tıklayın. Ardından şablonun özel başlığını düzenlemek için düzenle simgesine tıklayın.

Katmanları Modal'ı Açın ve Mevcut Kod Modülünü Silin

Başlık düzeni düzenleyicisinde, sayfanın altındaki ayarlar menüsünü açın ve katmanlar modunu açmak için katmanlar görünümü simgesine tıklayın. Bu, Divi öğelerimize ileriye doğru daha kolay erişmemize yardımcı olacaktır.

Katmanlar modunda, tüm Divi Öğelerini görebilmeniz için Tümünü Aç/Kapat düğmesini tıklayın. Bölümün ikinci satırında kod modülünü silin. Bu eğitim için bu özel koda ihtiyacımız olmayacak.

Bölüm 2: Divi'de Geçiş Sekmesi ile Yapışkan Başlık Oluşturma

Bölüm Ayarları

Bu başlık için, tüm bölümü yapışkan hale getireceğiz, böylece başlık kaydırılırken sayfanın en üstüne yapışacak. Ayrıca bölüme özel kodumuzla daha sonra hedeflemesi için özel bir CSS Sınıfı vereceğiz.

Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• CSS Sınıfı: et-divi-yapışkan-başlık
• Yapışkan Konum: En Üstte Yapış

Bir Blurb Modülü ile Geçiş Sekmesi Oluşturma

Ardından, bir tanıtıcı modül kullanarak geçiş sekmemizi oluşturacağız.

Bunu yapmak için, menü modülünün altındaki ikinci satırın en altına yeni bir tanıtım modülü ekleyin.

Ardından, tanıtıcı ayarlarını açın ve içeriği aşağıdaki gibi güncelleyin:

• Başlık içeriğini sil
• Gövde içeriğini sil
• Simgeyi Kullan: EVET
• Simge: yukarı ok (ekran görüntüsüne bakın)
• Arka Plan Rengi: #ffffff

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Simge Rengi: #1a3066
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 40px
• Genişlik: 45 piksel
• Yükseklik: 45 piksel

• Kenar boşluğu: 0 piksel
• Yuvarlatılmış Köşeler: 12px sol alt, 12px sağ alt
• Dönüştür X Eksenini Çevir: %100
• Resim/Simge Animasyonu: Animasyon Yok

NOT: Dönüştürme çevirisi Y %100'e ayarlandığında, simge, simgenin yüksekliğinin (45 piksel) tam olarak %100'ü kadar aşağı hareket eder.

Gelişmiş sekmesi altında aşağıdakileri güncelleyin:

• CSS Sınıfı: et-böl-yapışkan-geçiş
• Pozisyon: Mutlak
• Yer: sağ alt
• Yatay Ofset: 20px
• Z İndeksi: -1

Artık tanıtım yazısı mutlak bir konuma sahip olduğundan (dönüştürme Y %100 ile), tanıtım yazısı (geçiş sekmesi) tüm başlık bölümünün hemen altına oturacaktır. Bu, geçiş sekmesine tıklandığında başlığı gösterdiğimizde/gizlediğimizde geçiş sekmesinin görünür/tıklanabilir kalması için önemlidir.

Özel Kodu Ekle

Bu yapışkan başlık geçişi için ihtiyacımız olan işlevselliği eklemek için bazı özel CSS ve JQuery eklememiz gerekecek.

Bunu yapmak için, blurb modülünün altına yeni bir kod modülü ekleyeceğiz.

Kod içeriği kutusunun içine, kodu gerekli stil etiketlerine sardığınızdan emin olarak aşağıdaki CSS'yi yapıştırın.

.et-divi-sticky-toggle {
  visibility: hidden;
  opacity: 0;
  transition: all 400ms;
}

.et-divi-sticky-toggle:hover {
  cursor: pointer;
}

.et-divi-sticky-toggle.et-show-toggle {
  visibility: visible;
  opacity: 1;
}

.et-divi-sticky-header {
  transition: all 400ms !important;
}
.et-divi-sticky-header.et-hide-sticky-header {
  transform: translateX(0%) translateY(-100%) !important;
}

.et-divi-sticky-toggle .et-pb-icon {
  margin-bottom: 0px;
  transition: all 400ms;
}

.et-hide-sticky-header .et-divi-sticky-toggle .et-pb-icon {
  transform: rotateX(180deg);
}

Özel CSS'yi çevreleyen bitiş komut dosyası etiketinin altına, kodu gerekli komut dosyası etiketlerine sardığınızdan emin olarak aşağıdaki JQuery'yi yapıştırın.

jQuery(document).ready(function ($) {
  // variables for header and toggle
  $stickyHeader = $(".et-divi-sticky-header");
  $stickyToggle = $(".et-divi-sticky-toggle");

  // attach scroll event handler function to window that
  // uses the windows scroll position (winScrollTop) and
  // the height of the header (headerHeight) to hide/show
  // toggle once the user scrolls beyond the header height.
  $(window).on("scroll", function () {
    winScrollTop = $(window).scrollTop();
    headerHeight = $stickyHeader.height();
    if (
      winScrollTop >= headerHeight &&
      !$stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.addClass("et-show-toggle");
    } else if (
      winScrollTop < headerHeight &&
      $stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.removeClass("et-show-toggle");
      $stickyHeader.removeClass("et-hide-sticky-header");
    }
  });

  // attach click event function on toggle tab that
  // toggles the "et-hide-sticky-header" class.
  $stickyToggle.on("click", function (e) {
    $stickyHeader.toggleClass("et-hide-sticky-header");
  });
});

Son sonuç

Nihai sonucu görüntülemek için, yeni başlık içeren şablonu web sitenizin bir sayfasına veya tüm sayfalarına atamanız gerekir.

Bunu yapmak için düzeni kaydedin ve başlık şablonu düzenleyicisinden çıkın.

Ardından, yeni yapışkan geçiş sekmesi başlığına sahip şablon için şablon ayarlarını (dişli simgesi) açın. Kullanım Yeri sekmesinin altında, Tüm Sayfalar'ı seçin ve Kaydet düğmesini tıklayın.

ÖNEMLİ: Bu, web sitenizin tüm sayfalarında başlığı gösterecektir. Bu nedenle, canlı web sitenizi değil, bir hazırlama sitesi kullandığınızdan emin olun.

Şimdi sonucu görmek için web sitenizdeki herhangi bir sayfayı açın.

İşte masaüstünde, tablette ve telefonda nasıl görüneceğine dair bir önizleme.

Son düşünceler

Bu eğitimde, yapışkan bir başlık için nasıl geçiş sekmesi oluşturulacağını gösterdik. Bu, hem önemli yapışkan başlık içeriğini kullanıcılar için erişilebilir tutmak isteyen geliştiriciler için hem de bu başlığı istedikleri zaman gizlemek veya göstermek isteyen kullanıcılar için yararlı bir çözüm olabilir. Umarım, bu gelecekteki bir proje için kullanışlı olacaktır!

Yorumlarda sizden haber bekliyorum.

Şerefe!