Divi'nin Filtrelenebilir Portföy Modülünde Sayfalandırmaya Nasıl Stil Verilir

Divi'nin filtrelenebilir portföy modülü, çalışmalarınızı ve projelerinizi web sitenizde sergilemenin harika ve kolay bir yoludur. Portföy modülünüz için farklı filtreler oluşturmak için kategorileri kullanabilirsiniz ve her seferinde web sitesi tasarımınızı değiştirmek zorunda kalmadan güncel bir portföy tutmanın kolay bir yolunu sunar. WordPress panosuna yeni bir proje eklemeniz yeterlidir, ardından doğru şekilde kategorize edildiği sürece web sitenizdeki portföy modülünde otomatik olarak doldurulacaktır.

Bu eğitimde, Divi'nin filtrelenebilir portföy modülünde sayfalandırmayı stillendirmenin 3 farklı yolunu göstereceğiz. Bu tasarımı özelleştirerek portföy modülünü web sitenizin genel tasarımına uygun hale getirebilir ve sergilemek istediğiniz çalışmaya dikkat çekebilirsiniz.

Başlayalım!

Gizlice Bakış

İşte tasarlayacağımız şeyin bir önizlemesi

Sayfalandırma Stili Bir

Sayfalandırma Stili İki

Sayfalandırma Stili Üç

Başlamak için Gerekenler

Divi'yi kurun ve etkinleştirin

Başlamadan önce Divi Temasını kurun ve etkinleştirin ve web sitenizde Divi'nin en son sürümünün bulunduğundan emin olun.

Portföy Projeleri Ekle

Portföyü sayfamıza ekledikten sonra projelerle dolması için öncelikle projeleri WordPress panosuna eklememiz gerekiyor. WordPress panosu kenar çubuğunda Projeler'i seçin, ardından yeni bir proje ekleyin. Projenin filtrelenebilmesi için öne çıkan bir görseli ve bir kategorisi olduğundan emin olun.

Şimdi, başlamaya hazırsınız!

Divi'nin Filtrelenebilir Portföy Modülünde Sayfalandırmaya Nasıl Stil Verilir

Hazır Düzen ile Yeni Bir Sayfa Oluşturun

Divi kitaplığından önceden hazırlanmış bir düzen kullanarak başlayalım. Bu tasarım için Painter mizanpaj paketindeki Painter Portfolio Sayfasını kullanacağız.

Web sitenize yeni bir sayfa ekleyin, ona bir başlık verin ve Divi Builder'ı Kullan seçeneğini belirleyin.

Bu örnek için Divi kitaplığından önceden hazırlanmış bir düzen kullanacağız, bu nedenle Düzenlere Gözat'ı seçin.

Ressam Portföy Sayfası düzenini arayın ve seçin.

Düzeni sayfanıza eklemek için Bu Düzeni Kullan'ı seçin.

Artık tasarımımızı oluşturmaya hazırız.

Filtrelenebilir Portföy Modülünü Ekleyin

Bu sayfadaki mevcut portföy içeriğini filtrelenebilir portföy modülü ile değiştireceğiz. İlk olarak, mevcut portföy bölümünü silin.

Ardından, sayfaya "son çalışma" bölümünün altına yeni bir bölüm ekleyin.

Ardından bölüme tek sütunlu bir satır ekleyin.

Filtrelenebilir portföy modülünü yeni satıra ekleyin.

Filtrelenebilir portföyünüz, WordPress panosunun proje bölümüne eklendikleri sürece projelerinizle doldurulmalıdır.

Filtrelenebilir Portföy Ayarları

Şimdi filtrelenebilir portföyün tasarımını özelleştirelim. Modül ayarlarını açın, ardından gönderi sayısını 6 olarak değiştirin.

• Mesaj Sayısı: 6

Öğeler altında, Kategorileri Göster'i devre dışı bırakın.

• Kategorileri Göster: Hayır

Tasarım sekmesine gidin ve Düzen ayarlarını açın. Düzeni Izgara olarak ayarlayın.

• Düzen: Izgara

Ardından, bindirme ayarlarını açın. Yakınlaştırma Simgesi Rengi, Vurgulu Yerleşim Rengi ve Vurgulu Simge Seçici'yi aşağıdaki gibi ayarlayın:

• Yakınlaştırma Simgesi Rengi: #fdd23a
• Vurgulu Yerleşim Rengi: rgba(61,61,61,0.28)
• Vurgulu Simge Seçici: Artı Simgesi

Görüntü ayarlarını açın, ardından bir görüntü kutusu gölgesi ekleyin.

Ardından, gölge rengini ayarlayın.

• Gölge Rengi: #f2f2f2

Ardından, başlık yazı tipi ayarlarını aşağıdaki gibi değiştirin:

• Başlık Yazı Tipi: Merriweather
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Rengi#000000

Başlık metni boyutunu ve satır yüksekliğini ayarlayın.

• Başlık Metin Boyutu: 25px
• Başlık Satırı Yüksekliği: 2em

Filtre Kriterleri Metni bölümüne gidin ve yazı tipi ayarlarını aşağıdaki gibi değiştirin:

• Filtre Kriterleri Yazı Tipi: Montserrat
• Filtre Ölçütü Yazı Tipi Ağırlığı: Kalın
• Filtre Ölçütü Metin Rengi: #000000

Modül tasarımımızın çoğu tamamlandığına göre, sayfalandırma stillerini özelleştirmeye geçebiliriz.

Sayfalandırma Stili Bir

İlk sayfalama stili için aktif sayfa için farklı bir yazı tipi rengi belirleyeceğiz. Ek olarak, sayfalandırma metin boyutunu fareyle üzerine gelindiğinde artacak şekilde ayarlayacağız. Başlayalım.

Filtrelenebilir portföy ayarları içinde sayfalandırma metni ayarlarını açın. Yazı tipini aşağıdaki gibi özelleştirin:

• Sayfalandırma Yazı Tipi: Montserrat
• Sayfalandırma Yazı Tipi Ağırlığı: Kalın
• Sayfalandırma Metni Hizalama: Sağ
• Sayfalandırma Metin Rengi: #000000

Metin boyutunu ayarlayın. O zamanlar. fareyle üzerine gelindiğinde metin boyutunu artırmak için fareyle üzerine gelme ayarlarını kullanın.

• Sayfalandırma Metin Boyutu: 17px
• Hover'da Sayfalandırma Metin Boyutu: 21px

Son olarak, Gelişmiş sekmesine gidin ve aşağıdaki özel CSS'yi Sayfalandırma Etkin Sayfa CSS bölümüne ekleyin. Bu, aktif sayfada sarı rengi etkinleştirir.

color: #FDD23A !important;

Son tasarım

Ve işte ilk tasarımımız için son görünüm.

Sayfalandırma Stili İki

Tasarlayacağımız ikinci sayfalama stili, sayfalandırmanın arkasında bir arka plan rengi, bazı vurgulu renk efektleri ve aktif sayfa için farklı bir renk içerir.

Filtrelenebilir portföy ayarları içinde sayfalandırma metni ayarlarını açın. Yazı tipini aşağıdaki gibi özelleştirin:

• Sayfalandırma Yazı Tipi: Merriweather
• Sayfalandırma Yazı Tipi Ağırlığı: Kalın
• Sayfalandırma Metni Hizalama: Merkez
• Sayfalandırma Metin Rengi: #9e9e9e
• Hover'da Sayfalandırma Metin Rengi: #000000

Ardından, metin boyutunu ve satır yüksekliğini ayarlayın.

• Sayfalandırma Metin Boyutu: 26px
• Sayfalandırma Satırı Yüksekliği: 2em

Gelişmiş sekmesine gidin ve aşağıdaki özel CSS'yi Portföy Sayfalandırma CSS'si bölümüne ekleyin. Bu, bir arka plan rengi ekleyecek ve kenarlığı kaldıracaktır:

background:#f2f2f2;
border:none;

Son olarak, etkin sayfa için farklı bir metin rengi ayarlamak için Pagination Active Page CSS bölümüne aşağıdaki CSS'yi ekleyin.

color: #000000 !important;

Son tasarım

İşte ikinci sayfalama stilimiz için son tasarım.

Sayfalandırma Stili Üç

Son sayfalandırma tasarımımız için aktif sayfanın arkasına sarı bir daire ekleyeceğiz. Ayrıca etkin sayfa ve üzerine gelindiğinde farklı bir yazı tipi rengi ayarlayacağız.

Filtrelenebilir portföy ayarları içinde sayfalandırma metni ayarlarını açın. Ardından yazı tipini aşağıdaki gibi özelleştirin:

• Sayfalandırma Yazı Tipi: Merriweather
• Sayfalandırma Yazı Tipi Ağırlığı: Kalın
• Sayfalandırma Metni Hizalama: Merkez
• Sayfalandırma Metin Rengi: #000000
• Hover'da Sayfalandırma Metin Rengi: #FDD23A
• Sayfalandırma Metin Boyutu: 26px

Kenarlığı kaldırmak için Gelişmiş sekmesine gidin ve aşağıdaki özel CSS'yi Portföy Sayfalandırma CSS'si bölümüne ekleyin:

border:none;

Son olarak, Pagination Active Page CSS bölümüne aşağıdaki CSS'yi ekleyin. Bu CSS, aktif sayfa için farklı bir metin rengi ve dairesel bir arka plan ayarlayacaktır.

padding: 10% 60% 10% 60%;
background-color: #FDD23A;
border-radius: 80%;
color: #ffffe7!important;

Son tasarım

İşte son düzenimizin son tasarımı.

Son sonuç

Şimdi farklı sayfalandırma stillerimizle üç nihai tasarıma bir göz atalım.

Sayfalandırma Stili Bir

Sayfalandırma Stili İki

Sayfalandırma Stili Üç

Son düşünceler

Filtrelenebilir portföy modülünün web sitesi tasarımınıza uyacak şekilde özelleştirilmesi kolaydır ve portföyünüzü güncel tutmak için WordPress panosundan hızla yeni projeler ekleyebilirsiniz. Bu modül, tasarımcılar, sanatçılar, fotoğrafçılar ve diğer yaratıcıların çalışmalarını güzel görüntüler ve kolay gezinme ile sergilemeleri için harikadır. Daha benzersiz portföy tasarımı fikirleri için, dinamik bir portföy projesi şablonu oluşturmaya ilişkin bu eğiticiye göz atın. Web sitenizde filtrelenebilir portföy modülünü kullandınız mı? Yorumlarda bize bildirin!