Web sitesinin içeriğinin kısa bir çıktısını sağlamak söz konusu olduğunda, başlıklar büyük bir rol oynar. İnsanları ihtiyaçlarına göre çeşitli bölümlere yönlendirmek için gerekli yetkilere sahiptir. Ek olarak, yapışkan başlıklar oldukça havalı çünkü başlık bölümünün bulunduğu sayfanın en üstünde olmasanız bile web sitesinde herhangi bir yere taşınma fırsatı sunuyor.
Divi, farklı tasarımlar yapmanızı sağlayan çok yönlü bir WordPress temasıdır ve bu, izleyicilerinizden gerçekten büyük ilgi görür. Bugün, yapışkan bir başlık için bir geçiş sekmesinin nasıl oluşturulacağını göreceğiz. Bu, web sitenizde bir galeri bölümü veya blog bölümü varsa, başlığa bir geçiş yapmak harika bir fikir çünkü bazen yapışkan başlık bir şekilde görünümü engelliyor. Bu nedenle, bugünkü eğitim, başlık bölümü sorunuyla mücadele eden insanlar için süper harika ve yararlı olacak.
Kemerinizi bağlayın ve bugünün tasarımına başlayalım.
Tasarım Önizlemesi
Bugün bu tasarımı oluşturacağız. Burada dikkat ederseniz menü başlığı yapışkan menüsünün her zaman görünür olduğunu görebilirsiniz. Toggle seçeneğine tıkladığımızda en üste hareket edecektir.
Harika Web Siteleri Oluşturun
En iyi ücretsiz sayfa oluşturucu Elementor ile
Şimdi başlaBirinci Bölüm: Şablonu İçe Aktarın ve Ayarlayın
Bugün bu hazır şablon üzerinde çalışacağız. Şablon dosyasını buraya tıklayarak indirebilirsiniz.
Şablonu İçe Aktar
Umarız yukarıda verilen bağlantıdan JSON dosyasını başarıyla indirmişsinizdir. Şimdi sıkıştırın ve JSON dosyasını alın. Ardından WordPress panonuza gidin ve tema oluşturucu seçeneğinden taşınabilirlik simgesine tıklayın.
İçe aktarma seçeneğine gidin ve işaretli seçeneklerin işaretini kaldırın ve "Divi Tema Oluşturucu Şablonunu İçe Aktar" seçeneğini tıklayın.
Şimdi Statik düzen olarak içe aktar'a tıklayın ve ilerleyin.
Şimdi düzenimiz içe aktarıldı. Altbilgi bölümünü silin, değişiklikleri kaydet'e tıklayın ve düzenleme ayarlarını açın.
Mevcut Kod Modülünü Sil
Artık tasarımımız düzenlemeye açık ve mevcut kod modülünü katmanlardan silelim.
İkinci Bölüm: Yapışkan Başlıklı Bir Geçiş Sekmesi Oluşturun
Bölüm Ayarları
Yapışkan efekti tüm bölüme uygulayacağız ve bunun için daha sonra çalışabilmemiz için tüm bölüme bir CSS Sınıfı koymalıyız.
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ünden Sekme Oluşturmayı Aç/Kapat
Menü modülünün altına bir tanıtım modülü ekleyeceğiz.
Bulanık İçerik Ayarı
Ardından, tanıtıcı modül ayarı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
Blurb Tasarım Ayarları
Tasarım sekmesi altında aşağıdakileri güncelleyin:
- Simge Rengi: #1a3066
- Simge Yazı Tipi Boyutunu Kullan: EVET
- Simge Yazı Tipi Boyutu: 40px
Boyutlandırma ayarını açın ve aşağıdaki ayarlamaları yapın.
- Genişlik: 45 piksel
- Yükseklik: 45 piksel
- Kenar Boşluğu: 0px Alt
- Yuvarlatılmış Köşeler: 12px sol alt, 12px sağ alt
- Y Eksenini Dönüştür: %100
- Resim/Simge Animasyonu: Animasyon Yok
Bulanıklık Gelişmiş Ayarları
Gelişmiş sekmesinden 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
Blurb modülünün tüm ayarlarını başarıyla tamamladık. Tasarımımıza göre geçiş butonu olarak kullanacağımız tanıtım yazısı modülü menü modülünün sol alt köşesinde yer almaktadır.
Üçüncü Bölüm: Kod Ekle
Şimdi tasarımımıza daha fazla işlevsellik eklemek için tanıtım modülünün altına bir kod modülü ekleyin.
CSS Kodu Ekle
Aşağıdaki CSS kodunu kod modülüne ekleyin. Bunları bir Stil etiketinin içine koyduğunuzdan emin olun.
.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);
}
JQuery Kodu Ekle
JQuery kodunu kod modülüne ekleyin ve bunları bir Komut Dosyası etiketinin içine koyun.
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 AndAnd
!$stickyToggle.hasClass("et-show-toggle")
) {
$stickyToggle.addClass("et-show-toggle");
} else if (
winScrollTop < headerHeight AndAnd
$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");
});
});
Dördüncü Bölüm: Son Ayarlar
Şimdi tasarımı sağ alttan kaydedin ve sağ üstteki çarpıya tıklayın. Kontrol panelinden tema oluşturucuya geri döneceksiniz ve orada dişli simgesini tıklayın ve Tüm sayfalar'ı seçin. Ve işimiz bitti.
Son tasarım
Şimdiye kadar yaptıklarımızın sonucu bu. Bu durumdan memnun olduğunuzu umuyoruz.
Sonuç
Bugünkü tasarımımızda Divi'de çekici bir yapışkan başlık geçiş sekmesi tasarlayabileceğinizi göstermeye çalıştık. Bu, kullanıcınıza web sitenizdeyken daha hoş bir deneyim yaşatır. Belki bu numarayı bir sonraki web geliştirme çalışmanız için kullanabilirsiniz ve kesinlikle müşterilerden olumlu geri bildirimler getirecektir. Umarım beğenirsiniz ve eğer öyleyse, bir paylaşım harika olacak!
