Divi'nin Blog Gönderi Formatlarına Özel Şablonlar ve Tasarım Nasıl Eklenir (Bölüm 3/3)
Yayınlanan: 2017-05-04Divi'nin Blog Yazısı Formatlarına Özel Stiller Ekleme serimizin son günü olan 3. Güne hoş geldiniz. Varsayılan olarak Divi, altı blog yazısı biçimiyle gelir: Standart, Video, Ses, Alıntı, Galeri ve Bağlantı. Bu seride size bunları php ve css ile nasıl özelleştireceğinizi öğretiyoruz.
Bugün Divi'nin blog yazısı formatlarına özel şablonlar ve stiller ekleme serimizin son günü. Serinin bu son günü tasarıma adanmıştır. Single.php'miz özelleştirilmiş ve alt temamız aktifken, blog yazısı formatlarına stil eklemeye hazırız.
Her birine benzersiz tasarım dokunuşları eklerken, altı gönderi biçiminin tamamında size yol göstereceğim. Bu öğreticinin sonunda, Divi'nin birlikte geldiği varsayılan blog yazısı biçimlerine altı harika görünümlü alternatifiniz olacak.
Ayrıca, farklı yazı biçimi özellikli öğeleri görüntüleyen oldukça benzersiz bir blog sayfanız olacak. Örneğin, bağlantı biçimi, öne çıkan resim küçük resminin yerine özel bir bağlantı kutusu görüntüler. Galeri formatı gönderisi, öne çıkan küçük resim yerine galeri resimlerinizin bir resim kaydırıcısını görüntüler. Ve bunun gibi.
Bugünün öğreticisinden sonra blog sayfanızın nasıl görüneceğine dair bir bakış aşağıdadır (aşağıdaki gif'te ızgara düzenine sahip Divi Blog Modülü kullanıyorum).
Başlayalım.
Tema Özelleştiricide Genel Tasarım Ayarlarını Ayarlama
Öncelikle tema özelleştiriciyi kullanarak birkaç genel stil değişikliği yapmamız gerekiyor. WordPress Panonuzdan Divi → Tema Özelleştirici → Genel Ayarlar → Düzen Ayarları'na gidin ve aşağıdakileri değiştirin:
Web Sitesi Oluk Genişliği: 2
Özel Kenar Çubuğu Genişliğini Kullan seçeneğini işaretleyin
Kenar Çubuğu Genişliği: 30
Ayrıca Tema Özelleştirici altında, Renk Şemaları'na gidin ve Turuncu'yu seçin.
Şimdi standart gönderinizin şu ana kadar nasıl göründüğüne bir göz atalım:
Anlayabileceğiniz gibi, hala biraz stile ihtiyacı var ama her şey doğru yerde. Sayfanın tüm genişliğini kapsayan bir kahraman bölümünüz var. Henüz öne çıkan bir resminiz yok, bu nedenle arka plan yalnızca daha önce single.php dosyanıza eklediğiniz degradeyi gösteriyor. Ayrıca yazı başlığı ve meta, kahraman bölümünün içindedir. Şimdi tasarım öğelerinin geri kalanını ekleme zamanı.
Tüm Gönderi Formatları için Kahraman Bölümünü Şekillendirme
Gönderi biçimlerinizin her biri aynı ana bölüm ve kenar çubuğu tasarımını paylaşacağından, önce bu özel CSS'yi ekleyebilirsiniz. Tema Özelleştirici'ye geri dönün, alttaki Ek CSS'ye tıklayın ve aşağıdaki özel CSS'yi ekleyin:
.hero-section {
padding-top: 120px;
padding-bottom: 120px;
background-repeat: no-repeat;
background-size: cover;
position:relative;
max-height: 450px;
background-color: #333;
}
.single-post #main-content #left-area {padding-top: 0px;}
/* ---- Sidebar Settings ---- */
.single #sidebar {background: #efefef; padding-top: 20px; padding-right: 20px; padding-left: 20px; padding-bottom: 20px;}
/* ---- Standard Post Title & Post Meta ---- */
.single h1.entry-title,.attachment h1.entry-title, .single p.post-meta {
width: 100%;
text-align: center;
padding-left: 8px;
padding-right: 8px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}
@media only screen and (min-width: 980px) {
/*** Set title font size for desktop ***/
.single h1.entry-title {
font-size: 65px !important;
}
}
Şimdi standart bir gönderinin nasıl göründüğüne bakın.
Kahraman bölümü ve kenar çubuğu stili yerindeyken, bireysel gönderi biçimlerini biçimlendirmeye hazırsınız.
Standart Gönderi Formatını Şekillendirme
Standart gönderi biçimi, tüm blog gönderileriniz için varsayılan biçimdir. Gönderinizi düzenlerken standart gönderi biçimini seçebilirsiniz.
Bu standart format için yapacağımız tek şey öne çıkan görseli eklemek. Bu öne çıkan resim ekranın tüm genişliğini genişleteceğinden, 2000 x 600 boyutunda bir resim kullanmanızı öneririm. Unsplash.com'dan resimler kullanıyorum.
Öne çıkan görselinizi ekledikten sonra standart gönderinin nasıl göründüğüne bakın.
Video Gönderi Formatını Şekillendirme
Video Gönderi Biçimini biçimlendirmek için gönderiniz için Video biçimini seçtiğinizden emin olun.
Ardından, içeriğinize bir videonun URL'sini veya yerleştirmesini ekleyin. Video formatı, ilk video url'sini, video etiketini alır veya gömerek gönderi içeriğinizin en üstünde görüntüler. Bu video aynı zamanda blog sayfanızdaki öne çıkan görselin yerini alacak.
Bu örnek için sadece bir youtube video url'si kullanıyorum.
Gönderiye 2000 x 600 özellikli görselinizi ekleyin.
Ardından, videoya beyaz bir kenarlık vermek ve onu kahraman bölümüyle örtüşmesi ve biraz öne çıkması için hafifçe yükseltmek için öne çıkan videoya ek stiller ekleyeceğiz.
Tema Özelleştirici → Ek CSS'ye gidin ve aşağıdaki özel CSS'yi ekleyin:
/* ---- Format the Position of the Video Wrapper ---- */
@media only screen and (min-width: 980px) {
/*** elevate the video to overlap the hero section ***/
.single-post.single-format-video .et_main_video_container {margin-top: -120px; background: #fff; outline: 10px solid #ffffff !important; z-index: 100; margin-bottom: -100px;}
}
Şimdi yeni Video Formatı gönderinize bakın.
Alternatif olarak, başka bir harika tasarım seçeneği için bu gönderiyi tam genişlikte yapabilirsiniz. Gönderinizi düzenlemeye gidin ve sayfanın sağ üst köşesindeki Divi Gönderi Ayarlarında tam genişlikte bir sayfa düzeni seçin.
Şimdi tam genişlikte Video Formatı gönderisine göz atın:
Sesli Gönderi Formatını Şekillendirme
Sesli Gönderi Biçimi için, gönderiniz için Ses Biçimini seçtiğinizden emin olun.
2000 x 600 özellikli resminizi ekleyin.
Ardından, ses dosyanızı yayınınıza ekleyin. Bu bir .mp3, .m4a, .ogg veya .wav dosyası olabilir. Ses dosyanızı medya kitaplığınıza yükleyebilir ve gönderinize üç farklı şekilde ekleyebilirsiniz (medya oynatıcıyı göm, medya dosyasına bağlantı veya ek sayfasına bağlantı).
Bu üç seçenekten herhangi biri işe yarayacaktır. Ancak bu örnek için ses dosyasına basit bir url ekleyeceğim. WordPress, bu ses url'sini gönderinin üst kısmındaki bir medya oynatıcısına dönüştürecektir.
Şimdi Ses Formatı gönderisine bir göz atalım.
Bu kötü değil, ama daha iyi olabilirdi. Turuncu medya oynatıcının altında görünen yinelenen medya oynatıcıyı gizleyelim ve turuncu medya oynatıcımıza bir arka plan görüntüsü ekleyelim.
Tema Özelleştirici → Ek CSS'ye gidin ve aşağıdaki özel CSS'yi ekleyin:
/* ----- Add Background Image to the Audio Player & Change size of the player ----- */
body.single .et_audio_content, .blog .et_audio_content {
margin-bottom: 0px !important;
height: 300px !important;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
background-repeat: no-repeat;
background-size: cover;
}
/* ---- Hide the Duplicate Audio Player ------ */
div#mep_1 {display: none;}
Ardından medya galerinize bir resim bulun ve yükleyin (yaklaşık 700 x 300 olmalıdır). Ardından url'yi kopyalayın ve yukarıdaki CSS'de "GÖRÜNTÜ URL'sini BURAYA GİRİN" yazan yere yapıştırın.
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Şimdi yeni Ses Formatı gönderinize bakın.
Alıntı Gönderi Formatını Şekillendirme
Alıntı Gönderi Formatı için, gönderiniz için Alıntı Formatını seçtiğinizden emin olun.
Ardından gönderiye 2000 x 600 özellikli bir resim ekleyin.
Teklif formatı, özel bir teklif ekranı oluşturmak için blok alıntı kısa kodunu kullanır. Bu nedenle, özel alıntının görüntülenmesi için içeriğinize bir blok alıntı ekleyin.
Şimdi gönderinize bakın.
Sağ üstte bir arka plan görüntüsü ve büyük alıntılar vermek için öne çıkan alıntı kutusunu küçük bir CSS ile özelleştirelim.
Tema Özelleştirici → Ek CSS'ye gidin ve aşağıdaki özel CSS'yi ekleyin:
/* ---- Add Background Image to the Quote Box ---- */
.et_quote_content {
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE')!important;
background-repeat: no-repeat;
background-size: cover;
}
/* ---- Add the Quotation Symbol to the Quote Box ---- */
.et_quote_content blockquote p::before {
font-family: Cardo;
position: absolute;
top: 16px;
left: 5%;
margin-left: -16px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 70px;
font-color: #fff;
content: "\201C" !important;
}
/* ---- Text Format Inside of quote ---- */
@media only screen and (min-width: 980px) {
.single-post.single-format-quote blockquote p {
font-size: 30px !important;
font-weight: 600 !important;
}
}
Medya galerinize bir resim bulun ve yükleyin (yaklaşık 700 x 300 olmalıdır). Ardından url'yi kopyalayın ve yukarıdaki CSS'de "GÖRÜNTÜ URL'sini BURAYA GİRİN" yazan yere yapıştırın.
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Şimdi nihai sonucunuzu kontrol edin:
Galeri Gönderi Formatını Şekillendirme
Galeri Gönderi Biçimi için, gönderiniz için Galeri Biçimini seçtiğinizden emin olun.
Ardından, 2000 x 600 özellikli resminizi eklediğinizden emin olun.
Galeri Gönderi Biçimi, medya galerisindeki gönderi içeriğiniz içinde bir galeri oluşturmanıza olanak tanır.
Gönderiniz için bir galeri oluşturmak için önce medya galerinize en az 6 resim yükleyin. Resmin boyutu değişebilir ancak galeri, resimleri tam boyuta getiren bir ışık kutusu efektine sahip olduğundan, resimleri yaklaşık 1200 x 800 yapabilirsiniz.
Şimdi medya galerisinde resimlerinizi seçin, Galeri Oluştur'u seçin ve "Yeni galeri oluştur" düğmesini tıklayın.
Artık içeriğinizde bir galeri kısa kodunuz olmalıdır.
Bu galeri, gönderinizde üç sütun genişliğinde mozaik bir düzende gösterilecektir. Galeri ayrıca blog sayfanızdaki öne çıkan resmi galeri resimlerinizin bir kaydırıcısıyla değiştirecektir.
Şimdi git yazını kontrol et.
Kahraman bölümüyle örtüşmek ve her bir görüntünün etrafındaki kenar boşluklarını değiştirmek için biraz yükseltmek için galeriye biraz CSS ekleyelim.
Tema Özelleştirici → Ek CSS'ye gidin ve aşağıdaki özel CSS'yi ekleyin:
/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
@media only screen and (min-width: 980px) {
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
.et_post_gallery {
z-index: 100;
position: relative;
border-top: 8px solid #fff !important;
border-left: 8px solid #fff !important;
background: #fff !important;
}
/* ---- Set Background Color, Margins & Padding for the Gallery Image ---- */
.et_gallery_item { margin: 0 0 0 0 !important;}
.et_gallery_item {
width: 33.3%;
margin: 0 0% 0% 0 !important;
padding-right: 8px !important;
background: #fff !important;
padding-bottom: 8px !important;
}
}
Şimdi nihai sonucu kontrol edin.
Bağlantı Gönderi Formatını Şekillendirme
Bağlantı Gönderi Biçimi için, gönderiniz için Bağlantı Biçimini seçtiğinizden emin olun.
Ardından, yayınınıza 2000 x 600 özellikli görselinizi ekleyin.
Bağlantı Gönderi Biçimi, gönderideki ilk bağlantıyı alır ve onu içeriğin en üstünde bir kutu içinde görüntüler. Bu özel bağlantı ekranı, blog sayfanızdaki bu gönderi için öne çıkan küçük resmin yerini alır.
Devam edin ve gönderinize bir bağlantı ekleyin ve gönderi tasarımına göz atın.
Şimdi özel bağlantı kutusuna bir arka plan resmi ve bağlantı url'sinin soluna bir simge ekleyerek tasarımı biraz geliştirelim.
Tema Özelleştirici → Ek CSS'ye gidin ve aşağıdaki özel CSS'yi ekleyin:
/* ---- Add thick border to the left side and Lower the link box ---- */
.et_link_content {
border-bottom: 8px solid #ddd;
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(ENTER IMAGE URL HERE);
background-size: cover;
background-color:#edb059;
border-radius: 25px;
}
/* ---- Font Settings within the Link box ---- */
.et_link_content a.et_link_main_url { font-size: 21px; font-weight: 600; color: #fff !important;}
/* ---- Link Symbol on the right side ---- */
.et_link_content::before {
font-family: "ETmodules";
position: absolute;
top: 38%;
left: 5%;
margin-right: -26px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 48px;
color: #fff;
content: "\e02c";
}
/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
@media only screen and (min-width: 980px) {
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
Ardından medya galerinize bir resim bulun ve yükleyin (yaklaşık 700 x 300 olmalıdır). Ardından url'yi kopyalayın ve az önce girdiğiniz CSS pasajına "GÖRÜNTÜ URL'sini BURAYA GİRİN" yazan yere yapıştırın.
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Şimdi gönderinin nasıl göründüğüne bakın.
Bu kadar!
Artık tüm yazı biçimlerimizi tasarladığımıza göre, blog sayfasında oluşturduğu harika düzeni kontrol etme zamanı. Tüm farklı gönderi biçimi özellikli öğelerin nasıl görüntülendiğini görebilirsiniz.
Not: Blogunuzu varsayılan düzenleyiciyi veya Divi Builder'ı kullanarak görüntüleyebilirsiniz ve tasarım çalışmaya devam edecektir.
Duyarlı mı?
Tüm gönderi biçimleri tamamen duyarlıdır ve tüm cihazlarda iyi çalışır. Ekran boyutunu küçülttüğümde Galeri Biçimi gönderisinin nasıl göründüğüne bir örnek:
Son düşünceler
Tebrikler! Hepiniz bittiniz. Blog gönderisi biçimlerini özelleştirmeyle ilgili bu 3 bölümlük diziyi umarım beğenmişsinizdir. Bir şey olursa, umarım bir sonraki projenizde yanınızda götürmek için değerli bir şey öğrenmişsinizdir. Artık öğreticiyi tamamladığınıza göre, blog gönderi biçimleriniz için kendi tasarım öğelerinizi denemekten çekinmeyin.
Lütfen yorumlarınızı aşağıya gönderin. Cevabınızı sabırsızlıkla bekliyorum.