Yeni Sekmede/Pencerede Divi Tam Genişlik Üstbilgisi ve Kaydırıcı Düğmeleri Nasıl Açılır

Hepimiz belli bir kitleye çeker ve konuşan bir web sitesi oluşturma bir süreç olduğunu biliyoruz. Müşteri yolculuğunun bir parçası olduğu için web sitenizde gerçekleştirdikleri her işlem önemlidir. Her ziyaretçinin ve potansiyel müşterinin kişisel olarak yaklaşıldığını ve anlaşıldığını hissetmesi gerekir.

Web sitenizi doğru noktaya getirmek, iyi bir tasarım, iyi düşünülmüş içerik ve ziyaretçilerinizi hem sizin hem de onların istediği işlemleri yapmaya itecek kesinlikle yeterli CTA'lar gibi pek çok şey gerektirir.

Bir web sitesinde harekete geçirici mesajları destekleyen en çok kullanılan öğelerden biri bir düğmedir. Düğmeleri genellikle bir web sitesinin çeşitli bölümlerinde bulabilirsiniz. Web sitesinin farklı bölümlerine yönlendirebilir veya bir ziyaretçiyi harici bir web sitesine yönlendirebilirler.

Divi ile, bir web sitesi oluşturan herkesin düğmelerini istedikleri yere ve istedikleri kadar eklemesine izin veriyoruz. Hedef kitlenizle hızlı bir şekilde etkileşim kurmak istiyorsanız ve web sitenizi ziyaretlerinin başlangıcından itibaren merak uyandırmak istiyorsanız, kahraman bölümünüze bir CTA eklemek iyi bir şey.

Neden Bir Bağlantıyı Yeni Sekmede/Pencerede Otomatik Olarak Açmalısınız?

Bir bağlantının yeni bir pencerede açılmasını etkileyemeyiz. Geçmişte birçok kişinin kötüye kullandığı bir şeydi ve şimdi her şey kullanıcının tercihlerine bağlı. Ancak, belirli bir bağlantıyı aynı pencere yerine yeni bir sekmede açma seçeneğimiz var. Bir bağlantıyı yeni bir sekmede açmak istemenizin birçok nedeni vardır, işte bunlardan bazıları:

Ziyaretçilerinizin web sitesinden uzaklaşmasına izin vermemek

Ziyaretçilerinizi kaybettiğiniz an, onları tekrar web sitenize geri getirmek çok zor. Bu genellikle, bir düğmeye tıkladığınızda onları aynı pencerede harici bir web sitesine gönderdiğinizde olur.

Öyleyse neden onları ilk etapta gönderelim? Düğmeleri yeni bir sekmede açarak, sekmelerinde web sitenizin bulunduğu bir sayfanın hala açık olduğundan emin olursunuz. Geçmişlerini gözden geçirmek zorunda kalmadan sayfanıza geri dönebilirler.

Açtıkları bağlantıyı kapattıktan sonra web sitenizde kalmaya devam etmek

Bir şeyi okumayı bitirdiğinizde bir sekmeyi kapatmak doğal bir şeydir. Ya bu, ya da tıklıyorsunuz. Her iki durumda da, bir sonraki eyleme geçtikleri andan itibaren sizden bir adım uzaktadırlar.

Bağlantıyı yeni bir sekmede veya pencerede otomatik olarak açmak, insanlara ilk etapta başka bir yere nasıl geldiklerini hatırlatmanıza yardımcı olur; web siteniz aracılığıyla.

Daha sonra açık sekmeden alma

Günlerce yan yana dizilmiş bir sürü sekmeye sahip olan ilk kişi olmazdınız. Sizinkini insanların tarayıcısında tutmayı değerli kılan şey tam olarak budur. Ziyaretçiler birkaç gün sonra web sitenizi açık sekmelerinde bulurlarsa, içeriğinizin içeri girmesine ve başka bir tur atmasına izin verecek zamanları olmuş olabilir.

İkinci, üçüncü veya dördüncü kez okunduğunda içeriğin çok daha iyi anlaşılması olasılığı yüksektir.

Başlayın: Yeni Sekmede Tam Genişlik Üstbilgisini ve Kaydırıcı Düğmelerini Açın

Tam Genişlik Üstbilgisi veya Tam Genişlik Kaydırıcısı olan bir Tam Genişlik Bölümü kullanmadığımız zaman, genellikle standart bir bölüm ekler ve ona manuel olarak Düğme Modülleri ekleriz. Her Düğme Modülünün İçerik sekmesinde, aynı pencerede bir bağlantı mı yoksa yeni bir sekmede mi açmak istediğinizi seçebilirsiniz. Bu seçeneği İçerik sekmesinin Bağlantı alt kategorisinde bulabilirsiniz.

Fullwidth Header & Slider'da bu olasılıklar dahil değildir. Ve HTML önceden tanımlı olduğu için, onunla birlikte gelen HTML kodunu basitçe değiştiremeyiz. Bu nedenle, hem Fullwidth Header hem de Fullwidth Slider düğmelerini yeni bir sekmede/pencerede açacak jQuery kodu ekleyeceğiz.

Tam Genişlikli Başlık Oluşturma

Mevcut veya yeni bir sayfaya yeni bir Tam Genişlik Bölümü ekleyerek başlayalım.

Bu Tam Genişlik Bölümünde, Tam Genişlik Başlığını seçin. Fullwidth Header, ihtiyaç duyduğu her şeye sahip güzel bir başlığa sahip bir web sitesi sağlar. Şimdi, Tam Genişlik başlığının İçerik sekmesini aşağı kaydırın ve düğmede görünmesini istediğiniz metni yazın. Bundan sonra, düğmeye bir bağlantı da ekleyin.

Ardından, Tam Genişlik başlığının Gelişmiş sekmesine gidin ve düğme alanlarıyla karşılaşana kadar aşağı kaydırın. Bu durumda sadece bir numaralı buton kullanmak istiyoruz. İkinci düğmeyi yeni bir sekmede açmak istediğinizi varsayalım, ikinci düğmeye atanan sınıfı kullanmanız gerekecek.

Düğme Bir alanına tıklayın ve sınıfın turuncu yazı tipi renginde görünmesini izleyin. Sınıf '.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button' şeklindedir. Bu sınıfa jQuery kodumuzda ihtiyacımız olacak. İkinci düğmenin yeni bir sekmede veya pencerede açılmasını istiyorsanız, devam edin ve o sınıfı bir yere kaydedin.

Tam Genişlikte Kaydırıcı Oluşturma

Bunun yerine Tam Genişlik Kaydırıcısı eklemek istiyorsanız, devam edin ve yeni bir Tam Genişlik Bölümü ekleyin. Bu sefer, bölüme bir Tam Genişlik Kaydırıcısı yerleştirin. İçerik sekmesindeki düğme metnini yazın ve Gelişmiş sekmesine geçin.

Slayt Düğmesi seçeneğini bulana kadar bu sekmeyi aşağı kaydırın. Tam Genişlik Kaydırıcısının parçası olan düğmenin atanan sınıfını kopyalayın.

Divi Tema Seçeneklerine jQuery Kodu Ekleme

Fullwidth Header & Slider için bağlantıları yeni bir sekmede açmaya yardımcı olmak için kullanacağımız kod farklıdır. Bunun yanı sıra jQuery kodunu web sitemize iki farklı şekilde entegre edebiliriz. En yaygın olanı Divi web sitenizin Tema Seçeneklerine kod eklemektir.

İnsanların bu seçeneği en sık kullanmalarının nedeni, tüm web sitesi için geçerli olmasıdır. Sitenizin hangi sayfasında olursanız olun, kod geçerli olacaktır. Web sitenizin farklı sayfalarında belirli bölümleri veya öğeleri yeniden kullanıyorsanız, web sitenize özel kod eklemenin en kolay yolu budur.

Kodu web sitenizin tamamına eklemek için Divi > Tema Seçenekleri > Entegrasyon bölümüne gidin ve web sitenizin <head> bölümüne aşağıdaki kodu ekleyin :

Tam Genişlik Üstbilgi düğmesi için jQuery kodu

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

Tam Genişlik Kaydırıcı düğmesi için jQuery kodu

<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>

Yukarıdaki baskı ekranında gösterildiği gibi <script> etiketleri arasına metin eklemeyi unutmayın.

Fark edebileceğiniz gibi, Fullwidth Header ve Fullwidth Slider için kod biraz farklıdır. Kodun üçüncü satırında her bir düğmenin sınıfının parantezler arasında nasıl yazıldığını fark edebilirsiniz. Öyleyse, kodu Tam Genişlik Başlığının ikinci düğmesine uygulamak istediğinizi varsayalım, sadece yazılı sınıfı ikinci düğmeye atananla değiştirin.

Bundan sonra, değişiklikleri kaydedin. Kod hemen tüm web sitenize uygulanacaktır.

Kod Modülüne jQuery Kodu Ekleme

Kodu web sitenize eklemenin bir başka yolu da Kod Modülünü kullanmaktır. Bu Modül genellikle eklemek istediğiniz kod yalnızca bir sayfa için geçerli olduğunda kullanılır.

Değişiklikleri uygulamak istediğiniz sayfayı açın ve sayfanın en üstünde bir sütun bulunan bir satır ekleyin. Bundan sonra, o satıra bir kod modülü ekleyin.

Aynı kodu kopyalayın ve İçerik sekmesinin Metin alt kategorisindeki İçerik Kutusuna yapıştırın.

Tam Genişlik Üstbilgi düğmesi için jQuery kodu

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

Tam Genişlik Kaydırıcı düğmesi için jQuery kodu

<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>

Değişiklikleri kaydedin.

Yukarıdaki baskı ekranında gösterildiği gibi <script> etiketleri arasına metin eklemeyi unutmayın. Kod artık yalnızca web sitesinin o sayfasına uygulanacaktır.

Son düşünceler

Aşağıdaki kodu web sitenize eklemek, yalnızca Tam Genişlik Bölümünde Tam Genişlik Üstbilgisini ve Kaydırıcıyı kullanırken bir düğmenin yeni bir sekmede açılmasını istediğinizde gereklidir. Düğme Modülü ile Divi Builder'da yeni bir sekmede bir bağlantı açmayı seçebileceğiniz dahil edilmiş bir seçeneğiniz vardır.

Kodu web sitenizin birkaç sayfasında kullanmak istiyorsanız, web sitenizin Tema Seçeneklerine ekleyin. Ancak kodu yalnızca bir Tam Genişlik Üstbilgisi veya Tam Genişlik Kaydırıcısı için kullanıyorsanız, kodu o belirli sayfadaki bir Kod Modülüne ekleyerek daha iyi durumda olabilirsiniz.

Bağlantılarınızı ne sıklıkla yeni bir sekmede açıyorsunuz ve neden? Aşağıdaki yorumlar bölümünde bize bildirin!