Herhangi Bir Divi Sayfa Elemanı Nasıl Yapışkan Yapılır

Herhangi bir Divi sayfa öğesinin nasıl yapışkan (veya sabit) hale getirileceğini bilmek, web tasarımcılarının çeşitli şekillerde kullanabilecekleri kullanışlı becerilerden biridir. "Yapışkan" terimine aşina değilseniz, kullanıcı sayfayı aşağı kaydırdıkça "sabit" kalan bir web sayfasındaki bir öğeye atıfta bulunur. Yapışkan öğenin popüler bir örneği, sabit bir gezinme menüsüdür. Divi'nin varsayılan olarak kullanılabilen sabit (veya yapışkan) bir gezinme işlevi vardır. Bu nedenle, kullanıcı sayfayı aşağı kaydırdığında, kullanıcı kaydırdıkça menünün sabit bir sürümü sayfanın üst kısmında takılı kalır. Ancak yapışkan öğeler hemen hemen her şey için kullanılabilir ve herhangi bir sayfada istediğiniz harekete geçirici mesaja dikkat çekmenin harika bir yoludur.

Bu eğitimde, Scroll'da Yapışkan Menü (veya Herhangi Bir Şey!) adlı eklentiyi kullanarak sayfanızdaki herhangi bir öğeyi yapışkan hale getirmenin kolay bir yolunu göstereceğim. Tek gereken eklenti ayarlarını yapılandırmak için birkaç dakikadır. O zaman tek yapmanız gereken öğenize özel bir CSS kimliği eklemek. İşte bu kadar kolay.

Hadi içeri girelim!

Bu Eğitim İçin İhtiyacınız Olan Şeyler

Bu eğitim için aşağıdakilere ihtiyacınız olacak:

• Divi Teması
• Kaydırma eklentisindeki Yapışkan Menü (veya Herhangi Bir Şey!)
• Muhasebeci Blog Sayfası Düzeni (Divi Builder'dan edinilebilir)

Herhangi Bir Divi Sayfa Elemanı Nasıl Yapışkan Yapılır

Youtube Kanalımıza Abone Olun

Eklenti Ayarlarını Yapılandırma

Divi temanızda Yapışkan Menü (veya Herhangi Bir Şey!)'i yükledikten ve etkinleştirdikten sonra, WordPress panosuna gidin ve Ayarlar > Yapışkan Menü'ye (veya Herhangi Bir Şey!) gidin.

Temel Ayarlar sekmesi altında, seçenekleri aşağıdaki gibi güncelleyin:

İlk olarak, yapışkan öğeniz için benzersiz bir tanımlayıcı eklemeniz gerekecek. Bu bir CSS Kimliği veya Sınıf olabilir. Daha sonra bu tanımlayıcıyı daha sonra Divi'deki öğemize ekleyeceğiz. Hatırlamayı kolaylaştırmak için “#sticky” CSS kimliğini ekleyeceğim.

Yapışkan Öğe: #yapışkan

Ardından, sayfanın üst kısmı ile yapışkan öğe arasındaki boşluk için piksel değerini eklemeniz gerekir. Divi'nin sabit gezinme çubuğunun yüksekliği varsayılan olarak 54 piksel olduğundan, yapışkan öğemizin sabit gezinme ile çakışmaması için bu seçenek için en az 54 piksel eklemek istiyoruz.

Sayfanın üstü ile yapışkan öğe arasındaki boşluk: 54 piksel

Yapışkan öğeyi mobil cihazlarda devre dışı bırakmak da iyi bir fikirdir. Bunu yapmak için, ekran 980 pikselden küçük olduğunda öğeyi yapıştırmayacak şekilde eklentiyi yapılandırmamız gerekiyor.

Ekran 980 pikselden küçük olduğunda öğeyi yapıştırmayın

Ayarlarınızı kaydedin ve ardından Gelişmiş Ayarlar sekmesine gidin ve aşağıdakileri güncelleyin:

Z-endeksi seçeneği için, özellikle öğemizi kaydırmada diğer öğelerle çakıştırmayı planlıyorsak, öğemizin sayfadaki diğer tüm öğelerin üstüne yığıldığından emin olmak istiyoruz. Bunun olmasını sağlamak için z-endeksini 99998 olarak ayarlayın.

Z-endeksi: 99998

Size Divi'de öğelerin nasıl sıralandığı hakkında bir fikir vermek için, bölümlerin z-endeksi 2, sütunların z-endeksi 9 ve başlık/gezinme çubuğunun z-endeksi 99999'dur. yapışkan öğemizin başlık gezinmesi için z-endeksinden 1 sayı daha düşük olmasını istemek. Bu, yapışkan öğenin gezinme dışında sayfadaki her şeyin üzerinde durmasını sağlar. Bu, öğenizi durdurmak ve sayfayı yukarı itmek istediğinizde kullanışlı olacaktır, böylece siz kaydırırken yapışkan öğe gezinmenin üstüne oturmayacaktır (dağınık ve bozuk görünüyor).

Ardından, bir "push-up" öğe tanımlayıcısı ekleyebiliriz. Bunu yapışkan öğemiz için bir durdurucu olarak düşünebilirsiniz. Bu genellikle bir altbilgi öğesidir. Temel olarak, bu, sayfayı aşağı kaydırırken yapışkan öğeyi durduracak öğeyi tanımlar ve yapışkan öğenin sayfanın geri kalanıyla birlikte yukarı itilmesine izin verir. Bu örnek için, tanımlayıcıyı “#stop” CSS kimliğiyle ayarlayacağım.

Push-up öğesi: #stop

Ayarları kaydet.

Artık yapışkan bir element yapmak için ihtiyacımız olan güce sahibiz!

Divi Sayfa Öğesini Yapışkan Yapmak

Bir Divi öğesini nasıl yapışkan hale getireceğinizi göstermek için, Muhasebeci Düzen Paketindeki Divi'nin Muhasebeci Blog Sayfasını kullanacağım. Başlamak için yeni bir sayfa oluşturun, sayfanıza bir başlık verin ve Visual Builder'ı dağıtın. Ardından “Hazır Düzen Seçin” seçeneğini seçin. Kitaplıktan yükleme açılır penceresinden Accountant Layout Pack'i seçin ve Blog sayfasını seçin.

Bu sayfada, bir uzmanlık bölümünün sağ kenar çubuğunda bir e-posta aboneliği tercih formu bulunur. Bu forma daha fazla dikkat çekmek için, kullanıcı sayfayı aşağı kaydırdığında formu yapışkan hale getirebiliriz. Ardından, üst üste gelmemesi için sayfadaki bir sonraki bölüme ulaştığında öğeyi durdurabilir (veya yukarı itebiliriz).

Sütun Yapışkanı Nasıl Yapılır

Ancak bu noktada, hangi belirli öğeyi yapışkan hale getirmek istediğimize karar vermemiz gerekiyor. E-posta Seçeneği modülünü sadece yapışkan hale getirebiliriz, ancak bu, doğrudan formun altındaki Sosyal Medya Takip modülünü de hesaba katmaz ve bunu da yapışkan hale getirmek isteriz. Ve bu modüllerin her ikisine de aynı tanımlayıcıyı verebiliriz çünkü ikisi de aynı konumda yapışkan hale gelerek çakışmaya neden olur. Bunu yapmanın en iyi yolu, tüm sütunu (sütun 2) yapışkan hale getirmektir.

2. sütunu yapışkan hale getirmek için hedeflemek istediğimiz sütunu içeren satırın satır ayarlarını açın. Ardından, Gelişmiş sekmesinin altına "yapışkan" CSS kimliğini ekleyin. Bu, eklenti ayarlarımıza eklediğimiz yapışkan öğe benzersiz tanımlayıcısına karşılık gelir.

CSS kimliği: yapışkan

(NOT: Burada kimliğin önüne hashtag (veya pound) sembolünü koymayın. Ayrıca, bunu CSS Sınıfına değil, CSS Kimliğine eklediğinizden emin olun)

Ayarları kaydedin ve sayfanın canlı sürümünü önizleyin. Aşağı kaydırırsanız, sütun 2'nin (her iki modülle birlikte) pencerenin üstünden 54 piksel olduklarında yapışkan hale geleceğini ve siz kaydırmaya devam ederken o konumda kalacağını fark edeceksiniz.

Bir Bölümde Yapışkan Öğeyi Durdurma

Gördüğünüz gibi, öğe aşağıdaki diğer bölümlerin içeriğiyle örtüşecek şekilde yapışkan kalmaya devam ediyor. Bunun olmasını engellemek için eklenti ayarlarına eklediğimiz “push up” tanımlayıcımızı (#stop) kullanabiliriz.

Aşağıdaki bölümde bulunan sticky elementi durdurmak için bölüm ayarlarını açmamız ve CSS ID “stop” eklememiz gerekiyor.

CSS kimliği: dur

Şimdi sayfanın canlı sürümünü önizleyin. Yapışkan öğenin tanımladığınız bölümde nasıl durduğuna dikkat edin.

Oldukça havalı değil mi?

Bir Modül Nasıl Yapışkan Yapılır

Tek bir modülü yapışkan hale getirmek için, öğenizin kaydırma sırasında sayfa boyunca diğer öğelerin üstüne oturması için doğru z-endeksine sahip olduğundan emin olmak için Divi'de bir ayarlama yapmanız gerekir. Daha önce de bahsettiğim gibi Divi tüm bölümlere aa z-index 2'yi atar. Ve eklenti, yapışkan öğeye 99998 z-endeksini uygular. Ancak bir modül, ana öğesinin (bölüm) üzerinde sıralanamadığından (veya dizine eklenemediğinden) modül, sayfadaki diğer modüllerin arkasında kalmaya devam edecektir. Bunu düzeltmek için, yapışkan modülümüzü tutan bölüme manuel olarak 99998 z-endeksi vermemiz gerekiyor.

Bunu göstermek için, daha önce kullandığımız aynı Muhasebeci Blog sayfası düzenini kullanacağım. Bir modüle CSS ID'mizi eklemeden önce, ilk olarak kolon 2 için belirlediğimiz CSS ID'yi (yapışkan) çıkarmamız gerekiyor ve daha sonra onun altındaki bölüm için belirlediğimiz CSS ID'yi (stop) çıkarıyoruz. Ardından Social Media Follow modül ayarlarını açın ve modüle CSS ID “sticky” ekleyin.

Canlı sayfayı görüntülerseniz, kaydırdıkça aşağıdaki bölümlerde diğer modüllerle örtüştüğünde yapışkan öğenin gizlendiğini fark edeceksiniz.

Bunu düzeltmek için, sosyal medya takip modülü yapışkan öğesini içeren bölümün bölüm ayarlarını açın. Ardından aşağıdaki özel CSS'yi Ana Öğeye ekleyin:

z-index: 99998;

Şimdi canlı sayfayı kontrol edin. Sosyal medya simgelerinin sayfanın üst kısmına (üstten 54 piksel), sabit gezinmenin hemen altına nasıl yapışacağına ve kaydırırken diğer modüllerin üzerinde kalacağına dikkat edin.

Bir Bölümü Yapışkan Yapmak

Tüm bir bölümü yapışkan hale getirmek için, seçtiğiniz bölüme CSS kimliğini "yapışkan" olarak eklemekle aynı işlemi izlersiniz. Eklenti sizin için otomatik olarak yaptığından, özel css kullanarak z-endeksini güncellemenize gerek yoktur.

Hover Efektleri Yapışkan Öğelerin Arızalanmasına Neden Olabilir

Sayfanızın tamamında veya yapışkan öğenizde etkin olan fareyle üzerine gelme efektleriniz varsa, bazı aksaklıklarla karşılaşabilirsiniz. Bu olursa, yapışkan öğe vurgulu efektlerini devre dışı bırakmanız gerekebilir.

Sayfa Başına Yalnızca Bir Yapışkan Öğe

Eklenti, sayfa başına yalnızca bir yapışkan öğeye izin verir, bu nedenle birden fazla yapışkan öğe eklemek istiyorsanız, daha gelişmiş bir çözüme (veya bunu destekleyen başka bir eklentiye) ihtiyacınız olacaktır.

Son düşünceler

Umarım bu makale, herhangi bir Divi sayfa öğesini yapışkan hale getirmenin canlandırıcı basit bir yolunu sağlamada yardımcı olmuştur. Yapışkan alt menüler, yapışkan CTA'lar, yapışkan promosyon teklifleri ve aklınıza gelebilecek hemen hemen her şey oluşturmak için kullanın. Olanakları keşfederken iyi eğlenceler!

Aşağıdaki yorumlarda sizden haber bekliyorum.

Şerefe!