Divi Düzen Bloğu ile Bir Blog Gönderisi için Tıklanabilir İçindekiler Nasıl Oluşturulur

Bir blog gönderisine tıklanabilir bir içindekiler tablosu eklemek, kullanıcı deneyimini iyileştirmenin harika bir yoludur. Çoğu durumda, bir blog gönderisi içindekiler tablosu, kullanıcıların içerikte gezinmesine yardımcı olmak için bağlantı bağlantıları kullanır. Ve bir içindekiler tablosunu (bağlantı bağlantılarıyla birlikte) temel HTML kullanarak oluşturmak gerçekten çok kolaydır. Ancak, özelleştirmek için özel tasarım/CSS eklemek zor olabilir. Divi Düzen Bloğunun kullanışlı olduğu yer burasıdır.

Bu öğreticide, kullanıcıları gönderi boyunca belirlenmiş başlıklara getirmek için bağlantı bağlantılarını kullanan tek bir blog gönderisi (Gutenburg'da) için tıklanabilir bir içindekiler tablosu tasarlayacağız. Bunu yapmak için, Divi oluşturucunun tüm güçlü tasarım araçlarıyla birlikte İçindekiler'i oluşturmak için Divi Düzen bloğunu kullanacağız.

Başlayalım!

Gizlice Bakış

Yeniden Kullanılabilir İçindekiler Düzen Bloğu'nu ÜCRETSİZ İndirin

Ellerinizi bu öğreticiden İçindekiler düzeni bloğuna koymak için, önce aşağıdaki düğmeyi kullanarak bunları indirmeniz gerekir. İ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!

Bu Düzen Bloğu Sitenize Aktarmak için İndirme Nasıl Kullanılır?

Bu yeniden kullanılabilir Divi Image Layout Block'u sitenize aktarmak için önce indirme dosyasını açmanız gerekir. Orada sitenize aktarmanız gereken üç JSON dosyasını bulacaksınız.

Varsayılan düzenleyiciyi (Gutenberg) kullanarak bir gönderiyi düzenlemeye gidin. Sayfanın sağ üst köşesindeki "Diğer Araçlar ve Seçenekler" menüsünü açın ve "Tüm Yeniden Kullanılabilir Blokları Yönet" seçeneğini seçin.

Ardından JSON'dan İçe Aktar düğmesini tıklayın. İndirme klasöründen JSON dosyalarından birini seçin ve içe aktar düğmesine tıklayın.

Tamamlandığında, Gutenberg'e yeni bir blok ekleyin. İçe aktarılan Yeniden Kullanılabilir yerleşim bloklarını Yeniden Kullanılabilir seçenek geçişi altında bulabileceğiz. Gönderinize eklemek için “İçindekiler” adlı öğeye tıklamanız yeterlidir.

Bu kadar!

Hadi öğreticiye geçelim, olur mu?

Başlamak için Neye İhtiyacımız Var

Başlamak için aşağıdakileri yapmamız gerekecek:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir gönderi oluşturun ve bazı sahte içerik (başlık, başlıklar, paragraflar, öne çıkan resim vb.) eklemek için varsayılan düzenleyiciyi (Gutenberg) kullanın. Her birinin altında içerik bulunan en az üç başlık bloğu oluşturduğunuzdan emin olun. İçindekiler tablosuna bağlantı linkleri ekleyeceğimiz için, yazının devamına link vermek için üç başlığa ihtiyacımız var.

Bundan sonra, başlamaya hazırız.

Divi Düzen Bloğu ile Blog Gönderisi için Tıklanabilir İçindekiler Tablosu Oluşturma

Divi Düzen Bloğu Ekle

İlk olarak, blog gönderi içeriğinizin üstüne yeni bir Divi Düzen Bloğu ekleyin.

Ardından Yeni Düzen Oluştur düğmesini tıklayın. Bu, bir düzen bloğu için Divi oluşturucu olan düzen düzenleyiciyi dağıtacaktır.

Satır ekle

Mizanpaj Düzenleyici'de, tek sütunlu bir satır ekleyerek tasarımı başlatın.

Üst Bölücü Ekle

Sütunun içine bir ayırıcı modül ekleyin. Bu, içindekiler tablosunu çerçevelemek için kullanacağımız iki ayırıcıdan biri olacaktır.

Bölücü Ayarları

Ardından, ayırıcı ayarlarını aşağıdaki gibi güncelleyin:

• Çizgi Rengi: #eeeeee
• Çizgi Konumu: Dikey Ortalanmış
• Bölücü Ağırlığı: 3px
• Genişlik: %25
• Dolgu: 30 piksel üst, 30 piksel alt

Alt Bölücü Ekle

İkinci bölücüyü oluşturmak için önceki bölücüyü çoğaltın.

Blurb Modülü ile İçindekiler Başlığını Oluşturun

Ayırıcılar yerleştirildikten sonra, içindekiler için başlığımızı oluşturalım.

İki ayırıcı arasına yeni bir tanıtım modülü ekleyin.

Bulanık İçerik

Tanımlayıcı ayarlarını açın ve içeriği aşağıdaki gibi güncelleyin:

• Başlık: "İçindekiler"
• Simgeyi Kullan: EVET
• Simge: ekran görüntüsüne bakın

Blurb Tasarım Ayarları

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Simge Rengi: #eeeeee
• Resim/Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 100px
• Başlık Başlık Düzeyi: H2
• İçerik Genişliği: %100
• Yükseklik: 38 piksel

Tanıtım yazısının yüksekliğinin simgenin yüksekliğinden daha az olduğuna dikkat edin. Bu, simgenin daha sonra ekleyeceğimiz tanıtıcı öğelerin yanında aşağı doğru genişlemesini sağlar.

Başlık tanıtıcısı yerleştirildiğinde, içindekiler tablomuzu oluşturan tıklanabilir öğeleri/açıklamaları eklemeye başlamaya hazırız. Bunu yapmak için, ayrıca blurb modüllerini kullanacağız.

Öğe 1 Bulanıklığı Ekle

Başlık tanıtım yazısının altına yeni bir tanıtım yazısı modülü ekleyin.

Bulanık İçerik

Açıklama ayarlarını açın ve yalnızca başlığın görünmesi için varsayılan gövde içeriğini çıkarın. Başlık, yazının devamına bağlamak istediğimiz bölüme/başlığa karşılık gelen metin bloğunu ekleyeceğiniz yerdir.

Ardından içeriği masaüstündeki sağ ok simgesiyle güncelleyin.

Simge için fareyle üzerine gelme seçeneğini dağıtın ve fareyle üzerine gelindiğinde simgeyi Aşağı Ok olarak değiştirin. Bu güzel bir mikro etkileşim olacak, bağlantının yazının aşağısındaki bir konuma kaydırılacağını vurguluyor.

bulanık tasarım

Artık tanıtım modülünü istediğimiz gibi tasarlayabiliriz. Bu örnek için, tanıtım yazısı ayarlarını aşağıdaki gibi güncelleyelim:

• Simge Rengi: #b856c7
• Daire Simgesi: EVET
• Daire Rengi: #ffffff
• Daire Kenarlığını Göster: EVET
• Daire Kenarlık Rengi: #b856c7
• Resim/Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 16px
• Metin Metin Boyutu: 16px
• Başlık Satırı Yüksekliği: 2em
• İçerik Genişliği: %100
• Kenar boşluğu: 118 piksel kaldı
• Dolgu: 10 piksel üst
• Doldurma (fareyle üzerine gelme): 10 piksel sola

Daha Fazla Öğe için Yinelenen Bulanıklık

Artık ilk tanıtım öğemiz bittiğinde, gönderiye eklemek istediğimiz tıklanabilir bağlantıların sayısına bağlı olarak onu gerektiği kadar çoğaltabiliriz. Şimdilik, içindekiler tablomuz için toplam üç öğe oluşturmak üzere onu iki kez çoğaltalım.

Bağlantı Bağlantısı URL'lerini Ekleme

Şu anda tanıtım öğelerimiz tıklanabilir değil, bu nedenle her birine gerekli bağlantı bağlantı URL'lerini eklememiz gerekiyor. Bağlantı bağlantısı URL'si her zaman bir hashtag (#) ile başlar ve ardından eklemek istediğiniz kimliği takip eder.

Bağlantı Bağlantısı #bir

Basit olması için, listedeki ilk tanıtım yazısına “#one” bağlantı bağlantısını ekleyeceğiz. Bunu yapmak için listedeki ilk tanıtım yazısı modülünün ayarlarını açın (başlık tanıtım yazısı değil) ve aşağıdakileri güncelleyin:

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

Bağlantı Bağlantısı #iki

Ardından ikinci tanıtım öğesinin ayarlarını açın ve aşağıdaki bağlantıyı ekleyin:

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

Bağlantı Bağlantısı #üç

Son olarak, üçüncü tanıtıcı öğeye aşağıdaki bağlantıyı ekleyin:

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

Aralığın Sıkılması

Satır Ayarları

Şu anda, sıramızın öğeleri arasında biraz fazla boşluk var. Bunu düzeltmek için satır ayarlarını açın ve oluk genişliğini ve dolguyu aşağıdaki gibi güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Dolgu: 0 piksel üst, 0 piksel alt

Bölüm Ayarları

Bölümün dolgusunu da çıkaralım. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Dolgu: 0 piksel üst, 0 piksel alt

Düzeni Kaydet

İçindekiler tasarımımızla işimiz bitti. Düzen düzenleyiciyi kaydettiğinizden ve çıktığınızdan emin olun.

Şimdi yeni içindekiler tablonuzu varsayılan blok düzenleyicide görmelisiniz.

Yazı Başlıklarına HTML Bağlantılarını Ekleme

İçindekiler tablomuzun öğelerini oluşturan tanıtım yazılarının her birine bağlantı bağlantı URL'lerini ekledik. Şimdi ilgili CSS kimliğini (veya HTML Çapasını) yazının aşağısındaki başlık bloklarına eklememiz gerekiyor.

HTML Bağlantısı bir

Bağlanmak/atlamak istediğiniz ilk başlığı içeren bloğa tıklayın. Ardından bu blok için ayarları açın. Gelişmiş seçenekler geçişi altında, HTML Bağlantısı giriş kutusuna "bir" ekleyin:

HTML Bağlantısı: bir

Unutmayın, ilk tanıtım öğemiz buna bağlantı verecek olan "#one" URL'sine sahiptir. Ancak hashtag'i bu HTML Anchor'a eklemeyin. Gerekli değildir.)

HTML Bağlantısı iki

Ardından, ikinci başlık bloğunu seçin ve aşağıdakileri güncelleyin:

• HTML Bağlantısı: iki

HTML Bağlantısı üç

Ve son olarak, üçüncü başlık bloğunu seçin ve HTML Anchor'ı aşağıdaki gibi ekleyin:

• HTML Bağlantısı: üç

Son sonuç

Son sonucu canlı yayında görelim.

Ve burada çapa bağlantılarının nasıl çalışacağı. Simgeler üzerindeki fareyle üzerine gelme etkisine ve bağlantının sayfanın altındaki ilgili bağlantıya nasıl düzgün bir şekilde kaydırıldığına dikkat edin.

İçindekiler Tablosunu Yeniden Kullanılabilir Düzen Bloğu Olarak Ekleme

Bu yerleşim bloğunu gelecekteki gönderiler için bir şablon olarak kullanmaya devam etmek istiyorsanız, yerleşim bloğunu yeniden kullanılabilir bir yerleşim bloğu olarak kaydetmek iyi bir fikir olacaktır. Bu, yerleşik blok listesinden kolayca bir "içindekiler tablosu" bloğu eklemenize olanak tanır.

Bunu yapmak için, içindekiler tablosunu içeren Divi Düzen Bloğuna tıklayın ve daha fazla ayar menüsünü açın. Ardından “Yeniden Kullanılabilir Yerleşim Bloklarına Ekle”yi seçin.

Yeniden kullanılabilir blok ("İçindekiler") için bir ad girin ve kaydet'i tıklayın.

Artık, gönderiye yeni bir blok eklerken, Yeniden Kullanılabilir Bloklar listesinin altında bloğa sahip olacaksınız.

Artık düzen bloğu, gönderiniz için bir içindekiler tablosu oluşturmak için uygun bir şablon görevi görür. Belirli bir gönderi için özelleştirmeden önce bloğu normal bir yerleşim bloğuna dönüştürmeyi unutmayın. Yeniden kullanılabilir düzen bloğunu değiştirmek istemezsiniz.

Bunu yapmak için, yeniden kullanılabilir yerleşim bloğunun daha fazla ayar menüsünü açın ve “Normal Bloğuna Dönüştür” seçeneğini seçin.

Son düşünceler

Umarım bu içindekiler bölümü Divi yerleşim bloğu, onlara ihtiyaç duyacak kadar uzun olan gönderiler için yardımcı olur. Bunu sizin için dinamik olarak yapmakla ilgileniyorsanız (bir gönderinin başlıklarına dayalı olarak sizin için içindekiler tablosunu otomatik olarak oluşturmak gibi), bu tür şeyleri sizin için yapan Table of Contents Plus gibi eklentiler var. Bu gönderi, Divi ile tasarım yapmayı sevenler ve içindekiler tablosunu gönderi bazında oluşturmaktan çekinmeyenler içindir.

Yorumlarda sizden haber bekliyorum.

Şerefe!