Divi'de gönderiler arasında yapışkan bir gezinme çubuğu oluşturmak ister misiniz?
Yapışkan bir gönderi gezinme çubuğu, herhangi bir ürünün kullanıcı deneyimini geliştirmenin etkili bir yoludur. Site Web blogun. Sitenizin ana navigasyonuna ek olarak, gönderi navigasyon bağlantıları kullanıcıların sitedeki önceki veya sonraki gönderiye kolayca atlamalarına olanak tanır. blogunuzun. Ayrıca, bu gönderi gezinme 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, post sticky arasında bir navbar oluşturacağız. Divi. Bunu yapmak için, bir satırı yapışkan çubuğa dönüştürmek için Divi'nin yerleşik seçeneklerini kullanacağız. Daha sonra “önceki makale” ve “sonraki makale” bağlantılarını tasarlamak için makale gezinme modülünü kullanacağız.
Ek olarak, çubuğun ortasına, kullanıcılara o anda görüntüledikleri gönderiyi hatırlatan ve gezinme çubuğuna güzel bir "geçmiş, şimdi ve gelecek" öğesi veren dinamik içerik olarak bir gönderi başlığı ekleyeceğiz.
Hadi başlayalım!
anket
İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.
Başlamak için neye ihtiyacınız var?
Bu yapışkan gönderi gezinme çubuğunu Divi'deki herhangi bir blog gönderisi düzenine veya şablonuna ekleyebilseniz de, süreci hızlandırmak ve tasarımı hızlı bir şekilde başlatmak için önceden hazırlanmış bir blog gönderisi şablonu kullanacağız.
"Yemek Seti" blog yazısı şablonunu Divi Theme Builder'a aktarın
Başlamak için Divi's Meal Kit Layout Pack için ücretsiz blog yazısı şablonu . Bunu yapmak için şuraya gidin: blog yazısı .
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 düzenleyiciye aktarmak için şu adımları izleyin:
- Divi > Tema Oluşturucu'ya gidin.
- Taşınabilirlik simgesine tıklayın.
- Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin.
- İçe aktarmak için önceden indirilmiş sıkıştırılmamış dosyayı seçin.
- Tıkla « Divi Theme Builder'ı İçe Aktar Şablonlar ».
- İçe aktarılan şablonu düzenlemek için düzenle simgesine tıklayın.
Divi'de Yapışkan Gezinme Çubuğu Oluşturun
Bölüm 1: Yapışkan çizgiyi oluşturma
Yapışkan gezinme çubuğunu oluşturmak için, gönderi ve gönderi başlığı arasındaki gezinme bağlantılarımız için yapışkan kapsayıcı olarak üç sütunlu bir satır kullanacağız.
Ayrıca Oku: Divi: Özel arka plan desenleri oluşturmak için "Degrade Tekrarı" seçeneği nasıl kullanılır?
Şablon düzeninin ikinci bölümünde, gönderi içeriğini içeren satırın altına yeni bir satır ekleyin.
Satır Parametreleri
Hat ayarlarını açın.
İlk olarak, yapışkan durumdaki diğer tasarım seçeneklerini güncelleyebilmemiz için çizgiye yapışkan konumu eklememiz gerekiyor.
Sekmenin altında gelişmiş, 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 Sınır: Vücut Alanı
Sütunların mobil cihazlarda yığılmamasını sağlamak için aşağıdaki özel CSS'yi ekleyin: Ana eleman :
display:flex;
flex-wrap:nowrap;
align-items:center;
Sekmenin altında içerik, yapışkan durumda satıra beyaz bir arka plan rengi ekleyin:
- arka plan: yok
- Bakground: #ffffff (Yapışkan)
Ayarlar altında Dizayn, 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: 0px (Üst ve Alt)
Tablet ve telefonda orta sütunu gizle
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: Makale gezinme bağlantıları oluşturma
Gezinme sonrası için daha fazla tasarım esnekliği sağlamak için iki ayrı Gezinme Sonrası modülü kullanacağız. Sol sütunda, yalnızca önceki makalenin bağlantısını görüntüleyen bir Gezinme Sonrası modülü ekleyeceğiz. Sağ sütunda, yalnızca bir sonraki gönderi bağlantısını görüntüleyen bir Gezinme Sonrası modülü ekleyeceğiz.
Önceki gönderiye bağlantı
1. sütunda, yeni bir Gezinme Sonrası modülü ekleyin.
Modül ayarlarını açın, seçenekler sekmesini güncelleyin. içerik aşağıdaki gibi:
- Ö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: #000000
Sekmenin altında Dizayn, aşağıdakileri güncelleyin:
- Bağlantılar Yazı Tipi: Kumbh Sans
- Bağlantılar Yazı Tipi Ağırlığı: Kalın
- Yazı Tipi Stili: TT
- Bağlantı Metin Rengi: #ffffff
- Bağlantılar Metin Boyutu: 26px (Masaüstü), 16px (Tablet ve Telefon)
- Satır Yüksekliği: 1,3 em
- Dolgu: 0,9em(Üst), 0,7em(Alt), 2em(Sol ve Sağ)
Mobil cihazlarda orta sütunu gizlediğimiz için, gezinme bağlantılarını içerecek kalan iki sütun artık tablet ve telefondaki tarayıcı genişliğinin %50'sini kaplayabilir.
Ayrıca bakınız: Divi: Fareyle üzerine gelindiğinde veya bir tıklamadan sonra birkaç öğenin stili nasıl değiştirilir?
Gezinme bağlantısının görünümün %50'sini kapladığından emin olmak için, tablet görüntüleme 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ın oluşturulması
Bir sonraki gönderi için bağlantı oluşturmak için, az önce tasarladığımız Posta Gezinme 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 Yazı
- Önceki Yazı Bağlantısını Göster: HAYIR
- Sonraki Gönderi Bağlantısını Göster: EVET
- Arkaplan: #ffb100
Sekmenin altında Dizayn, bağlantı metni rengini güncelleyin:
- Bağlantı Metin Rengi: #000000
Bölüm 3: Dinamik Gönderi Başlığı Oluşturma
Her iki gezinme bağlantısı da yerindeyken, gönderi başlığını orta sütuna dinamik içerik olarak eklemeye hazırız.
Buradaki fikir, kullanıcıya önceki mesaja ve sonraki mesaja gitme yeteneği ile okudukları mesajın güzel bir hatırlatıcısını vermektir.
Orta sütunda yeni bir Metin modülü ekleyin.
Sekmenin altında içerik, simgeye tıklayın “Dinamik İçerik Kullanın” vücut bölgesinde seçin, ardından Gönderi/Arşiv Başlığı.
Dinamik gönderi başlığı eklendikten sonra, ayarlarını açın. Gönderi/Arşiv Başlığı ve önce içeriği güncelleyin:
- Okumadan önce
Ardından değişiklikleri kaydedin.
Sekmenin altında Dizayn, aşağıdakileri güncelleyin:
- Metin Yazı Tipi: Kumbh Sans
- Metin Yazı Tipi Ağırlığı: Kalın
- Yazı Tipi Stili: TT
- Metin Metin Rengi: şeffaf (Masaüstü), #000000 (Yapışkan)
- Metin Boyutu: 16px
- Harf Aralığı: 1px
- Satır Yüksekliği: 1,3 em
- Metin Hizalama: ortalanmış
- Maksimum Genişlik: %96
- Hizalama modülü: merkez
- Dolgu: 0,5em (Üst ve Alt)
Nihai sonuç
DIVI'yı şimdi indirin!!!
Sonuç
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.
Çubuk/çizgi 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 yalnızca tarayıcı görünümünün üstünde veya altında yapışkan yapmayı seçebilirsiniz.
Umarım bu bir sonraki blog siteniz için faydalı olur. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.
Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
