Divi'de Sayfalandırmaya Nasıl Stil Verileceğine İlişkin Kullanışlı Bir Kılavuz

Sayfalandırma, özellikle tasarım söz konusu olduğunda, genellikle gözden kaçan bir web sitesinin öğelerinden biridir. Ve web sitenizde sayfalandırmanın uygun olabileceği birden çok yer vardır. Temel olarak, sayfalandırma (veya sayfalandırma menüsü), kullanıcıların birden çok öğe sayfası (örneğin bir gönderi arşivi) arasında gezinmesine olanak tanır. Bu, özellikle ilk sayfa içeriğini azaltmak için yararlıdır.

Divi, yerleşik ayarlar kullanılarak biçimlendirilebilen sayfalandırma (galeri modülü gibi) içeren birden çok modüle sahiptir. Bu modüllerden bazıları (blog ve portföy gibi), Divi Temasının (veya WordPress) bazı siteler için aşırı basitleştirilebilen varsayılan sayfalandırmasını devralır. Ancak bir eklenti yardımıyla tüm temanızın sayfalandırmasını daha karmaşık bir sayfayla değiştirebilirsiniz. Ardından, ihtiyacınız olan şekilde CSS ile şekillendirebilirsiniz.

Bu derste, size Divi'de sayfalandırmaya nasıl stil uygulanacağını göstereceğim. İşte üzerinde duracağımız şey:

• Divi'de Sayfalandırmayı Şekillendirirken Dikkat Edilmesi Gerekenler
• Styling Divi Galeri Modülü ve Filtrelenebilir Portföy Modülü Sayfalandırma
• Galeri Modülü ve Filtrelenebilir Portföy Modülü için Gelişmiş Sayfalandırma Stilleri
• Styling Blog Modülü ve Portföy Modülü Sayfalandırması
• WP-PageNavi Eklentisini Kullanarak Divi'ye Karmaşık Sayfalandırma Ekleme
• WP-PageNavi Sayfalandırmasını Özel CSS ile Şekillendirme

Başlayalım.

Gizlice Bakış

Bu gönderi çoğunlukla sayfalandırmanın nasıl şekillendirileceği ile ilgilidir. Ancak, burada size nasıl oluşturulacağını göstereceğim birkaç karmaşık sayfalandırma stili var.

Başlarken

Youtube Kanalımıza Abone Olun

Bu eğitim için aşağıdakilere ihtiyacınız olacak:

• Divi Teması kurulu ve aktif.
• Farklı modüllerin sayfalandırma tasarımlarını test etmek için bazı sahte içeriğe ihtiyacınız olacak. Örneğin, portföy (veya filtrelenebilir portföy) modül sayfalandırmasını tasarlamak için, sayfalandırmanın etkili olmasına izin vermek için yeterli içeriğe sahip olmanız için temanıza eklenen yaklaşık 12-16 projeye ihtiyacınız olacaktır. Galeri modülü için, galeriyi doldurmak için yaklaşık 12-16 görüntüye de ihtiyacınız olacak.
• WP-PageNavi Eklentisini kullanmak istiyorsanız, eklentiyi kurmanız ve etkinleştirmeniz gerekecektir. Bu, sitenizin WordPress Kontrol Paneli içinden WordPress Dizininden indirilebilen ücretsiz bir eklentidir. Eklenti > Yeni Ekle'ye gidin ve WP-PageNavi'yi arayın.
  

Yerinde bazı sahte içeriğiniz olduğunda, yeni bir sayfa oluşturmaya hazırsınız. WordPress kontrol panelinizden Sayfalar > Yeni Ekle'ye gidin. Sayfanıza bir başlık verin ve Divi Builder'ı dağıtın. “Sıfırdan Oluştur” seçeneğini seçin. Ardından Ön Uçta Oluşturmak için tıklayın.

Artık bazı sayfalandırma tasarımlarını test etmeye hazırsınız.

Divi'de Sayfalandırmayı Şekillendirirken Dikkat Edilmesi Gerekenler

Genel olarak konuşursak, muhtemelen sayfalandırma tasarımına fazla kafa yormak istemezsiniz çünkü herhangi bir gezinme menüsü gibi onu da basit ve sezgisel tutmak önemlidir. Ancak, Divi'de sayfalandırma tasarlarken göz önünde bulundurabileceğiniz birkaç şey var.

Sayfalandırma Yazı Tipi

Sayfalandırma, siteniz için kullandığınız ana yazı tiplerinden uzaklaşmak için harika bir yerdir. Kullanıcı arayüzlerine ve gezinmeye yönelik en iyi yazı tiplerini seçmek istiyorsunuz. Ve sayfalandırma çoğunlukla sayıları içerdiğinden, yazı tipinin tüm sayıları eşit yükseklik ve genişlikte gösterdiğinden emin olmak istersiniz (tipografi uzmanlarının çizgi ve tablo dediği şey). Muhafazakar favorilerimden birkaçı Oxygen, Nunito Sans ve Source Sans Pro'yu içeriyor. Sayfalandırmanızda çok fazla sayfa varsa, Fjalla One veya Roboto Condensed gibi yoğun bir yazı tipiyle giderek biraz yer açmanız gerekebilir.

Sayfalandırma Yazı Tipi Stili

Sayfalandırmanızı farklı kılmak için birkaç yazı tipi stilini de deneyebilirsiniz. Örneğin, "sonraki" ve "önceki" bağlantıları daha belirgin ve sayfa numaralarının yüksekliğine eşit yapmak için büyük harfli yazı tipi stilini kullanabilirsiniz. Ancak, bağlantıların zaten bir gezinme menüsünde olduğu düşünüldüğünde, altı çizili yazı tipi stili eklemek biraz gereksiz olabilir.

Sayfalandırma Harf Aralığı

Harf aralığı, sayfalandırmanıza biraz daha yatay boşluk eklemenin harika bir yoludur. Bu, hoş bir tasarım öğesi ekleyebilir ve navigasyonu öne çıkarabilir.

Sayfalandırma Metin Hizalama

Divi'de sayfa numaralandırmanızı kolayca sayfanın soluna, ortasına veya sağına hizalayabilirsiniz. Bu yüzden web sayfanızı tasarlarken bunu unutmayın.

Tıklanabilir Alan

Sayfalandırma bağlantılarınız için yeterli tıklanabilir alana sahip olmak önemlidir. Varsayılan olarak, bu oldukça küçük olacaktır. Daha büyük metin kullanarak veya satır yüksekliğini artırarak tıklanabilir alanı artırabilirsiniz. Ancak, bazı CSS ile bu bağlantıların etrafına biraz dolgu da ekleyebilirsiniz.

Sayfalandırma Metin Boyutu

Sayfalandırma metin boyutu normalde oldukça küçüktür. Bu muhtemelen, kullanıcıların dikkatini sayfanın içeriğinden uzaklaştırmasını önlemek içindir. Bununla birlikte, daha büyük bir metin boyutuna sahip olmak, sayfalandırma bağlantısının tıklanabilir alanını artırabilir ve kullanıcılar için daha dikkat çekici hale getirebilir. Tarayıcı ve içerikle güzel bir şekilde ölçeklenebilmesi için daha büyük sayfalandırma metni için vw uzunluk birimi kullanmayı seviyorum.

Sayfalandırma Satırı Yüksekliği

Sayfalandırma normalde bir satırda kaldığından, ek tıklanabilir alan eklemek için bağlantılara biraz daha fazla satır yüksekliği ekleyerek kurtulabilirsiniz.

Sayfalandırma Metin Gölgesi

Metin Gölgesi kötü kullanılırsa dikkat dağıtıcı olabilir. İnce tutmayı planlamıyorsanız, onu dışarıda bırakmak en iyisidir. Bu tür bir şey istiyorsanız, metninizin etrafına yaratıcı bir parıltı eklemek için de kullanılabilir.

Sayfalandırma Aktif Sayfa

Sayfalandırmanın bu yönü, kullanıcıların gezinirken şu anda hangi sayfada olduklarını bilmelerini sağlamak için önemlidir. Etkin sayfa bağlantısının stili ile etkin olmayan sayfa bağlantılarının stili arasında açık bir karşıtlık olmalıdır. Varsayılan olarak Divi, Divi'deki etkin sayfa bağlantısının rengi olarak Tema Özelleştirici'de ayarlanan birincil vurgu rengini kullanır. Ancak, bunu CSS satırı ile geçersiz kılabilirsiniz.

Sayfalandırmaya sahip modüller için Divi, sayfalandırmanın farklı öğelerini biçimlendirmek için yerleşik tasarım seçeneklerine sahiptir. Ayrıca, uygun tek bir yerde tasarım üzerinde daha da fazla kontrol sağlamak için gelişmiş sekmede CSS'nin bazı parçacıklarını kolayca ekleyebilirsiniz.

Ancak tema düzeyinde sayfalandırma için, özel CSS'li WP-PageNavi eklentisini kullanarak karmaşık bir çözüm elde edebilirsiniz (bundan sonra bahsedeceğiz).

Şimdilik, Divi Modüllerinde sayfalandırmanın nasıl şekillendirileceği ile başlayalım.

Styling Divi Galeri Modülü ve Filtrelenebilir Portföy Modülü Sayfalandırma

Yeni bir sayfada Divi Builder etkinken, tek sütunlu bir satırla yeni bir normal bölüm oluşturun. Ardından, satıra filtrelenebilir bir portföy modülü ekleyin. Daha önce de belirtildiği gibi, sayfalandırmayı görebilmeniz için 12-16 proje oluşturduğunuzdan emin olun.

Filtrelenebilir portföy ayarlarında aşağıdakileri güncelleyin:

Mesaj Sayısı: 4 (böylece sayfalandırmada daha fazla sayfa bağlantısı görebilirsiniz)

Başlığı Göster: HAYIR
Kategorileri Göster: Hayır

Varsayılan olarak Divi, Sayfalandırmayı Gösterecektir, bu nedenle bu seçeneği EVET olarak bırakın.

Portföyün sağ alt kısmında sayfalandırmayı görmelisiniz.

Sayfalandırmaya stil vermek için tasarım sekmesine gidin ve mevcut tüm seçenekleri görmek için Sayfalandırma Metni geçiş düğmesini açın. Aşağıdakileri güncelleyin:

Düzen: Izgara
Sayfalandırma Yazı Tipi: Source Sans Pro
Sayfalandırma Yazı Tipi Stili: TT
Sayfalandırma Metni Hizalama: Merkez
Sayfalandırma Metin Rengi: #cccccc
Sayfalandırma Metin Boyutu: 4vw (masaüstü), 38px (tablet ve telefon)
Sayfalandırma Harf Aralığı: 1vw
Sayfalandırma Satırı Yüksekliği: 2em

Ardından gelişmiş sekmesine tıklayın ve aşağıdaki CSS snippet'ini Pagination Active Page altına ekleyin:

color: #0096eb !important;

Metni daha büyük bir satır yüksekliğiyle büyüterek, kullanıcılar için daha fazla tıklanabilir alan olur. Hizalamayı merkeze değiştirmek ve biraz harf aralığı eklemek, sayfalandırmayı daha belirgin hale getirmeye yardımcı olur. Ve zıt aktif sayfa rengine sahip özel sayfalandırma metin rengi, kullanıcının hangi sayfada olduklarını bilmesine yardımcı olur.

Diğer Hızlı CSS Parçacıkları

Sayfalandırma tasarımını değiştirmek için birkaç hızlı ve kolay CSS parçacığı.

Doğrudan sayfalandırmanın üzerinde bulunan varsayılan sınır çizgisini çıkarmak için Portföy Sayfalandırması altında aşağıdaki CSS'yi girebilirsiniz:

border: none;

Sayfalandırmanıza tam bir kenarlık vermek için Portföy Sayfalandırması altına aşağıdaki CSS'yi girebilirsiniz:

border: 2px solid #dddddd;

Sayfalandırmaya bir arka plan rengi vermek için, Portföy Sayfalandırması altına aşağıdaki CSS'yi girebilirsiniz:

background: #333333;

Galeri Modülü için de çalışır

Aynı tasarım ayarları Galeri Modülü için de geçerli olacaktır. Aslında, Filtrelenebilir Portföy Modülünden sayfalandırma metin stillerini kopyalayabilir ve bunları bir Galeri Modülüne yapıştırabilirsiniz! Herhangi bir CSS parçacığını da aktardığınızdan emin olun.

Galeri Modülü ve Filtrelenebilir Portföy Modülü için Gelişmiş Sayfalandırma Stilleri

Filtrelenebilir Portföy ve Galeri modüllerinizin sayfalandırılması için daha gelişmiş bir tasarım elde etmek istiyorsanız, biraz daha gelişmiş özel CSS kullanabilirsiniz. Bu özel örnek hakkında sevdiğim şey, özel CSS'nin modülün yerleşik ayarlarıyla birlikte çalışmasıdır.

Göstermek için, Filtrelenebilir Portföyü tekrar kullanalım. Bu sefer tasarım seçeneklerini aşağıdakilerle güncelleyin:

Düzen: Izgara
Sayfalandırma Metin Boyutu: 16px
Sayfalandırma Satırı Yüksekliği: 2.5em

Gelişmiş sekmesinin altına aşağıdaki CSS sınıfını ekleyin:

CSS Sınıfı: pagi alanı

Bu, CSS'imizin yalnızca bu modüle uygulanmasına izin verecektir.

Şimdi ayarlarınızı kaydedin ve Sayfa Ayarları açılır modunu açın. Gelişmiş sekmesinin altında, Özel CSS kutusunun içine aşağıdaki CSS kodunu ekleyin.

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
  border: none; 
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
  padding: 1em 1.5em;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
  border-color: #333333;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}

Kod yerindeyken, sayfalandırmanın artık sayfa bağlantılarının her biri için daha fazla tıklanabilir alana sahip olduğunu görebilirsiniz. Bağlantılara ayrıca arka plan renkleri eklenmiştir, böylece daha çok tıklanabilir düğmeler gibi görünürler. Fareyle üzerine gelindiğinde bağlantıların her birine ince bir kenarlık da eklenir. Aktif sayfa bağlantısı, daha açık metin rengiyle zıt koyu bir arka plan ile öne çıkıyor.

Bu kod, hem filtrelenebilir portföy modülü hem de galeri modülü için sayfalandırmayı şekillendirecektir. Etkinleşmesi için modüle CSS sınıfını “pagi-space” eklediğinizden emin olun.

İşte filtrelenebilir portföy modülündeki sonuç.

Styling Blog Modülü ve Portföy Modülü Sayfalandırması

Blog Modülü ve Portföy Modülü, "Eski Girişler" bağlantısı ve "Sonraki girişler" bağlantısı ile gönderi arşivinizde gezinmenizi sağlayan varsayılan WordPress sayfalandırmasını devralır.

Divi Teması'ndaki blog arşiv sayfasında varsayılan sayfalandırma şöyle görünür:

Aynı sayfalandırma, blog modülü ve portföy modülü tarafından kullanılır.

Blog Modülünü (veya portföy modülünü) kullanıyorsanız, yerleşik ayarları kullanarak sayfalandırma metnine stil verebilirsiniz.

Bu, çoğu durumda basit ve zarif bir çözümdür. Ancak, varsayılan Divi/WordPress sayfalandırmasını değiştirmek için daha karmaşık bir sayfalandırma arıyorsanız, sizi şaşırtabilecek kadar kolay bir çözüm var.

WP-PageNavi Eklentisini Kullanarak Divi'ye Karmaşık Sayfalandırma Ekleme

Blog modülü ve portföy modülü de dahil olmak üzere tüm Divi Temanız için daha gelişmiş bir sayfalandırma istiyorsanız, WP-PageNavi adlı popüler eklentiyi kullanarak varsayılan WordPress sayfalandırmasını farklı bir sayfayla değiştirebilirsiniz. Bu eklenti Divi ile iyi çalışır. Tasarım basit ancak CSS kullanılarak kolayca özelleştirilebilir.

Eklentiyi Divi'ye Ekleme

Henüz yapmadıysanız, devam edin ve eklentiyi gönderinin başındaki “Başlarken” bölümünde açıklandığı gibi yükleyin. Eklenti yüklenip etkinleştirildiğinde, yeni sayfalandırma biçimi temanız boyunca otomatik olarak görünecektir.

Aynı zamanda blog modülünü ve portföy modülünü de etkileyecektir.

Eklenti Ayarları

Eklenti ayarlarını WordPress kontrol panelinizden Ayarlar > WP-PageNavi'ye giderek bulabilirsiniz.

Ayarlar, öncelikle görüntülenen işlevselliği ve metin içeriğini özelleştirmek içindir. Ancak, sayfalandırmaya stil vermek istiyorsanız, bazı özel CSS kullanmanız gerekecektir.

WP-PageNavi Sayfalandırmasını Özel CSS ile Şekillendirme

Muhtemelen tüm temanın sayfalandırmasını biçimlendirmek isteyeceğinizden, CSS'yi Tema Özelleştirici'ye veya Alt Tema style.css dosyanıza eklemek en mantıklısı olacaktır. Devam edin ve aşağıdaki CSS'yi Tema Özelleştirici Ek CSS kutusuna yerleştirin:

/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
  padding: 0.3em 0.8em !important;
  font-size: 2em !important;
  color: #333333;
  line-height: 2em;
  background: #eeeeee;
  transition: all .5s;
}

/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
  background: none;
}

İşte nihai sonuç.

Blog Modülü ve Portföy Modülünde WP-PageNavi'yi Şekillendirme

Daha önce belirtildiği gibi, Blog Modülü ve Portföy Modülü, varsayılan WordPress sayfa gezinmesini devralır. Bu, WP-PageNavi'nin yeni karmaşık sayfalandırmasıyla değiştirildiğinden, modüller bu yeni sayfalandırmayı da görüntüleyecektir.

Sayfalandırmaya daha fazla stil eklemek için yerleşik sayfalandırma metin tasarımı seçeneklerini kullanabilirsiniz.

Seçeneklerden bazılarının, harici özel CSS ile yerinde beklendiği gibi çalışmayabileceğini unutmayın.

Son düşünceler

Divi'de bir web sitesi oluştururken sayfalandırmanın sonradan düşünülmesi gerekmez. Sayfalandırma kullanan modüllere yardımcı olacak bazı yararlı yerleşik seçenekler vardır. Ve bazı özel CSS ile istediğiniz herhangi bir stili oluşturabilirsiniz. WP-PageNavi eklentisi, Divi Teması boyunca karmaşık bir sayfalandırma eklemek için zarif bir çözümdür. Divi ile sorunsuz çalışmakla kalmaz, size kolayca özelleştirebileceğiniz ek seçenekler de sunar. WP-PageNavi sayfalandırmasını şekillendirmek biraz CSS gerektirir, ancak umarım bu makalede kullanılan şablon sizi doğru yola sokacaktır.

Bu gönderideki örnek tasarımlar kasıtlı olarak basitti.

Yorumlarda sizden haber bekliyorum.

Şerefe!