Sayfa Atlaması Oluşturma

Çapa bağlantıları veya atlama bağlantıları olarak da anılan sayfa atlamaları, bir bağlantının üzerine tıkladığınızda uzun bir sayfada yukarıda veya aşağıda bir yere anında gitmenizi sağlar. Aşağıdaki İçerik Tablosu, sayfa atlamalarına örnektir.

Bu kılavuzda

1. Sayfa Atlamalarını Neden Kullanmalıyım?
2. Blok Düzenleyicisinde Sayfa Atlamaları Oluşturun
   1. Birinci Adım: Bir Atlama Bağlantısı Oluşturun
   2. İkinci Adım: Atlama Bağlantınızı İlişkilendirin
   3. Blok Düzenleyicisinde Başa Dön
3. Klasik Düzenleyicide Sayfa Atlamaları Oluşturun
   1. Birinci Adım: Bir HTML Kimliği oluşturun
   2. İkinci Adım: HTML Kimliğinin bağlantısı
   3. Klasik Düzenleyicide Başa Dön
4. Başka Bir Sayfadaki veya Yazıdaki Atlama Bağlantısına Geçme
5. Gezinme Menüsünde Sayfa Atlamaları
6. Dipnot Olarak Sayfa Atlamaları

Sayfa Atlamalarını Neden Kullanmalıyım?

Sayfa atlaması bir sayfanın belli bir bölümüne bağlantı oluşturmanın harika bir yoludur. Ziyaretçileriniz uzun bir sayfada bir bölümden diğer bir bölüme tıklayarak geçebilirler.

Örneğin bir yazının üst kısmında bir ad listeniz olduğunu varsayalım. Her adı yazının farklı bir bölümüyle ilişkilendirebilir, böylece ziyaretçilerin ilgilendikleri bilgileri içeren bölüme atlamasını sağlayabilirsiniz. Ardından okuyucuları yazının başında bulunan ve tüm bölümleri içeren orijinal listeye tekrar bağlayabilirsiniz.

💡

Ayrıca yazınızdaki/sayfanızdaki tüm başlıklardan otomatik olarak sayfa atlamaları oluşturmak için İçindekiler tablosu blokunu da kullanabilirsiniz.

Blok Düzenleyicisinde Sayfa Atlamaları Oluşturun

Birinci Adım: Bir Atlama Bağlantısı Oluşturun

İlk adım, okuyucularınızın sayfa atlamasına tıkladıklarında ulaşmalarını istediğiniz bölümü oluşturmaktır. Bunu yapmak için “atlama bağlantısı” adı verilen öğe gerekir. Atlama bağlantısını içeriğinizdeki herhangi bir bloka ekleyebilirsiniz.

1. Atlama bağlantısını eklemek istediğiniz bloka tıklayın. Sağ kenar çubuğunda blok ayarları açılır. Kenar çubuğunu görmüyorsanız Yayınla/Güncelle düğmesinin yanındaki ’dişli çark” simgesine tıklayın.

Blok ayarlarını kenar çubuğunda bulabilirsiniz.

2. Sağ kenar çubuğundaki blok ayarlarından Gelişmiş’e tıklayın.
3. HTML Atlama Bağlantısı alanının bağlantısı olacak bir sözcük yazın. Sayfanın farklı bir bölümünde atlama bağlantı noktası olarak kullanılmamış benzersiz bir sözcük yazdığınızdan emin olun. Birden fazla sözcük kullanmak istiyorsanız aralarını tire işareti (-) ile ayırın. Örnek: two-words.

İkinci Adım: Atlama Bağlantınızı İlişkilendirin

Sonra, sayfa atlama bağlantısını oluşturacağız. Ziyaretçileriniz ilk adımda oluşturduğunuz bölüme gitmek için buna tıklarlar.

1. Bir metin yazın veya okuyucularınızın tıklayacağı bir görsel ya da düğme ekleyin.
2. Metni, görseli veya düğmeyi tıklayıp vurgulayın, ardından blokun araç çubuğundan bağlantı seçeneğini belirleyin. Burada görüldüğü gibi, bağlantı seçeneğinin simgesi zincir halkasına benzer:
   
3. Hashtag (#) işaretiyle başlayarak, Birinci Adım’da oluşturduğunuz HTML Atlama Bağlantısını yazın. Örneğin, sayfa-atlaması-oluştur adlı bir Atlama Bağlantısı oluşturduysanız #sayfa-atlaması-oluştur ifadesine bağlantı verirsiniz.
4. Bağlantıyı kaydetmek için ok simgesine tıklayın veya klavyenizde Enter/Return tuşuna basın. Ziyaretçiler, oluşturduğunuz bağlantıya tıklayarak sayfa atlamasını oluştururken HTML Atlama Bağlantısını eklediğiniz bölüme gider.

⚠️

Önizleme yaptığınızda sayfa atlaması bağlantıları görünmez, ancak yazıyı/sayfayı Yayınladıktan sonra bunları test edebilirsiniz.

Blok Düzenleyicisinde Başa Dön

Sayfanın en üstüne geri dönen bir atlama bağlantısı oluşturmak için:

1. Sayfanızın en üst kısmına seçtiğiniz herhangi bir bloku ekleyin ve o blok için bir atlama bağlantısı oluşturun.
2. Sayfanızın alt tarafına inin ve sayfanın üst kısmındaki ilk atlama bağlantısı blokuna yönelik bir bağlantı oluşturun.

Klasik Düzenleyicide Sayfa Atlamaları Oluşturun

Klasik düzenleyicide sayfa atlaması oluşturmak için hedef metine ve bağlantıya ihtiyacınız vardır. Ziyaretçileriniz bağlantıya tıkladıklarında sayfada hedef metni içeren bölüme atlarlar.

Birinci Adım: Bir HTML Kimliği oluşturun

1. Görsel‘den Metin düzenleyiciye geçin.

2. Hedef olarak ayarlamak istediğiniz metne veya okuyucunun sayfa atlama bağlantınızı tıkladığında gitmesini istediğiniz yere bir HTML kimliği ekleyin. Hedef metin şu şekilde yazılır:

<h3 id="unique-identifier">I am the target text.</h3>

Yukarıdaki HTML kodunda, unique-identifier ile I am the target text öğelerini kendi içeriğinizle değiştirin.

h3, bunun 3. seviyede bir başlık olduğunu belirtir. Gerekiyorsa farklı bir başlık düzeyi, hatta bir paragraf olacak şekilde değiştirebilirsiniz. HTML ile çalışma hakkında daha fazla bilgi edinin.

💡

HTML kimliklerinizin boşluk içermediğinden emin olun ve sözcüklerinizi boşlukla değil tire işareti (-) ile ayırın. Ayrıca oluşturduğunuz her hedef için mutlaka farklı bir HTML kimliği kullanın.

İkinci Adım: HTML Kimliğinin bağlantısı

HTML kimliğini oluşturduktan sonra aşağıdaki adımları izleyerek kimlik için bir bağlantı oluşturacaksınız. Bu, ziyaretçilerinizin Birinci Adım’da oluşturduğunuz bölüme gitmek için tıklayacakları bağlantıdır.

1. Metin’den Görsel düzenleyiciye geçin.
2. Bağlantı oluşturmak istediğiniz metni vurgulayın.
3. Araç çubuğundan bağlantı simgesine tıklayın.
4. Görüntülenen kutu bölümünde, bir hashtag (#) simgesi ve ardından Birinci Adım’da oluşturulan hedefin HTML kimliğinin adını şu şekilde girin: #unique-identifier
5. Bağlantıyı kaydetmek için oka tıklayın veya klavyenizden Return/Enter tuşuna basın.

Klasik Düzenleyicide Başa Dön

Aşağıdaki talimatları uygulayarak, Klasik Düzenleyicide yazınızın veya sayfanızın en üst kısmında atlama bağlantılarınız için görünmez bir hedef oluşturabilirsiniz:

1. Görsel‘den Metin düzenleyiciye geçin.
2. <div id="top"></div> kodunu sayfadaki diğer tüm HTML kodlarının yukarısına ekleyin. Böylece yazınızın veya sayfanızın üst kısmında, HTML kimliği topolan görünmez bir hedef oluşturulur.

3. Metin’den tekrar Görsel düzenleyiciye geçin.
4. Bağlantı oluşturmak istediğiniz metni vurgulayın.
5. Araç çubuğundan bağlantı simgesine tıklayın.
6. Görüntülenen kutu bölümünde, bir hashtag (#) simgesi ve ardından İkinci Adım’da oluşturulan hedefin HTML kimliğinin adını şu şekilde girin: #top
7. Bağlantıyı kaydetmek için oka tıklayın veya klavyenizden Return/Enter tuşuna basın.

Başka Bir Sayfadaki veya Yazıdaki Atlama Bağlantısına Geçme

Sayfa atlamalarının sadece bir sayfa içinde başka bölüme atlamak için kullanılması gibi bir zorunluluk yoktur. Sayfa atlamasını kullanarak, bir sayfadan başka bir sayfanın belirli bir alanına da bağlantı oluşturabilirsiniz.

Sayfa atlaması oluşturduğunuz sayfanın canlı sürümünü görüntülerken, sayfa atlama bağlantısına tıkladığınızda tarayıcı çubuğunuzda sayfanın adresine atlama bağlantısı metninin de eklendiğini görürsünüz.

Örneğin:

• Havalı sitenizde Örnek adında bir sayfa oluşturdunuz ve sayfa adresi de https://yourgroovydomain.com/example/
• Ardından bu sayfada unique-identifier adlı bir atlama bağlantısı oluşturdunuz
• Atlama bağlantısına tıkladığınızda sayfa adresiniz https://yourgroovydomain.com/example/#unique-identifier olarak değişecektir

Artık hedef için bir URL’niz olduğuna göre, aşağıdaki biçimi kullanarak, sitenizdeki başka bir sayfadan veya yazıdan o hedefe bağlantı oluşturmak için onu kullanabilirsiniz:

https://yourgroovydomain.com/example/#unique-identifier

Gezinme Menüsünde Sayfa Atlamaları

Gezinme menünüzden, bir sayfanın belirli bir bölümüne bağlantı yapan sayfa atlamaları oluşturabilirsiniz. Bu, aşağıya kaydırılarak ilerlenen uzun tek bir ana sayfası olan sitelerde çok yaygındır. Sayfa atlamaları, ziyaretçilerin ana sayfada istedikleri bölümü görmelerini kolaylaştırır.

1. Birinci adım; Blok Düzenleyicisini kullanıyorsanız bir atlama bağlantısı oluşturmak, Klasik Düzenleyici kullanıyorsanız bir HTML Kimliği eklemektir. Bu, atlanacak olan yerdir.
2. Menü ayarlarınızdan, Özel Bağlantı seçeneğini kullanarak yeni bir öğe ekleyin.
3. Metin alanında, menü öğesi için kullanmak istediğiniz bir ad yazın.
4. URL alanında, atlama bağlantınızı önüne bir hashtag (#) simgesi ekleyerek yazın.

Menüde bir Sayfa Atlaması ekleme

#my-anchor gibi bir sayfa atlamasının yalnızca atlama bağlantısının bulunduğu sayfada çalışacağını unutmayın. Sitenizde birden fazla sayfa varsa ve sayfa atlamasının tüm sayfalarda çalıştığından emin olmak istiyorsanız bağlantının başına şu şekilde tam sayfa URL’sini ekleyin:

https://yourgroovydomain.com/example-page/#my-anchor

Dipnot Olarak Sayfa Atlamaları

Sayfa atlamalarını kullanarak dipnot oluşturma ile ilgili kılavuzumuza bakın.