ev borcu WordPress sitesi
Divi Blog Sayfanızı Zarif Temaların Yeni Tasarımı Gibi Görünecek Şekilde Nasıl Biçimlendirirsiniz?
Bugün size Divi's Blog Module kullanarak blog sayfanızı yeni Elegant Themes blogu gibi nasıl tasarlayacağınızı göstereceğim. Üç büyük tasarım değişikliği şunları içerir: (1) varsayılan üç sütunlu blog ızgara düzenini yalnızca iki sütuna değiştirmek, (2) öne çıkan görseli başlığın ve post metanın altına yerleştirmek ve (3) öne çıkan görseli yeni sütun için boyutlandırmak Genişlik. Bunlar, birkaç satır kod ekleyerek gerçekleştirilir. Bunun dışında Divi Builder ve bazı özel CSS gerisini halleder.
Başlayalım!
Divi Blog Sayfanızı Zarif Temaların Yeni Tasarımı Gibi Görünecek Şekilde Nasıl Biçimlendirirsiniz?
Youtube Kanalımıza Abone Olun
Divi'de Yeni Zarif Temalar Blog Tasarımını Uygulama
Google Yazı Tiplerini Kullanarak Poppins Yazı Tipini İçe Aktarma
Elegant Themes, başlıklar ve gövde metni için Poppins yazı tipini kullanır. Divi şu anda bir seçenek olarak bu yazı tipiyle gelmediğinden, onu Google Fonts'tan ücretsiz olarak kolayca alabilirsiniz. Poppins için zahmete girmek istemiyorsanız, Poppins'e çok benzeyen ve Divi'de yerleşik olan Montserrat yazı tipini kullanabilirsiniz. Ama benim gibi Poppins yazı tipini sevenler için fazladan bir adım atmaya değer.
Önce Google Fonts'ta Poppins yazı tipini bulun. Bulduktan sonra, “Bu Yazı Tipini Seç” yazan düğmeyi tıklayın.
Seçildikten sonra, ekranın altında görünen Yazı Tipi Ailesi ayarları kutusunu açmak için tıklayın.
Açıldıktan sonra, “özelleştir” sekmesine tıklayın ve hem “normal 400” hem de “yarı koyu 600”ü seçtiğinizden emin olun.
“Yerleştir” bölümüne geri tıklayın ve oluşturulan yerleştirme kodunu kopyalayın.
Divi → Tema Seçenekleri'ne gidin. Entegrasyon altında, “Blogunuzun başlığına kod ekleyin” etiketli metin kutusuna aşağıdaki kodu ekleyin:
<link href="https://fonts.googleapis.com/css?family=Poppins:400,600" rel="stylesheet">
Tema Seçenekleri'ndeyken Genel bölümüne gidin ve Özel CSS kutusuna aşağıdaki CSS'yi girin:
body {
font-family: “Poppins”, sans-serif;
}
Şimdi Poppins, varsayılan yazı tipiniz olarak ayarlanmalıdır.
Sayfa Başlığını Tasarlama
Önce düzeninize bir Tam Genişlik Başlık Modülü içeren bir Tam Genişlik Bölümü 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 ekleyin] Alt Başlık Metni: [alt başlık metni ekleyin] Metin ve Logo Yönü: Orta
Gelişmiş Ayarlar altında:
Başlık Yazı Tipi Rengi: #20292f
Başlık Yazı Tipi Boyutu: 35px
Alt Başlık Yazı Tipi Rengi: #71818c
Alt Başlık Yazı Tipi Boyutu: 20px
Kaydet çık
Tam Genişlik Bölümü Modül Ayarlarını düzenlemek için tıklayın.
Arka plan renginin beyaz (#ffffff) olarak ayarlandığından emin olun.
Kaydet çık
Şimdi başlığınız yerinde.
Arama Çubuğunu Ekleme
Arama çubuğunu eklemek için, tam genişlikte bir sütuna sahip standart bir bölüm ekleyin ve Bölüm Modülü Ayarlarını düzenleyin. Genel Ayarlar altında aşağıdakileri değiştirin:
Özel Dolgu: Üst 0 piksel ve Alt 0 piksel
Özel CSS altında, Ana Öğe metin kutusuna aşağıdaki CSS'yi ekleyin:
z-index: 10;
Kaydet çık
Şimdi Satır Modülü Ayarlarına tıklayın. Genel Ayarlar altında aşağıdakileri değiştirin:
Özel Dolgu: Üst 0 piksel ve Alt 0 piksel
Gelişmiş Tasarım Ayarları altında aşağıdakileri değiştirin:
Özel Kenar Boşluğu: Üst 0 piksel ve Alt 0 piksel
Kaydet çık
Sütununuza bir Arama Modülü ekleyin.
Şimdi Arama Modülü Ayarlarını düzenleyin. Genel Ayarlar altında aşağıdakileri değiştirin:
Düğmeyi Gizle: EVET
Yer Tutucu Metni: “Blogumuzu arayın…”
Gelişmiş Modül Ayarları altında aşağıdakileri değiştirin:
Maksimum Genişlik: 300 piksel
Düğme ve Kenar Rengi: #eeeeee
Giriş Alanı Arka Plan Rengi: #f7f9fb
Yer Tutucu Rengi: #bbbbbb
Girdi Yazı Tipi Boyutu: 16px
Giriş Metni Rengi: #71818c
Özel Kenar Boşluğu: Üst 0 piksel, Alt 0 piksel
Özel Dolgu: Üst 20 piksel, Alt 20 piksel
Özel CSS altında, Ana Öğe metin kutusuna aşağıdaki CSS'yi ekleyin:
margin: 0 auto;
Giriş Alanı kutusunun içine aşağıdaki CSS'yi ekleyin:
border-radius: 60px;
Kaydet çık
Bu kadar. Arama çubuğunun şu anda altbilgiye sarıldığına dikkat edin. Sorun yok.
Blog Izgarasını Tasarlama
Başka bir Standart Bölüm ekleyin ve tam genişlikte bir sütun ekleyin.
Bölüm Ayarlarını düzenlemek için tıklayın ve Genel Ayarlar altında aşağıdakileri değiştirin:
Arka Plan Rengi: #f7f9fb
Özel CSS altında aşağıdakileri ekleyin:
CSS kimliği: çarpık
CSS Sınıfı: zarif tasarım
Not: "Skew" ID, başlık beyaz arka planını ve açık gri içerik arka planını ayıran o çok ince diyagonal (veya eğik) çizgiyi oluşturmak için kullanılacaktır. Yapacağımız tüm özel CSS değişikliklerini hedeflemek için “elegantdesign” sınıfı kullanılacaktır.
Kaydet çık
Ardından Blog Modülünü sütununuza ekleyin.
Blog Modül Ayarlarını düzenleyin. Genel Ayarlar altında aşağıdakileri değiştirin:
Düzen: Izgara
Devamını Oku düğmesi: AÇIK
Gelişmiş Ayarlar altında aşağıdakileri değiştirin:
Başlık Yazı Tipi Boyutu: 26px
Meta Yazı Tipi Boyutu: 14
Meta Metin Rengi: #71818c
Gövde Yazı Tipi Boyutu: 16px
Kaydet çık
İşte blog sayfanızın şimdi nasıl görünmesi gerektiği:
Hâlâ yapmamız gereken bazı büyük değişiklikler var ama şu ana kadar çok iyi.
Daha Fazla Metni Değiştirin ve Düğmenin Stilini Oluşturun
Devamını Oku metnini “Tüm Gönderiyi Görüntüle” olarak değiştirmek için Divi → Tema Seçenekleri'ne gidin . Entegrasyon sekmesi altında, "Blogunuzun başlığına kod ekleyin" metin kutusuna aşağıdaki komut dosyasını girin:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".more-link").text("View Full Post");
});
</script>
Tema Seçeneklerindeyken Genel sekmesine gidin ve Özel CSS metin kutusuna aşağıdaki CSS'yi girin:
.elegantdesign a.more-link {
font-size: 14px;
color: #71818c !important;
font-weight: 600;
text-transform: uppercase;
margin-top: 10px;
float: none;
display: inline-block;
padding: 8px 16px;
border-radius: 60px;
background-color: #f7f9fb;
border: 2px solid #e9eff5;
}
.elegantdesign a.more-link:hover {
color: #20292f;
}
Artık blog kılavuzunuz yeni düğmelere sahip olmalıdır.
İki Sütunlu Izgara Düzenini Uygulama
Varsayılan olarak, blog ızgarasının üç sütunlu bir ızgara düzeni vardır. Bunu iki sütunlu bir düzene değiştirmek için Divi → Tema Seçenekleri'ne gidin ve Özel CSS kutusuna aşağıdaki CSS'yi ekleyin:
@media only screen and ( min-width: 980px ) {
.elegantdesign .et_pb_column .et_pb_blog_grid[data-columns]::before { content: '2 .column.size-1of2' !important;
}
.elegantdesign .et_pb_column .column.size-1of2 {
width:47% !important;
margin-right:6%;
}}
@media only screen and ( max-width: 980px ) {
.elegantdesign .et_pb_column .et_pb_blog_grid[data-columns]::before { content: '2 .column.size-1of2' !important;
}
.elegantdesign .et_pb_column .column.size-1of2 {
width:100% !important;
margin-right:0%;
}
}
Şimdi ızgaranız, 980 pikselden daha büyük herhangi bir ekran boyutu için iki sütun olmalıdır. 980 pikselden küçük ekranlar için ızgara tek bir sütuna dönüşecektir.
Öne Çıkan Resmin Konumunu ve Boyutunu Değiştirme
Artık sütunları CSS kullanarak üç sütunlu bir düzenden iki sütunlu bir düzene değiştirdiğinize göre, öne çıkan resimlerinizin kalitesinin düştüğünü fark etmiş olabilirsiniz. Bunun nedeni, öne çıkan bir görüntüyü kaydettiğinizde Divi'nin bu öne çıkan görüntünün bir sürümünü üç sütunlu bir düzene (400 x 250) özgü bir boyutta kaydetmesidir. Ancak artık daha geniş bir sütununuz olduğu için, öne çıkan görüntü boyutunun ötesine geçiyor ve görüntünün kalitesini bozuyor. Bu nedenle, öne çıkan görüntünün boyut boyutlarını 400 x 250'den 600 x 300'e değiştirmeniz gerekir.
Bunu yapmak için tema dosyalarınızdaki function.php dosyanıza yeni bir işlev eklemeniz gerekir. Elbette önce bir çocuk teması oluşturmak her zaman en iyi uygulamadır. Alt temanız web sitenizde oluşturulup etkinleştirildikten sonra, Filezilla gibi bir yazılım kullanarak site dosyalarınıza FTP üzerinden erişin. Alt tema klasörünüze gidin ve yeni bir functions.php dosyası oluşturun. Dosyanın tam olarak "functions.php" olarak adlandırıldığından emin olun.
Yeni function.php dosyanız ana tema dosyasını geçersiz kılmayacağından, ana temanızın function.php dosyasını veya kodunu kopyalamanıza gerek yoktur. Mevcut temanıza daha fazla işlevsellik eklemenin bir yoludur.
Alt tema klasörünüzde yeni bir functions.php dosyası oluşturduğunuzda, dosyanın en üstüne aşağıdakini ekleyin:
function gallery_size_h($height) {
return '600';
}
add_filter( 'et_pb_blog_image_height', 'gallery_size_h' );
function gallery_size_w($width) {
return '300';
}
add_filter( 'et_pb_blog_image_width', 'gallery_size_w' );
Önemli: Açılış etiketi php etiketini, function.php dosyasının en üstüne koddan önce eklediğinizden emin olun.
Bu kadar. Artık öne çıkan resimleriniz net olmalı ve iki sütunlu ızgara düzeninde görüntülendiğinde gerilmemeli veya bozulmamalıdır.
Öne çıkan görsellerinizin ideal boyutu (sitenize yüklerken) 1200 x 600 civarında olmalıdır.
Varsayılan olarak, öne çıkan görseliniz blog başlığının ve meta yayının üzerinde görüntülenir. Öne çıkan görseli blog başlığının altında görüntülemek ve meta göndermek için Divi → Tema Seçenekleri'ne gidin ve başka bir kod komut dosyası ekleyin. Entegrasyon altında, “Blogunuzun başlığına kod ekleyin” etiketli metin kutusuna aşağıdaki kodu ekleyin:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("article.et_pb_post").each(function(){
jQuery(">a:first-child, .et_pb_image_container", this).insertAfter(jQuery(".post-meta", this));
});
});
</script>
Şimdi blog sayfanıza bakın. Öne çıkan görsel artık yazı başlığının ve metanın altında görüntüleniyor.
Resim ve başlık biraz örtüşüyor ancak bu, bazı CSS ayarlamalarıyla düzeltilecek.
Artık hepsini bir araya getirmek için CSS'nin son dokunuşlarına hazırız. Bir kez daha Divi → Tema Seçenekleri'ne gidin ve Özel CSS kutusuna aşağıdaki CSS'yi girin:
#skew:before {
content: '';
-webkit-transform: skew(0, -7deg);
transform: skew(0, -7deg);
position: absolute;
left: 0;
right: 0;
top: -120px;
height: 340px;
background: #ffffff;
}
.elegantdesign .entry-title {
margin-top: 0px;
padding-bottom: 20px;
}
.elegantdesign .et_pb_image_container {
margin: -20px -40px 40px;
}
.elegantdesign .et_pb_blog_grid .et_pb_post {
margin-bottom: 80px;
width: 100%;
padding: 40px;
background-color: #fff;
border-radius: 4px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-shadow: 0px 20px 150px #d6dee4;
border: none;
text-align:center;
}
.elegantdesign .et_pb_post .post-meta {
margin-bottom: 40px;
}
Bu kadar. Sen bittin! Artık, Şık Temalar Blogu gibi görünen bir blog sayfanız olmalıdır – iyi tasarlanmış bir sayfa, ortalanmış bir başlık ve iki sütunlu bir ızgara düzeninin üzerinde arama çubuğu, başlığın altında öne çıkan görseller ve meta.
Duyarlı mı?
Evet. Düzen duyarlıdır ve mobil için tek sütunlu bir düzen ile masaüstü için iki sütunlu bir düzen arasında geçiş yapar. İşte mobil düzenin bir ekran görüntüsü:
Toplama
Elegant Themes Blog sayfasında bu tasarımda eksik olan birkaç unsur var. Gezinme çubuğunun ve altbilginin tasarımını ele almadım. Arama çubuğundaki özel arama düğmesi simgesini dışarıda bıraktım. Ve varsayılan sayfalandırmayı tuttum. Elegant Themes'in kullandığı sayfalandırmanın aynısını istiyorsanız, WP-PageNavi gibi bir eklenti yüklemeniz ve ayarları tasarıma uyacak şekilde özelleştirmeniz gerekir. İşte başlamanız için harika bir makale. Elegant Themes Blog sayfasının altındaki o harika animasyonlu CTA'ya gelince, bunu gelecekteki bir gönderide ele alabilirim.
Bu arada, umarım bu eğitimden faydalanır ve bu yeni tasarımı bir sonraki projenizde uygularsınız.
Yorumlarda sizden haber bekliyorum.
Eğlence!
Yarın: Divi'nin Tek Yazısını Yeni Zarif Temalarla Eşleşecek Şekilde Nasıl Stillendirirsiniz Yazı Tasarımı
Bir sonraki makalemde, yeni Elegant Themes blog yazısı tasarımından sonra tek yazı sayfanızı nasıl şekillendireceğinizi göstermekten heyecan duyuyorum. Sonra görüşürüz!
Bu arada, bugünün öğreticisiyle ilgili herhangi bir sorunuz varsa, lütfen bunları aşağıdaki yorumlarda bırakmaktan çekinmeyin.