Divi ile ince bir rulo çapa bağlantısı ile yanıt veren sabit bir yan çubuk nasıl yapılır
Kenar çubuğu eskisi kadar popüler değil. Birçok durumda, sonunda yardımdan daha sinir bozucu olurlar. Ancak bazen kenar çubuğu, özellikle uzun içerikle uğraşırken mantıklıdır. Bu yüzden çok makul bir yan bar yapmaya başladım. Bugün size ince bir kaydırma (veya atlama bağlantısı) ile yanıt veren sabit bir kenar çubuğu (veya yapışkan) yapmak için Divi Builder’ı nasıl kullanabileceğinizi gösteriyorum. Yan taraf görünür kaldığından ve ankraj bağlantısı sayfanın çeşitli kısımlarına pürüzsüz olduğundan, tarafın tarafı içerikle entegre kalır ve onu yararlı bir UX özelliği haline getirir. Belge Çerçevesi gibi, bu kombinasyon da web sayfanızın içeriğinizi daha erişilebilir ve okunabilir hale getirir. Bu, bu uzun yuvarlanan sayfalar için ferahlatıcı bir çözümdür.
Bir bakayım! Aşağıdaki gizlice göz atma, birlikte inşa edeceğimizin bir görüntüsüdür.
Başlamak, devam etmek ve yeni bir sayfa oluşturmak ve Divi Builder’ı kullanmak için YouTube kanalımıza abone olan sayfanıza düzeni ekleyin. “Önceden Yapılmış Düzen Seç” seçeneğini seçin. Kütüphaneden yükleme açılır penceresinden Gıda Tarif Düzeni paketini seçin, ardından tarif sayfasını kullanmak için tıklayın. Düzen yüklendikten sonra ön uçta oluşturmak için tıklayın. Ön uç divi üreticisinin yeni bir bölümünü yapın, yeni bir rol yapın ve düzenin en üstüne sürükleyin. Düzenin başlık bölümündeki düğmeyi kopyalayın ve oluşturduğunuz yeni bölümden bir sütunun satırına ekleyin. Düğme ayarlarını açın ve Gelişmiş sekmesinin altındaki ana öğelere aşağıdaki özel CSS ekleyin: Ekran: Blok! Önemli;
Bu yalnızca düğmenin sütunun tam genişliğine ulaşmasını sağlar.
“Giriş” i okumak için düğme metnini değiştirin. Ve ardından URL bağlantısı Kuts’a aşağıdakileri ekleyin: #Bu teslimat, bir çapa bağlantısı nasıl yaptığınızdır. Tagar (#) tarayıcıya CSS kimliğine bağlanacağınızı söyler. Aşağıdaki “Giriş” metni, düzendeki parçalarımızdan birine ekleyeceğimiz CSS kimliğinin adına uygun olacaktır. CSS kimliği adı istediğiniz her şey olabilir. Daha sonra bölümde verdiğiniz CSS kimliğine uyduğundan emin olun. Bir düğmeyi iki katına çıkarın ve ardından yeni bir düğme metin düğmesi ve yeni düğme bağlantı URL’si verme işlemini tekrarlayın. Bu, farklı bir sayfaya atlayan bir çapa bağlantısı olacağından, CSS kimliğinin (“#” sonrası metin) benzersiz olduğundan ve daha sonra tarafınıza vereceğiniz ada uygun olduğundan emin olun. Bu düğme için düğme metnini “malzeme” olarak değiştirin ve düğme bağlantısını “#bahan” olarak URL.
Düğmeyi tekrar iki katına çıkarın ve ardından yeni düğme metnini “beslenme” verin ve düğme bağlantısının URL’sini “#nuumisi” olarak değiştirin. Kestleri bir kez daha dolayın ve ardından yeni “talimatlar” düğmesini verin ve düğmenin URL’sini değiştirin “#Instruction” ın bağlantısı. Şimdilik yapmamız gereken tek şey bu. Hafif bir kenar çubuğuna dönüştürmek için bu bölüme geri döneceğiz. CSS ID’yi şimdi bölüme ekleyin ve tüm düğmelerimiz onun yerine bir çapa bağlantısı ile yapıldıktan sonra, bölümümüze ve satırımıza uygun CSS kimliğinin adını eklemeye hazırız. Ankraj bağlantısı, uygun CSS kimliğiyle sayfadaki herhangi bir öğeye otomatik olarak atlar. ID CSS metin, modüller, satırlar veya satırlara uygulanabilir. HTML kullanarak başlığa CSS kimliği eklemek istiyorsanız, görünüm şuna benzer:
Giriş
Ancak, sayfaya atlamak istediğimiz için, belirli bir sayfaya CSS kimliği ekleyebiliriz. Bu, kullanıcılara oldukça rahat olan ekran odasını verecektir, böylece ziyaretçiler sayfada nerede olduklarını kolayca tanır. Bir çizgiye veya modüle atlamak ziyaretçiler için karışıklığa neden olabilir.Daha önce tartıştığımız gibi, yaptığımız düğmenin her URL’si, atlamaları gereken parçanın CSS kimliğine uyması amaçlanmıştır. “Giriş” düğmesi için, giriş içeriği içeren sayfa bölümüne CSS kimliği eklememiz gerekir. Bunu yapmak için, sayfanın üçüncü bölümünün ayarlarını açın (doğrudan başlığın altında) ve gelişmiş sekmenin altına aşağıdaki CSS kimliğini ekleyin: ID CSS: Bu giriş, daha önce yaptığımız Jangkar bağlantısına giriş ile eşleşecek. Aynı bölümde, “Malzeme” başlığını içeren bir çizgi bulun. Ardından satır ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:
ID CSS: Bu malzeme daha önce yaptığımız bağlantı bağlantısı düğmesine uyacaktır.
“Beslenme” başlığı ile bir sonraki bölüme gidin ve bölüm ayarlarını açın. Ardından aşağıdaki CSS kimliğini ekleyin: ID CSS: Beslenme Bu, daha önce yaptığımız besin bağlantısı bağlantısı düğmesine uyacaktır. Son olarak, “Adım adım” başlığı ile bir sonraki düzen bölümüne gidin. Ardından, bölüm ayarlarını açın ve Gelişmiş sekmesinin altına aşağıdaki CSS kimliğini ekleyin:
ID CSS: Bu talimat, daha önce yaptığımız bağlantı bağlantısı düğmesi ile eşleşir. Değişikliğinizi kaydedin. Şimdi çapa bağlantınızın çalışıp çalışmadığını görmek için doğru zaman. Yeni sekmedeki sayfayı açın ve sayfadaki uygun konuma atladıklarından/yuvarlandığından emin olmak için üstteki düğmeyi tıklayın. Çalışmıyorsa, geri döndüğünüzden ve CSS kimliğinin doğru ve uygun olup olmadığını kontrol ettiğinizden emin olun. Yan çubuğun düzenini yapmak, sayfanın üstünde bir çapa bağlantısının olması için yan tarafın odanın, içerik tablosu gibi şeyler için önemli değildir. Ancak bu kullanım durumunda, bağlantılardan birini tıkladıktan sonra kullanıcıların sayfanın üstüne geri dönmeleri gerekmeyecek şekilde, herhangi bir zamanda bağlantı bağlantısının kullanıcı tarafından görülmesini istiyoruz. Onarılan taraf bu sorunu çözecektir, çünkü kullanıcı bir çapa bağlantısına tıkladığında sayfanın yanında kalacaktır. Ancak kenar çubuğunu konumlandırmadan önce, sayfamızın sol tarafında biraz yer açmamız gerekir. Bunu yapmak için, düzenin her bir bölümüne sol kenar boşluğunu ekleyeceğiz. Her bölüme eklediğimiz sol kenar boşluklarının sayısı, kenar çubuğunun genişliği ile aynı olacaktır, bu nedenle şimdi kenar çubuğunun ne kadar geniş istediğine karar vermenin zamanı geldi. Bu örnek için% 20 genişlik yapılacaktır. İkinci bölüm ayarlarını açın (doğrudan çapa bağlantısı düğmemizin altında) ve aşağıdaki özel marjı ekleyin: özel kenar boşluğu:% 20 kalan
Şimdi ayarları kaydetmeden önce, özel marj seçeneğini sağlayın ve “Özel Marjı Kopyala” ı tıklayın ve ayarları kaydedin.
Tüm sayfa düzeninizdeki geri kalan parçaların her birinde, bu bölümün özel kenarına bağlı kalmaya bağlı kalın ve bu bölüme sağ tıklayın ve “özel marj” ı tıklayın.
Çakışan altbilginizi onarmak, parçanın sayfanın altındaki alt altbilgi çubuğu ile örtüştüğünü fark etmiş olabilir. Bu sorunun üstesinden gelmenin birkaç yolu vardır. Örneğin, bölümden “yükseklik:%100” alabilirim veya altbilgi çubuğunun genişliğini ayarlamak için sayfa ayarlarına bazı CSS ekleyebilirsiniz. Ancak parçanın yüksekliğini%100 olarak korumak istiyorsanız, kolay iyileşme parçanın arka plan rengini ortadan kaldırmaktır. Yan bıçaklar için kullandığımız parçanın parçalarının ayarlarını açın ve aşağıdaki arka plan rengini ekleyin: arka plan rengi: RGBA (255,255,255.0)
Kenar çubuğunun rengini değiştirmek istiyorsanız, sayfa ayarlarını açabilir ve içerik alanının arka plan rengini değiştirebilirsiniz. Şeffaf bölümün arka plan rengi çünkü sayfanız için içerik alanının arka plan rengi parlar. Ve diğer tüm parçalarımız bir arka plan rengine sahip olduğundan, sadece alt altbilgi çubuğu ile örtüşmeden yan çubuktan görüntülenecektir. Hücresel tasarımda ayarlamalar yapmak akıllı telefonlar için gerçekten bir anlam ifade etmiyor çünkü yan bıçaklar için yer yok ve sayfanın üstünde bir bağlantıya sahip olmak, kullanıcıların çapa bağlantısını her tıklamak istediklerinde geri kaydırmalarını gerektirecektir. Ancak tasarım yine de tabletler için çalışacaktır, ancak çapa bağlantısı için daha fazla yer açmanız gerekebilir. Bunu yapmak için, aşağıdaki tarafların satırları için satır ayarlarını açın ve aşağıdakileri güncelleyin: Özel genişlik: 100 özel dolgu (masaüstü):% 10 sol,% 10 sağ özel dolgu (tablet):% 0 sol,% 0 sağ Şimdi tek yapmamız gereken akıllı telefonun kısmını gizlemek (veya devre dışı bırakmak). Bunu yapmak için ayar ayarlarını açın ve devam eden sekmeyi açın ve akıllı telefonu devre dışı bırakmak için onay kutusunu tıklayın. İşte burada. Artık pürüzsüz bir kaydırma ile duyarlı bir sabit yan çubuk menünüz var! Nihai sonuçlar şimdi sonucunu kontrol edelim. Ve bu tabletteki düzen ekranı. Sabit öğeler ve bağlantı bağlantıları hakkında daha fazla bilgi edinin, bu öğreticinin yararlı olduğunu düşünüyorsanız, aşağıda bizimle ilgili bazı öğreticilere bakın: Çapa bağlantılarıyla Divi’de yapabileceğiniz 5 harika şeyler Yapışkan Divi sayfa öğesi nasıl yapılır WordPress’te yanınıza bir konaklama widget’ı nasıl ekleyebilirsiniz Divi navigasyonunuzu alttan başlayarak nasıl yapabilirsiniz, sonra kaydırma yaparken yukarıda kalırsınız Divi altbilginizi nasıl sabitleştirirsiniz Divi’de Yüzen Bir Pop-Out Menüsü Nasıl Yapılır Bu ayarın güzelliğinin son zihni, farklı bir çapa bağlantısına (veya ne istersen) sahip herhangi bir sayfaya kolayca sabit bir yan çubuk ekleyebilmenizdir.Tarafınız temel olarak Divi bölümü olduğundan, varsayılan ayarları kullanarak ayarlayabilir, daha fazla satır ekleyebilir ve istediğiniz modülün bir kombinasyonunu kullanabilirsiniz.Bu ayar üyelik kursları, öğreticiler, SSS, portföy veya uzun blog yayınları için iyi olacaktır.Hatta bir sayfa web sitesi için de kullanabilirsiniz.Paylaşmak için başka kullanımlarınız var mı?Yorumlarda neler olduğunu duymakla ilgileniyorum.Kızarmış ekmek!
