Herhangi Bir Divi Elemanı Nasıl Yapışkan Yapılır? (Adım adım rehber)

Sitenizi özelleştirmek ve öğeleri düzeltmek mi istiyorsunuz? Bu kılavuzda, herhangi bir Divi öğesini hem kodlamalı hem de kodlamasız olarak nasıl yapışkan hale getireceğinizi göstereceğiz.

Kullanıcıların içeriğinizde gezinmesine yardımcı olmak için Divi kullanarak başlığınızı nasıl yapışkan hale getireceğinizi yakın zamanda gördük. Bu iyi bir ilk adım ama yapabileceğiniz daha çok şey var. Divi, WordPress sitenizin her santimini kişiselleştirmenize olanak tanıyan son derece özelleştirilebilir bir temadır. Bu nedenle, bu öğreticide herhangi bir Divi öğesini yapışkan yapmanın farklı yollarına bakacağız.

Divi Öğelerini Neden Yapışkan Yapmalısınız?

Varsayılan olarak, sitelerdeki öğeler yapışkan değildir, bu nedenle bir kullanıcı aşağı kaydırdığında bu öğeler ekrandan kaybolur ve kullanıcı yeni içerik görür. Ancak, müşterilerinizin ihtiyaç duyduklarını bulmalarına yardımcı olmak için sitenizdeki en önemli öğeleri her zaman görünür hale getirmek isteyebilirsiniz. Bu, kullanıcı aşağı kaydırsa bile öğenin her zaman ekrana sabitleneceği anlamına gelir. Örneğin, ana menünüzü, kayıt formunuzu veya kullanıcıların ihtiyaç duyduğu önemli bilgileri içeren bir sütunu yapıştırabilirsiniz.

Buradaki fikir, ziyaretçilerinize yardımcı olmak için bu öğeleri daha görünür hale getirmektir. Yapışkan öğeler, satışları ve dönüşümleri artırmak için de çok yardımcı olabilir. Örneğin, birçok çevrimiçi mağaza, satışlarını artırmak için tekliflerini ve ana Harekete Geçirici Mesajı (CTA) yapışkan hale getirir.

Herhangi Bir Divi Elemanı Nasıl Yapışkan/Sabit Yapılır?

Herhangi bir Divi öğesini yapışkan hale getirmenin iki ana yöntemi vardır:

1. Dahili Divi oluşturucu eklentisini kullanma
2. Biraz kodlama ile

Bu kılavuzda, öğelerin her iki yöntemle nasıl sabitleneceğini açıklayacağız. Her iki seçenek de işi halledecektir, bu nedenle becerilerinize en uygun olanı seçin.

1) Divi Builder'ı Kullanma

Divi Builder, Divi ile birlikte gelir, bu nedenle zaten bu temayı kullanıyorsanız herhangi bir şey yüklemeniz gerekmez. Herhangi bir öğeyi yapışkan hale getirmek için önce bir sayfa oluşturmanız ve öğeleri eklemek veya kaldırmak, düzenlemek vb. için görsel oluşturucuyu kullanmanız gerekir. Bu demo için, Accountant adlı önceden hazırlanmış düzen paketlerinden birini kullanacağız, ancak canlı bir sayfa veya tamamen yeni bir sayfa da kullanabilirsiniz.

Sayfa yarat

İlk olarak, WordPress kontrol panelinizde Sayfalar > Yeni Ekle'ye gidin ve yeni bir sayfa oluşturun.

Şu andan itibaren Divi görsel oluşturucusunu kullanacağız, bu nedenle Divi Oluşturucuyu Kullan düğmesine bastığınızda bir sürükle ve bırak görsel oluşturucu göreceksiniz.

Tercih Edilen Şablonu İçe Aktar

Oluşturucu açıldığında, üç seçenek göreceksiniz:

• sıfırdan inşa
• Önceden hazırlanmış bir düzen seçin
• Mevcut bir sayfayı klonla

Özel bir tasarım oluşturmak istiyorsanız, ilk seçeneği seçin. Divi oluşturucuyu kullanarak siteniz için benzersiz bir sayfa tasarımı oluşturmak oldukça basit olacaktır. Alternatif olarak, mevcut sayfa tasarımlarını kopyalayabilir veya önceden hazırlanmış bir düzen seçebilirsiniz. Bizim durumumuzda, hazır yerleşim şablonunu kullanacağız ( Accountant) . Bu yüzden Accountant şablonunu içe aktarmak için Premade layout seç seçeneğini seçiyoruz ve ardından listeden beğendiğinizi seçiyoruz.

Bundan sonra, Klasik Düzenleyiciyi kullandığımız için ekranınızda şöyle bir şey göreceksiniz:

Ancak, görsel oluşturucuyla çalışmak daha kolay, bu yüzden ona geçeceğiz.

Visual Builder'a geçin

Başlıkta, Build On the Front End adlı görsel oluşturucuyu kullanma seçeneği göreceksiniz. Bastığınızda ekranın nasıl değiştiğini göreceksiniz ve değişikliklerin sonuçlarını ön uçtan görmeyi kolaylaştıracaksınız.

Muhasebeci şablonu, bir sağ kenar çubuğu ve bir bülten kayıt formu ile birlikte gelir. Ancak, sabit değil, aşağı kaydırdıkça kayboluyor. Öyleyse, haber bülteni kayıt kutusunu nasıl yapışkan hale getireceğimizi görelim.

Yapışkan Menü WordPress Eklentisini Kurun ve Etkinleştirin

Herhangi bir Divi öğesini yapışkan yapmak için Yapışkan Menü eklentisini kullanacağız. Bu nedenle, WordPress kontrol panelinizi açın, Eklentiler > Yeni ekle'ye gidin ve Yapışkan Menü, Kaydırılan Yapışkan Başlık'ı arayın. Ardından, Yükle'ye tıklayın ve etkinleştirin.

Bu basit eklenti ile menülerimizi, başlığımızı veya herhangi bir öğeyi anında yapışkan hale getirebileceğiz. Eklentiyi kurmak için Ayarlar > Yapışkan Menü'ye (veya herhangi bir şey!) gidin.

Yapışkan Menüyü Ayarla

İki ana özelleştirme ayarı seçeneği vardır:

• Temel
• ileri

İlk olarak, temel ayarların nasıl özelleştirileceğini görelim. Yapışkan bir öğeye ad vermeniz gerekecek. Bizim durumumuzda, buna #sticky diyeceğiz ve üst sayfa ile öğe arasında 50 piksel boşluk bırakacağız. Boşluktan emin değilseniz endişelenmeyin, bunu daha sonra değiştirebilirsiniz.

Ardından, temel ayarları kaydedin ve Gelişmiş ayarlar sekmesine gidin . Burada yapışkan öğeyi biraz daha geliştireceğiz. Örneğin, Z-Index alanını 99998 olarak ayarlayacağız ve push-up element alanına #stop ekleyeceğiz. Push-up öğesi, kayan yapışkan widget'ı durdurmanıza yardımcı olacaktır (bununla ilgili daha fazla bilgi daha sonra).

Orada başka premium özelleştirme seçenekleri de var ama şimdilik buna dokunmayacağız. Bu nedenle, bu değerleri ekledikten sonra ayarları kaydedin ve hazırsınız. Ardından Divi görsel oluşturucuyu kullanarak oluşturduğunuz sayfayı açın. Bülten kayıt widget'ına bir CSS sınıfı ekleyerek yapışkan hale getireceğiz. İki sütun var. Soldaki sütun blog gönderilerini, sağdaki sütun ise haber bülteni kayıt çubuğunu gösterir. Bu nedenle, CSS kimliğini sağ sütuna uygulamamız gerekiyor.

Özel CSS Kimliği Ekle

Bunu yapmak için Divi ayarları bölümünü açın ve 2. sütunu seçin. Gelişmiş sekmesi altında, CSS kimliği, CSS sınıfı ve CSS özel kodları eklemek için bir bölüm göreceksiniz. Bu öğeyi yapışkan hale getirmek için, Temel ayarlarda ayarladığınız Yapışkan Öğeyi eklemeniz yeterlidir. Bizim durumumuzda, CSS ID alanına yapışkan ekleyeceğiz ve ayarları kaydedeceğiz.

Tüm Divi oluşturucu ayarlarını kaydettiğinizden emin olun, aksi takdirde çalışmaz. Ardından, sayfayı önizleyebilirsiniz.

Yukarıda gördüğünüz gibi, bülten kayıt formu artık düzeltildi. Ancak, sitedeki diğer öğelerle örtüşüyor, bu nedenle bazı değişiklikler yapacağız. Bu, Gelişmiş ayarlardan push-up öğesi kimliği devreye girdiğinde gerçekleşir. Bizim durumumuzda, haber bülteni widget'ını iletişim formundan hemen önce durduracağız.

Durdurma CSS'sini ekleyin

Bu yüzden daha önce yaptığımız gibi, iletişim formu bölümünde push-up CSS ID'den bahsetmemiz gerekiyor. Bunu yapmak için Divi'de Bülten Bölümü ayarlarını açın, Gelişmiş sekmesine gidin, CSS Kimliğine durak ekleyin ve değişiklikleri kaydedin.

Ardından, ön uçtaki sayfayı yenileyin ve bülten kayıt kutusunun yapışkan olduğunu ancak iletişim formuna ulaştığında durduğunu ve sitedeki diğer widget'larla örtüşmediğini göreceksiniz.

Benzer şekilde, herhangi bir Divi öğesini sitenizde yapışkan hale getirmek için aynı adımları izleyebilirsiniz. Yapışkan Menü ve Divi Builder'ı kullanarak sosyal simgeleri nasıl sabitleyebileceğinizi görelim.

Sosyal medya simgelerini yapışkan hale getirme

Sosyal medya simgelerini yapışkan hale getirme süreci çok benzer. Ancak başlamadan önce, Yapışkan Menü'nün ücretsiz sürümüyle aynı anda yalnızca bir öğeyi yapışkan hale getirebileceğinizi unutmayın, bu nedenle yapışkan CSS kimliğini sütun 2'den kaldırmayı unutmayın.

Bundan sonra, sosyal medya simgeleri öğenize yapışkan CSS kimliğini eklemeniz gerekir. Daha önce yaptığımız gibi, öğeye tıklayın, Gelişmiş sekmesine gidin ve ilgili alana özel CSS kimliğini ekleyin.

Ardından ayarları kaydedin ve sonuçları ön uçta kontrol edin.

Gördüğünüz gibi, sosyal medya simgelerini yapışkan hale getirdik!

Herhangi bir eklenti yüklemek istemiyorsanız, öğeleri programlı olarak sabitleyebilirsiniz. Nasıl yapacağımıza bir bakalım.

2) Herhangi bir Divi öğesini biraz kodlama ile yapışkan hale getirin

Bu bölümde, herhangi bir Divi öğesini programlı olarak nasıl sabitleyebileceğinizi göstereceğiz. Bu durumda, haber bülteni kayıt widget'ını sabit hale getirmek yerine, size biraz kodlama ile başlığı nasıl yapışkan hale getireceğinizi göstereceğiz.

Özel Bir Başlık Oluşturun

Divi tema oluşturucudan özel web sitesi şablonları oluşturabilirsiniz.

Bu demo için önce bir Global Header oluşturalım.

Üç seçeneğiniz olacak:

• sıfırdan inşa
• Önceden hazırlanmış bir düzen seçin
• Mevcut bir sayfayı klonla

Bu demo için sıfırdan bir başlık oluşturacağız.

Bir sonraki adımda, başlıkta istediğiniz satır sayısını seçmeniz gerekir.

Öğretici için tek bir satır düzeni seçeceğiz. Daha önce gördüğümüz gibi, başlığınızı oluşturduktan sonra onu düzenleyebilir ve menüler, resimler, özel bağlantılar ve daha fazlası gibi birden çok öğe ekleyebilirsiniz. Sürükle ve bırak Divi Builder ile birkaç tıklamayla başlığınızın boyutlarını ve dolgusunu ayarlayabilirsiniz.

Bizim durumumuzda, başlığımıza bir menü ekleyeceğiz.

CSS Sınıfı Ekle

İlerlemeden önce, başlığınız için bir CSS sınıfından bahsetmeniz gerekir. Başlık ayarlarından Gelişmiş sekmesine gidin ve özel bir CSS sınıfı ekleyin. Özel CSS Sınıfı olarak pa-sticky-header ekleyeceğiz.

Bundan sonra, değişiklikleri kaydedin ve Divi tema seçeneklerinde, Entegrasyon ayarları altında kodu eklemek için bir bölüm göreceksiniz.

JavaScript Kodu Ekle

Şimdi eğlenceli kısım başlıyor. Aşağıdaki JavaScript kodunu kopyalayın:

 <script>
jQuery(işlev ($) {
var headerHeight = $('header.et-l.et-l--header').outerHeight();
$(pencere).bind('kaydırma', işlev () {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight - headerHeight) {
$('pa-header').removeClass('pa-sticky-header');
}
Başka {
$('pa-header').addClass('pa-sticky-header');
}
});
});
</script>

Düzenleyiciye yapıştırın ve değişiklikleri kaydedin.

Ek CSS Ekle

Daha sonra siteye yapıştırmak istediğimiz elementi ayarlayacağız. Bizim durumumuzda, başlığı üstte sabitlemek için aşağıdaki CSS kodunu kopyalayın ve CSS düzenleyicisine yapıştırın ve değişiklikleri kaydedin.

 /*belirli bir elemanı yapışkan yapmak için*/

.pa-sticky-header {
	pozisyon: sabit!önemli;
	üst: 0; /*Başlığın sayfanın üstünden uzaklığını ayarlar*/
	genişlik: %100;
} 

Şimdi web sitenizin ön ucunu kontrol edin ve başlığın düzeltileceğini göreceksiniz.

Ek olarak, başlığı özelleştirebilir ve konumunu, boyutunu vb. değiştirebilirsiniz. Benzer şekilde, kodu temel olarak kullanabilir ve Divi'de başka herhangi bir öğeyi yapışkan hale getirebilirsiniz. Örneğin, formları, düğmeleri veya sütunları sabit hale getirmek için kullanabilirsiniz.

öneriler

Artık Divi kurulumunuzda nasıl yapışkan öğeler oluşturacağınızı biliyorsunuz, ancak kılavuzumuzu tamamlamadan önce bazı ipuçlarına bir göz atalım.

Animasyon Yok

Divi oluşturucu eklentisi ile öğelere, bölümlere ve daha fazlasına vurgulu efektler ekleyebilirsiniz. Ancak, sitenizi bozabileceğinden, yapışkan öğeleriniz üzerinde fareyle üzerine gelme efektlerini kullanmanızı önermiyoruz. Kurulumunuzda herhangi bir teknik sorun yaşıyorsanız, vurgulu animasyon efektini devre dışı bırakmanız yeterlidir; her şey normale dönecektir.

Yayınlamadan Önce Değişiklikleri Önizleyin

Divi Builder, yaptığınız değişiklikleri ekranda görmenizi sağlar. Bu, hizalamanın doğru olduğundan ve öğenin sitedeki diğer widget'larla çakışmadığından emin olmak için çok kullanışlıdır.

Ücretsiz Sürümde Sınırlı Yapışkan Öğeler

WP Sticky Menu'nün ücretsiz sürümü, yalnızca bir yapışkan öğe eklemenize izin verir. Bu nedenle, web sitenize daha fazla öğe eklemek istiyorsanız, 39 USD'den başlayan profesyonel sürüme geçmeyi düşünebilirsiniz.

Çözüm

Sonuç olarak, bazı öğeleri kullanıcılarınız için daha görünür hale getirmek istediğinizde düzeltmek harika bir seçenektir. Bu öğreticide, herhangi bir Divi öğesini yapışkan hale getirmek için iki seçenek gördük:

• Divi Builder eklentisini kullanma
• programatik olarak

Kodlama becerileriniz yoksa Divi Builder eklentisini kullanabilirsiniz. Bunu yapmanın en basit ve en acemi dostu yolu. Canlı ön izleme modu ile her değişikliği anında görebilirsiniz.

Öte yandan, herhangi bir eklenti yüklemek istemiyorsanız veya sadece kodlamayı seviyorsanız, herhangi bir öğeyi programlı olarak sabitleyebilirsiniz. JavaScript kodunu temel olarak kullanın ve istediğiniz herhangi bir öğeyi yapışkan hale getirmek için özelleştirin. CSS kodlarını temanızın style.css dosyasına ekleyebilir veya Divi'deki ek CSS bölümünü kullanabilirsiniz. Bunu yapmadan önce, elementinizde CSS sınıfından bahsettiğinizden emin olun.

Öğelerinizi yapışkan hale getirmek için hangi yöntemi kullandınız? başka bilen var mı Aşağıdaki yorumlar bölümünde bize bildirin.

Bu eğitim faydalı olduysa, lütfen arkadaşlarınızla ve diğer blog yazarlarıyla sosyal medyada paylaşın. Daha fazla eğitim için blogumuza bir göz atın.