Divi'de Yapışkan Posta Gezinti Çubuğu Nasıl Oluşturulur

Yapışkan bir gönderi gezinme çubuğu, herhangi bir blog web sitesinin kullanıcı deneyimini artırmanın etkili bir yoludur. Sitenizin ana navigasyonuna ek olarak, post navigasyon bağlantıları, kullanıcıların blogunuzdaki bir önceki gönderiye veya bir sonraki gönderiye kolayca atlamasını sağlar. Ayrıca, bu gezinme sonrası bağlantılarını yapışkan bir çubuğa eklerseniz, bu bağlantılar görünür ve daha erişilebilir kalır.

Bu derste, Divi'de yapışkan bir yazı navigasyon çubuğu oluşturacağız. Bunu yapmak için, bir satırı yapışkan bir çubuğa dönüştürmek için Divi'nin yerleşik seçeneklerini kullanacağız. Ardından, “önceki gönderi” ve “sonraki gönderi” bağlantılarını tasarlamak için navigasyon sonrası modülünü kullanacağız. Ayrıca, çubuğun ortasına, kullanıcılara o anda hangi gönderiyi görüntülediklerini hatırlatan ve gezinme çubuğuna hoş bir "geçmiş, şimdi ve gelecek" öğesi veren dinamik içerik olarak bir gönderi başlığı ekleyeceğiz.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

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!

ÜCRETSİZ Şablon Nasıl Yüklenir

Ücretsiz şablonu tema oluşturucuya aktarmak için şu adımları izleyin:

1. Divi > Tema Oluşturucu'ya gidin.
2. Taşınabilirlik Simgesine tıklayın.
3. Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin.
4. İçe aktarmak için önceden indirilen sıkıştırılmamış dosyayı seçin.
5. İçe Aktar düğmesini tıklayın.
6. İçe aktarılan şablonu düzenlemek için düzenle simgesine tıklayın.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Bu yapışkan yazı gezinme çubuğunu Divi'deki herhangi bir blog yazısı düzenine veya şablonuna ekleyebilseniz de, süreci hızlandırmak ve tasarıma hızlı bir başlangıç ​​yapmak için önceden hazırlanmış bir blog yazısı şablonu kullanacağız.

Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.

Yemek Seti Blog Gönderisi Şablonunu Tema Oluşturucuya Aktarın

Başlamak için Divi's Meal Kit Layout Pack için ücretsiz blog yazısı şablonunu indirin. Bunu yapmak için blog gönderisine gidin.

Ardından zip dosyasını indirmek için e-postanızı girin.

Bundan sonra, içe aktarmaya hazır olması için dosyayı açın.

Dosyayı tema oluşturucuya aktarmak için şu adımları izleyin:

1. Divi > Tema Oluşturucu'ya gidin.
2. Taşınabilirlik Simgesine tıklayın.
3. Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin.
4. İçe aktarmak için önceden indirilen sıkıştırılmamış dosyayı seçin.
5. İçe Aktar düğmesini tıklayın.
6. İçe aktarılan şablonu düzenlemek için düzenle simgesine tıklayın.

Divi'de Yapışkan Posta Gezinti Çubuğu Oluşturma

Bölüm 1: Yapışkan Satır Oluşturma

Yapışkan gönderi gezinme çubuğunu oluşturmak için, gönderi gezinme bağlantılarımız ve gönderi başlığımız için yapışkan kapsayıcı olarak üç sütunlu bir satır kullanacağız.

Şablon düzeninin ikinci bölümünde, gönderi içeriğini içeren satırın altına yeni bir dörtte bir buçuk dörtte bir sütun satırı ekleyin.

Satır Ayarları

Satır ayarlarını açın.

İlk olarak, yapışkan durumdaki diğer tasarım seçeneklerini güncelleyebilmemiz için satıra yapışkan konumu eklememiz gerekiyor.

Gelişmiş sekmesi altında aşağıdakileri güncelleyin:

• Yapışkan Konum: Yukarıya ve Aşağıya Yapış
• Üst Yapışkan Limit: Bölüm
• Alt Yapışkan Limit: Vücut Alanı

Bu yapışkan konumla, gönderi içeriğini içeren bölüm görüntülendiğinde yapışkan satır tarayıcı penceresinin altına yapışacaktır. Kullanıcı, yapışkan satırın gerçek konumunu geçtikten sonra, satır, posta gövdesi alanının geri kalanı boyunca tarayıcı penceresinin üst kısmında takılı kalacaktır.

Sütunların mobil cihazlarda yığılmadığından emin olmak için Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

display:flex;
flex-wrap:nowrap;
align-items:center;

İçerik sekmesi altında, yapışkan durumdaki satıra aşağıdaki gibi beyaz bir arka plan rengi ekleyin:

• Arka Plan Rengi: yok
• Arka Plan Rengi: #ffffff (yapışkan)

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

• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100
• Dolgu: 0 piksel üst, 0 piksel alt

Tablet ve Telefonda Orta Sütunu Gizle

Satırın orta sütunu, sonunda, kullanıcıların hangi gönderiyi okuduklarını bilmelerini sağlayan dinamik gönderi başlığını tutacaktır. Mobilde daha iyi bir deneyim için tablet ve telefonda orta sütunu gizleyeceğiz.

Sütunu mobil cihazlarda gizlemek için 2. sütun (orta sütun) ayarlarını açın ve görünürlük seçeneklerini aşağıdaki gibi güncelleyin:

• Devre dışı bırak: Telefon, Tablet

Bölüm 2: Gezinti Sonrası Bağlantıları Oluşturma

Gezinme sonrası için daha fazla tasarım esnekliği sağlamak için iki ayrı gezinme modülü kullanacağız. Sol sütunda, yalnızca önceki gönderi bağlantısını gösteren bir navigasyon sonrası modülü ekleyeceğiz. Sağ sütunda, yalnızca bir sonraki gönderi bağlantısını gösteren bir navigasyon sonrası modülü ekleyeceğiz.

Önceki Gönderi Bağlantısını Oluşturma

1. sütunda, yeni bir navigasyon sonrası modülü ekleyin.

Gezinme sonrası ayarlarını açın, içerik sekmesi seçeneklerini aşağıdaki gibi güncelleyin:

• Önceki Bağlantı (metin): Önceki Yazı
• Önceki Yazı Bağlantısını Göster: EVET
• Sonraki Gönderi Bağlantısını Göster: HAYIR
• Arka Plan Rengi: #000000

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

• Bağlantılar Yazı Tipi: Kumbh Sans
• Bağlantılar Yazı Tipi Ağırlığı: Kalın
• Bağlantı Yazı Tipi Stili: TT
• Bağlantı Metin Rengi: #ffffff
• Bağlantılar Metin Boyutu: 26px (masaüstü), 16px (tablet ve telefon)
• Bağlantılar Satır Yüksekliği: 1.3em
• Dolgu: 0,9em üst, 0,7em alt, 2em sol, 2em sağ

Mobilde orta sütunu gizlediğimiz için, gezinme bağlantılarını tutacak kalan iki sütun artık tablet ve telefondaki tarayıcı genişliğinin %50'sini kaplayabilir. Gezinme bağlantısının görünümün %50'sini kapsadığından emin olmak için, tablet görünümü için Bağlantılar CSS kutusuna aşağıdaki özel CSS'yi ekleyin:

display:block;
width:50vw;
text-align:center;
float:none;

Sonraki Gönderi Bağlantısını Oluşturma

Bir sonraki gönderi bağlantısını oluşturmak için, az önce tasarladığımız gönderi navigasyon modülünü (önceki gönderi bağlantısıyla) kopyalayın ve sütun 3'e (sağ sütun) yapıştırın.

Ardından, sağ sütundaki yinelenen modül için navigasyon sonrası ayarlarını açın ve aşağıdaki içerik sekmesi seçeneklerini güncelleyin:

• Sonraki Bağlantı: sonraki gönderi
• Önceki Yazı Bağlantısını Göster: HAYIR
• Sonraki Gönderi Bağlantısını Göster: EVET

• Arka Plan Rengi: #ffb100

Tasarım sekmesi altında bağlantı metni rengini güncelleyin:

• Bağlantı Metin Rengi: #000000

Bölüm 3: Dinamik Gönderi Başlığı Oluşturma

İki gezinme bağlantısı yerleştirildikten sonra, gönderi başlığını orta sütuna dinamik içerik olarak eklemeye hazırız. Buradaki fikir, kullanıcıya önceki gönderiye ve sonraki gönderiye gitme seçeneğiyle birlikte okudukları gönderiye dair güzel bir hatırlatma vermektir.

Orta sütunda yeni bir metin modülü ekleyin.

İçerik sekmesi altında, gövde alanındaki "Dinamik İçeriği Kullan" simgesini tıklayın ve Gönderi/Arşiv Başlığını seçin.

Dinamik gönderi başlığı eklendikten sonra, Gönderi/Arşiv Başlığı ayarlarını açın ve önceki içeriği güncelleyin:

• Okumadan önce: "

Ardından değişiklikleri kaydedin.

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

• Metin Yazı Tipi: Kumbh Sans
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Yazı Tipi Stili: TT
• Metin Metin Rengi: şeffaf (masaüstü), #000000 (yapışkan)
• Metin Metin Boyutu: 16px
• Metin Harf Aralığı: 1px
• Metin Satırı Yüksekliği: 1.3em
• Metin Hizalama: orta

• Maksimum Genişlik: %96
• Modül Hizalaması: merkez
• Dolgu: 0,5em üst, 0,5em alt

Son sonuç

Son düşünceler

Bu eğitimde, Divi'de bir blog yazısı şablonu için yapışkan bir yazı gezinme çubuğu oluşturmanın ne kadar kolay olduğunu gösterdik. Çubuğun/sıranın yapışkan işlevi, Divi'nin yerleşik seçenekleriyle de kolayca ayarlanabilir. Örneğin, yapışkan durumu bir bölümle sınırlayabilir veya bunu yalnızca tarayıcı görünüm alanının üstüne veya altına yapıştırmayı seçebilirsiniz. Umarım, bu bir sonraki blog siteniz için kullanışlı olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!