Web sayfanızdaki ana gezinmeyi sayfada bir bölüme nasıl bağlarsınız?

📚 İçindekiler:

1. 🔍 Bağlantıları Kullanma İhtiyacı
2. 💡 İlk Örnek: Paper Plane Video
3. 💡 İkinci Örnek: Dogs Welcome.net
4. 🔗 Anchor Bağlantıları Nasıl Oluşturulur?
   • Yöntem 1: Seçtiğiniz Bölüme Gitme
   • Yöntem 2: Sayfa Bölümünün İd'sini Bulma
5. 🛠️ İlk Yöntem: Seçtiğiniz Bölüme Gitme
   • Adım 1: Kodu Ekleme ve Özelleştirme
   • Adım 2: Ana Navigasyonda Bağlantı Oluşturma
6. 🛠️ İkinci Yöntem: Sayfa Bölümünün İd'sini Bulma
   • Adım 1: Sayfa Bölümü İd'sini Bulma
   • Adım 2: Ana Navigasyonda Bağlantı Oluşturma
   • Adım 3: URL Slug Eklemesi
7. 🧹 Diğer Sayfalarda Anchor Bağlantıları Kullanma
8. 🔨 Diğer İpuçları ve Örnekler
9. 📝 Özet
10. 🌐 Kaynaklar

🔍 Bağlantıları Kullanma İhtiyacı

Web sayfanızın üst gezinmesini bir sayfadaki bir bölüme bağlamak istediğiniz zamanlar olabilir. Bu durumda, ziyaretçilerin doğrudan belirli bir bölüme atlayabilmesini sağlayan "anchor bağlantıları" gibi yöntemler kullanabilirsiniz. Bu makalede, anchor bağlantıları oluşturmanın farklı yöntemlerini ve bu bağlantıları nasıl kullanabileceğinizi göstereceğim. İlk olarak, birinci yöntem olan "Seçtiğiniz Bölüme Gitme" yöntemini inceleyelim.

💡 İlk Örnek: Paper Plane Video

İlk örnek olarak, New York merkezli bir video yapım şirketi olan Paper Plane Video'nun web sitesine bir göz atalım. Burada üst gezinmede dört bağlantı olduğunu görüyoruz: "Ana Sayfa", "Çalışmalarımız", "Hakkımızda" ve "İletişim". "Ana Sayfa" ve "Çalışmalarımız" linkleri sayfalara yönlendirirken, "Hakkımızda" ve "İletişim" linkleri aslında ana sayfadaki bir bölüme yönlendirir. Bu sayede, iki ayrı sayfa gibi görünürken aslında sadece ana sayfadaki bir bölüme yönlendiriyoruz. Bu örnekle anchor bağlantılarına nasıl bir örnek oluşturabileceğimizi gördük. Şimdi ikinci örneğe geçelim.

💡 İkinci Örnek: Dogs Welcome.net

Diğer bir örnek olarak, "Dogs Welcome.net" isimli bir web sitesine bakalım. Bu web sitesi, ABD ve Kanada'da köpek dostu tatil konaklamalarını bulmak isteyen insanlara yardımcı olmak amacıyla tasarlanmıştır. Üst gezinmede farklı sayfaların yanı sıra bir de "Arama" düğmesi bulunmaktadır. Bu düğme, ziyaretçilerin tatile kiralık yer aramasına olanak tanır ve doğrudan filtrelenmiş bir bölüme yönlendirilir. Bu örnekte de anchor bağlantılarının farklı bir kullanımını görmüş olduk. Şimdi, anchor bağlantılarını oluşturmanın farklı yöntemlerini inceleyelim.

🔗 Anchor Bağlantıları Nasıl Oluşturulur?

Anchor bağlantıları oluşturmanın iki farklı yöntemi bulunmaktadır. İlk yöntemde, belirli bir bölüme doğrudan bağlantı vermeniz gerekirken, ikinci yöntemde ise sayfa bölümünün ID'sini kullanmanız gerekmektedir. Şimdi, her iki yöntemi de adım adım inceleyelim.

🛠️ İlk Yöntem: Seçtiğiniz Bölüme Gitme

Bu yöntemde, belirli bir bölüme doğrudan bağlantı vererek anchor bağlantısını oluşturuyoruz. İlk olarak, seçmek istediğiniz bölümün üzerine tıklayarak o bölümün herhangi bir tarafına bir artı işareti ekliyoruz ve "Kod Bloğu" seçeneğini seçiyoruz. Ardından, aşağıdaki kodu ekliyor ve özelleştiriyoruz:

<a href="#bölümünüzün ID'si">Başlığınız</a>

Burada önemli olan, href özniteliğinde belirli bir bölüme ait ID'yi kullanmanızdır. Bu ID, bölümünüzün kimliğini temsil eder ve ziyaretçilerin doğrudan o bölüme atlamalarını sağlar. Örneğin:

<a href="#hakkımızda">Hakkımızda</a>

Bu kodu ekledikten sonra, ana gezinme menüsünde bir bağlantı oluşturabilirsiniz. Bağlantıya doğru URL'yi ve başlığı ekledikten sonra, ziyaretçiler belirli bir bölüme tıkladıklarında ilgili bölüme yönlendirilecektir.

🛠️ İkinci Yöntem: Sayfa Bölümünün İd'sini Bulma

İkinci yöntemde ise, sayfa bölümünün ID'sini bulup kullanarak anchor bağlantısını oluşturuyoruz. Bu yöntemi kullanmak için "Squarespace ID Finder" adlı bir uzantıya ihtiyacımız olacak. Bu ücretsiz uzantıyı kullanarak sayfa bölümlerinin ID'lerini ve hatta blok ID'lerini bulabilirsiniz. İd'yi bulduktan sonra, aşağıdaki gibi bir link oluşturabilirsiniz:

<a href="#sayfa-bölümü-id'niz">Başlığınız</a>

Bu sefer href özniteliğinde sayfa bölümünün ID'sini kullanmanız gerekmektedir. Örneğin:

<a href="#about">Hakkımızda</a>

Bu şekilde bir bağlantı oluşturduğunuzda, ziyaretçiler belirli bir bölüme tıkladıklarında o bölüme atlanacaktır. Şimdi, her iki yöntemin de nasıl uygulanacağını adım adım inceleyelim.