Divi'nin Özel Bölümünü Kullanarak Düzgün Kaydırılan Bağlantı Bağlantılarına Sahip Duyarlı Sabit Kenar Çubuğu Nasıl Oluşturulur

Kenar çubukları artık o kadar popüler değil. Çoğu durumda, yararlı olduklarından daha fazla dikkat dağıtıcı olurlar. Ancak bazen bir kenar çubuğu, özellikle uzun içerikle uğraşırken mükemmel bir anlam ifade eder. Bu yüzden çok mantıklı bir kenar çubuğu oluşturmaya başladım.

Bugün size Divi Page Builder'daki özel bölümü, yumuşak kayan bağlantı bağlantılarına (veya atlama bağlantılarına) sahip duyarlı, sabit (veya yapışkan) bir kenar çubuğu menüsü oluşturmak için nasıl kullanacağınızı gösteriyorum. Kenar çubuğu görünür durumda kaldığından ve bağlantı bağlantıları sayfadaki farklı bölümlere sorunsuzca kaydırıldığından, kenar çubuğu içerikle evli kalır ve onu yararlı bir UX özelliği haline getirir. Bir belge taslağı gibi, bu kombinasyon web sayfası içeriğinizi daha erişilebilir ve okunması daha kolay hale getirir. Bu uzun kaydırma sayfaları için canlandırıcı bir çözümdür.

Bunu kontrol et!

Bugünün Öncesi ve Sonrası: Divi'nin Özel Bölümünü Kullanan Düzgün Kaydırılan Bağlantı Bağlantılarına Sahip Duyarlı Sabit Kenar Çubuğu

Sabit kenar çubuğu değişikliği olmadan sayfayı gösteren bir gif. Menüyü görüntülemek için sayfanın en üstüne geri kaydırma zorunluluğunu ortadan kaldırmak için bağlantı bağlantılarını menüye ekledim.

Aşağıda, sabit kenar çubuğu ve bağlantı bağlantısı kombinasyonuna bir örnek verilmiştir. Sonuç, içeriğiniz boyunca kesintisiz geçişlere sahip zarif bir çözümdür.

Konsept ve İlham

Bu yılın başlarında Google, Google Dokümanlar için, belgenizdeki farklı başlıklara atlayan tıklanabilir bir anahatla sabit bir kenar çubuğunu kolayca dağıtmanıza olanak tanıyan yararlı bir belge anahat aracı ekledi. Bilgiyi çok daha hızlı bulmama yardımcı olduğu için seviyorum. Aynı özelliği web sitenize getirmenin harika olacağını düşündüm.

Tasarım Öğelerinin Hazırlanması

Bu örnekte, kenar çubuğunun işlevselliğini görüntülemek için sahte bir öğretici ayarlıyorum. Bu işlevsellik kendi içeriğinizle kullanılacak olsa da, bugün kullandığım şey:

Sayfa içeriği için, başlıklara özel CSS eklenmiş kukla lorem ipsum metni kullanıyorum. Ayrıca https://unsplash.com adresinden 700 piksele 400 piksel boyutunda beş adet telifsiz resim ekliyorum.

Kenar çubuğu için, kenar çubuğunun üstüne sığacak şekilde 200 piksele 200 piksel boyutunda sahte bir logo/resim ekliyorum. Kenar çubuğunun geri kalanı CSS kullanılarak tasarlanmıştır.

Tasarımı Divi ile Uygulamak

Bu değişiklikleri kendi web sitenize eklemek için aşağıdaki talimatları adım adım izleyin.

Uzmanlık Bölümü Ekleme

Öncelikle satır içi “yeni bölüm ekle” kontrollerinden “Özel Bölüm” seçeneğini seçerek sayfanıza bir uzmanlık bölümü ekleyin.

Üçte bir / üçte iki düzenini seçin.

Satırları ve İçeriği Ekleme

Sayfa başlığı için bir bölüm oluşturmak için mevcut satır modülünün içindeki sütun ekle bağlantısını tıklayın.

Tam genişlikte bir satır ekleyin.

Ardından, satır modülüne bir metin modülü ekleyin. Genel ayarlar altındaki metin modülünün içinde içerik bölümünü bulun ve metin sekmesinin seçili olduğundan emin olun. Başlık için aşağıdaki html'yi ekleyin (h1 etiketi kullandığınızdan emin olun).

<h1>Cooking <span style="color: #406ac2;font-weight: 600">101</span></h1>

(Opsiyonel: Admin Label alanına gelip “sayfa başlığı” girerek modülü etiketleyebilirsiniz. Bunu gelecekteki tüm modüller için de yapmanızı öneririm.)

Kaydet ve Çık'ı tıklayın.

Şimdi, içerik bölümlerinizin geri kalanı için beş ek satır modülünden ilkini ekleyin. Beş satırın her birinde…

• bir metin modülü (alt yazı için)
• bir görüntü modülü (görüntü için)
• başka bir metin modülü (metnin geri kalanı için).

Başka bir satır modülü eklemek için mevcut satır modülünün altındaki “Satır Ekle”ye tıklayın. Tam genişlik satır seçeneğini seçin, bir metin modülü ekleyin ve içerik bölümüne “Bölüm 1” metnini ekleyin (bu bir alt yazı olduğu için ona bir h2 etiketi 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 onaltılık renk #333333 olarak değiştirin.

Özel CSS sekmesini seçip Ana Öğe kod düzenleyici kutusuna aşağıdaki css'yi ekleyerek bir sınır yarıçapı verin:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Kaydet ve Çık'ı tıklayın.

Aynı satır modülünün içine, metin modülünün altına bir görüntü modülü ekleyin. Resim modülü ayarlarında resminizi yükleyin (unsplash.com'dan bir tane 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. Birkaç paragraf lorem ipsum metni şimdilik işinizi görecektir.

Kaydet ve Çık'ı tıklayın.

Şimdi düzeniniz şöyle görünmelidir:

Sonraki 4 satır için, az önce yaptığınız satırı çoğaltarak işlemi hızlandırın. Satır modülündeki kopya simgesine dört kez tıklamanız yeterlidir.

Düzeniniz şöyle görünmelidir:

(Not: Satırları çoğalttıktan sonra, sonunda geri dönüp her biri için uygun gördüğünüz şekilde altyazıları, resimleri ve içeriği değiştirmeniz gerekecektir.)

Artık beş içerik satırını da tamamladığınıza göre, her birine geri dönmeniz ve bağlantı bağlantı hedef kimliğinizi eklemeniz gerekir. Bu hedef kimliği, kenar çubuğu bağlantılarınızın sayfada nereye kaydırılacağını nasıl bileceğidir.

Beş satır modülünün her biri için, Satır Modülü ayarlarına gidin ve Özel CSS sekmesi altına benzersiz bir CSS kimliği ekleyin (bunun CSS Sınıfı değil, CSS Kimliği olduğundan emin olun). Bir eğitim için farklı adımlara bağlanacağım için, onları “adım-1”, “adım-2”, “adım-3”, “adım-4” ve “adım-5” olarak adlandıracağım. ”. Bu nedenle, ilk içerik satırının CSS kimliği "adım-1" olmalıdır.

Sonraki satırın CSS kimliği "adım 2" olacak ve bu böyle devam edecek.

Özel Menü Oluşturma

Artık satırlarınız ve css kimliğinizin kurulumuna sahip olduğunuza göre, bağlantı bağlantılarınız için özel bir menü oluşturmaya başlayabilirsiniz. WordPress yöneticisinde Görünüm → Menüler'e giderek başlayın. "Yeni bir menü oluştur" u tıklayın ve "sabit kenar çubuğu menüsü" olarak adlandırın.

Bundan sonra, Özel Bağlantıları açmak için tıklayın ve bağlantı bağlantınızı ekleyin. Bu ilk satırın, benzersiz sınıf kimliği "adım-1" ile oluşturduğunuz ilk satıra bağlanmasını istiyorsunuz. Bunu yapmak için URL metin kutusuna “#step-1” yazın. Ayrıca Bağlantı Metni alanında bağlantıya bir ad verin. Ardından “Menüye Ekle” düğmesine tıklayın.

Bunu sonraki dört bağlantı için tekrarlayın ve her satır için CSS kimliği adlarının her özel bağlantının url'siyle eşleştiğinden emin olun (daha önce hashtag'i (#) eklemeyi unutmayın). Örneğin, "#step-2" özel bağlantı url'si, "adım-2" CSS kimliğine karşılık gelmelidir. Menünüzü kaydedin. Bağlantılar, tıklandığında sayfanın belirli beş bölümüne atlamak için artık düzgün şekilde ayarlanmıştır.

Not: Bağlantı bağlantıları için yumuşak kaydırma efekti, Divi'de yerleşik olduğu için otomatik olarak gerçekleşir, bu da güzel bir bonus!

Yeni Widget Alanı Oluşturma

Ardından, yeni menünüz için yeni bir widget alanı oluşturun. WordPress yöneticinizde, Görünüm → Widget'lara gidin, Widget Adı kutusuna "sabit kenar çubuğu" adını girin ve "oluştur" düğmesini tıklayın.

Not: Yeni alanın görünmesi için widget alanını oluşturduktan sonra sayfayı yenilemeniz gerekebilir.

Kenar çubuğunun üstüne bir logo/resim eklemek için, sayfanın sol tarafındaki metin pencere aracını bulun ve az önce oluşturduğunuz Sabit Kenar Çubuğu pencere aracı alanının içine sürükleyin. Metin Widget'ını açmak için tıklayın ve bu kodu kullanarak bir html img etiketi ekleyin (resmin boyutlarının 200 piksele 200 piksel olması gerektiğine dikkat edin):

<img src="Your Image URL" alt="Your Alternate Text" width=”200px” height=”200px” class="aligncenter" style=”padding-right: 15px” />

"Resim URL'nizi" resminizin tam URL'siyle ve "Alternatif Metninizi" resminiz için alternatif bir adla değiştirin.

Kaydet'i tıklayın.

Ardından, sayfanın sol tarafındaki Özel Menü pencere aracını bulun ve Metin Pencere Öğesi altındaki Sabit Kenar Çubuğu pencere aracı alanının içine sürükleyin. Özel Menü widget'ını açmak 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üze bir başlık verin (şimdilik “Pişirme Adımları” koyabilirsiniz).

Bu kadar. Widget'ı kaydedin ve sayfanıza geri dönün.

Kenar Çubuğu Oluşturma

Son olarak, kenar çubuğunuzu sayfaya ekleme zamanı. Divi Sayfa Oluşturucu'yu kullanarak ⅓ sütununa (sol taraf) tam genişlikte bir sütun içeren bir satır ekleyin. Ardından, Kenar Çubuğu Modülünü ekleyin.

Kenar Çubuğu Modülü genel ayarlar sekmesi altında aşağıdakileri değiştirin:

• Widget Alanı: sabit kenar çubuğu (daha önce oluşturduğumuz).
• Metin Rengi: Açık
• Devre Dışı Bırak: telefon ve tableti seçin (Bu, mobil uyumlu hale getirmek için önemli bir adımdır)

Gelişmiş Tasarım Ayarları altında, “Sınır Ayırıcıyı Kaldır” ayarını “EVET” olarak değiştirin.

Şimdi Özel CSS sekmesine gidin ve Ana Öğe kod düzenleyici kutusuna aşağıdaki css'yi ekleyin:

background: #333;
position: fixed;
width: 25%;
padding: 120px 0px 20px 15px;
top: 0;
left: 0;
height: 100%;

Kaydet ve Çık'ı tıklayın.

Mobil Bakım

Şu anda, sabit kenar çubuğu mobil cihazlarda doğru şekilde oluşturulmayacak. Bunun düzeltilmesi gerekiyor. Kenar çubuğunu telefon ve tablet ekranlarından nasıl gizlediğinizi hatırlıyor musunuz? Şimdi kenar çubuğunun yalnızca telefonda ve tablette görünen "sabit olmayan" bir sürümünü eklemeniz gerekiyor.

İlk önce, kopyala simgesine tıklayarak kenar çubuğu modülünü çoğaltın.

Genel ayarlar altındaki Kenar Çubuğu Modülü ayarlarında, telefon ve tablet seçeneklerinin işaretini kaldırarak ve masaüstü seçeneğini işaretleyerek (ilk kenar çubuğu için sahip olduğunuzun tersi) Devre Dışı Bırak ayarını düzenleyin.

Ardından Özel CSS'ye gidin ve Ana Öğe kutusundaki tüm kodu çıkarın ve aşağıdakileri ekleyin:

background: #333;
padding: 20px 15px 20px 30px;

Artık iki kenar çubuğunuz var – yalnızca masaüstünde gösterilen sabit bir kenar çubuğu ve yalnızca mobil cihazlarda gösterilen geleneksel bir kenar çubuğu.

Not: Bazılarınız, medya sorguları gibi başka yollarla kenar çubuğunu duyarlı hale getirmeyi tercih edebilir. Bu da harika bir seçenek. Basit olsun diye bu şekilde yaptım.

Ek Stil

Bu son adım tamamen stil ile ilgili. Şu anda sabit kenar çubuğu alt bilginizle örtüşüyor ve menü bağlantıları çok sıkıcı. Bunu düzeltmek için birkaç özel css öğesi ekleyebilirsiniz.

WordPress yöneticisinde Divi Tema Seçenekleri'ne gidin. Genel sekmesinin altında, sayfanın altındaki Özel CSS kutusuna aşağıdaki css'yi ekleyin:

#menu-fixed-sidebar-menu li a { 
color: inherit; 
display: block; 
width: 100%; 
padding: 15px 15px 15px 30px; 
margin-bottom: 10px; 
background: #555; 
border-left: 4px solid #888; 
text-transform: uppercase; 
} 

#menu-fixed-sidebar-menu li a:hover { 
background: #fff; 
color: #333; 
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
} 

@media (max-width: 1280px){
.et-social-icons, #footer-info {
float: none;
text-align: center;
}

@media (max-width: 980px){
#main-footer { 
width: 100% !important; 
}

Not: css kimliği seçici, menünüzün adına bağlıdır. Bu stilin çalışması için menünüzü "sabit kenar çubuğu menüsü" olarak adlandırdığınızdan emin olun, böylece css #id seçicisi "#menu-sabit-kenar çubuğu-menü" ile doğru şekilde eşleşir.

Nihai Sonuç

Bu kadar. Artık düzgün kayan bağlantı bağlantılarına sahip duyarlı, sabit bir kenar çubuğu menünüz var!

Bu kurulumun güzelliği, farklı bağlantı bağlantı menüleriyle herhangi bir sayfaya kolayca sabit kenar çubukları ekleyebilmenizdir. Bu üyelik kursları, öğreticiler, SSS'ler, portföyler veya uzun blog gönderileri için harika olurdu. Paylaşmak için başka kullanımlarınız var mı? Yorumlarda ne olduklarını duymakla ilgileniyorum.

Sonuç olarak

Divi Uzmanlık Bölümü henüz hakkında pek bir şey yazmadığımız bir şey – ama yapmayı planlıyoruz! Bu yüzden gelecekte bunun gibi daha fazla gönderi için gözlerinizi dört açın. Ve herhangi bir isteğiniz varsa lütfen aşağıdaki yorumlarda bize bildirin!