WordPress'te Herhangi Bir Elemana Özel Kaydırma Çubuğu Nasıl Eklenir

Küçük tasarım dokunuşları, web sitenizin ne kadar profesyonel göründüğünde büyük bir fark yaratabilir.

Özel kaydırma çubukları, çoğu ziyaretçinin bilinçli olarak fark etmeyeceği ancak içeriklerinizde gezinirken iyileştirilmiş görsel tutarlılığı kesinlikle hissedeceği ayrıntılardan biridir.

İyi haber şu ki, WordPress'te kaydırma çubuklarını özelleştirmek ileri düzey kodlama becerileri gerektirmez ve sonuçlar sitenizin genel kullanıcı deneyimini gerçekten artırabilir.

WordPress siteleri oluşturma deneyimimizden, özel kaydırma çubuklarının, başlangıç seviyesi siteleri profesyonel sitelerden ayıran o cilalı, bilinçli görünümü oluşturmaya yardımcı olduğunu bulduk.

WordPress sitenizdeki herhangi bir öğeye özel kaydırma çubukları eklemenin 2 basit yolunu göstereceğiz. Kapsayacağımız her yöntem gerçek dünya senaryolarında test edilmiştir, böylece rahatlık seviyenize en uygun yaklaşımı seçebilirsiniz.

WordPress'te Belirli Öğelere Ne Zaman Kaydırma Çubuğu Eklenir?

WordPress öğeleri için bir kaydırma çubuğu eklemek, sitenizin kullanıcı deneyimini büyük ölçüde iyileştirebilir.

Peki bu WordPress tasarım özelliğini ne zaman kullanmalısınız?

Özel kaydırma çubuklarından yararlanabilecek bazı yaygın WordPress öğeleri şunlardır:

• Gezinme Menüleri – Aksi takdirde tüm sayfayı kaplayacak 20'den fazla kategori ve alt kategoriye sahip bloglar için mükemmeldir.
• Kenar Çubuğu Widget'ları – Tüm widget'ları alandan ödün vermeden tutmak istediğiniz içerik açısından zengin kenar çubukları için idealdir.
• Ürün Açıklamaları – Uzun ürün ayrıntılarını temiz bir düzeni korurken kapsar.
• Yorum Bölümleri – Yüzlerce yorumu sayfayı bunaltmadan düzgün bir şekilde görüntüler.
• Görsel Galeriler – Erişilebilirliği korurken birden çok görseli bir galeride gösterir.

Bunu akılda tutarak, WordPress web sitenizdeki herhangi bir öğeye özel bir kaydırma çubuğu eklemek için size iki seçenek göstereceğiz.

Sitenizle yeni başlıyorsanız ve sayfa oluşturucu ile özel kaydırma çubuğu işlevselliği kullanmak istiyorsanız, 1. seçeneği tercih etmenizi öneririz. Bunun nedeni, eğer zaten farklı bir tema kullanıyorsanız, bu yöntem için temanızı değiştirmeniz gerekecektir.

Diğer yandan, mevcut temanızı beğendiyseniz, CSS kodu kullanarak özel bir kaydırma çubuğu eklemek için 2. seçeneği tercih edebilirsiniz. Merak etmeyin, herkesin takip edebileceği şekilde süreci adım adım açıklayacağız.

Tercih ettiğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

• Seçenek 1: Sayfa Oluşturucu ve Elemana Özel Özel Kaydırma Çubukları Kullanın (Kodsuz)
• Option 2: Use CSS Code to Add a Custom Scrollbar to a Specific Element

Seçenek 1: Sayfa Oluşturucu ve Elemana Özel Özel Kaydırma Çubukları Kullanın (Kodsuz)

Belirli bir öğeye özel bir kaydırma çubuğu eklemenin bir yolu, kaydırma çubuğu özelliğine sahip bir sayfa oluşturucu kullanmaktır. Bu şekilde, herhangi bir koda dokunmadan kaydırma çubuğunu kolayca özelleştirebilirsiniz.

Bu yöntem için Thrive Architect kullanacağız. Bir kaydırma çubuğu özelliğinin yanı sıra, Thrive Architect, profesyonel görünümlü sayfalar oluşturmak için 300'den fazla şablon ve ziyaretçinizin deneyimini kişiselleştirmek için dinamik içerik özellikleri sunar.

Ayrıca, sürükle ve bırak arayüzünün kullanıcı dostu olduğunu gördük, bu da onu WordPress'e yeni başlayanlar için ideal kılıyor. Bu araç hakkında daha ayrıntılı bilgi için Thrive Architect incelememize göz atın.

Thrive Architect ücretsiz bir sürüm sunmasa da, özel Thrive Themes indirim kodumuzu kullanarak ilk satın alımınızda %50'ye varan indirimden yararlanabilirsiniz.

Adım 1: Thrive Architect ve Thrive Themes Kurulumu

Başlamak için Thrive Architect eklentisini yüklememiz gerekiyor. Bunu Thrive Themes web sitesindeki hesabınıza giriş yaparak erişebilirsiniz.

Ardından, Thrive Product Manager eklentisini indirin ve kurun. Yardıma ihtiyacınız olursa, yeni başlayanlar için WordPress eklentisi kurma kılavuzumuza bakın.

Eklentiyi etkinleştirdikten sonra, WordPress kontrol panelinizde Ürün Yöneticisi'ne gidin.

WordPress sitenizi Thrive Themes hesabınıza bağlamak için 'Hesabıma giriş yap' seçeneğine tıklayın.

Artık hesabınızda bulunan Thrive Themes ürünlerinin bir listesini görmelisiniz.

'Thrive Architect'i bulun ve 'Ürün Yükle' kutusunu işaretleyin.

‘Thrive Theme Builder‘ı bulmak için aşağı kaydırın ve ‘Tema Yükle’ seçeneğini seçin.

Ardından, ‘Seçili ürünleri yükle’ye tıklayın. Thrive Architect, Thrive Theme Builder ile birlikte çalıştığı için bu adım gereklidir.

Bir sonraki ekranda Thrive Ürün Yöneticisi'nin Thrive Tema Oluşturucu'yu kurup etkinleştirdiği gösterilecektir.

Tamamlandıktan sonra, 'Tema Oluşturucu Kontrol Paneline Git' seçeneğini belirleyin.

Artık Thrives'ın tema kütüphanesini kullanarak siteniz için bir temel tasarım seçme zamanı.

Hangisini seçeceğinizden emin değilseniz, her temanın nasıl göründüğünü görmek için 'Önizleme' düğmesini kullanın. Karar verdiğinizde 'Seç'e tıklayın.

Şimdi Tema Oluşturucu Sihirbazına gireceksiniz.

Bu sihirbaz, logonuzu yükleme, temanız için marka renklerini seçme ve çeşitli tema yapılarını ve şablonlarını ayarlama konusunda size rehberlik edecektir.

Bir sonraki adıma geçmeden önce kurulum sihirbazını tamamladığınızdan emin olun.

Adım 2: Temanıza Bir İçerik Kutusu Öğesi Ekleme

Şimdi, varsayılan olarak kaydırma çubuğu özelliğine sahip olan WordPress temanıza bir içerik kutusu öğesi ekleyelim.

Thrive Temaları'nda içerik kutusu, birden çok bloğu bir arada gruplamak için kullanabileceğiniz bir bloktur. Bu, bir grup öğenin aynı şekilde stilize edilmesi veya bir grup olarak yönetilmesi gerektiğinde kullanışlı olabilir.

Bu örnek için, uzun bir blog yazısı kategorileri listesi içeren bir içerik kutusu ekleyeceğiz. Bu senaryoda, kenar çubuğunu süper uzun yapmadan tüm kategorileri görüntüleyebilmek istiyoruz.

İlk olarak, kaydırma çubuğunun olmasını istediğiniz WordPress blogunuzdaki herhangi bir sayfayı veya gönderiyi ziyaret edin.

Ardından, üstteki yönetici araç çubuğunda, ‘Tema Şablonunu Düzenle [ad]’ veya ‘Thrive ile Düzenle’ye tıklayın.

Artık Thrive Architect'in düzenleme arayüzüne ulaşmalısınız. İçerik kutusu bloğunu eklemek için sayfanın sağ tarafındaki '+' işaretine tıklayın ve 'İçerik Kutusu' öğesini seçin.

Ardından, kaydırma çubuğu olacak öğenin yerleştirilmesini istediğiniz yere sürükleyip bırakın.

Artık içerik kutusuna daha fazla içerik öğesi ekleyebilirsiniz. Örneğin, tekrar '+' işaretine tıklayıp 'Metin' bloğunu ekleyebilirsiniz. Ardından istediğiniz metni yazabilirsiniz.

Thrive Themes, metin ve resimler gibi temel öğelerden formlara ve fiyat tablolarına kadar çok sayıda görsel öğe sunar.

Kenar çubuğuna kategori listesi eklemek istediğimiz için, içerik kutusuna 'Dinamik Stil Liste' öğesini de ekleyeceğiz.

Bu blok temel olarak web sitenizden verileri çeker ve kategoriler, etiketler veya yazarlar gibi bir listeyi dinamik olarak görüntüler. Blok, web sitenizi oluştururken kendini otomatik olarak güncelleyecektir.

Dinamik olarak biçimlendirilmiş listeyi içerik kutusuna sürükleyip bıraktıktan sonra, 'Liste Türünü Seç' düğmesine tıklayın.

Ardından 'Kategoriler Listesi'ne tıklayın.

Şimdi, kategori listeniz, metin bloğunuz ve içerik kutusuna eklediğiniz diğer tüm öğeler aynı kapsayıcıda.

Ve gördüğünüz gibi, liste oldukça uzun ve bu yüzden ona bir kaydırma çubuğu eklemek istiyoruz.

Adım 3: İçerik Kutusu'nda Kaydırma Çubuğunu Etkinleştirme

O kapsayıcıyı seçip soldaki mavi oka tıklarsanız, içerik kutunuzu özelleştirmek için birçok seçeneği göreceksiniz.

Kaydırma çubuğu ekleme ayarları, ‘Düzen ve& Konum’ sekmesindedir. Burası, kutunun dolgu, kenar boşluğu, genişlik, yükseklik, hizalama ve benzeri ayarlarını yapabileceğiniz yerdir.

Yaptığımız ilk şey, ‘Kenar Boşlukları ve Dolgu’ bölümünün hemen altındaki mavi dolgu alanının içindeki beyaz oka tıklamaktı. Bunu yalnızca içerik kutusunun kenar çubuğundaki diğer öğelerle hizalandığından emin olmak için yaptık.

Kutunuzun iyi orantılı görünmesini sağlamak için buradaki diğer seçenekleri keşfetmekten çekinmeyin.

Ardından, Yükseklik bölümüne aşağı kaydıralım. Devam edin ve 'Maks' düğmesine tıklayın ve piksel yüksekliğini çok daha küçük bir sayıya değiştirin. Bu durumda, 617 pikselden 300 piksele indik.

Bu, içerik kutusunu çok daha kısa hale getirecek ve alt bölümdeki kategori adlarının kaybolmasına neden olacaktır.

Bu işlem tamamlandıktan sonra, paneli tekrar aşağı kaydırın ve 'Gelişmiş' sekmesini açın. Ardından, Taşma ayarlarında 'Kaydırma'yı seçin ve 'Kaydırma çubuğunu stilize et' seçeneğini etkinleştirin.

İçerik kutusu bloğunuza otomatik olarak bir kaydırma çubuğu eklenmelidir.

Ve Thrive Architect ile özel bir kaydırma çubuğu eklemek için hepsi bu kadar. WordPress temanızı, sayfanızı veya gönderinizi düzenlemeye devam edebilir veya değişikliklerinizi yayınlamak için alttaki ‘İşi Kaydet’e tıklayabilirsiniz.

Kaydırma çubuğumuz demo sitesinde şöyle görünüyor:

Seçenek 2: Belirli Bir Elemana Özel Kaydırma Çubuğu Eklemek İçin CSS Kodu Kullanın

WordPress temanızı değiştirmek ve özel bir kaydırma çubuğu oluşturmak için bir sayfa oluşturucu kullanmak size çok geliyorsa, bunun yerine CSS kodu kullanabilirsiniz. Bu yöntem, kaydırma çubuğunu doğrudan WordPress sayfanızda özelleştirmenize olanak tanır.

Kod parçacıklarıyla çalışmaya yeniyseniz endişelenmeyin. Bu özelliği WordPress sitenizde etkinleştirmeyi kolaylaştırarak sizi adım adım yönlendireceğiz.

Öncelikle, CSS'in nasıl çalıştığını anlayalım. CSS, Cascading Style Sheets (Basamaklı Stil Sayfaları) anlamına gelir. Web tarayıcılarına bir web sayfasındaki öğelerin nasıl görüntüleneceğini söyleyen bir dildir. Bizim durumumuzda, özel bir kaydırma çubuğu eklemek ve stilini belirlemek için CSS kullanacağız.

Özel CSS kullanmak için iki şeye ihtiyacımız var:

1. Bir CSS sınıfı: Bu, sayfanızdaki bir öğe için bir isim etiketi gibidir. Değiştirmek istediğimiz öğeye bunu ekleriz.
2. CSS kodu: Bu, tarayıcıya CSS sınıfına sahip öğenin nasıl stil verileceğini söyleyen talimatlar kümesidir.

Yani, özel bir kaydırma çubuğu eklemek için, önce değiştirmek istediğimiz öğeye bir CSS sınıfı vereceğiz. Ardından, o sınıfa sahip öğeler için kaydırma çubuğunu oluşturan CSS kodunu ekleyeceğiz. 

Öğeğinize scroll-bar CSS sınıfını ekleyeceksiniz. Bunu aşağıda nasıl yapacağınızı göstereceğiz. Ve kaydırma çubuğunu ekleyecek tam CSS kod parçacığı budur:

.scroll-bar {
  max-height: 100px;  /* Adjust the maximum height as needed */
  width:250px;  /* Adjust the width as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}


/* Customizing the vertical scrollbar for Webkit-based browsers (Chrome, Safari) */
.scroll-bar::-webkit-scrollbar {
  width: 10px; /* Width of the vertical scrollbar */
}


.scroll-bar::-webkit-scrollbar-track {
  background: #eaeaea; /* Background of the scrollbar track */
}


.scroll-bar::-webkit-scrollbar-thumb {
  background: grey; /* Color of the scrollbar thumb */
  border-radius: 15px; /* Rounded corners for the thumb */
}


/* Hover state for the scrollbar thumb */
.scroll-bar::-webkit-scrollbar-thumb:hover {
  background: black; /* Change color when hovered */
}


/* For Firefox */
.scroll-bar {
  scrollbar-width: thin; /* Define scrollbar width */
  scrollbar-color: #888 #f1f1f1; /* Scrollbar thumb and track color */
}

Adım 1: CSS Sınıfını Öğelerinize Ekleyin

WordPress sitenizdeki bir öğeye CSS sınıfı eklemenin birkaç yolu vardır.

Eğer blok düzenleyicisinde veya tam site düzenleyicisindeyseniz, sayfanızdaki, gönderinizdeki veya blok tema şablonunuzdaki herhangi bir bloğa tıklayabilirsiniz. Ardından, blok ayarları kenar çubuğunda ‘Gelişmiş’ sekmesini açın ve ‘Ek CSS Sınıfı (ları)’ alanına CSS sınıfınızı girin.

İşiniz bittiğinde, Güncelle, Yayınla veya Kaydet'e tıklamanız yeterlidir.

Klasik bir tema kullanıyorsanız, bu işlem blok tabanlı widget düzenleyicisi ile de çalışır. CSS sınıfını eklemek istediğiniz herhangi bir bloğa tıklamak için Görünüm » Widget'lar'a gidin.

Bundan sonra, blok ayarları kenar çubuğunda aynı Gelişmiş sekmeyi göreceksiniz. Tıpkı daha önce olduğu gibi 'Ek CSS Sınıf(lar)ı' alanına CSS sınıfını girmeniz yeterlidir.

Adım 2: CSS Kodunu Temanıza Ekleyin

Şimdi, özel CSS kodumuzu eklemeye devam edelim. Bunu yapmanın 3 yolunu göstereceğiz: tema özelleştirici, tam site düzenleyici ve WPCode kullanarak.

İlk seçenek klasik tema kullanıcıları içindir. Ayrıca, yerleşik bir özelliktir, bu nedenle kodu eklemek veya tema dosyalarınızı açmak için bir eklentiye ihtiyacınız yoktur.

Bunu yapmak için, Görünüm » Özelleştir'e giderek WordPress tema özelleştiricisini açabilirsiniz.

Not: WordPress'inizde bu ayarı görmüyorsanız, muhtemelen bir blok teması kullanıyorsunuzdur ve bunun yerine bir sonraki yöntemi kullanabilirsiniz. Daha fazla bilgi için, WordPress yöneticisinde eksik tema özelleştiricisini düzeltme kılavuzumuza göz atın.

Yöntem 1: Klasik Temalara CSS Ekleme

Özelleştirici içinde, ‘Ek CSS’yi bulun ve tıklayın.

Buraya, daha önce gösterdiğimiz kodu yapıştırın.

Kodu ekledikten sonra temanızda değişiklikleri otomatik olarak göreceksiniz.

Gördüğünüz gibi, CSS'yi eklediğiniz öğe sınıfında artık bir kaydırma çubuğu var. Ardından, 'Yayınla'ya tıklayabilirsiniz.

Yöntem 2: Tam Site Düzenleyicisini Kullanarak CSS Ekleme

Bir blok temanız varsa, tam site düzenleyicisini kullanarak CSS kodu eklemeniz gerekecek, ardından Görünüm » Düzenleyici'ye gidin.

Blok temanızı özelleştirmek için bazı menü seçenekleri bulacaksınız.

Burada 'Stiller'e tıklayın.

Bu sayfada, seçebileceğiniz bazı blok tema tasarımları olmalıdır.

Bunu görmezden gelip ‘Düzenle’ düğmesine tıklayacağız. Kalem şeklinde.

Artık düzenleme arayüzündesiniz.

Sağdaki yan panelde, revizyonlar simgesinin yanındaki üç noktalı menüye tıklayın ve 'Ek CSS'yi seçin.

Şimdi, daha önceki kod parçasını yapıştırın. Değişikliklerinizi otomatik olarak görmelisiniz.

Bittiğinde, ‘Kaydet’e tıklayın.

Tema özelleştiricisini ve tam site düzenleyicisini kullanarak CSS eklemenin bir dezavantajı, temanızı güncellemeye veya değiştirmeye karar verirseniz, CSS özelleştirmenizi kaybetme riskiniz olmasıdır.

Bu nedenle, sitenizin CSS'sini düzenlemek için WPCode'u kullanmanızı öneririz, özellikle de tam site düzenleyiciyi ve blok tabanlı bir temayı kullanıyorsanız. Bu yöntemi aşağıda takip edebilirsiniz ve klasik temalarla da çalışacaktır.

Yöntem 3: WPCode Kullanarak CSS Ekleme

Sitenizi kod kullanarak özelleştirmekten korkuyorsanız, WPCode sizin için mükemmel bir çözümdür. Bu kod parçacığı eklentisi, özel kodu güvenli bir şekilde eklemenizi sağlar, çünkü temanızın dosyalarıyla doğrudan etkileşim kurmanız gerekmez.

Bir hata oluşursa, WPCode soruna neden olan kodu otomatik olarak algılar ve devre dışı bırakır. Bu sayede sitenizi bozma olasılığınız minimuma iner.

Öncelikle WPCode eklentisini web sitenize kurun. Daha fazla bilgi için WordPress eklentisinin nasıl kurulacağına dair başlangıç kılavuzumuzu okuyabilirsiniz.

Ardından, WordPress kontrol panelinizde Kod Parçacıkları » + Parçacık Ekle bölümüne gidin. 'Özel Kodunuzu Ekle (Yeni Parçacık)' seçeneğini belirleyin ve '+ Özel Parçacık Ekle'ye tıklayın.

Şimdi, yeni özel kod parçacığınıza bir ad verin. Bu, ‘CSS Kaydırma Çubuğu’ gibi basit bir şey olabilir.

Bundan sonra, Kod Türünü 'CSS Snippet' olarak değiştirin.

Kod Önizleme kutusunda, daha önce gösterdiğimiz parçacığı yapıştırın.

Tamamlandığında, sayfayı aşağı kaydırarak 'Ekleme' bölümüne gidin. Orada, Ekleme Yöntemi'nin 'Otomatik Ekle' ve Konum'un 'Site Geniş Üstbilgi' olduğundan emin olun.

Bu işlem bittikten sonra, sağ üst köşedeki düğmeyi 'Aktif' yazacak şekilde değiştirin ve 'Snippet Kaydet'e tıklayın.

Artık CSS sınıfını eklediğiniz öğede bir kaydırma çubuğu görmelisiniz.

İşte son gönderilerin bir listesine kaydırma çubuğu ekleme örneğimiz:

Çoklu Alt Menülere Sahip Bir Menü Öğeine Özel Kaydırma Çubuğu Nasıl Eklenir

Okuyucuların merak ettiği konulardan biri, uzun bir alt menü listesi olan gezinme menüsü öğenize kaydırma çubuğunu nasıl ekleyeceğinizdir.

İşlem aslında size gösterdiğimize oldukça benziyor. Ancak kullandığınız temaya bağlı olarak bazı küçük ayarlamalar var.

Klasik bir tema kullanıyorsanız, scroll-bar sınıfını yalnızca ana menü öğenize eklemelisiniz. Alt menü öğelerinize eklemenize gerek yoktur.

Menünüze bir CSS sınıfı eklemek için tema özelleştiricisini açabilirsiniz.

Ardından, ‘Menüler’ düğmesine tıklayın.

Ardından, dişli çark ‘Ayarlar’ simgesine tıklayın ve ardından ‘CSS Sınıfları’nı seçin.

Bu, her menü öğesine bir CSS sınıfı eklemenizi sağlar.

Şimdi, kenar çubuğu panelini aşağı kaydırın.

Ardından, birincil menünüzü açın.

Bu aşamada, CSS sınıfını eklemek istediğiniz menü öğesini seçebilir ve genişletmek için tıklayabilirsiniz.

'CSS Sınıfları' adında bir alan olmalı ve sınıfı oraya ekleyebilirsiniz.

Bunun dışında, CSS kodunuzdaki scroll-bar sınıfının her bahsedildiğinde, şöyle: sub-menu sınıfını eklediğinizden emin olmak istersiniz:

.scroll-bar .sub-menu {
  max-height: 100px;  /* Adjust the maximum height as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

Gezinme menüsünün nasıl görünmesi gerektiğini aşağıda görebilirsiniz:

Aynı prensip blok temalar için de geçerlidir.

Yalnızca ana menü öğenize scroll-bar sınıfını eklemeniz gerekir, alt menülere değil.

Şimdi, işlerin farklılaştığı yer burası. WordPress web sitenizi ziyaret etmeniz ve tarayıcınızın inceleme aracını açmanız gerekiyor.

Chrome kullanıcıları için, alt menüleri olan menü öğenize sağ tıklayın ve 'İncele'yi seçin.

Klavyenizde, Bul özelliğini etkinleştirmek için CTRL/Command + F tuşlarına basın. Ardından, scroll-bar sınıfını içeren <ul></ul> HTML kodunu bulun.

Tam kod temadan temaya farklılık gösterecektir, ancak bizimki şuna benziyor:

<ul data-wp-on-async--focus="actions.openMenuOnFocus" class="wp-block-navigation__submenu-container scroll-bar wp-block-navigation-submenu">...</ul>

Tüm alt menü öğeleri vurgulanırsa, doğru kod satırını seçtiğinizi anlayacaksınız.

Şimdi, bu CSS sınıflarının tümünü class=" ve "> arasına kopyalamak istiyorsunuz.

CSS kodunda, scroll-bar sınıfını, bir sınıf olduğunu belirtmek için önlerine bir nokta (.) ekleyerek tüm bu sınıflarla değiştirin. Temanın bu ayarları geçersiz kılmadığından emin olmak için kaydırma çubuğunu özelleştiren her satıra !important eklemek de iyidir.

İşte bir örnek:

.wp-block-navigation__submenu-container.scroll-bar.wp-block-navigation-submenu {
 max-height: 100px !important; /* Adjust the maximum height as needed */
 overflow-y: auto !important; /* Enable vertical scrolling */
 overflow-x: hidden !important; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

Bu kodu ekledikten sonra, gezinme menünüz şöyle görünmelidir:

Özel Kaydırma Çubuğunun Tasarımı Nasıl Özelleştirilir

Özel bir kaydırma çubuğu eklediğinize göre, muhtemelen web sitenizin tasarımıyla eşleşmesini isteyebilirsiniz. Kaydırma çubuğunun görünümünü CSS kullanarak kolayca değiştirebilirsiniz. Boyutunu, rengini ve şeklini nasıl özelleştirebileceğimize bakalım.

Kaydırma çubuğu eklediğiniz öğenin maksimum yüksekliğini değiştirmek istediğinizi varsayalım. Bu durumda, üst kısımdaki max-height: değerini, piksel cinsinden olduğu sürece istediğiniz herhangi bir sayıya değiştirebilirsiniz.

Kaydırma çubuğuna sahip öğenin genişliğini daha geniş veya daha dar yapmak için width: değerindeki sayıyı da ayarlayabilirsiniz.

Kaydırma çubuğunun boyutunu ayarlamak için, .scroll-bar::-webkit-scrollbar seçicisi altındaki width: 10px; satırını bulun.

Kaydırma çubuğunu daha geniş yapmak için bu sayıyı artırın veya daha dar yapmak için azaltın. Örneğin, width: 15px; daha geniş bir kaydırma çubuğu oluştururken, width: 5px; daha ince yapacaktır.

Kaydırma çubuğunun rengini değiştirmek için, .scroll-bar::-webkit-scrollbar-thumb seçicisi altındaki background: grey; yazan satırı bulun.

‘grey’ kelimesini beğendiğiniz herhangi bir renkle, örneğin ‘blue’ veya onaltılık renk kodu kullanarak (örneğin #0000FF) değiştirebilirsiniz.

Kaydırma çubuğunu daha yuvarlak hale getirmek istiyorsanız, border-radius özelliğini arayın.

Sayı ne kadar yüksek olursa, köşeler o kadar yuvarlak olur. Daha yuvarlak bir görünüm için border-radius: 15px; değerini border-radius: 20px; olarak değiştirmeyi deneyin veya keskin köşeler için border-radius: 0px; kullanın.

Yukarıdaki değişikliklerin yalnızca Chrome ve Safari gibi Webkit tabanlı tarayıcıları etkileyeceğini unutmayın.

Firefox için scrollbar-color özelliğini ayarlamanız gerekecek. İlk renk, kaydırıcının (sürüklediğiniz kısım) ve ikincisi ise izleyicinin (arka plan) rengidir. Örneğin, scrollbar-color: blue #eaeaea Firefox'ta açık gri bir izleyici üzerinde mavi bir kaydırma çubuğu oluşturacaktır.

Bu değişiklikleri yaptıktan sonra CSS'nizi kaydedin ve yeni, özelleştirilmiş kaydırma çubuğunu görmek için WordPress sayfanızı yenileyin. Web siteniz için mükemmel görünümü bulana kadar farklı renkler ve boyutlarla denemekten çekinmeyin.

WordPress Web Tasarımınızı İyileştirmenin Daha Fazla Yolunu Öğrenin

WordPress sitenize özel kaydırma çubukları eklemeyi öğrendiğinize göre, web sitenizin tasarımını ve işlevselliğini iyileştirmenin başka yollarını neden keşfetmiyorsunuz? WordPress becerilerinizi bir sonraki seviyeye taşıyacak bazı yardımcı kılavuzlar şunlardır:

• Sayfalarınızı görsel olarak çekici bir şekilde sergilemek istiyorsanız, WordPress'te küçük resimlerle kolayca sayfa listesi gösterme hakkındaki eğitimimize göz atın.
• Çok fazla içeriğe sahip bloglar için, sonsuz kaydırma kullanıcı deneyimini büyük ölçüde iyileştirebilir. Bu özelliği adım adım nasıl ekleyeceğinizi öğrenin.
• Görsel bir çekicilik katmak için WordPress temanıza paralaks efekti eklemeyi deneyin. Düşündüğünüzden daha kolay.
• Geliştirilmiş erişilebilirlik için sitenize bir yazı tipi yeniden boyutlandırıcı eklemeyi düşünün. Bunu yapmak için basit bir rehberimiz var.
• Kenar çubuğunuzun mevcut konumundan memnun değilseniz, size WordPress'te kenar çubuğu tarafını nasıl değiştireceğinizi gösterebiliriz.

Umarım bu makale, WordPress sitenizdeki herhangi bir öğeye özel bir kaydırma çubuğu eklemeyi öğrenmenize yardımcı olmuştur. Ayrıca, en iyi WordPress tema oluşturucuları hakkındaki uzman seçimlerimize ve WordPress gönderilerinde okuma ilerleme çubuğu ekleme kılavuzumuza göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.