Yapışkan Divi sayfa öğesi nasıl yapılır
Divi sayfa öğelerinin nasıl yapışkan hale geleceğini (veya onarılacağını) bilmek, web tasarımcılarının çeşitli şekillerde kullanabileceği pratik becerilerden biridir. “Yapışkan” terimine aşina değilseniz, yalnızca web sayfasındaki kullanıcı sayfayı aşağı kaydırdığında “sabit” kalan öğeleri ifade eder. Yapışkan bir öğenin popüler bir örneği sabit bir gezinme menüsüdür. Divi, varsayılan olarak kullanılabilir kalıcı bir navigasyon fonksiyonuna (veya yapışkan) sahiptir. Bu nedenle, kullanıcı sayfayı aşağı çektiğinde, kullanıcı antrenman yaptığında menü sürümü sayfanın üstünde sıkışmış kalır. Ancak yapışkan öğeler herhangi bir şey için kullanılabilir ve bu, belirli bir sayfada istediğiniz harekete geçirme davetine dikkat çekmenin iyi bir yoludur.
Bu öğreticide, size yapışan menü (veya herhangi bir şey!) Adlı bir eklenti kullanarak sayfanızdaki herhangi bir öğenin yapışkan hale gelmesini sağlamanın kolay bir yolunu göstereceğim. Eklenti ayarlarını yapılandırmak için gereken tek şey birkaç andır. Bu yüzden tek yapmanız gereken öğelerinize özel bir CSS kimliği eklemektir. Bu kadar kolay. Hadi içine girelim! Bu eğitim için bu öğretici için neye ihtiyacınız var: aşağıdakilere ihtiyacınız var:
Divi teması
Polugin Scroll’da yapışkan menü (veya herhangi bir şey!)
Muhasebeci blog sayfasının düzeni (Divi Builder’ın içinden edinilebilir)
Yapışkan Divi sayfa öğesi nasıl yapılır
YouTube kanalımıza abone olun Eklenti ayarlarını, Divi temanızda yüklü ve etkinleştirilen kaydırma eklentisinde bir yapışma menüsü (veya herhangi bir şey!) Yaptıktan sonra, WordPress kontrol panelini açtıktan ve Ayarlar> Yapıştır menüsüne (veya her neyse!) Gezin. Temel Ayarlar sekmesi altında, seçeneği aşağıdaki gibi güncelleyin: İlk olarak, yapışkan öğelerinize benzersiz bir kimlik eklemeniz gerekir. Bu bir kimlik CSS veya sınıf olabilir. Daha sonra bu kimliği Divi’deki öğelerimize daha sonra ekleyeceğiz. Hatırlanması kolay olmak için CSS kimliği “#sticky” ekleyeceğim. Yapışkan öğe: #lengket. O zaman sayfanın üstü ile yapışkan öğe arasındaki boşluğa bir piksel değeri eklemeniz gerekir. Navigasyon bıçakları varsayılan yükseklikte 54 piksel kaldığından, bu seçenek için en az 54 piksel eklemek istiyoruz, böylece yapışkan öğelerimiz sabit navigasyonla örtüşmemesi. Sayfanın üstü ve yapışkan eleman arasındaki boşluk: 54 piksel, cep telefonundaki yapışkan öğeleri devre dışı bırakmak için iyi bir fikirdir. Bunu yapmak için, ekran 980 pikselden küçük olduğunda öğeleri eklemeyecek şekilde eklentileri yapılandırmamız gerekir. Ekran: 980 pikselden daha küçük olduğunda öğeleri eklemeyin
Ayarlarınızı kaydedin ve ardından takipe gidin ve aşağıdakileri güncelleyin: Z-endeks seçeneği için, özellikle öğelerimizin diğer öğelerle örtüşmesini planlıyorsak, öğelerimizin sayfadaki diğer tüm öğelere yığıldığından emin olmak istiyoruz kaydırmada. Bunun gerçekleşmesini sağlamak için index-z dizinini 99998’e verin. Z-index: 99998 Elementin Divi’de nasıl sıralandığına dair bir resim vermek için Bölüm AN-Z Dizin 2’ye sahiptir, sütun A-Z Dizin 9’a sahiptir. ve başlık/navigasyon bıçağının bir index -z 99999 vardır. Temel olarak, yapışkan elemanımızın başlık navigasyonu için The -Z dizininden 1 sayı daha düşük olmasını istiyoruz. Bu, yapışkan öğenin NAV hariç sayfadaki her şeyin üstünde olmasını sağlayacaktır. Bu, öğelerinizi her durdurmak ve sayfaya itmek istediğiniz zaman faydalı olacaktır, böylece yapışkan öğenin kaydırdığınızda NAV’a oturmayacak (dağınık ve hasar görmüş). Sonra, “itme” kimliğinin kimliğini ekleyebiliriz. Yukarı “Element. Bunu yapışkan unsurlarımız için bir durak olarak değerlendirebilirsiniz. Bu genellikle bir altbilgi öğesidir. Temel olarak, bu, sayfayı aşağı yuvarlarken yapışkan öğeyi durduracak öğeleri tanımlar ve yapışkan öğenin kalan sayfa ile yukarı doğru itilmesine izin verir. Bu örnek için, CSS kimliği “#stop” ile kimlik belirleyeceğim. Push-up öğeleri: #stop
Yapışkan bir sütun 2 oluşturmak için, hedeflemek istediğimiz sütunu içeren satır ayarlarını açın. Ardından, Gelişmiş sekmesinin altında, CSS kimliği “yapışkan” ekleyin. Bu, eklenti ayarlarımıza eklediğimiz yapışkan öğelerin benzersiz tanımlanmasına uygundur. ID CSS: yapışkan (not: Hashtag sembolünü (veya pound) buradaki kimliğin önüne yerleştirmeyin. Ayrıca, CSS sınıfına değil, CSS kimliğine eklediğinizden emin olun) Ayarları ve önizlemeyi doğrudan kaydedin. Yuvarlanırsanız, pencerenin üstünden 54 piksel olduktan ve kaydırmaya devam ettiğinizde bu pozisyonda kaldıktan sonra sütun 2’nin (her iki modülle) yapışkan olacağını göreceksiniz. Gördüğünüz gibi bölümdeki yapışkan öğeyi durdurun, element yapışkan kalır, böylece aşağıdaki diğer parçaların içeriğiyle örtüşür. Bu olmayı durdurmak için, eklenti ayarlarına eklediğimiz “push” (#stop) kullanabiliriz. Aşağıdaki bölümdeki yapışkan öğeyi durdurmak için bölümün ayarlarını açmamız ve CSS kimliğini “Durdur” eklememiz gerekir. ID CSS: Dur Şimdi sayfanın doğrudan sürümünü açın. Belirlediğiniz kısımda yapışkan öğenin nasıl durduğunu unutmayın.
Çok havalı değil mi?
Yapışkan Bir Modül Nasıl Yapılır Yapışkan bir modül yapmak için, elemanlarınızın doğru dizine sahip olmasını sağlamak için Divi’de ayarlamalar yapmanız gerekir, böylece kaydırma yaparken tüm sayfalardaki diğer öğelerin üzerinde olmanız gerekir. Daha önce de belirttiğim gibi, Divi tüm parçalara AA Z-Index 2 verdi. Ve eklenti, 99998 dizinini yapışkan öğelere uygular. Ancak modül üst öğenin (bölüm) üzerinde sıralanamadığı (veya dizine eklenemediğinden), modül sayfadaki başka bir modülün arkasında kalacaktır. Bunu düzeltmek için, yapışkan modül INDEX-Z 99998’i elle tutan parçayı onaylamamız ve sağlamamız gerekir. Bunu açıklamak için, daha önce kullandığımızla aynı muhasebe blog sayfalarının düzenini kullanacağım. CSS kimliğimizi modüle eklemeden önce, her şeyden önce, sütun 2 için belirlediğimiz CSS (yapışkan) kimliğini kaldırmamız ve daha sonra altına ayarladığımız CSS kimliğini (Stop) kaldırmamız gerekir. Bundan sonra, sosyal medyayı takip etmek ve “yapışkan” CSS kimliğini modüle eklemek için modül ayarlarını açın. Sayfayı doğrudan görürseniz, kaydırdığınızda alttaki başka bir modülle örtüştüğünde yapışkan öğeyi gizli görürsünüz. Bunu düzeltmek için, modül yapışkan öğesini içeren parçanın ayarlarını açın Sosyal medyayı takip edin. Ardından ana öğelere aşağıdaki özel CSS ekleyin: Z-endeks: 99998; Şimdi sayfayı doğrudan kontrol edin. Sosyal medya simgesinin sayfanın üst kısmına (üstten 54 piksel), sabit NAV’ın hemen altında nasıl yapışacağına dikkat edin ve daha sonra kaydırdığınızda başka bir modülün üstünde kalın.