Özel bir divi bölümü kullanarak ince bir rulo bağlantısı ile duyarlı bir sabit yan çubuk nasıl yapılır
Kenar çubuğu artık 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 düz bir kaydırma (veya atlama bağlantısı) ile sabit (veya yapışkan) bir kenar çubuğu menüsü oluşturmak için Divi sayfa oluşturucu üzerinde nasıl özel bir bölüm kullanacağınızı 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! Bugün ve sonra bugün: Sabit tarafı, sabit kenar çubuğu modifikasyonu olmayan bir sayfayı gösteren aşağıdaki özel divi bölümünü kullanan ince bir rulo bağlantısı ile yanıt veriyor. Menüyü görmek için sayfaya geri dönmem gerektiğinden, rahatsızlığı yakalamak için menüye bir çapa bağlantısı ekledim.
İlk özel parçayı ekleyin, “Yeni Bir Bölüm Ekle” kontrolünden “Özel Parça” seçeneğini seçerek sayfanıza özel bir bölüm ekleyin.
Üçte bir yerleşim / üçte ikisi seçin. Satırlar ve İçerik Ekle Sayfa başlığı için bir bölüm oluşturmak için, mevcut satır modülüne sütunu eklemek için bağlantıyı tıklayın. Tam geniş çizgiyi yerleştirin. Ardından, metin modülünü satır modülüne ekleyin. Genel ayarların altındaki metin modülünde, içerik bölümünü bulun ve metin sekmesinin seçildiğinden emin olun. Başlık için aşağıdaki HTML’yi ekleyin (H1 etiketini kullandığınızdan emin olun).
pişirme 101
sayfa “. Bunu gelecekteki tüm modüller için de yapmanızı öneririm.) Kaydet’i tıklayın. Şimdi içeriğinizin geri kalanı için beş ek satır modülünün ilkini ekleyin. Beş satırın her biri …
Metin Modülü (altyazılar için)
Diğer metin modülleri (metnin geri kalanı için).
Başka bir satır modülü eklemek için mevcut çizgi modülünün altına “Satır Ekle” yi tıklayın. Tam geniş satır seçeneğini seçin, metin modülünü girin ve içerik bölümüne “Bölüm 1” metnini ekleyin (bu bir alt başlık olduğundan H2 etiketini verin).
Metin modülüne koyu gri bir arka plan eklemek için Gelişmiş Tasarım Ayarları sekmesini seçin ve arka plan rengini HEX #333333 renk olarak değiştirin.
Özel CSS sekmesini seçerek ve Editör Kutusuna aşağıdaki CSS ekleyerek bir sınır yarıçapı verin Ana öğe koduna: -Webkit-Border-Radius: 10px; -Moz-Sınırlı-Radius: 10px; Border-Radius: 10 piksel;
Kaydet ve Çıkış’ı tıklayın. Aynı satır modülünde, görüntü modülünü metin modülünün altına ekleyin. Görüntü modülünü ayarlarken, resminizi yükleyin (unssplash.com’dan birini kullanıyorum).
Kaydet ve Çıkış’ı tıklayın. Ardından görüntü modülünün altına başka bir metin modülü ekleyin. Ayrıca içerik kutusuna biraz metin ekleyin. Lorem Ipsum metninin bazı paragrafları şimdilik yardımcı olacaktır. Kaydet ve Çıkış’ı tıklayın. Şimdi düzeniniz şöyle görünecek: Sonraki 4 satır için, yeni yaptığınız çizgileri çoğaltarak işlemi hızlandırın. Sıra modülündeki yinelenen simgeyi dört kez tıklamanız yeterlidir. Konumunuz şöyle görünecektir:
(Not: Çizgileri çoğalttıktan sonra, nihayet dileklerinizin her biri için altyazıları, görüntüleri ve içeriği geri döndürmeniz ve değiştirmeniz gerekir.) Şimdi beş satır içeriği bitirdikten sonra, her satıra geri dönmeli ve bir çapa bağlantısı hedefi eklemelisiniz. Seni id. Bu hedef kimlik, sayfaya nereden kaydıracağınızı bildiğiniz tarafın tarafını bağlamanın yoludur. Beş satır modülünün her biri için, satır modülü ayarlarını açın ve Özel CSS sekmesi altına benzersiz bir CSS kimliği ekleyin (CSS sınıfı değil CSS kimliği olduğundan emin olun). Öğretici için farklı bir adıma bağlanacağım için, sadece “Adım-1”, “Adım-2”, “Adım-3”, “Adım-4” ve “Adım-5” adını vereceğim. Yani, İçerik hattında önce, bir CSS kimliğine “Adım-1” olması gerekir. Bir sonraki satırda bir CSS kimliği “Adım 2” vb. Özel bir menü Oluşturma Şimdi satırlarınız ve kimlik CSS’iniz olduktan sonra, çapa bağlantınız için özel bir menü oluşturmaya başlayabilirsiniz. WordPress yöneticisine görünüm → menüleri girerek başlayın. “Yeni bir menü oluştur” ı tıklayın ve “Sabit Yan Menü” adını verin.
Bundan sonra, özel bir bağlantı açmak ve çapa bağlantınızı eklemek için geçiş yapmak için tıklayın. Bu önce benzersiz bir sınıf kimliği “Adım-1” ile yaptığınız ilk satıra bağlanmasını istiyorsunuz. Bunu yapmak için URL metin kutusuna “#Step-1” yazın. Ayrıca bağlantı metninin metnindeki bağlantıyı da adlandırın. Ardından “Menüye Ekle” düğmesini tıklayın. Bunu sonraki dört bağlantı için tekrarlayın ve her satır için CSS kimliğinin her özel bağlantı için URL ile eşleştiğinden emin olun (daha önce hashtag’i (#) eklemeyi unutmayın). Örneğin, “Step-2” özel bağlantı URL’si CSS kimliğine “STEP-2” vb. Menünüzü kaydedin. Bağlantı, tıklandığında belirli bir sayfanın belirli bir kısmına atlamak için doğru şekilde düzenlenmiştir. Not: Bir çapa bağlantısı için ince bir yükseltmenin etkisi otomatik olarak gerçekleşecektir, çünkü zaten iyi bir bonus olan Divi’de! Bir sonraki yeni widget alanını oluşturma, yeni menünüz için yeni bir widget alanı oluşturun. WordPress yöneticinizde, görünüm → widget’larınızda, Widget adı kutusuna “Sabit Kenar Çubuğu” adını girin ve “KAI” düğmesini tıklayın.
Not: Yeni alanın görünmesi için bir widget alanı oluşturduktan sonra sayfayı yenilemeniz gerekebilir. Yan çubuğun üstüne bir logo/resim eklemek için, sayfanın sol tarafındaki metin widget’ını arayın ve az önce yaptığınız sabit yan widget alanına sürükleyin. Metin widget’ını açmak ve bu kodu kullanarak HTML IMG etiketini eklemek için tıklayın (görüntünün boyutlarının 200px kat 200px olması gerektiğini unutmayın):
“Görüntü URL’nizi” görüntünüzün tam bir URL’si ve “Alternatif Metniniz” i görüntünüz için alternatif bir adla değiştirin. Kaydet’i tıklayın. Ardından, sayfanın sol tarafında özel bir menü widget’ı arayın ve metin widget’ının altında kalan alan widget alanına sürükleyin. Özel bir menü widget’ı açmak için geçiş yapmak için tıklayın ve oluşturduğunuz “Sabit Kenar Çubuğu Menüsü” adlı özel menüyü seçin. Ardından menünüzün başlığını verin (şimdilik “pişirme adımları” yerleştirebilirsiniz). Widget’ı kaydedin ve sayfanıza geri dönün. Son yan çubuğu oluşturarak, kenar çubuğunuzu sayfaya ekleme zamanı. Bir divi sayfası oluşturucu kullanarak sütunda (sol taraf) tam geniş bir sütun içeren bir satır ekleyin. Ardından, kenar çubuğu modülünü ekleyin.Kenar çubuğu modülünün genel ayarları altında aşağıdakileri değiştirin: Widget alanı: Kenar çubuğu sabit (daha önce yaptığımız).
Metin Rengi: Işık Etkin Devre Dışı Bırak: Bir Cep Telefonu ve Tablet Seçin (Bu, bu hücresel dostu yapmanın önemli bir adımıdır) Gelişmiş Tasarım Ayarları altında, “” “” YES “ayarlarını” silin “ayarlarını değiştirin. Şimdi Özel CSS sekmesini açın ve aşağıdaki CSS’yi Editör Kutusu Kodu Ana öğesine ekleyin: Arka plan: #333;
Konum: Sabit;
Genişlik:%25;
Dolgu: 120px 0px 20px 15px; Üst: 0; Sol: 0;
Yükseklik:%100;
Kaydet ve Çıkış’ı tıklayın. Mevcut cep telefonuna bakarak, tarafın geri kalan tarafı mobil cihazda düzgün bir şekilde görüntülenmeyecektir. Bunun geliştirilmesi gerekiyor. Mobil ve tablet ekranın kenarlarını nasıl gizlediğinizi hatırlıyor musunuz? Artık yalnızca mobil ve tabletlerde görüntülenen “kalıcı olmayan” bir kenar çubuğu sürümü eklemeniz gerekiyor. İlk olarak, yinelenen simgeleri tıklayarak yinelenen kenar çubuğu modülü.
Genel ayarların altındaki yan çubuk modülünü ayarlarken, mobil ve tablet seçeneklerindeki kontrolü kaldırarak ve masaüstü seçeneğini (ilk yan çubuk için sahip olduklarınızın tersi) kontrol ederek devre dışı bırakma ayarlarını düzenleyin. Sonra özel CSS’ye gidin ve ana öğe kutusundaki tüm kodu kaldırın ve aşağıdakileri ekleyin: arka plan: #333; dolgu: 20px 15px 20px 30px;
Artık sadece masaüstünde görüntülenen iki sabit tarafınız ve yalnızca mobil cihazlarda görüntülenen geleneksel yan bıçaklar var. Not: Bazılarınız, medya kuyruğu gibi başka şekillerde duyarlı bir yan bıçak yapmayı tercih edebilirsiniz. Bu aynı zamanda iyi bir seçim. Bunu basit kalmak için bu şekilde yapıyorum. Bu son adımın ek stili düzenleme ile ilgilidir. Şu anda kenar çubuğu hala altta altbilgi ile örtüşüyor ve menü bağlantısı çok sıkıcı. Bunları düzeltmek için bazı özel CSS öğeleri ekleyebilirsiniz. WordPress Yöneticisinde Divi Tema seçeneğini açın. Genel sekmenin altına, sayfanın altındaki özel CSS kutusuna aşağıdaki CSS ekleyin: #Menü-Fixed-Consumer-Menu Li A {
Renk: miras;
Ekran bloğu; Genişlik:%100; Dolgu: 15px 15px 15px 30px;
Marj-Alt: 10 piksel;
Arka plan: #555;
Sınır sol: 4px katı #888;
Metin-Transform: büyük harf;
}
#Menü-Fixed-Cembar-Menu Li A: Hover {
Arka plan: #fff;
Renk: #333;
-Webkit-Transition: Tüm 1’ler;
-Moz-Transition: Tüm 1’ler;
-O-geçiş: tüm 1’ler;
Geçiş: Tüm 1’ler;
}
@Media (Max-Width: 1280px) {
.Et-Social-icons, #footer-info {
Şamandıra: yok;
Metin-align: merkez;
}
@Media (Max-Width: 980px) {
#Main-footer {
Genişlik:%100! Önemli;
}
Not: Seçmen kimliği CSS menünüzün adına bağlıdır.Böylece bu stil çalışır, #id CSS seçmenleri ” #menü tarafları” uyarınca “sabit yan menü” adını verdiğinizden emin olun.Nihai sonuç o.Artık pürüzsüz bir kaydırma ile duyarlı bir sabit yan çubuk menünüz var!Bu ayarın güzelliği, farklı bir çapa bağlantısı menüsüne sahip herhangi bir sayfaya kolayca sabit bir yan bıçak ekleyebilmenizdir.Bu, üyelik kursları, öğreticiler, SSS, portföy veya uzun blog yayınları için iyi olacaktır.Paylaşmak için başka kullanımlarınız var mı?Yorumlarda neler olduğunu duymakla ilgileniyorum.Sonuç, Divi’nin uzmanlaşmasının çok fazla yazmadığımız bir şey olduğudur – ama bunu yapmayı planlıyoruz!Gelecekte bunun gibi daha fazla gönderiye gözlerinizi izleyin.Ve lütfen, bir isteğiniz varsa aşağıdaki yorumlarda bize söyleyin!
