22 En İyi Önyükleme Sayfalandırması (Harika Gezinme İçin)

Sayfadan sayfaya, bölümden bölüme, öğeden öğeye atlama, Bootstrap sayfalandırma ile çok daha basit ve daha uygun olur.

Neyse ki, sayfalandırmayı kendiniz çözmenize gerek yok. Bunun yerine bir kısayol kullanın.

Önceden tanımlanmış bir şablonla. (HAYIR!)

Bu örneklerin tümü ücretsiz, güvenilir ve kullanımı kolaydır. Not : Siz de çok zaman kazanacaksınız.

Tüm testleri sizin için yaptık ve kendi yapımımızı da ekledik.

Sayfalandırma, web sitenizin arama optimizasyonunun önemli bir yönüdür. İşleri şimdi sıralayın ve kullanıcıların sayfalarınız ve yayınlarınız arasında KOLAYLIKLA GEZİNMELERİNE yardımcı olun.

Bu sayfalandırma şablonları herhangi bir web projesinde kullanılabilir.

En İyi Önyükleme Sayfalandırma Stilleri

Önyükleme Düğmeleri V18

Gördüğünüz gibi, bu, web uygulamanızla kullanabileceğiniz tonlarca farklı düğmeden oluşan bir pakettir. Tabii ki, toplam avantajınız için kullanabileceğiniz yuvarlak düğmeli modern sayfalandırma da var.

Bu setin tamamı tamamen ücretsizdir, bu yüzden sadece sayfalandırma için indirseniz bile, bu iyi.

Ancak, muhtemelen diğer snippet'leri de etkinleştirmek isteyeceksiniz, çünkü zaten hepsine sahipseniz neden olmasın?

Daha fazla bilgi / Demo İndir

Açısal Önyükleme Sayfalandırması

Tek bir Bootstrap sayfalandırma stili yerine, bu set size dört küçük varyasyon sunar.

HIZLI bakışta, oldukça benzerler, ancak her birinin farklı bir özelliği var ve kutudan en iyisini bulmanız için size daha fazla varyasyon sunuyor.

Üçünde ileri geri düğmeleri var, ancak sonuncusu olmadan, işleri son derece az tutuyor.

Ayrıca, peşinde olduğunuz tam sayfalandırmayı oluşturmaya yardımcı olacak sınırlamalar belirleyebilir ve diğer özelleştirme ayarlarını gerçekleştirebilirsiniz.

Daha fazla bilgi / Demo İndir

jQuery Sayfalandırma Eklentisi

Bu harika snippet, ebeveyn olsun veya olmasın farklı öğeleri sayfalandırmanıza yardımcı olacak seçeneğin kilidini açar.

Web sitenizdeki çok uzun makaleler veya başka şeyler için sayfalama oluşturmak istiyorsanız, bu size iyi gelecek bir araçtır.

CodePen'in bir parçası olduğu için, projenize entegre etmeden önce onu doğrudan platformda düzenleyip değiştirebileceğinizi biliyorsunuz.

Düzen aynı zamanda farklı ekran boyutlarında FLUID performansı için %100 mobil uyumlu bir yapıya sahiptir.

Daha fazla bilgi / Demo İndir

aşırı duygusal sayfalandırma

Daha basit ama güzel yapılmış tasarımlarla başlayalım. Sayıların sıralanması web sayfanızın önceliği içinde değilse, aradığınız tasarım budur.

Gooey Pagination, slime benzeri bir damlacık tasarım stilidir. Sıralama buna göre yapılmadığı için sayfayı tanımak biraz zor ama dilerseniz sayfa numarası ekleyebilirsiniz.

Metnin altında bulunan siyah noktaların üzerine geldiğinizde, bir balçık topunun hareketlerini taklit eden düzgün bir "aşırı duygusal" animasyon efekti gösterir. Bu güzel animasyon efekti , Bootstrap sayfalandırmasıyla etkileşime giren meraklı zihinleri kesinlikle çekecektir.

Web siteniz çocuklara yönelik oyunlara daha yatkınsa, koyu lekelerin renklerini değiştirebilir ve onları renkli hale getirebilirsiniz. Çocuklara arkadaşça bir deneyim ve onunla oynamak için eğlenceli bir zaman verin.

Konsept hala demoda ve bitmedi, ancak bir kısmını değiştirebilir ve birkaç kod EKLEYECEK ve DEĞİŞTİREREK kendi başınıza bitirebilirsiniz.

Daha fazla bilgi / Demo İndir

Robert tarafından sayfalandırma

Bu sayfalandırma tasarımı daha basit ve daha basit bir görünüme sahiptir. Bu şablon, demoda gördüğünüz gibi herhangi bir katı dolgu arka planıyla iyi çalışır.

Bu, sayfalandırma tasarımına ihtiyaç duyan blog siteleri için mükemmel bir seçimdir. Bu tasarımı bir ilham kaynağı olarak alarak sayfalandırmanızın düzgün ve güzel görünmesini sağlayın.

Bu şablonu tamamen özelleştirebilir ve web sitenizin temasıyla uyumlu olacak şekilde kişiselleştirebilirsiniz. Sayfa sayısını ayarlamak istiyorsanız, daha yüksek veya daha düşük olmasına bakılmaksızın bunu yapabilirsiniz.

Renkli vurgular , ziyaretçilerinizin hangi sayfada olduklarını bilmelerine yardımcı olur, böylece içeriğinize göz atarken kaybolmazlar.

Daha fazla bilgi / Demo İndir

12 sayfalandırma Fikirleri

Bu, Codepen'in yaratıcı kodlayıcılarından birinden benzersiz bir önyükleme sayfalandırmasıdır. Web'de bulabileceğiniz binlerce tasarım arasından bu, denemeye değer .

Bu snippet, aralarından seçim yapabileceğiniz iki sayfalandırma tasarımı sunar. Biri, kullanıcılarınızın belirli bir sayfayı sırayla tanımlamasına yardımcı olacak sayısal yazı tiplerine sahiptir.

Bir diğeri ise geometrik şekiller kullanılarak tasarlanmıştır. Ama yine de İKİSİNİ KULLANABİLİRSİNİZ, verilen 12 tasarım ile onunla birçok kombinasyon yapabilirsiniz.

Biraz ÖZELLEŞTİRME çekinmeyin ve bazı öğeleri tercihlerinize uyacak şekilde değiştirin.

Daha fazla bilgi / Demo İndir

Sayfalandırma Vineeth.TR

Bunlar, Codepen tarafından kullanımınız için sağlanan bir dizi sayfalandırma tasarımıdır. Bu şablonla, aralarından seçim yapabileceğiniz bir grup tasarımınız var.

Ayrıca animasyonlu ve Bootstrap betiği aracılığıyla yapılmış altı sayfalama tasarımı vardır. Tasarımlar doğal renkler ve çarpıcı grafiklerle gelişir. Ayrıca bakmaktan hoşlanan simetrik ve güzel şekiller kullanır.

Yine de tasarımlarda uygulanan HİÇBİR vurgulu efekt yoktur, ancak bu, kullanım için bu kadar benzersiz ve işlevsel olmasını engellemez. Kendi web siteniz için deneyebileceğiniz basit ve zarif bir düzendir.

Daha fazla bilgi / Demo İndir

Pacman Sayfalandırması

Video oyunlarının hayranı mısınız? Web siteniz oyunları incelemeye, retro oyunlar hakkında blog oluşturmaya mı odaklanıyor yoksa sadece bir oyun sitesi mi? Bu bir evet ise, işte o niş için uygun bir Bootstrap sayfalandırma tasarımı.

Pacman Pagination tasarımı, ilginç ve göz alıcı bir animasyon tasarımıdır. Kullanıcınızın kaldığı sayfa, bir Pacman figürü ile vurgulanarak temsil edilecektir.

Kullanıcılarınız bir sayfadan diğerine geçmeye başladığında, rakam sonraki sayfaya doğru numarayı yemeye başlar. Kodun kendisi kusursuz çalışır ve doğrudan web sitenizde kullanabilirsiniz.

Bu tasarımın birkaç öğesini değiştirmek isterseniz, Pacman temasına uyacak şekilde veya web sitenizin temasıyla uyumlu olacak şekilde ÖZELLEŞTİRebilirsiniz. Bu, herhangi bir web sitesi için çok yönlü ve uygun bir tasarımdır.

Daha fazla bilgi / Demo İndir

Yeti El Sayfalandırması

Ah evet, hiçbir şey ünlü bir efsanevi yaratığın elinden daha fazla benzersizlik ve nadirlik gösteremez. Sayfalandırmanız için neden bu tasarımı kullanıyorsunuz? Neden olmasın?! Sıra dışı ve aynı zamanda süper yaratıcı .

Yeti El sayfalandırma tasarımı, sıralı sayılar arasında hareket etmek için bir yeti karakterinin eline sahiptir. El, kullanıcılarınızın bulunduğu sayfayı vurgulamak için İŞARETEYİ HAREKET ETTİRİR.

Bu deneysel tasarımı web sitenizde kullanmak istiyorsanız, web siteniz için tam uyumlu ve işlevsel hale getirmek için bazı kodları değiştirmeniz gerekir. Bu tasarım, çocuklara yönelik web siteleri için harika.

Tamamen özelleştirilebilir ve tüm renkleri değiştirebilirsiniz. Elin gerçekten dışarı çıkmasını sağlamak için sağlam bir dolgu arka planı seçin.

Daha fazla bilgi / Demo İndir

Sonsuz Sayfalandırma

Bu sayfalandırma tasarımı, okuyucularıyla paylaşacak çok sayıda içeriğe sahip web siteleri içindir. Sonsuz Sayfalandırma düzeni, sayfalar arasında gezinmenin basit ve harika bir yoludur.

İlk bakışta kafa karıştırıcı olabilir. Bu tasarım için uygulanan tek tasarım sadece noktalardır ve başka bir şey değildir. Evet, düz beyaz noktalar ve düz bir dolgu arka planı. Varsayılan görünüm, sitenin sürekli kayıyor ve sonsuzmuş gibi görünmesini sağlar. Bu “SONSUZ” efekti vermek.

Okuyucular veya kullanıcılar sona ulaştığında, önyükleme sayfalandırması onu sonsuz bir döngü gibi baştan geriye kaydırır. Kod herhangi bir sorun olmadan kusursuz çalışır .

Web siteniz için kullanıma hazırdır ve bazı renkleri temanıza uyacak şekilde özelleştirebilirsiniz.

Daha fazla bilgi / Demo İndir

Sayfalandırma Kasper Mikiewicz

Daha modern bir görünüme ve stile sahip web siteleri için bu, gidilecek yol. Modüler şekillerin ve geometrik şekillerin kullanılması, herhangi bir temanın profesyonel görünmesini sağlayabilir ve ona çağdaş bir görünüm kazandırabilir.

Bu şablonla, kullanıcılarınızın web sitenizin içeriğinde gezinmesine yardımcı olabilecek basit ve işlevsel bir tasarım elde edebilirsiniz.

TAMAMEN özelleştirilebilir ve arka planı ve diğer öğeleri kendi web sitenizin temasına uyacak şekilde DEĞİŞTİREBİLİRSİNİZ.

Daha fazla bilgi / Demo İndir

WebDesignerDepot Sayfalandırma

Belki de önceki yaratıcı web sitelerinden çok daha profesyonel görünen bir web sitesi arayışındasınız. Bu önyükleme sayfalandırma tasarımı, daha ticari ve profesyonel bir görünüme sahiptir. İş web siteleri her zaman bu minimal ve basit görünümdedir.

Bu, diğer unsurlardan gelen istenmeyen DİKKATLERİN kullanıcılarınızın dikkatini çekmesini ve içeriğe daha fazla odaklanmasını önleyecektir. Tasarım aynı zamanda web sitenizin yürüttüğü işte meşru ve ciddi olduğunu gösterir.

Daha fazla bilgi / Demo İndir

Sayfalandırma Bir

Modern bir görünüm çok mülayim? Buraya! Daha şık ve daha fütüristik bir görünüm deneyin. Bootstrap Pagination One tasarımı, geometrik şekilleri ve kullanılan renk seçimi ile tamamen kötü görünüyor.

Şablon konsepti için malzeme tasarımı ve stilidir. Sayfalandırma çubuğu için basit çizgiler ve havalı bir vurgulu efekti kullandı.

Bazı değişiklikler yapmak isterseniz, sağlanan şablondaki kodu ekleyerek veya değiştirerek yapabilirsiniz. Ancak renkleri olduğu gibi bırakmanız tavsiye edilir, hiçbir şey kıpkırmızı bir kırmızıdan daha fazla güç söyleyemez!

Daha fazla bilgi / Demo İndir

Kırpılmış Arka Planla Sayfalandırma ve Düzen

Web siteniz çok sayıda sunum slaydıyla mı dolu? Bu sayfalandırmanın tasarımı, slayt gösterilerinizi buna göre düzenlemenize ve düzenlemenize yardımcı olmak için tasarlanmıştır. Web sayfasının ve slaytların daha prezentabl ve hoş görünmesine yardımcı olur.

Şablonun kaydırıcıda kullanılan PARALEL kaydırma efekti vardır, bu nedenle daha fazla kullanıcı katılımı ve etkileşimi vardır.

Sen, sen slaytlar arasında geçiş yapmak için jestleri kullanımı ile ilerleyebilirsiniz Bu kaydırıcı işlevini kullanabilir veya altında bulunan sayfalara ayrılmış sopası nasıl kullanabileceği iki yolu vardır.

Daha fazla bilgi / Demo İndir

Duyarlı Sihirli Satır Sayfalandırması

Bu önyükleme sayfalandırma tasarımı, DAHA profesyonel görünümlü bir web sitesi içindir. Konsept, insanların bir web tasarımını kendileri için “çekici” olarak nasıl algıladıklarına dayanmaktadır.

Tasarım, öncekilere benzer bir kaydırma çubuğu çizgisi kullanır. Tasarımın işlevi, sayfanın üst kısmına, kullanıcıya belirtilen sayfada olduklarını söyleyen bir çizgi yerleştirilmesidir. Önceki kaydırma çubuklarıyla neredeyse aynıdır, ancak bu yatay olarak kayar.

Satır, kullanıcının bulunduğu sayfa numarasının üstünde gelir. Yapılan harika kodlama, yatay çizginin kaydırma özelliğinin sorunsuz çalışmasını sağlar.

Kullanıcılarına biraz daha fazla grafik tasarım sunmak isteyen web siteleri için harika.

Daha fazla bilgi / Demo İndir

Sayfalandırma ile Duyarlı Tabloyu Gerçekleştirin

Hepimiz, hangi sayfada olduğumuzu söyleyen bir göstergenin yardımı OLMADAN postamızı düzenlemenin zor bir iş olabileceğini biliyoruz.

Bu Materyalize Duyarlı Tablo, yalnızca tamamen işlevsel bir unsur değil, aynı zamanda kullanıcı hesaplarını sıralamak için kullanabileceğiniz bir tasarımdır.

Bu şablon size çok sayıda içerik ve bilgi görüntüleyebilen duyarlı bir tablo sağlar . Güzel renkler ve harika tasarımlar, bu tabloyu her web sitesi için “olmazsa olmaz” haline getiriyor.

Bu özellik ile kullanıcılarınıza postalarını, hesaplarını veya bildirimlerini sıralamaları için GÜÇ verin. Eklenen önyükleme sayfalandırması, verilerini buna göre düzenlemelerine de yardımcı olabilir.

Sayfalandırmanın yanı sıra, hepsi tek bir öğede filtre seçeneğine sahip bir arama çubuğu da alacaksınız. Bu tasarım birçok özellik içerdiğinden, kod biraz daha gelişmiş.

Ama sadece böyle bir arka plan resmini ekleyerek bazı metinleri değiştirme gibi bir kaç şey değiştirmek ve onu öne yapmak için biraz yukarı renkleri ayar gerekiyor.

Daha fazla bilgi / Demo İndir

Araç İpucu Sayfalandırması

Tooltip Pagination, düz metin yerine noktalar kullanarak tasarımdaki sadeliği ve minimalizmi ile övünmektedir. Basit tasarımı sayesinde web sitenizin herhangi bir yerinde rahatlıkla kullanabilirsiniz ve bir eldiven gibi oturacaktır.

Tasarım, yeni kullanıcılar için öğreticiler ve ipuçları içeren web siteleri için yapılmıştır. İlk elden ipuçları veren bir alt menüye yerleştirilebilir. Tasarım, içinde yalnızca BİRKAÇ sayfa bulunan web siteleri için yapılmıştır.

Daha fazla bilgi / Demo İndir

Saf CSS3 Duyarlı Sayfalandırma

Bu, başka bir önyükleme sayfalandırma öğeleri kümesidir. Şablon , aralarından seçim yapabileceğiniz altı tür sayfalandırma stiline sahiptir. Her türün tasarımı birbirine benzer, tek fark barındırabileceği sayfa aralığıdır.

Bir çubuk türüne ekleyebileceğiniz sayfa sayısında yalnızca SINIRLI bir aralık vardır. Bu tasarımla gidecekseniz, web sitenizdeki web sayfalarının sayısına uyacağını düşündüğünüz çubuğun uzunluğunu seçmeyi deneyin.

Tasarım, ona profesyonel bir görünüm kazandıran hafif çizgi darbeleri ve genişliklerden oluşur. Bu, bir kullanıcı üzerine geldiğinde sayfa numarasını vurgulayan HIZLI animasyon efektleriyle birlikte gelir.

Sadeliği göz önüne alındığında her tür web sitesi temasında ve stilinde kullanılabilir.

Daha fazla bilgi / Demo İndir

Sayfalandırma Vurgulu Animasyon

Bu, oradaki en iyi ve yaratıcı sayfalandırma tasarımlarından biridir. Eşsiz düzeni ve işlevselliği göz önüne alındığında, bunun için kodlama çok karmaşık olacaktır. Ancak hemen kullanabilirsiniz ve herhangi bir web tasarımına uygulanabilir.

Önceki düzeni fark ettiğiniz gibi, bu çok fazla yer kaplamaz. Sayfa numaraları, üzerinde “Next” yazısı bulunan ince çubuk içinde GİZLİDİR. Kullanıcı fareyle üzerine geldiğinde sol ve sağ ok görünmeye başlar.

Oklara tıklamak, altında ince bir çizgi ile gösterilecek olan sayfa numaralarını ortaya çıkaracaktır. Web sitenizde bıraktığınız verilen alanı yönetmeye çalışıyorsanız, bu sizin için mükemmel bir sayfalandırmadır.

Tasarım harika ve işlevsellik kusursuz.

Daha fazla bilgi / Demo İndir

Pac-Man CSS Sayfalandırması

Daha önce tartıştığımız önceki Pacman temalı tasarımı hatırlıyor musunuz? Gerçek anlaşmayı ister misin? Pekala, işte Pacman temasına gerçekten isabet eden başka bir Pacman tarzı önyükleme sayfalandırma tasarımı!

Klasik RETRO video oyunu, oyuncuları çağlar boyunca büyüledi ve eğlendirdi. Bu efsanevi oyunu geri getirin ve kullanıcılarınıza nostaljiyi yaşatın, bu oyunu oynarken yaşadığımız eğlenceyi ve keyfi hatırlamalarını sağlayın.

Bu, çocuklar için etkinlikler veya bir oyun web sitesi içeren siteler için en uygunudur. Bir kullanıcı bir düğümün üzerine geldiğinde, Pacman (veya vurgulayıcı) yolunu çiğnemeye başlar .

Düğüm tıklandığında, Pacman o düğümü yer ve o konuma doğru hareket eder, oldukça tatlı değil mi?

Daha fazla bilgi / Demo İndir

Duyarlı Sayfalandırma

Pek çok tasarımdan geçtikten sonra, temellere geri dönmeye çalışalım. Duyarlı sayfalama tasarımı basit ve temiz olacak şekilde yapılmıştır. İlk bakışta profesyonel bir görünüme sahiptir.

Bu, herhangi bir web sitesinde sorunsuz bir şekilde kullanılabilecek temel bir sayfalandırma tasarımıdır. MINIMALIST temalı, renkli ve modern görünümlü bir web siteniz varsa, aradığınız tasarım budur.

Daha fazla bilgi / Demo İndir

Yuvarlak Sayfalama

Bir öncekine benzer şekilde Roundie Pagination, öncekiyle aynı sade ve zarif tasarıma sahiptir. Tek fark, bu, verilen renk şeması ve tasarımı ile daha cesur ve daha gösterişli olmasıdır .

Çubuğun biraz derinliği var, bu da arka plandan çıkmasını sağlıyor. Renk seçimi de tasarımın en iyi şekilde görünmesini sağladı.

Daha fazla bilgi / Demo İndir