Nasıl yapışkan bir divi elemanı yaparım?(Adım-DEMI-Adım Kılavuzu)
Sitenizi ayarlamak ve öğeleri geliştirmek ister misiniz? Bu kılavuzda, divi elemanlarını kodlama ile hem de kodlamadan nasıl yapışkan hale getireceğinizi göstereceğiz. Son zamanlarda, kullanıcıların içeriğinizde gezinmelerine yardımcı olmak için divi kullanarak başlığınızı nasıl yapışkan hale getireceğinizi gördük. Bu iyi bir ilk adım ama yapabileceğiniz çok daha fazlası var. Divi, WordPress sitenizin her santimini kişiselleştirmenizi sağlayan çok ayarlanmış bir temadır. Bu nedenle, bu öğreticide, divi öğeleri yapışkan hale getirmenin çeşitli yollarını göreceğiz.
Divi elemanını neden yapışkan hale getirmelisiniz? Varsayılan olarak, Sitedeki öğeler yapışkan değildir, böylece kullanıcı eğitildiğinde öğe ekrandan kaybolur ve kullanıcı yeni bir içerik görür. Bununla birlikte, sitenizdeki en önemli öğelerin müşterilerin ihtiyaç duyduklarını bulmalarına yardımcı olmak için her zaman görülebilir. Bu, kullanıcı aşağı kaydırsa bile öğenin her zaman ekranda kalacağı anlamına gelir. Örneğin, kullanıcının ihtiyaç duyduğu önemli bilgileri içeren ana menüyü, kayıt formunu veya sütunu koyabilirsiniz. Fikir, ziyaretçilerinize yardımcı olmak için bu öğeleri daha görünür hale getirmektir. Yapışkan unsurlar satış ve dönüşümü artırmak için çok yararlı olabilir. Örneğin, birçok çevrimiçi mağaza, satışlarını artırmak için ana tekliflerini ve eylem çağrısı (CTA) doğasında var.
Nasıl yapışkan/sabit bir divi öğesi yaparım? Divi öğelerini yapışkan hale getirmek için iki ana yöntem vardır:
Varsayılan Divi Maker eklentisini kullanarak
Biraz kodlama ile
Bu kılavuzda, her iki yöntemle öğelerin nasıl iyileştirileceğini açıklayacağız. Her iki seçenek de çalışmayı tamamlayacaktır, bu nedenle uzmanlığınıza en uygun olanı seçin. 1) Divi Builder Divi Builder’ı kullanmak Divi ile birlikte gelir, bu yüzden zaten bu temayı kullanırsanız, hiçbir şey yüklemenize gerek yoktur. Herhangi bir öğeyi yapışkan hale getirmek için önce, bir sayfa oluşturmanız ve öğeleri eklemek veya silmek, düzenlemek vb. Bu demo için, muhasebeciler adı verilen önceden hazırlanmış düzen paketlerinden birini kullanacağız, ancak doğrudan bir sayfa veya tamamen yeni bir sayfa da kullanabilirsiniz. İlk sayfayı WordPress kontrol panelinizde yapın, sayfaları açın> Yeni ekleyin ve yeni bir sayfa oluşturun.
Şu andan itibaren görsel bir divi yapıcı kullanacağız, bu yüzden düğmeye basın Divi üreticisini kullanın ve görsel üreticinin sürüklenmesini ve gevşek olduğunu göreceksiniz.
Bitmiş düzeni seçin
Mevcut sayfaları klonlama
Özel bir tasarım oluşturmak istiyorsanız, ilk seçeneği seçin. Bir divi üreticisi kullanarak, siteniz için benzersiz bir sayfa tasarımı oluşturmak çok kolay olacaktır. Veya mevcut sayfa tasarımını klonlayabilir veya hazır düzenini seçebilirsiniz. Bizim durumumuzda, önceden hazırlanmış bir düzen şablonu (muhasebeci) kullanacağız. Bu nedenle, bir muhasebeci şablonunu içe aktarmak için, daha önce oluşturulan düzeni seçme seçeneğini seçer ve sonra listeden ne istediğinizi seçeriz.
Bundan sonra, klasik bir editör kullandığımızda, ekranınızda böyle bir şey göreceksiniz: Ancak, görsel yapımcılarla çalışmak daha kolaydır, bu yüzden ona geçeceğiz. Başlıktaki görsel üreticilere dönerek, ön uçta Build adlı görsel yapımcı kullanma seçeneği göreceksiniz. Basın ve ekranın nasıl değiştiğini ve daha kolay olduğunu göreceksiniz ve ön cephedeki modifikasyon sonuçlarını görmek daha kolay. Muhasebecinin şablonu bilatin ve bülten kayıt formunun sağ tarafı ile donatılmıştır. Ancak, küçüldüğümüzde kaybolması sabit değildi. Öyleyse, yapışkan bir bülten kayıt kutusunun nasıl yapılacağına bakalım. Divi öğesini yapışkan hale getirmek için StickPress eklentisi yapışkan menüsünü yükleyin ve etkinleştirin, Stick Menü eklentisini kullanacağız. Bu nedenle, WordPress kontrol panelinizi açın, eklentileri açın> Yeni ekleyin ve Scroll’da yapışkan menüler, yapışkan başlıklar arayın. Ardından, Yükle ve Etkinleştir’i tıklayın. Bu basit eklenti ile, bir menü, başlık veya herhangi bir öğenin kısa sürede yapışkan hale gelmesini sağlayabiliriz. Bir eklenti hazırlamak için Ayarlar> Çubuk menüsünü (veya herhangi bir şey!) Açın. Yapışkan bir menü hazırlayın. İki ana ayar ayarı seçeneği vardır: Temel Gelişmiş
İlk olarak, temel ayarların nasıl ayarlanacağına bakalım. Yapışkan öğeyi adlandırmanız gerekir. Bizim durumumuzda, buna #sticky diyeceğiz ve üst sayfalar ile öğe arasındaki alanı 50 piksel olarak ayarlayacağız. Alandan emin değilseniz endişelenmeyin, daha sonra değiştirebilirsiniz.
Ardından, temel ayarları kaydedin ve Gelişmiş Ayarlar sekmesini açın. Burada biraz daha yapışkan bir öğeyi düzelteceğiz. Örneğin, z-endeks alanını 99998 olarak ayarlayacağız ve şınav öğesine #stop ekleyeceğiz. Push-up öğesi, yüzen yapışkan widget’ı durdurmanıza yardımcı olacaktır (daha sonra bununla ilgili). Orada başka premium ayar seçenekleri var, ancak şimdilik dokunmayacağız. Bu değerleri ekledikten sonra ayarları kaydedin ve yapmaya hazırsınız. Bundan sonra, görsel bir divi yapıcı kullanarak yaptığınız sayfayı açın. CSS sınıfını ekleyerek bülten kayıt widget’ını ekleyeceğiz. İki sütun var. Sol sütun blog gönderisini gösterir ve sağ sütun bülten kayıt çubuğunu görüntüler. Bu nedenle, sağ sütuna CSS kimliği uygulamamız gerekir.
Bunu yapmak için özel CSS kimliği ekleyin, Divi Ayarları bölümünü açın ve Sütun 2’yi seçin. Gelişmiş sekmesi altında, CSS kimliği, CSS sınıfı ve CSS özel kodu eklemek için bölümü göreceksiniz. Bu öğeyi yapışkan hale getirmek için, yalnızca temel ayarlarda ayarladığınız yapışkan bir öğe eklemeniz gerekir. Bizim durumumuzda, CSS kimliği alanına yapışkan ekleyeceğiz ve ayarları kaydedeceğiz. Divi üreticilerinin tüm ayarını tuttuğunuzdan emin olun, aksi takdirde çalışmaz. Ardından sayfaları görebilirsiniz. Yukarıda görebileceğiniz gibi, bülten kayıt formu şimdi onarıldı. Ancak, bu, bazı değişiklikler yapabilmemiz için sitedeki diğer öğelerle örtüşüyor. Bu, daha ileri ayarlardan oynatılacak push-up öğesi kimliği. Bizim durumumuzda, Bülten Widget’ı iletişim formundan hemen önce durduracağız. Daha önce yaptığımız gibi CSS’yi durdurun, Kontak formu bölümündeki CSS Push-Up Kimliğinden bahsetmemiz gerekir. Bunu yapmak için divi’deki bülten bölümü ayarlarını açın, devam eden sekmeyi açın, CSS kimliğine bir 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 kişi formuna ulaştığında durduğunu ve sitedeki başka bir widget ile örtüşmediğini göreceksiniz. Aynı şekilde, sitenize bağlı divi öğeleri yapmak için aynı adımları izleyebilirsiniz. Yapışkan menüler ve Divi Builder kullanarak sosyal simgeleri nasıl geliştirebileceğinizi görelim. Sosyal medya simgeleri yapmak, sosyal medya simgelerini çok benzer hale getirmek için yapışkan bir süreç haline gelir. Ancak, başlamadan önce, yapışkan menünün ücretsiz bir sürümü ile aynı anda yalnızca bir yapışkan öğe yapabileceğinizi unutmayın, bu nedenle Sütun 2’den yapışkan CSS kimliğini silmeyi unutmayın. Bundan sonra, sosyal medya simgesi öğelerinize yapışkan bir CSS kimliği eklemelisiniz. Daha önce yaptığımız gibi, öğeleri tıklayın, Gelişmiş sekmesini açın ve uygun alana özel bir CSS kimliği ekleyin. Ardından ayarları kaydedin ve sonuçları kontrol edin. Gördüğünüz gibi, sosyal medya ikonlarını doğasında yaptık! Herhangi bir eklenti yüklemek istemiyorsanız, öğeleri programlanmış bir şekilde geliştirebilirsiniz. Nasıl yapılacağını görelim. 2) Bu bölümde küçük bir kodlama ile yapışkan herhangi bir divi elemanı oluşturun, size divi elemanının programlanmış bir şekilde nasıl gelişmesini sağlayabileceğinizi göstereceğiz. Bu durumda, bülten kaydı widget’ını geliştirmek yerine, size biraz kodlama ile yapışkan bir başlık nasıl yapacağınızı göstereceğiz. Bir Divi tema üreticisinden özel bir başlık oluşturun, özel bir web sitesi şablonu yapabilirsiniz. Bu demo için önce, küresel bir başlık yapalım.
Üç seçeneğiniz olacak: Başından beri uyan Bitmiş düzeni seçin
Mevcut sayfaları klonlama Bu demo için sıfırdan bir başlık yapacağı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, bir başlık yaptıktan sonra, onu düzenleyebilir ve menüler, resimler, özel bağlantılar ve daha fazlası gibi bazı öğeler ekleyebilirsiniz. Divi Builder’ın sürükleme ve damlası ile boyutunuzu ve dolgu başlığınızı birkaç tıklamayla ayarlayabilirsiniz. Bizim durumumuzda, başlığımıza bir menü ekleyeceğiz.
CSS sınıfını ekleyin Devam etmeden önce, başlığınız için CSS sınıfından bahsetmeniz gerekir. Başlık ayarlarından, Gelişmiş sekmesini açın ve özel bir CSS sınıfı ekleyin. Özel bir CSS sınıfı olarak PA yapışkanlı başlık ekleyeceğiz.
Bundan sonra, değişiklikleri kaydet ve divi tema seçeneğinde, entegrasyon ayarlarının altındaki kodu girmek için bölümü göreceksiniz. JavaScript kodu ekleyin Şimdi eğlenceli kısım başlar. Aşağıdaki JavaScript kodunu kopyalayın: jQuery (işlev ($) {
var üstbilgiler = $ (‘header.et-l.et-l-staader’). outereight (); $ (pencere) .bind (‘kaydırma’, function () { var windowheight = $ (pencere) .Height (); if ($ (pencere) .scrolltop () <windowheight – başlık) { $ (‘Pa-header’). Removeclass (‘pa yapışkan-başlık’);
}
Değilse {
$ (‘Pa-header’).
}
});
});
Editöre yapıştırın ve değişiklikleri kaydedin.
Ek CSS ekleyin Bundan sonra, sitede yapışkan hale getirmek istediğimiz öğeleri ayarlayacağız. Bizim durumumuzda, başlığın yukarıda kalmasını sağlamak için aşağıdaki CSS kodunu kopyalayın ve CSS düzenleyicisine yapıştırın ve değişiklikleri kaydedin. /*Belirli öğeleri yapışkan hale getirmek için*/
.PA-Sticky-Header {
Pozisyon: Kalın! Önemli;
Yukarıda: 0; /*Başlık mesafesini sayfanın üst kısmından ayarlayın*/
Genişlik:%100;
} Şimdi, web sitenizin ön ucunu kontrol edin ve başlığın düzeltileceğini göreceksiniz.
Ayrıca, başlığı ayarlayabilir ve konumunu, boyutunu vb. Değiştirebilirsiniz. Aynı şekilde, kodu bir temel olarak kullanabilir ve Divi’de diğer öğeleri yapışkan hale getirebilirsiniz. Örneğin, sabit bir form, düğme veya sütun oluşturmak için kullanabilirsiniz. Öneriler Artık Divi kurulumunuzda nasıl yapışkan öğeler yapacağınızı biliyorsunuz, ancak yönergelerimizi tamamlamadan önce bazı ipuçlarına bakalım. Divi Builder eklentisiyle animasyon yoktur, elemanlara, bölümlere ve diğerlerine gelme efekti ekleyebilirsiniz. Ancak, doğrudan imlecin yapışkan öğeleriniz üzerindeki etkisini kullanmanızı önermiyoruz çünkü sitenize zarar verebilir. Kurulumunuzda teknik sorunlar yaşıyorsanız, Hover Animasyon efekti devre dışı bırakın ve her şey normale dönecektir. Divi Builder’ı vermeden önce değişikliklerin önizleme ekranda yaptığınız değişiklikleri görmenizi sağlar. Bu, seviyelendirmenin doğru olmasını ve öğelerin sitedeki diğer widget’larla örtüşmemesini sağlamak için çok yararlıdır. WP Sticky menüsünün ücretsiz sürümündeki sınırlı yapışkan öğeler yalnızca bir yapışkan öğe eklemenizi sağlar. Dolayısıyla, web sitenize daha fazla unsur eklemek istiyorsanız, 39 USD’den başlayan Pro sürümünü artırmayı düşünebilirsiniz. Genel olarak, bazı öğeleri düzeltmek, kullanıcınız için daha görünür hale getirmek istediğinizde iyi bir seçenektir. . Bu öğreticide, divi öğelerini yapışkan hale getirmek için iki seçenek gördük:
Divi Builder eklentisini kullanarak
Programlanmış
