Çapa bağlantılarıyla Divi’de yapabileceğiniz 5 harika şeyler
Çapa bağlantısı, navigasyonu artırabilir ve özellikle uzun süreli içeriğe sahip web sitelerinde içeriğinizi yönetmeye yardımcı olabilir. Navigasyonun yanı sıra bir çapa bağlantısı kullanmanın diğer ana faydalarından biri, bağlantının SEO için olağanüstü olmasıdır. Bir çapa bağlantısı kullanma kavramı çok basit olsa da, nereden başlayacağınızı bilmek zor olabilir. Bu aslında WordPress sitesini geliştirmeye başladığımda aradığım ilk şeylerden biri. Bu makalede size bir çapa bağlantısı ile Divi’de yapabileceğiniz 5 harika şey gösterilmektedir. Bu örnekler için ihtiyacınız olan tek şey divi ve öğrenme arzusudur.
Hadi gidelim! Nasıl yapılacağını öğreneceksiniz:
Divi’de çapa bağlantılarıyla geçiş yapın ve açın
Bir sayfa gezinme menüsü oluşturun
Başka bir sayfanın sayfasına atla
Divi Dot’un Gezinmesini Kullanın
Başlığınıza bir çapa ekleyin
5 Çapa Bağlantıları ile Divi’de yapabileceğiniz harika şeyler YouTube kanalımıza abone olun ve Divi’deki çapa bağlantılarıyla geçiş yapın.
Kapatmak için gördüğüm en iyi kullanımlardan biri SSS sayfası için. Kullanıcının odak noktası olmak isteyen küçük bir bilgi ortaya çıkarmak için çok iyi çalışıyorlar. Bu sadece bir dakika ve birkaç sıra JavaScript tamamlanacaktır. Bir sekme veya Chordeon açmak için bu yöntemin varyasyonlarını da kullanabilirsiniz ve bu zor görünse de, aslında çok karmaşık olmasa da. İlk olarak, yeni bir sayfa oluşturun ve bir görsel üreticiyi uygulayın. Ardından “Önceden Yapılan Bir Düzen Seç” seçeneğini seçin. Kütüphaneden açılır yüklemede, arama çubuğuna “SSS” yazarak muhasebecinin SSS sayfasının düzenini bulun. Ardından, düzene ve görünen önizlemeye tıklayın, sayfanıza uygulamak için bu düzeni kullanın düğmesini tıklayın. Şimdi bağlantı bağlantınızın işlevselliğini eklemeye hazırsınız. Bu örnek için, üst başlıktaki düğmeyi bir çapa bağlantısı olarak kullanacağım, böylece tıklandığında sayfa aynı anda otomatik olarak açılacak belirli bir anahtara geçecek. Bunu yapmak için, önce düğme ayarlarını açın ve düğmeniz için aşağıdaki bağlantı URL’sini ekleyin: URL Bağlantı Anahtarı: #Toggle3 Bu ankraj bağlantısını “Toggle3” veriyorum, sayfadaki üçüncü anahtara bağlantı vermek istediğimi hatırlamak için. Bu kimliğin adı, daha sonra ekleyeceğimiz geçiş CSS kimliği ile ilişkili olacaktır, böylece düğme hangi geçişin kaydırılacağını bilir.
Ardından, benzersiz CSS sınıfını düğme modülüne ekleyin: CSS sınıfı: Toggle ve ardından ayarlarınızı kaydedin. Bu sınıfın adı, düğmeyi tıklarken anahtarın açılış eylemini hatırlatmaya yardımcı olur. İstenen işlevselliği biraz elde etmek için bu sınıfı özel jqeury’de kullanacağız. Ardından, SSS için kullanılan anahtar modülünün iki sütununu içeren satıra aşağı kaydırın. İlk sütunda üçüncü anahtar modülü ayarlarını açın. Bu, düğmeyi (veya bağlantı bağlantısını) tıklarken kaydırmak ve açmak istediğimiz modüldür. Gelişmiş sekmesi altında, aşağıdaki CSS kimliğini ekleyin: ID CSS: Toggle3, bunun daha önce kullanılan düğme bağlantısının URL’si ile gerçekten ilişkili olması önemlidir. Buradaki tek fark “#” terk etmeniz gerektiğidir. Son adım, sayfa gövdemize bazı özel kodlar eklemeyi içerir. Bunu yapmak için, Divi Tema seçeneğine gidin ve Entegrasyon sekmesini açın, ardından aşağıdaki GIF’de gösterildiği gibi aşağıdakileri gövdeye yapıştırın. jQuery (işlev ($) {
// düğmeyi açın düğmeyi tıklayın $ (‘A.Open-Toggle’). On (‘tıklayın’, işlev (olay) {
$ (‘#toggle3.et_pb_toggle_2 .et_pb_toggle_title’). Click ();
});
});
Kodu doğru komut dosyası etiketine sarmayı unutmayın.
Şimdi çalışıp çalışmadığını görmek için sayfanızı test edebilirsiniz.
Bu kodun ne yaptığını biraz anlamak için. Daha yakından bakalım. Bu yine alıntı: jQuery (işlev ($) { // düğmeyi açın düğmeyi tıklayın $ (‘A.Open-Toggle’). On (‘tıklayın’, işlev (olay) {
$ (‘#toggle3.et_pb_toggle_2 .et_pb_toggle_title’). Click ();
});
});
Kodda, “A.Open-Toggle” seçmenleri özel sınıfımızla düğmelere atıfta bulunur. Selector “#toggle3.et_pb_toggle_2 .et_pb_toggle_title”, “toggle3” id ve “et_pb_toggle_2” sınıfı ile geçiş başlığını ifade eder. “Et_pb_toggle_2” sınıfı aslında üçüncü anahtarla ilgili bir sınıftır. Bunun nedeni, Divi’nin ilk geçiş sınıfını “ET-PB_TOGGLE_0”, ikinci geçiş “ET-PB_Toggle_1” ve benzeri vermesi, vb. 0 Sayfadaki ilk anahtarla başlayıp aşağı inmeye devam edin. Veya böyle bir sınıf bulmak için her zaman HTML kodunu kontrol edebilirsiniz. Kodunuzu buna göre güncelleyebilmeniz için bunu bilmek önemlidir. Örneğin, düğmemin sayfadaki ikinci anahtarını açmasını istiyorsam, “#toggle3.et_pb_toggle_2 .et_pb_toggle_title” ile “#toggle3.et_pb_toggle_1 .et_pb_toggle_title” ile değiştireceğim. Bu kod görüntüleri aşağıdaki kavramların bir varyasyonudur. Mümkün olduğunca basit hale getirmeye çalıştım.
Bu harika teknik, sekmeler ve akorlar için de kullanılabilir. İşin püf noktası, koordinatörün öğesi veya sekmesi için doğru CSS sınıfını tanımlamaktır, böylece kodda kullanabilirsiniz. Bir sayfa gezinme menüsü oluşturun
Bu menü tasarımı bir sayfa sitesi için popülerdir. Menüde, sayfanızdaki parçadan parçaya atlamak için faydalı olacaktır. Bir sayfa sitesi veya yön sayfası oluşturursanız bu çok yararlıdır. Bu süreç hakkında daha fazla bilgi için Divi ile bir sayfa web sitesi oluşturulacağına dair belgeleri görebilirsiniz.
İşte bunun nasıl yapılacağına dair kısa bir genel bakış.
Bu, daha önce yapılan tüm düzenler için işe yarayacaktır, ancak bu örnek için Web Freelancer sayfalarının düzenini kullanacağım. Yeni bir sayfa oluşturun, Visual Builder uygulayın, “Premade Düzen’i seçin” seçeneğini seçin, ardından sayfanıza Ana Sayfa Düzeni Freelancer’ı uygulayın. Şimdi bağlantılı (veya kaydır) istediğiniz her bölüme CSS kimliği eklemeniz gerekir. “Hizmetim” başlıklı bir bölüm bulun. Bölüm ayarlarını açın, devam eden sekmeyi tıklayın ve aşağıdaki CSS kimliğini ekleyin: ID CSS: Service Ardından, “Üstün İş” bölümünü bulun ve CSS kimliğinin bu bölümünü aşağıdaki gibi verin:
ID CSS: Çalışma
Ve “Hakkımızda” bölümüne aşağıdaki CSS kimliğini de ekleyin: ID CSS: Hakkında
Bir sayfa tarzı bir web sitesi katili oluşturma hakkında daha fazla ilham için, bu gönderiye bakın: Çapa bağlantısı ile duyarlı bir sabit yan çubuk nasıl oluşturulur Ekranı Divi ile üst ve alt kaydırma bağlantılarıyla nasıl yapılır Bir -sayfa divi web sitesi için bir kaydırma üzerinde başka bir sayfanın sayfasına nasıl etkin bir bağlantı oluşturulur Bunu göstermek için yukarıdan örnekleri kullanabiliriz. Sayfadaki üç bölüme CSS kimliği eklediğimiz için (hizmet, iş, hakkında), sadece bu bölüme demirleme bağlantılarımızı kullanarak atlayamadık, aynı zamanda tamamen farklı bir sayfanın o kısmına da atlayabiliriz. Tek yapmanız gereken başka bir sayfada bir bağlantı oluştururken bir çapa bağlantısı URL’si kullanmaktır. “Hizmet” kimliği ile hizmet bölümüne bir bağlantı kurmak istiyorsanız, www.domainanda.com/page/#services gibi görünecektir. Aşağıda, sayfanın diğer sayfaların o bölümüne bağlanırken “Hizmetlerim” bölümüne nasıl yükleneceğine ve geçeceğine bir örnek verilmiştir.
Bu, sitenizdeki farklı sayfalardan atlamak isteyebileceğiniz birçok farklı eylem davetiyesi (yani daha fazla bilgi edin, divi al, beni seçin! Vb.) İçin iyi çalışır. Teknik olarak divi nokta navigasyonu kullanın bu doğuştan gelen bir çapa bağlantısıdır. Kendi CSS bölüm kimliğinizi eklemenize gerek yok. DOT Navigasyon özelliği otomatik olarak sizin tarafınızdan bir çapa bağlantısı oluşturur. Sayfanız için nokta gezinmesini etkinleştirmek için, sayfanızı düzenlerken ekranın sağ üst kısmındaki Divi sayfa ayarlarının altındaki nokta gezinme seçeneğini “açık” olarak ayarlayın. DOT navigasyonunu etkinleştirdikten sonra Divi, sayfanızın yanına otomatik olarak şeffaf bir menü ekler. Tıklandığında tüm sayfanızdaki parçalara dönmenin her noktası.
Daha fazla bilgi için, nokta navigasyonunuza etiketlerin nasıl ekleneceğine dair iyi bir yazı vardır. Başlığınıza bir çapa ekleyin Başlığınıza bir çapa bağlantısı ekleyin Her zaman iyi bir fikirdir. Bu, aynı sayfadaki her başlığa kolayca gezinmenize veya web sitenizdeki diğer sayfalardan bu başlığa bağlantı kurmanıza olanak tanıyan çok fazla içeriğe sahip daha uzun bir sayfa dizine eklemenin iyi bir yoludur. Ayrıca arama motorlarının sitenizi sürüklemesine yardımcı olur. Divi Builder’ı kullanarak başlığınıza CSS kimliği eklemek için, başlık metninizi içeren modülü açın. Metin sekmesini açtığınızdan emin olun. Başlık etiketini (H1, H2, H3, vb.) Bulun, ardından ilk başlık etiketinden braketlere kimliği girin. İşte “WebDesign” ID:
Web Sitesi Tasarımı
ile H3 başlığı örneği, şimdi doğru ankraj bağlantısı URL’sini kullandığım sürece bu başlığa bağlanabilirim. Bu örnek şöyle görünecektir: www.domainanda.com/page/#webdesign, divi yapımcılar kullanmayan sayfalar veya yayınlar için de yararlı olacaktır. Bu sayfa veya yayın için başlığınıza bir çapa bağlantısı eklemek için WordPress metin düzenleyicisindeki Metin sekmesini açın. Sadece seçtiğiniz başlığı arayın ve aşağıda gösterildiği gibi Başlık Etiketine kimliği ekleyin.
