Divi'de Havalı Hover Efektleri ile Kategori Düzenine Göre Son Yazılar Nasıl Tasarlanır?

Hepimiz bir web sitesinde görüntülenen son gönderileri görmeye alışkınız. Genellikle WordPress Son Gönderi widget'ı veya blogda en son yayınlanan makaleleri göstermek için bir eklenti kullanılarak oluşturulurlar. Ve genellikle blog sayfasında, gönderilerin altında, kenar çubuklarında veya bir açılış sayfasının öne çıkan bir bölümü olarak (bunun gibi) görünürler.

Bu eğitim için, size son gönderileri kategoriye göre nasıl görüntüleyeceğinizi göstereceğiz. Yalnızca Divi Builder'ı (ve birkaç blog modülünü) kullanarak, dört farklı kategoriden en son gönderileri görüntüleyen bir bölüm oluşturacağız. Kategoriye göre bu son gönderiler, benzersiz kategori etiketleri, animasyonlar ve fareyle üzerine gelme efektlerini içerecek - hepsi bir eklenti olmadan.

Bunu kontrol et!

Gizlice Bakış

Birlikte oluşturacağımız Kategori Düzenine Göre Son Gönderilerin tasarımına ve işlevselliğine hızlı bir bakış.

Kategori Düzenine Göre Son Gönderileri ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. Yeniden abone olmayacaksınız veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Öğreticiye geçelim mi?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. Ayrıca, son gönderiler bölümünün işlevselliği, sitenizde kendilerine atanan kategorilerle birlikte gerçek blog gönderilerinin bulunmasına bağlıdır. Bu nedenle, bir test sitesi kullanıyorsanız, birkaç sahte blog gönderisi kurulumunuz olduğundan emin olun.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de Kategori Bölümüne Göre Son Gönderileri Oluşturma

4 Sütunlu Bir Satır Oluşturun

Divi Builder'da işleri başlatmak için 4 sütunlu bir satır oluşturun.

Blog Modülü 1 Oluşturma

Dört sütunun her biri ayrı bir blog modülüne sahip olacaktır. İlk blog modülünü sütun 1'e ekleyin.

Blog modüllerinin her biri, varsayılan olarak sitenizdeki en son gönderiyi görüntüler. Tek yapacağımız, o belirli blog modülüne dahil edilecek belirli bir kategori seçmek. Ardından, gönderi sayısını 1 ile sınırlayacağız, böylece yalnızca bir gönderi gösterilecektir. Bu bize o kategori için dinamik olarak en son blog gönderisini verecektir.

Blog İçeriği

Blog İçeriği seçeneklerini aşağıdaki gibi güncelleyin:

• Yazı Tipi: Yazılar
• Mesaj Sayısı: 1
• Dahil Edilen Kategoriler: Haberler (veya kendinizden biri)
• Gönderilerden Alıntıları Kullan: HAYIR
• Alıntı Uzunluğu: 120

Eleman Seçenekleri

Ardından, öğe seçeneklerini aşağıdaki gibi güncelleyin:

• Kategorileri Göster: HAYIR
• Alıntıyı Göster: HAYIR (masaüstü), EVET (Vurgulu ve Tablet)
• Sayfalandırmayı Göster: HAYIR

Blog Tasarımı

Ardından tasarımı aşağıdaki gibi güncelleyin:

• Arka Plan Rengi (masaüstü): #ffffff
• Arka Plan Rengi (fareyle üzerine gelme): #8ac829
• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Yazı Tipi Stili: TT
• Başlık Metin Boyutu: 24px
• Başlık Harf Aralığı: 1px
• Başlık Satırı Yüksekliği: 1.4em
• Gövde Metni Rengi: #ffffff
• Meta Yazı Tipi Ağırlığı: Hafif
• Meta Harf Aralığı: 3px

• Min Yükseklik: 450px (masaüstü), otomatik (tablet)
• Dolgu: %5 üst, %5 alt, %5 sol, %5 sağ
• Kutu Gölgesi: Ekran Görüntüsüne bakın
• Animasyon Stili: Yakınlaştır

Bu, ilk blog modülümüzün tasarımıyla ilgilenir. Şimdi özel kategori etiketimizi oluşturmamız gerekiyor.

Kategori Etiketi Oluşturma 1

Etiketi oluşturmak için blog modülünün altına yeni bir metin modülü ekleyin ve ardından bunu blog modülünün üzerine sürükleyin.

Metin içeriği

Gövde içeriğini blog modülü için seçtiğiniz kategorinin adıyla güncelleyin. Örneğimde, Haberler kategorisindeki son gönderiyi görüntülüyorum, bu nedenle gövde içeriğine “Haberler” kelimesini ekleyeceğim.

Kategori Etiketini Tasarlama

Metin tasarımı ayarları altında aşağıdakileri güncelleyin:

• Arka Plan Rengi: #8ac829
• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Metin Rengi: #ffffff
• Metin Hizalama: orta
• Genişlik: 120 piksel
• Kenar boşluğu: 80 piksel üst, -80 piksel alt
• Dolgu: 10 piksel üst, 10 piksel alt
• Animasyon Stili: Soluk
• Animasyon Gecikmesi: 1000ms
• Z İndeksi: 1

Etiketi blog kartının üzerine bırakmak için negatif kenar boşluğu kullandığımızdan, etiketin blog modülünün üzerinde kalması için z indeksini 1'e ayarlamamız gerekecek.

Artık bir gönderiyi tamamladığımıza göre, tel kafes görüntüleme modunu dağıtabilir ve bu modülleri diğer sütunlara kopyalayabiliriz.

1. sütundaki metni ve blog modülünü kopyalayın ve her sütunda tam olarak aynı modüllere sahip olmanız için bunları 2,3 ve 4 sütunlarına yapıştırın.

Her yinelenen blog modülü için, ona yeni bir blog kategorisi vermemiz ve üzerine gelindiğinde arka plan rengi vermemiz gerekiyor. Ve yinelenen her kategori etiketi için, kategori adını blog modülü için seçilen kategoriye karşılık gelecek şekilde güncellememiz ve ardından arka plan rengini blog modülünün vurgulu arka plan rengiyle eşleşecek şekilde güncellememiz gerekiyor.

Sütun 2'deki Modülleri Güncelle

Tel kafes görünümünde kalarak, 2. sütundaki blog modülü ayarlarını açın ve aşağıdakileri güncelleyin:

• Dahil Edilen Kategoriler: İşletme (veya kendi işletmeniz)
• Arka Plan Rengi (fareyle üzerine gelin): #f64937

Ardından, 2. sütundaki metin modülünün ayarlarını aşağıdaki gibi güncelleyin:

• Gövde: “İş”
• Arka Plan Rengi: #f64937

Sütun 3'teki Modülleri Güncelle

Ardından, 3. sütundaki blog modülü ayarlarını açın ve aşağıdakileri güncelleyin:

• Dahil Edilen Kategoriler: Para (veya kendi paranız)
• Arka Plan Rengi (fareyle üzerine gelme): #6529c7

Ardından, sütun 3'teki metin modülünün ayarlarını aşağıdaki gibi güncelleyin:

• Gövde: “Para”
• Arka Plan Rengi: #6529c7

Sütun 4'teki Modülleri Güncelle

Ardından, 4. sütundaki blog modülü ayarlarını açın ve aşağıdakileri güncelleyin:

• Dahil Edilen Kategoriler: Koçluk (veya kendiniz)
• Arka Plan Rengi (fareyle üzerine gelin): #f17809

Ardından, 4. sütundaki metin modülünün ayarlarını aşağıdaki gibi güncelleyin:

• Gövde: “Koçluk”
• Arka Plan Rengi: #f17809

Satır Ayarlarını Güncelleme

Sıramızda, belirli bir yükseklik ve özel oluk genişliği de dahil olmak üzere yapmamız gereken birkaç ayar var. Aşağıdaki satır ayarlarını güncelleyin:

• Özel Oluk Genişliğini Kullan: EVET
• Oluk Genişliği: 2
• Genişlik: %94
• Maksimum Genişlik: 1400 piksel
• Yükseklik: 540 piksel (masaüstü), otomatik (tablet)
• Dolgu: 0 piksel üst, 0 piksel alt

Bir blog kartının üzerine gelindiğinde satırın sayfadaki diğer içeriği genişletmesini ve taşımasını önlemek için satır yüksekliğini masaüstünde 540 piksel olarak ayarlıyoruz. Herhangi bir içeriği gizlememek için tablette yüksekliği otomatik olarak ayarladığınızdan emin olun.

Her Sütun İçin Ayarları Güncelleme

Son blog gönderilerine aynı anda her iki modüle de uygulanan bir vurgulu efekti vermek için, blog gönderisini oluşturan iki modülü içeren sütuna vurgulu efekti ekleyebiliriz. Sütunların her biri için ayarları açın ve aşağıdakileri güncelleyin:

• Dönüştürme Ölçeği (Vurgulu): %115

Ardından, yalnızca tablet ekranında ana öğeye aşağıdaki özel CSS'yi ekleyin:

transform: none !important

Bu küçük snippet, mobil cihazlar için dönüştürme ölçeği vurgulu efektini devre dışı bırakacaktır.

Şimdi, son gönderilerin tümü, ilgili bir kategori etiketi ve kartın üzerine gelindiğinde gösterilen eşleşen bir arka plan rengi ile ayarlandığında. Ayrıca, kart büyüyecek ve alıntıyı fareyle üzerine gelindiğinde de gösterecektir.

Bölüm Ayarlarının Güncellenmesi

Bölüm için, ona yeni bir arka plan gradyanı ve biraz dolgu verelim. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Gradyanı Sol Renk: #6529c7
• Arka Plan Gradyanı Sağ Renk: #f64937
• Gradyan Yönü: 270deg
• Dolgu: 10vw üst, 10vw alt

Son sonuç

Bu kadar! Nihai sonucu kontrol edelim. Bu görüntü, tasarımı tamamlamak için kolayca eklenebilecek bir başlık içerir.

Ve işte animasyon ve vurgulu efektler.

Son düşünceler

Kategori Düzenine Göre Son Gönderiler Oluşturma, kutunun dışında biraz düşündüğünüzde gerçekten kolay bir işlemdir. Tek yapmanız gereken, görüntülemek istediğiniz her kategori için bir blog modülü oluşturmak. Ardından, bu modülü yalnızca belirli bir kategori için en son gönderiyi gösterecek şekilde sınırlayın. Bundan sonra, tasarımla ilgilenmek için Divi'nin gücü yanınızda.

Bu düzen, Tema Oluşturucu Şablonları dahil olmak üzere sitenizin herhangi bir yerinde kullanılabilir. Bu nedenle, taşınabilirlik seçeneklerini kullanarak bunları ihtiyacınız olan her yere aktarmaktan çekinmeyin. Umarım bir sonraki projeniz için kullanışlı olur veya en azından size daha iyi Divi tasarımları için çarkları döndürmek için biraz ilham verir.

Yorumlarda sizden haber bekliyorum.

Şerefe!