Anchor Linklerle Divi'de Yapabileceğiniz 5 Harika Şey

Bağlantı bağlantıları, özellikle uzun biçimli içeriğe sahip bir web sitesinde gezinmeyi iyileştirebilir ve içeriğinizi düzenlemenize yardımcı olabilir. Navigasyon dışındaki bağlantı bağlantılarını kullanmanın diğer ana faydalarından biri, SEO için harika olmalarıdır. Bağlantı bağlantılarını kullanma kavramı çok basit olsa da, nereden başlayacağınızı bilmek zor olabilir. Aslında WordPress web siteleri geliştirmeye başladığımda aramaya başladığım ilk şeylerden biri.

Bu makale, bağlantı bağlantılarıyla Divi'de yapabileceğiniz 5 harika şeyi gösterir. Bu örnekler için tek ihtiyacınız olan Divi ve öğrenme arzusu.

Hadi gidelim!

Şunları nasıl yapacağınızı öğreneceksiniz:

1. Divi'de Çapa Bağlantılı Bir Geçişe gidin ve Açın
2. Tek Sayfa Gezinme Menüsü Oluşturun
3. Başka Bir Sayfadan Bir Sayfa Bölümüne Atlama
4. Divi Dot Navigasyonunu kullanın
5. Başlıklarınıza Bağlantı Bağlantıları Ekleyin

Anchor Linklerle Divi'de Yapabileceğiniz 5 Harika Şey

Youtube Kanalımıza Abone Olun

Divi'de Çapa Bağlantılı Bir Geçişe gidin ve Açın

Geçişler, kullanıcı deneyimini geliştirebilecek öğelerden biridir. Bana tembel deyin (verimli kelimesini kullanırdım) ama bilgilerimi almak benim için ne kadar kolay olursa o kadar iyi. Belirli içerik türleri için geçişlerin büyük bir hayranıyım.

Geçişler için gördüğüm en iyi kullanımlardan biri SSS sayfaları içindir. Kullanıcının odaklanmak istediği küçük bilgi parçalarını ortaya çıkarmak için harika çalışıyorlar. Bu işlemin tamamlanması yalnızca bir dakika ve birkaç satır JavaScript alacaktır. Sekmeleri veya akordeonları açmak için bu yöntemin bir varyasyonunu da kullanabilirsiniz ve bu zor görünse de aslında çok karmaşık değildir.

İlk olarak, yeni bir sayfa oluşturun ve görsel oluşturucuyu dağıtın. Ardından “Hazır Düzen Seçin” seçeneğini seçin. Kütüphaneden Yükle açılır penceresinde, arama çubuğuna “sss” yazarak Muhasebeci SSS sayfa düzenini bulun. Ardından düzeni tıklayın ve gelen önizlemede, sayfanıza dağıtmak için Bu Düzeni Kullan düğmesini tıklayın.

Artık bağlantı bağlantı işlevinizi eklemeye hazırsınız. Bu örnekte, üst başlık bölümündeki düğmeyi bağlantı bağlantısı olarak kullanacağım, böylece tıklandığında sayfa aynı anda otomatik olarak açılacak belirli bir geçişe kaydırılacaktır.

Bunu yapmak için önce düğme ayarlarını açın ve düğmeniz için aşağıdaki bağlantı URL'sini ekleyin:

Düğme Bağlantı URL'si: #toggle3

Sayfadaki üçüncü geçişe bağlanmak istediğimi hatırlamaya yardımcı olması için bu bağlantı bağlantısına “toggle3” kimliğini verdim. Bu kimlik adı, daha sonra ekleyeceğimiz geçiş CSS kimliğiyle ilişkilendirilecek, böylece düğme hangi geçişin kaydırılacağını bilecektir.

Ardından, düğme modülüne benzersiz bir CSS Sınıfı ekleyin:

CSS Sınıfı: açık geçiş

Ardından ayarlarınızı kaydedin.

Bu sınıf adı, düğmeyi tıkladığınızda açma/kapama açma eyleminin size hatırlatılmasına yardımcı olur. İstenen işlevselliği birazdan elde etmek için bu sınıfı özel jqeury'mizde kullanacağız.

Ardından, SSS için kullanılan iki geçiş modülü sütununu içeren satıra gidin. İlk sütunda üçüncü geçiş modülünün ayarını açın. Bu, Düğmeye (veya bağlantı bağlantısına) tıkladığınızda kaydırmak ve açmak istediğimiz modüldür.

Gelişmiş Sekmesi altında aşağıdaki CSS kimliğini ekleyin:

CSS kimliği: geçiş3

Bunun, daha önce kullanılan düğme bağlantı url'si ile tam olarak ilişkili olması önemlidir. Buradaki tek fark, “#” işaretini dışarıda bırakmanız gerektiğidir.

Son adım, sayfamızın gövdesine bazı özel kodlar eklemeyi içerir. Bunu yapmak için Divi Tema Seçeneklerine gidin ve Entegrasyon Sekmesini açın, ardından aşağıdaki GIF'de gösterildiği gibi gövde bölümüne aşağıdakini yapıştırın.

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

Kodu uygun komut dosyası etiketine sarmayı unutmayın.

Artık çalışıp çalışmadığını görmek için sayfanızı test edebilirsiniz.

Bu kodun ne yaptığını biraz anlamak için. Hadi daha yakından bakalım. İşte yine fragman:

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

Kodda, “a.open-toggle” seçicisi, özel sınıfımızla düğmeyi ifade eder. "#toggle3.et_pb_toggle_2 .et_pb_toggle_title" seçicisi, "toggle3" kimliğine ve "et_pb_toggle_2" sınıfına sahip geçiş başlığına atıfta bulunur.

"et_pb_toggle_2" sınıfı, aslında üçüncü geçişle ilişkili sınıftır. Bunun nedeni, Divi'nin ilk geçişi “et-pb_toggle_0” sınıfını, ikinci geçişi “et-pb_toggle_1” vb. vermesidir.

Bu nedenle, sayfanızdaki belirli bir geçiş için sınıfın ne olduğunu bilmek istiyorsanız, sayfadaki ilk geçişten başlayarak 0'dan başlayarak aşağı doğru inebilirsiniz. Veya sınıfı bu şekilde bulmak için her zaman html kodunu inceleyebilirsiniz.

Kodunuzu buna göre güncelleyebilmeniz için bunu bilmek önemlidir. Örneğin, düğmemin sayfadaki ikinci geçişi açmasını isteseydim, “#toggle3.et_pb_toggle_2 .et_pb_toggle_title” yerine “#toggle3.et_pb_toggle_1 .et_pb_toggle_title” koyardım.

Bu kod parçacığı, aşağıdaki kavramın bir çeşitlemesidir. Mümkün olduğunca basit tutmaya çalıştım.

Bu harika teknik, sekmeler ve akordeonlar için de işe yarar. İşin püf noktası, akordeon öğesi veya sekmesi için doğru css sınıflarını belirlemektir, böylece kodda kullanabilirsiniz.

Tek Sayfa Gezinme Menüsü Oluşturun

Bu tür menü tasarımı, tek sayfalık siteler için popülerdir. Sayfanızda bölümden bölüme atlamak için menüde bağlantılar oluşturmanız faydalı olabilir. Bu, özellikle tek sayfalık bir site veya bir açılış sayfası oluşturuyorsanız yararlıdır. Bu işlem hakkında daha fazla bilgi için Divi ile tek sayfalık web sitelerinin nasıl oluşturulacağına ilişkin belgelere göz atabilirsiniz.

İşte bunun nasıl yapılacağına dair hızlı bir genel bakış.

Bu, herhangi bir önceden hazırlanmış düzen için işe yarayacaktır, ancak bu örnek için Web Freelancer Ana Sayfa Düzenini kullanacağım. Yeni bir sayfa oluşturun, görsel oluşturucuyu dağıtın, "Hazır Düzen Seçin"i seçin ve ardından Freelancer Ana Sayfa Düzenini sayfanıza dağıtın.

Şimdi, bağlanmak (veya kaydırmak) isteyeceğiniz her bölüme CSS kimlikleri eklemeniz gerekiyor. “Hizmetlerim” başlıklı bölümü bulun. Bölüm ayarlarını açın, gelişmiş sekmesine tıklayın ve aşağıdaki CSS kimliğini ekleyin:

CSS kimliği: hizmetler

Ardından, "özellikli çalışma" bölümünü bulun ve bu bölüme aşağıdaki gibi bir CSS kimliği verin:

CSS kimliği: iş

Ayrıca "Hakkımızda" bölümüne aşağıdaki CSS kimliğini de ekleyin:

CSS kimliği: hakkında

Bu üç bölüm, benzersiz CSS kimlikleriyle doğru şekilde ayarlandığında, menü bağlantı bağlantılarımızı oluşturduğumuzu bilebiliriz.

Panodan Görünüm > Menüler'e gidin ve yeni bir Birincil Menü oluşturun . Ardından, aşağıdaki URL ve Bağlantı Metni ile üç özel bağlantı oluşturun:

Özel Bağlantı 1
URL: #hizmetler
Bağlantı Metni: Hizmetler

Özel Bağlantı 2
URL: #iş
Bağlantı Metni: İş

Özel Bağlantı 3
URL: #hakkında
Bağlantı Metni: Hakkında

Görüntüleme konumunuzu Birincil Menü olarak ayarlamayı seçmeyi unutmayın. Ardından menünüzü kaydedin.

Artık sayfanızı ziyaret ettiğinizde deneyebilirsiniz. Düzgün kaydırma olduğunu fark edebilirsiniz. Bunun nedeni, Divi temasının otomatik olarak yumuşak kaydırma eklemesidir - bu özellik Divi sürüm 2.4'te eklenmiştir.

Tek sayfa stilinde harika web siteleri oluşturma konusunda daha fazla ilham almak için şu gönderilere göz atın:

• Bağlantı Bağlantıları ile Duyarlı Sabit Kenar Çubuğu Nasıl Oluşturulur
• Divi ile Üst ve Alt Kaydırma Bağlantıları ile Tam Ekran Bölümleri Nasıl Oluşturulur
• Tek Sayfa Divi Web Siteleri için Scroll'da Aktif Bağlantılar Nasıl Oluşturulur

Başka Bir Sayfadan Bir Sayfa Bölümüne Atlama

Bunu göstermek için yukarıdaki örneği kullanabiliriz. Sayfadaki üç bölüme (hizmetler, iş, hakkında) bir CSS kimliği eklediğimiz için, yalnızca menü bağlantı bağlantılarımızı kullanarak bu bölümlere atlamakla kalmıyor, aynı zamanda tamamen farklı bir sayfadan bu bölümlere atlayabiliyoruz.

Yapmanız gereken tek şey, farklı bir sayfada bir bağlantı oluşturulduğunda bağlantı bağlantısının URL'sini kullanmaktır. Hizmetler bölümüne "hizmetler" kimliğiyle bir bağlantı koymak isteseydiniz, www.yourdomain.com/page/#services gibi görünürdü .

Başka bir sayfadan o bölüme bağlanırken sayfanın nasıl yükleneceğine ve “Hizmetlerim” bölümüne nasıl kaydırılacağına dair bir örnek.

Bu, sitenizin farklı sayfalarından atlamak isteyebileceğiniz birçok farklı harekete geçirici mesaj (yani daha fazlasını öğrenin, Divi'yi edinin, bana oy verin!, vb.) için harika çalışıyor.

Divi Dot Navigasyonunu kullanın

Teknik olarak bunlar yerleşik çapa bağlantılarıdır. Kendi CSS bölüm kimliklerinizi eklemeniz gerekmez. Nokta Gezinme özelliği, bölümlerinizden otomatik olarak bağlantı bağlantıları oluşturur. Sayfanız için nokta navigasyonunu açmak için, sayfanızı düzenlerken ekranın sağ üst köşesindeki Divi Sayfa Ayarları altında Nokta Gezinti seçeneğini “AÇIK” olarak ayarlamanız yeterlidir. Nokta Gezinmesini açtığınızda, Divi otomatik olarak sayfanızın yanına şeffaf bir menü ekler. Her nokta, tıklandığında sayfanızdaki bölümlere kaydırılır.

Daha fazla bilgi için, nokta navigasyonunuza nasıl etiket ekleyeceğiniz hakkında harika bir gönderi var.

Başlıklarınıza Bağlantı Bağlantıları Ekleyin

Başlıklarınıza bağlantı bağlantıları eklemek her zaman iyi bir fikirdir. Aynı sayfadaki her bir başlığa kolayca gitmenize veya web sitenizdeki diğer sayfalardan bu başlıklara bağlantılar oluşturmanıza olanak tanıyan, çok sayıda içeriğe sahip daha uzun sayfaları dizine eklemek için harika bir yoldur. Ayrıca arama motorlarının sitenizi taramasına yardımcı olur.

Divi Builder'ı kullanarak başlıklarınıza bir CSS kimliği eklemek için başlık metninizi içeren modülü açın. Metin sekmesinin açık olduğundan emin olun. Başlık etiketini (h1, h2, h3, vb.) bulun ve ardından başlangıç ​​başlık etiketinin parantezleri içine bir kimlik girin. İşte "webdesign" kimliğine sahip bir h3 başlığı örneği:

<h3 id="webdesign">Website Design</h3>

Artık doğru bağlantı bağlantı URL'sini kullandığım sürece bu başlığa her yerden bağlantı verebilirim. Bu örnek için hangisi şöyle görünmelidir:

www.alaniniz.com/page/#webdesign

Bu, Divi oluşturucuyu kullanmayan sayfalar veya gönderiler için de kullanışlı olacaktır. Bu sayfalar veya gönderiler için başlıklarınıza Bağlantı Bağlantıları eklemek için WordPress metin düzenleyicisinde Metin sekmesini açın. Seçtiğiniz başlığı bulun ve kimliği aşağıda gösterildiği gibi başlık etiketinin içine ekleyin.

Bu yazı için tam olarak bunu yaptım. Bu gönderinin üst kısmındaki bölüm bağlantıları, gönderideki farklı başlıklara bağlantı veren güzel bir içindekiler tablosu işlevi görür.

Çok güzel şeyler.

Toplama

Bağlantı bağlantılarının birkaç harika pratik kullanımı vardır, ancak bunlarla fazla kafa yormayın çünkü her zaman önce hedef kitlenizi ve hedeflerinizi göz önünde bulundurmalısınız. Unutmayın, iyi tasarım kullanılabilirlik ve işlevle ilgilidir, bu nedenle bazı durumlarda bağlantı bağlantıları çok yardımcı olabilir. Ancak diğerlerinde, kullanıcıların paralaks bölümleri üzerinde ileri geri zıplaması ve kaybolması anlamına gelir. Umarım, bu gönderiden bazı yararlı ipuçları elde edebilmişsinizdir.

Bağlantı bağlantıları hakkında herhangi bir ipucunuz veya sorunuz var mı? Aşağıdaki yorum bölümünde deneyimlerinizi bize bildirin.