Divi Arşiv Page Duvar Düzeni Nasıl Verilir

Çekimlere girmeden önce, birkaç tür arşiv sayfası olduğunu belirtmek önemlidir. Sitenizdeki arama sonuçlarının doldurulduğu bir arama arşivi sayfası vardır; Sonra bir yazarın tüm yayınlarının doldurulduğu yazarınızın arşiv sayfası var; Ve elbette bir kategoriden tüm yayınların bulunduğu bir kategori arşiv sayfası var. Bu yazıda verdiğimiz kod snippet’i, Divi’ye dahil olan blog yayınlarının tüm türleri/formatları için tüm arşiv sayfalarını etkileyecektir.
Eklememiz gereken ilk snippet, işin çoğunun gerçekleştirildiği yer, aşağıdaki CSS görüntüleridir. Divi> Tema Seçenekleri> Genel sekmeleri altında tema seçeneğinizi kopyalamak ve CSS paneline eklemek istersiniz. Bu snippet, arşiv sayfasının yan çubuğunu siler ve sayfa düzeni ve bireysel “makale kartı” stilini blog bata çiftinin stiline uyacak şekilde değiştirir. /** Tüm arşiv sayfalarında kenar çubuğunu kaldırın
*/
.Search #Main-Content. Container :: Önceden,
.
Görüntü yok;
}
.Search #Sol alan,
.Archive #Sol alan {
Genişlik:%100;
Şamandıra: yok;
Dolgu-sağ: 0;
}
.Search #ideBar,
.Archive #sidabar {
Görüntü yok;
}
/*
* Arşiv sayfaları için kostram stilleri oluşturun
*/
.Search #Sol alan,
.Archive #Sol alan {
-Moz-sütun sayımı: 3;
Sütun sayımı: 3;
-moz-sütun boşluğu: 60px;
Sütun boşluğu: 60px;
}
.Archive .et_pb_post> A,
.search .et_pb_post> a {
Marj: -20px -20px 10px;
Ekran bloğu;
}
.Search #Sol alan .et_pb_post,
.Archive #sol alan .et_pb_post {
Taşma: gizli; / * Firefox için düzeltme */
Page-Bre-brech: Kaçın;
Breakinside: Sütundan kaçının;
Genişlik:%100;
Dolgu: 19px;
Sınır: 1px katı #d8d8d8;
Arka Plan rengi: #fff;
Kelime sarısı: bre-word;
Ekran: satır içi blok;
}
.Search #Sol alan .et_pb_post h2,
.Archive #sol alan .et_pb_post h2 {
yazı tipi boyutu: 18px;
}
.Search #Sol alan .et_pb_post.format-link,
.Search #Sol alan .et_pb_post.format -quote,
.Search #Sol alan .et_pb_post.format-audio,
.Archive #Sol alan .et_pb_post.format-link,
.Archive #Sol alan .et_pb_post.format -quote,
.Archive #Sol alan .et_pb_post.format-audio {
Dolgu: 0;
}
.Archive .et_pb_post .et_pb_image_container,
.Archive .et_pb_post .et_main_video_container,
.Archive .et_pb_post .et_audio_content,
.Archive .et_pb_post .et_pb_slider,
.Search .et_pb_post .et_pb_image_container,
.Search .et_pb_post .et_main_video_container,
.Search .et_pb_post .et_audio_content,
.Search .et_pb_post .et_pb_slider {
Marj: -20px -20px 10px;
}
.Archive .et_pb_post.format-audio .et_audio_content {
Marj: 0px -38px 0px;
}
.Archive .et_pb_post .et_pb_slider .et_pb_slide,
.Search .et_pb_post .et_pb_slider .et_pb_slide {
Min-yükseklik: 180px;
}
.Archive .pajinasyon,
.Search .Paination {
Dolgu: 20px 0;
}
/*
* Medya sorguları
*/
@Media ekranı ve (maksimum genişlik: 980px) {
.Search #Sol alan,
.Archive #Sol alan {
-Moz-sütun sayımı: 2;
Sütun sayımı: 2;
-moz-sütun boşluğu: 60px;
Sütun boşluğu: 60px;
}
}
@Media ekran ve (maksimum genişlik: 767px) {
.Search #Sol alan,
.Archive #Sol alan {
-Moz-sütun sayımı: 1;
Sütun sayımı: 1;
}
.Search .et_pb_post.format-audio .et_audio_content,
.Archive .et_pb_post.format-audio .et_audio_content {
Marj: 0;
}
.search #Sol alan .et_pb_post.format-audio .et_audio_container .mejs-controls div.mejs-rail,
.Archive #Sol alan .et_pb_post.format-audio .et_audio_container .mejs-controls div.mejs-rail,
.search #Sol alan .et_pb_post. Format-audio .et_audio_container .mejs-controls.
.Archive #Sol alan .et_pb_post. Format-audio .et_audio_container .mejs-controls.
MIN-Width: 300 piksel! Önemli;
Genişlik: 300 piksel! Önemli;
}
}
Arşiv sayfasında görüntülenen yan çubuğun görüntülenmesini istiyorsanız, “Tüm Arşiv Sayfalarında Yan Bıçağı Sil” başlıklı üst kaydetmeyi veya silmeyi seçebilirsiniz. Değilse, alıntıyı olduğu gibi kaydedin. Ayrıca “eski giriş” ve “yeni giriş” demek yerine arşiv sayfalarınızın numaralandırılmasını tercih edebilirsiniz. Bunun için WP-Pagenavi eklentisini yüklemenizi öneririz. Yüklendikten sonra varsayılan olarak numaralandırılan sayfa sayısını sağlayacaktır. Ayarları değiştirmek istiyorsanız, bunlar ayarlar> pagenavi altında olacaktır. Daha sonra, sayfalandırma bağlantımızın doğru yerde olmasını sağlamaya yardımcı olan küçük bir JavaScript’imiz var. Aşağıdaki snippet’leri Divi> Tema Seçenekleri> Entegrasyon> Kodu Blogunuza Ekle’nin altındaki metin kutusuna ekleyebilirsiniz.
(işlev ($) {

$ (belge) .Ready (function () {
LeftArea = $ (‘#Sol alan’);
Pagenavi = leftArea.find (‘. Wp-pagenavi’);
Pagenavigation = leftArea.find (‘. Pagination’);
if (pagenavi.length) {
Pagenav = $ (‘#sol alan .wp-pagenavi’);
}
başka {
Pagenav = $ (‘#sol alan. Sayfa’);
}
Pagenav.Detach ();
LeftArea.En (Pagenav);
});
}) (jQuery)

Not: Bugün Yazı’ndaki CSS görüntüleri ve JavaScript görüntüleri Eduard Ungureeanu destek ekibinin üyelerine aittir. Onunla bir destek forumunda buluşursanız, onun çok yararlı bir insan olduğunu biliyorsunuz. Bu snippet’in yararlı olduğunu düşünüyorsanız, aşağıdaki yorumlarda ona büyük bir “teşekkür” verdiğinizden emin olun!
Yarın: Yeni Divi Wire Frame kiti ekleme (Ürün Bölümü!) Yarın başlayacağız ve vereceğiz!- Diğer divi tel kafes kiti.Bu ürün bölümüne odaklanacaktır.Bu kit, sattığınız her şeyi göstermek için sekiz farklı parçayı kapsayacaktır.Görüşürüz! Divi 100 gün 78 Divi 3.0’a geri say bu yazı Divi 100 maratonumuzun bir parçası.Arka arkaya 100 gün boyunca ücretsiz bir divi kaynağı yayınladığımızda takip etmeye devam edin!REACT kullanarak aşağıdan yukarıya inşa edilmiş yeni görsel düzenleyicimiz de dahil olmak üzere Divi 3.0 oyununu değiştiren bir sürümle sona erecek.Divi 3.0 sonsuza dek Divi Builder ile bir web sitesi oluşturma şeklinizi değiştirecek!Geri sayım başlasın.
Divi 3.0 hakkında daha fazla bilgi edinin