Zarif bir temanın yeni bir tasarımı gibi görünmesi için divi blog sayfanızı nasıl düzenleyebilirsiniz
Bugün size divi blog modülünü kullanarak yeni zarif tema blogu gibi blog sayfalarınızı nasıl tasarlayacağınızı göstereceğim. Üç ana tasarım modifikasyonu şunları içerir: (1) Blog Grid Üç Varsayılan Sütun Düzenini Değiştirme Yalnızca iki sütuna, (2) başlık ve meta direğin altına üstün görüntüler yerleştirme ve (3) üstün görüntünün boyutunu değiştirin. Yeni sütun geniş. Bu, birkaç kod satırı eklenerek elde edilir. Buna ek olarak, Divi Builder ve bazı özel CSS gerisini halledecektir. Başlayalım! Zarif bir temanın yeni bir tasarımı gibi görünmesi için divi blog sayfanızı nasıl düzenleyebilirsiniz
YouTube kanalına abone olun Divi’de yeni bir zarif tema blog tasarımı uyguluyoruz
Yazı tipi ailesi: “Poppins”, sans-serif;
}
Şimdi poppinler varsayılan yazı tipiniz olarak belirlenmelidir. Tasarım Başlığı İlk Sayfası Düzeninize dolu tam başlık modülüyle dolu geniş bir parça ekleyin. Tam Genişlik Başlık Modül ayarlarını aşağıdaki gibi düzenleyin: Genel Ayarlar Altında: Başlık: [Başlık Ekle] Altyazılı Metin: [Altyazılı Metin Ekle] Metin Yönlendirme ve Logo: Orta Gelişmiş Ayarlar Altında: Yazı Tipi Renk Başlığı: #20292F Başlık Yazı Tipi Boyut: 35px Renk Altyazıları: #71818C Yazı Tipi Boyutu Altyazılar: 20px Kaydet ve Çıkış Geniş bölüm modülü ayarlarının tam bölümünü düzenlemek için tıklayın. Arka plan renginin beyaza (#ffffff) düzenlendiğinden emin olun. Kaydet ve dışarı çıkın başınız hazır. Arama çubuğu eklemek için bir arama çubuğu ekleyin, standart kısmı tam geniş bir sütunla girin ve parça modülünün ayarlarını düzenleyin. Genel ayarların altında aşağıdakileri değiştirin: Özel Dolgu: Üst 0px ve 0px Alt Özel CSS altında, ana öğenin metin kutusuna aşağıdaki CSS ekleyin: z-index: 10; Kaydet ve Çıkış Şimdi Satır Modülü ayarlarını tıklayın. Genel ayarların altında aşağıdakileri değiştirin: Özel Dolgu: Üst 0px ve 0px Alt Gelişmiş tasarım ayarları altında aşağıdakileri değiştirin: Özel kenar: 0px üst ve 0px aşağıda
Kaydet ve Çıkış Sütununuza arama modülünü girin. Şimdi arama modülü ayarlarını düzenleyin. Genel ayarların altında aşağıdakileri değiştirin: düğmeyi gizle: evet yer tutucu metin: “Blogumuza göz atın …” Gelişmiş modülün ayarlarının altında aşağıdakileri değiştirin: maksimum genişlik: 300 piksel tuşlar ve renk kenar: #eeeeeeeeeeeeeeeeee eti: #F7F9FB Yer tutucu Renk: #bbbbbb Giriş Yazı Tipi Boyutu: 16px Renk Metin Giriş: #71818C Özel Marj: 0px üst, 0px Alt Özel Dolgu: 20px üst, 20px aşağıda 20px Özel CSS altında, ana öğe metin kutusuna aşağıdaki CSS ekleyin: Marj: 0 otomatik; Giriş alanı kutusuna aşağıdaki CSS ekleyin: Border-Radius: 60px;
Kaydet ve dışarı çık o. Şimdi arama çubuğu sarılma altbilgisine dikkat edin. Önemli değil. Bir blog ızgarası tasarlama Diğer standart parçalar ekleyin ve tüm geniş sütunu girin. Bölüm ayarlarını düzenlemek için tıklayın ve genel ayarların altında aşağıdakileri değiştirin: Arka Plan Rengi: #F7F9FB
Özel CSS altında aşağıdakileri ekleyin: ID CSS: Klak Clast CSS: Zarif Tasarım Not: ID “Tilted”, açık gri içeriğin beyaz arka planını ve arka planını ayıran çok ince bir çapraz çizgi yapmak için kullanılacaktır. “Zarif tasarım” sınıfı, yapacağımız tüm özel CSS değişikliklerini hedeflemek için kullanılacaktır. Kaydet ve Çıkış Sonra Sütununuza Blog Modülünü girin. Blog modülü ayarlarını düzenleyin. Genel ayarların altında aşağıdakileri değiştirin: Düzen: Tamamla Okuma Düğmesi Kutusu: Etkin
Diğer ayarların altında aşağıdakileri değiştirin: Yazı tipi Boyutunu Kopyala: 26px Meta Yazı Tipi Boyut: 14 Renk Meta Metin: #71818C Gövde Yazı Tipi Boyutu: 16px Kaydet ve Çıkış Bu, blog sayfanızın şimdi görüntülenmesi: Hala yapılması gereken bazı büyük değişikliklerimiz var ama şimdiye kadar iyi. Okuma metnini tam olarak değiştirin ve metin okumayı “tam gönderiyi görüntüley”, Divi → Tema Seçenekleri’ni açın. Entegrasyon sekmesinin altında, “Kodu blogunuzun başına ekle” metin kutusuna aşağıdaki komut dosyasını girin: JQuery (belge) .Ready (function () { JQuery (“. Daha fazla bağlantı”). Metin (“Tam Gönderiyi Görüntüle”);
});
Tema seçeneğindeyken, genel sekmeyi açın ve CSS Kustom metin kutusuna aşağıdaki CSS’yi girin: .EgantDesign A.more-Link {
yazı tipi boyutu: 14px;
Renk: #71818C! Önemli;
Metin-Transform: büyük harf;
Marj-Top: 10 piksel;
Şamandıra: yok;
Ekran: satır içi blok;
Dolgu: 8px 16px;
Border-Radius: 60px;
Arka plan-rengi: #f7f9fb;
Sınır: 2px katı #e9eff5;
}
.EgantDesign A.more-Link: Hover {
Renk: #20292f;
}
Artık blog ızgaranızın yeni bir düğmesi olmalı.
Varsayılan olarak iki sütunun düzeni uygulanan blog ızgarasında üç sütun ızgarası düzeni vardır. İki sütuna dönüştürmek için Divi → Tema seçeneğini açın ve CSS Kustom kutusuna aşağıdaki CSS’yi ekleyin: @edia sadece ekran ve (min genişliği: 980px) {
.ElegantDesign .et_pb_column .et_pb_blog_grid [data-columns] :: Önce {content: ‘2 .column.size-1oof2’! Önemli;
} .Legantdesign .et_pb_column .column.size-1oof2 {
Genişlik:%47! Önemli;
Marj-sağ:%6;
}}
@Media sadece ekran ve (maksimum genişlik: 980px) {
.ElegantDesign .et_pb_column .et_pb_blog_grid [data-columns] :: Önce {content: ‘2 .column.size-1oof2’! Önemli;
}
.Legantdesign .et_pb_column .column.size-1oof2 {
Genişlik:%100! Önemli;
Marj-sağ:%0;
}
}
Şimdi ızgaranız, 980 pikselden daha büyük herhangi bir ekran boyutu için iki sütun olmalıdır. 980px’ten daha az bir ekran için bir sütuna değişecektir. Üstü görüntünün konumunu ve boyutunu değiştirin, üç sütun düzeninin sütununu CSS kullanarak iki sütunun düzenine değiştirdikten sonra, üstün görüntüsünüzü fark etmiş olabilirsiniz. kalite azaldı. Bunun nedeni, üstün görüntüleri sakladığınızda, Divi’nin görüntünün üstün sürümünü üç sütun düzeni (400 x 250) için özel bir boyutta tutmasıdır. Ama şimdi daha geniş bir sütunun var, üstün görüntüler boyutundan daha büyük hale geliyor ve görüntü kalitesini bozuyor. Bu nedenle, üstün görüntü boyutunun boyutlarını 400 x 250 ila 600 x 300 arasında değiştirmeniz gerekir. Bunu yapmak için, function.php dosyanıza tema dosyanıza yeni bir işlev eklemeniz gerekir. Tabii ki her zaman önce bir çocuğun temasını yapmak için en iyi uygulama. Çocuğunuzun teması web sitenizde oluşturulduktan ve etkinleştirildikten sonra, FileZilla gibi yazılımları kullanarak Site Dosyanıza FTP aracılığıyla erişin. Çocuğunuzun tema klasörünü açın ve yeni bir function.php dosyası oluşturun. Dosyanın Persis “Functions.php” olarak adlandırıldığından emin olun.
Dosyaları veya kod işlevini kopyalamanıza gerek yok. Bu, mevcut temanıza daha fazla işlevsellik eklemenin bir yoludur. Çocuğunuzun tema klasöründe yeni bir function.php dosyası oluşturduktan sonra, dosyanın en üstüne aşağıdakileri ekleyin: Function Gallery_Size_H ($ Height) {
‘600’ i döndür;
} add_filter (‘et_pb_blog_image_height’, ‘gallery_size_h’); Function Gallery_Size_W ($ genişlik) {
‘300’;}
add_filter (‘et_pb_blog_image_width’, ‘gallery_size_w’);
Önemli: Koddan önce PHP etiket açma etiketini function.php dosyasının en üstüne eklediğinizden emin olun.
İşte burada. Şimdi üstün görüntünüz net olmalı ve iki sütunun düzeninde görüntülendiğinde genişlememeli veya bozulmamalıdır. Üstün görüntünüzün ideal boyutu (sitenize yüklerken) 1200 x 600 civarında olmalıdır. Varsayılan olarak, üstün görüntünüz blog başlığı ve meta yayınının üzerinde görüntülenir. Blog başlığı ve Meta Post altında üstün resimler görüntülemek için Divi → Tema seçeneğini açın ve diğer kod komut dosyalarını ekleyin. Entegrasyon altında, “Kodu blog kafanıza ekle” etiketli metin kutusuna aşağıdaki kodu ekleyin: >
JQuery (belge) .Ready (function () {
jQuery (“makal.et_pb_post”). Her biri (function () {
JQuery (“> A: İlk çocuk, .et_pb_image_container”, bu). insertAfter (jQuery (“. Meta”, this));
}); });
Şimdi blog sayfanızı kontrol edin. Üstün görüntü artık gönderi ve meta başlığı altında görüntülenir.
Görüntü ve başlık arasında hafif bir üst üste binme vardır, ancak bazı CSS ayarlarıyla düzeltilecektir. Şimdi her şeyi birleştirmek için son CSS’ye dokunmaya hazırız. Bir kez daha, divi → tema seçeneğini açın ve özel CSS kutusuna aşağıdaki CSS’yi girin: #skew: Önce {
İçerik: ”;
-Webkit -Transform: SKEW (0, -7deg);
Dönüşüm: çarpık (0, -7deg);
Sağ: 0;
Üst: -120px;
Yükseklik: 340px;
Arka plan: #ffffff;
}
.ElegantDesign .Entry-title {
Marj-Top: 0px;
Dolgu Alt: 20px;
}
.Legantdesign .et_pb_image_container {
Marj: -20px -40px 40px;
}
.ElegantDesign .et_pb_blog_grid .et_pb_post {marj-taban: 80px;
Genişlik:%100;
Dolgu: 40 piksel;
Arka Plan rengi: #fff;
Border-Radius: 4px;
Kutu Boyutlandırma: Sınır Kutusu;
-Webkit-Box Boyutlandırma: Border-Box;
-Moz-box boyutu: sınır kutusu;
Box-Shadow: 0px 20px 150px #d6dee4;
Sınır: Yok;
Metin-align: merkez;
}
.Legantdesign .et_pb_post .post-meta {
Marj-Alt: 40px;
}
Sadece bu.Bitmişsin!Artık zarif bir tema bloguna benzeyen bir blog sayfasına sahip olmanız gerekiyor – başlık ve meta direğinin altında üstün bir görüntüye sahip iki sütununun üstünde bir başlık ve arama çubuğuna sahip iyi tasarlanmış bir sayfa.
Duyarlı olan nedir?Evet.Duyarlı düzen ve bir sütunun düzeni ile hücresel olarak sırayla olacak ve masaüstü için iki sütunun düzeni.Aşağıdakiler hücresel düzen ekran görüntüleri:
