Divi'de Benzersiz Anchor Link Navigasyonu için Kaydırmada Yapışkan Başlıklar Nasıl Yığınlanır

Divi'nin yapışkan seçenekleri, yeni tasarım ve işlevsellik için kapılar açmaya devam ediyor. Bu eğitimde, sabit başlıkları bağlantı bağlantıları olarak kullanarak kullanıcıları bir web sayfasının içeriğinde yönlendirmek için yaratıcı bir yol tasarlayacağız. Yapışkan başlıklar, görüntülenen içeriğin yanı sıra yukarıda veya aşağıda bulunan içeriğin yararlı bir tanımlayıcısı olarak tarayıcı penceresinin üstüne ve altına yapışır. Bu yapışkan başlıklara bağlantı bağlantıları ekleyerek, kullanıcıların ilgili bölüme atlamak için bu yapışkan başlıklara tıklamalarına izin verebiliriz. Bu, bir işlemi görüntüleyen sayfalarda (bir tarif için adımlar gibi) kullanıcı deneyimini artırmanın harika bir yoludur.

Yapışkan başlık bağlantı bağlantısı navigasyonunu oluşturmak için yalnızca Divi'nin yerleşik seçeneklerini kullanacağız. Masaüstü ve mobil cihazlarda işlevsellik benzersizdir. Ve sonuçlar sizi şaşırtabilir!

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız bağlantı bağlantısı navigasyonu ile yapışkan başlıklara bir göz atın.

Yapışkan Başlıkları Anchor Link Navigation Layout'u ÜCRETSİZ olarak indirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

• Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
• WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
• “Hazır Düzen Seçin” seçeneğini seçin.

• Kütüphaneden Yükle açılır penceresinden, Yemek Seti Yerleşim Paketinden Yemek Seti Tarif Sayfası düzenini bulun ve yükleyin.

Bölüm 2: Düzeni Değiştirme

Satırları Silme

Düzen yüklendikten sonra, Talimatlar etiketli ikinci bölümün altındaki en alttaki iki satırı silin.

Şimdi tarifin "adım-01" içeriğine sahip bir satırınız olmalıdır.

Yeni Satır Oluşturma ve İçerikle Doldurma

Yapışkan başlıklar, iki sütunlu bir satırın sol sütununda yer alacaktır. Bu kurulumu oluşturmak için, geçerli satırın altına yeni bir 0-dördüncü dörtte üçü sütun satırı ekleyin.

mulitselect kullanarak (cmd/ctrl tuşunu basılı tutun ve tıklayın), yukarıdaki hazır yerleşim satırında tarifin birinci adımının içeriğini içeren üç modülü seçin.

Ardından bu modülleri yeni oluşturduğunuz yeni satırın sağ sütununa sürükleyin.

İşiniz bittiğinde yukarıdaki boş satırı silin.

Bölüm 3: Her Satır İçin Yapışkan Başlıklar Oluşturma

Bu düzen, her biri sol sütunda yapışkan bir başlık içeren dört satır içerecektir. İlk satır için ilk yapışkan başlığı oluşturduktan sonra, her bir ek içerik satırını oluşturmak için satırları çoğaltacağız.

İlk Satır için Yapışkan Başlık Oluşturma (birinci adım)

Birinci adım için ilk yapışkan başlığı oluşturmak için satırın sol sütununa yeni bir metin modülü ekleyin.

Ardından H4 başlık metni için tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Başlık 4 Yazı Ağırlığı: Kalın
• Başlık 4 Yazı Tipi Stili: TT
• Başlık 4 Metin Hizalama: Orta
• Başlık 4 Metin Boyutu: 15px
• Başlık 4 Harf Aralığı: 3px
• Başlık 4 Çizgi Yüksekliği: 2em

Ardından aralığı ve yuvarlatılmış köşeleri aşağıdaki gibi güncelleyin:

• Kenar boşluğu: 0 piksel
• Dolgu: 10 piksel
• Yuvarlatılmış Köşeler: 3px

NOT: Metin boyutu (15 piksel), satır yüksekliği (2em, 30 piksele eşittir), dolgu (10 piksel) ve varsayılan H4 alt kenar boşluğu (10 piksel) nedeniyle, metin modülünün sonuçta elde edilen yüksekliği 50 pikseldir (30 piksel + 10 piksel + 10 piksel). Bu, ileriye doğru her bir çubuğun üst ve alt konumunun ne kadar dengeleneceğini bilmemiz için önemlidir.

Gelişmiş sekmesi altında, aşağıdaki yapışkan seçenekleri güncelleyin:

• Yapışkan Alt Ofset: 150 piksel (masaüstü), 0 piksel (tablet)
• Üst Yapışkan Sınır: Bölüm (masaüstü), Yok (tablet)
• Alt Yapışkan Sınır: Bölüm (masaüstü), Satır (tablet)
• Çevredeki Yapışkan Elemanlardan Ofset: HAYIR

Bu teknik, sabit başlığa tıklandığında bağlantı bağlantılarımızın satırı tarayıcı penceresinin en üstüne çekmesini sağlayacaktır.

Ardından, yapışkan durumda arka plan rengini güncelleyin:

• Yapışkan Arka Plan Rengi: #febd2d

Ardından, yapışkan durumdaki Z İndeksini güncelleyin:

• Z İndeksi (yapışkan): 10003

Bu, mobil cihazlarda istiflendiğinde başlığın diğer yapışkan başlıkların üzerinde kalmasını sağlayacaktır.

Sahte İçeriği Güncelle

Daha fazla adım için satırımızı çoğaltmadan önce, 2. sütundaki en üstteki metin modülündeki H4 başlığını çıkarın. Ardından ikinci metin modülünü (paragraf metniyle birlikte) 2. sütuna kopyalayın ve görüntü modülünün altına üç kez yapıştırın. Bu bize kaydırmamız için daha fazla içerik sağlayacaktır.

1. Satırı Çoğalt

İkinci adım için ikinci satırı oluşturmak için 1. satırı çoğaltın.

İkinci Satır için Yapışkan Başlık Oluşturun (İkinci Adım)

Yinelenen (ikinci) satırın 1. sütunundaki başlık için metin ayarlarını açın ve H4 metnini "Adım-02" olarak değiştirin.

Ardından metin için yapışkan seçenekleri aşağıdaki gibi güncelleyin:

• Yapışkan Üst Ofset: 50 piksel (masaüstü), 0 piksel (tablet)
• Yapışkan Alt Ofset: 100 piksel (masaüstü)
• Üst Yapışkan Sınır: Bölüm (tablet)

Ardından, yapışkan durum için Z İndeksini güncelleyin:

• Z İndeksi (yapışkan): 10002

2. Satırı Çoğalt

Üçüncü adım için üçüncü satırı oluşturmak için 2. satırı çoğaltın.

Üçüncü Satır için Yapışkan Başlık Oluşturun (Üçüncü Adım)

Yinelenen (üçüncü) satırın 1. sütunundaki başlık için metin ayarlarını açın ve H4 metnini "Adım-03" olarak değiştirin.

Ardından, metin için yapışkan seçenekleri aşağıdaki gibi güncelleyin:

• Yapışkan Üst Ofset: 100 piksel (masaüstü)
• Yapışkan Alt Ofset: 50 piksel (masaüstü)

Ardından, yapışkan durum için Z İndeksini güncelleyin:

• Z İndeksi (yapışkan): 10001

3. Satırı Çoğalt

Dördüncü adım için dördüncü satırı oluşturmak için 3. satırı çoğaltın.

Dördüncü Sıra için Yapışkan Başlık Oluşturun (Dördüncü Adım)

Yinelenen (üçüncü) satırın 1. sütunundaki başlık için metin ayarlarını açın ve H4 metnini "Adım-04" olarak değiştirin.

Ardından, metin için yapışkan seçenekleri aşağıdaki gibi güncelleyin:

• Yapışkan Üst Ofset: 150 piksel (masaüstü)
• Yapışkan Alt Ofset: 0px (masaüstü)

Ardından, yapışkan durum için Z İndeksini güncelleyin:

• Z İndeksi (yapışkan): 10000

Her Yapışkan Başlık için Z Sütunu Dizini Güncelleme

Her çubuk başlığı için z indeksini güncellememize rağmen, mobilde yığınlama düzeninin çalıştığından emin olmak için her başlığın üst sütunu için z indeksini de güncellememiz gerekiyor.

Bunu yapmak için, her bir yapışkan başlığın her bir üst sütunu için ayarları açın (1-4. adım) ve her biri için sütun z-endeksini aşağıdaki gibi güncelleyin:

Satır 1, Sütun 1

• Z İndeksi: 20

2. sıra, 1. sütun

• Z İndeksi: 19

Satır 3, Sütun 1

• Z İndeksi: 18

4. sıra, 1. sütun

• Z İndeksi: 17

Bölüm 3: Yapışkan Başlık Bağlantı Bağlantıları Oluşturma

Her başlık için bağlantı bağlantıları oluşturmak için, başlığın modül URL'sine karşılık gelen Satıra bir CSS kimliği atamamız gerekir.

Birinci Adım Bağlantı Bağlantısı

1. satırdaki ilk yapışkan başlık için bağlantı bağlantısını oluşturmak için 1. satırın ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:

• CSS kimliği: bir

Ardından "adım-01" başlığı için metin modülü ayarlarını açın ve aşağıdaki modül bağlantı URL'sini ekleyin:

• Modül Bağlantı URL'si: #one

İkinci Adım Bağlantı Bağlantısı

2. satırdaki ikinci yapışkan başlık için bağlantı bağlantısını oluşturmak için 2. satırın ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:

• CSS kimliği: iki

Ardından "adım-02" başlığı için metin modülü ayarlarını açın ve aşağıdaki modül bağlantı URL'sini ekleyin:

• Modül Bağlantı URL'si: #iki

Üçüncü Adım Bağlantı Bağlantısı

3. satırdaki üçüncü yapışkan başlık için bağlantı bağlantısını oluşturmak için 3. satırın ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:

• CSS kimliği: üç

Ardından "adım-03" başlığı için metin modülü ayarlarını açın ve aşağıdaki modül bağlantı URL'sini ekleyin:

• Modül Bağlantı URL'si: #üç

Dördüncü Adım Bağlantı Bağlantısı

4. satırdaki dördüncü yapışkan başlık için bağlantı bağlantısını oluşturmak için 4. satırın ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:

• CSS kimliği: dört

Ardından “step-04” başlığı için metin modülü ayarlarını açın ve aşağıdaki modül bağlantı URL'sini ekleyin:

• Modül Bağlantı URL'si: #dört

Nihai sonuçlar

Son düşünceler

Yapışkan başlıklar tek başına kullanıcıların görüntülenen içerikten haberdar olmalarına yardımcı olur. Bağlantı bağlantısı gezintisi olarak yapışkan başlıklar oluşturmak, kullanıcıları adımlarda hızlı gezinmeye teşvik edecek şekilde kullanıcı deneyimini artırmanın benzersiz etkili bir yoludur. Umarım bu, kullanıcıları bir süreç boyunca yönlendiren herhangi bir sayfa için yararlı bir tasarım olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!