Dinamik Bir Gönderi Düzeni Tasarlamak için Divi'nin Dinamik İçerik Özelliğini Kullanma

Divi'nin yeni Dinamik İçerik özelliği, bize blog gönderileri (ve çok daha fazlası) için dinamik düzenler oluşturma yeteneği verir. Ve bunu yapmayı düşünebileceğiniz iyi nedenler var. Bunun bir nedeni tasarımdır. Görsel oluşturucuyu kullanarak Divi ile bazı şaşırtıcı gönderi düzenleri tasarlayabilirsiniz, özellikle de başlangıç ​​noktası olarak önceden hazırlanmış düzenleri kullandığınızda. Diğer bir sebep ise kolaylık. Gönderi düzeni, tüm dinamik içerik öğeleri (kategoriler, öne çıkan resimler, gönderi etiketleri, özel alanlar vb.) yerinde olacak şekilde tasarlandıktan sonra, blog gönderilerini oluşturma ve güncelleme süreci büyük ölçüde basitleştirilir. Gerçek gönderi içeriği dışında, diğer tüm gönderi verileri, görsel oluşturucuyu dağıtmak zorunda kalmadan güncellenebilir.

Bu derste size Divi'de nasıl dinamik bir yazı düzeni oluşturacağınızı göstereceğim. Hazır bir mizanpajla başlayarak, mizanpaj boyunca dinamik içerik ekleme ve ardından bu içeriği eşleşecek şekilde tasarlama sürecinde size yol göstereceğim. Özel alanları dinamik içerik olarak kullanmanın basit bir yolunu bile tanıtacağım.

Başlayalım.

Gizlice Bakış

Başlamak için Gerekenler

Bu eğitim için aşağıdakilere ihtiyacınız olacak:

• Divi Teması
• Kişisel Antrenör Düzen Paketi. Bu düzen paketine Divi Builder'dan erişilebilir. Gönderi düzenimizin tasarımını başlatmak için Kişisel Antrenör Hizmeti Sayfa Düzenini kullanacağız.

Ayrıca, özel yazı tipi işlevini kullanarak öne çıkan bir egzersiz bölümü oluşturmak için özel alanlardan nasıl yararlanacağınızı da göstereceğim. Özel alanlar WordPress'te yerleşiktir ve ek eklentiler veya herhangi bir şey gerektirmez. Yani ihtiyacınız olan şeye zaten sahipsiniz.

Bölüm 1: Gönderiye Hazır Düzeni Ekleme

İşleri başlatmak için devam edin ve yeni bir gönderi oluşturun (sayfa değil), gönderinize bir başlık verin ve ardından Divi Builder'ı Kullan düğmesini tıklayın. Görsel oluşturucuyu henüz dağıtmayın çünkü ilk önce varsayılan WordPress düzenleyici ekranından gönderi ayarlarımızı özelleştirmemiz gerekiyor.

Resimlerimizi düzenden çekmek için önceden hazırlanmış düzenimizi eklemek istediğimizden (öne çıkan resmimiz için buna ihtiyacımız var). Divi Builder menüsünde bulunan Yük Düzeni düğmesini tıklayın.

Kitaplıktan Yükle açılır penceresinden Kişisel Antrenör Hizmeti Sayfa Düzenini seçin ve “Bu Düzeni Kullan” düğmesini tıklayarak gönderinize dağıtın.

Ardından ayarlarınızı kaydetmek için gönderinizi yayınlayın.

Bölüm 2: Divi Sayfa Ayarlarını Güncelleme, Meta Verileri Gönderme ve Öne Çıkan Görsel

Divi Sayfa Ayarları

Yeni düzenimizin tasarıma uyması için Divi sayfa ayarlarını güncellememiz önemlidir. Bunun yerine yazı başlığı modülünü kullanacağımız için varsayılan yazı başlığı ekranını da gizlememiz gerekiyor.

Sayfanın sağ üst köşesindeki Divi Sayfa Ayarları kutusunu bulun ve aşağıdakileri güncelleyin:

Sayfa Düzeni: Tam Genişlik
Gönderi Başlığını Göster: Gizle

Divi Sayfa Ayarlarını görmüyorsanız, muhtemelen Divi Builder'ı etkinleştirmemişsinizdir, bu yüzden önce bunu yaptığınızdan emin olun.

Kategori Ekle

Kategoriler kutusunun altına “Güç Antrenmanı” adlı yeni bir kategori ekleyin ve seçilen tek kategori olduğundan emin olun.

Etiket ekle

Etiketler kutusuna şu üç etiketi ekleyin: Hız, Antrenman ve Antrenmanlar.

Özellikli resim

Ardından, aşağıdaki ekran görüntüsünde gösterildiği gibi, mizanpajın başlığında kullanılan arka plan görüntüsüyle eşleşen öne çıkan bir görüntü ekleyin.

Bölüm 3: Dinamik Antrenman İçeriği için Özel Alanlar Ekleme

Özel Alanlar WordPress'te yerleşiktir. Gönderi yazarlarının, kategoriler, gönderi yazarı, gönderi tarihi vb. gibi varsayılan meta verilere ek olarak gönderiye ekstra bilgiler (meta veri adı verilir) eklemesine izin verir. Temel düzeyde, hava durumunu görüntülemek için özel alanlar kullanılabilir veya bir yazı yazarken yazarın ruh hali. Ancak web siteniz için dinamik içerik oluşturmak üzere özel alanları kullanmanın birçok farklı yolu vardır. Web sitenize nasıl özel alanlar ekleyeceğiniz hakkında daha fazlasını okumaktan çekinmeyin. Ancak bu kullanım durumu için, kendiniz için birkaç tane oluşturarak özel alanların temel kavramını kavrayacağınızı düşünüyorum.

Bu örnekte, gönderinize dinamik içerik eklemek için kullanılabilecek birkaç özel alanın nasıl ekleneceğini göstereceğim. Bu örneğin dinamik içeriği, öne çıkan bir antrenmandır. Özel alanlar yerleştirildikten sonra, gönderi yazarının tek yapması gereken özel alan değerlerini doldurmaktır ve içerik, Görsel Oluşturucu'yu yüklemek zorunda kalmadan gönderiye (dinamik olarak) güncellenecektir.

Bunu yapmak için gönderinin en altına gidin ve Özel Alanlar kutusunu bulun. Herhangi bir nedenle görüntülenmiyorsa, sayfanın üst kısmındaki ekran seçeneklerinden seçtiğinizden emin olun.

Ardından, yeni bir özel alan eklemek için Özel Alanlar kutusu açılır menüsünü (daraltılmışsa) tıklayın ve aşağıdakileri girin:

isim: antrenman başlığı
Değer: Öne Çıkan Antrenman

Ardından Özel Alan Ekle Düğmesine tıklayın.

Ad, Divi'deki özel alanı nasıl tanımladığınızdır. Değer, Divi'nin dinamik içerik özelliği kullanılarak sayfaya dinamik olarak eklenecek içeriktir (bundan sonra daha fazlası).

Aşağıdaki özel alanları web sitenize eklemek için bu işleme devam edin.

isim: ısınma
Değer: 800m koşu

isim: süre
Değer: 30dk

isim: ağırlık kaldırma
Değer:

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

isim: soğumak
Değer: 400m koşu

Not: Bu özel alanlar Divi Temasına eklenecek ve gelecekte oluşturacağınız tüm yeni gönderilerde mevcut olacak. Başka bir deyişle, bu tek gönderi ile sınırlı değildir.

Gönderinizi güncellemeyi unutmayın!

Bölüm 4: Görsel Oluşturucuyu Kullanarak Posta Düzenine Dinamik İçerik Ekleme

Artık gönderi ayarlarımıza ve meta verilerimize sahip olduğumuza göre, gönderilerimize dinamik içerik eklemeye başlamanın zamanı geldi. Bunu yapmak için Visual Builder'ı dağıtın.

Bu gelişmiş düzen tasarımını bulmayı ve düzenlemeyi biraz daha kolaylaştırmak için, ayarlar menüsünü açın ve Oluşturucu Varsayılan Etkileşim Modunu Tıklama Moduna ayarlayın.

Başlık bölümünde düğme modülünü silin (buna ihtiyacımız yok).

Arka Plan Resmini Öne Çıkan Resim Dinamik İçeriğiyle Değiştirme

İlk dinamik içeriğimiz için, üst başlık bölümü satırımızın 1. sütununda kullanılan arka plan resmini, gönderi için kullanılan öne çıkan resimle değiştireceğiz. Bunu yapmak için, satır ayarlarını açın ve sütun 1 için arka plan ayarlarını bulun ve arka plan görüntüsü sekmesine tıklayın. Ardından, şu anda orada olan resmi silin ve ardından arka plan resmi önizleme kutusunun üzerine gelin. Kutunun sağ üst köşesinde dinamik içerik simgesini göreceksiniz. Dinamik içerik seçeneklerini açmak için üzerine tıklayın. Ardından listeden Öne Çıkan Görsel dinamik içerik seçeneğini seçin.

Aynı görüntüyü kullandığımız için düzeniniz tamamen aynı görünecek. Artık tek fark, arka plan resminin, gönderinin öne çıkan resmi olarak ayarlanan resimden çekilmesidir. Dinamik içeriğin güzelliği budur!

Devam edelim.

Gönderi Başlığı Modülü ile Gönderi Başlığı Ekleme

Şu anda sayfanın başlığını tutan metin modülünün altına bir Yazı Başlığı modülü ekleyin. Dinamik içerik kullanan bir modüle gönderi başlığı ekleme seçeneği de vardır, ancak Gönderi Başlığı Modülü zaten dinamik içerik gibi çalıştığından ve SEO için h1 başlık etiketini koruduğundan, onu özel gönderi düzeniniz için kullanmak mükemmel hale getirir .

Ardından başlık modülü ayarlarını aşağıdaki gibi güncelleyin:

Metayı Göster: HAYIR
Öne Çıkan Resmi Göster: HAYIR

Şimdi yukarıdaki metin modülüne gidin ve h2 sekmesine sağ tıklayıp bu listeden seçeneği seçerek h2 başlık stillerini kopyalayın.

Ardından, modüle sağ tıklayarak ve listeden seçeneği seçerek h2 başlık stillerini yazı başlığı modülüne yapıştırın.

Bundan sonra, yukarıdaki metin modülüne geri dönün ve boşluk stillerini kopyalayın ve bunları yazı başlığı modülüne yapıştırın. Ardından, beyaz rengi elde etmek için yazı başlığı metin rengini açık olarak değiştirin.

Artık gönderi başlığınız, orijinal düzen başlığının tasarımıyla eşleşmelidir.

Artık orijinal başlığı içeren metin modülünü silebilirsiniz.

Bir Meta Veri Satırı Oluşturmak için Dinamik İçeriği Kullanma

Düzenin ikinci bölümüne geçin. Ardından, görsel oluşturucuda sürükleyerek veya bölüm ayarlarında 0 piksele ayarlayarak bölümün üst dolgusunu çıkarın.

Düzenin ikinci bölümünün ilk satırında, altında bir ayırıcı bulunan bir metin modülü (“Kişisel Eğitim Hakkında” içeriğine sahiptir) göreceksiniz. Dinamik içerik kullanarak özel meta veri dizimizi oluşturacağımız yer burasıdır.

Bu satırın boyutunun üst bölümdeki satırın boyutuyla eşleşmesini istiyoruz. Bunu yapmak için üst kısımdaki satırın satır ayarlarını açın ve boyutlandırma stillerini kopyalayın. Ardından bunları ikinci bölümün ilk satırına yapıştırın. Ardından satır oluğunu 2 ile güncelleyin. Yeni boyutlandırma aşağıdaki ekran görüntüsü gibi görünmelidir.

Ayrıca aşağıdaki gibi özel boşluk eklemeniz gerekir:

Özel Dolgu: %1 sol, %1 Sağ

Ardından satır ayarlarını kaydedin.

Şimdi satır sütun yapısını dört sütun düzenine güncelleyin.

Artık dinamik içeriğimizi eklemeye hazırız. Bunu yapmak için, şimdi en soldaki sütunda bulunan metin modülünün ayarlarını açın ve içerik kutusunun üzerine gelin. Kutunun sağ üst köşesinde dinamik içerik simgesini göreceksiniz. Dinamik içerik seçeneklerini açmak için üzerine tıklayın.

Ardından şu seçeneği seçin: Yayınlama Tarihini Gönderin.

Ardından tarih biçimini buna göre değiştirin.

Bu, gönderinin yayınlanma tarihini dinamik içerik olarak ekleyecektir.

Metin modülünü dinamik tarih içeriğiyle biçimlendirmek için, metin modülünün modül stillerini doğrudan aşağıdaki satırın sol sütununa kopyalayın.

Ardından modül stillerini dinamik tarih içeriğine sahip metin modülüne yapıştırın ve metin metni rengini beyaz olarak değiştirin.

Ardından, metin modülünü ve altındaki ayırıcıyı kopyalayın ve 2. sütuna yapıştırın. Ardından dinamik içeriği Kategorileri Gönder olarak değiştirin.

Düzenin tasarımına uyması için bağlantı metni rengini beyaza güncellemeniz gerekecektir.

Şimdi, yazı kategorileri metin modülünü bölücü ile sütun 3'e kopyalayın. Ardından dinamik içeriği Post Comment Count olarak değiştirin. Yorum Sayımı Gönder açılır penceresinde, Önce giriş kutusuna aşağıdakini girin:

Önce: Yorumlar:

Dinamik içerik açılır pencerelerinde bulunan öncesi ve sonrası giriş kutuları, dinamik içerikten önce ve/veya sonra metin eklemek için uygun bir seçenektir. Bu, gerektiğinde etiketler, fiyat sembolleri ve diğer öğeleri eklemek için yararlıdır.

Şimdi dinamik içeriğimizi eklemeye devam edelim. 3. sütundaki metin modülünü ve ayırıcıyı kopyalayın ve 4. sütuna yapıştırın. Bu son sütun, yazarımızın küçük resmini ve yazar adını tutacaktır. Bu nedenle, metin modülünün dinamik içeriğini Post Author olarak değiştirin. Yazar Gönderi açılır penceresinde aşağıdakileri güncelleyin:

önce: yazan:
Ad Biçimi: Ad ve Soyadı

Yazar sonrası içeriği olan metin modülünün üzerine yeni bir resim modülü ekleyin. Görüntü modülü ayarlarını açın ve varsayılan görüntüyü silin. Tıpkı bizim yaptığımız gibi, resim ön izleme kutusundaki dinamik içerik simgesine tıklayın ve dinamik içerik olarak Yazar Gönderi Profil Resmini ekleyin.

Ardından, görüntüyü yukarı çekmek için tasarım ayarlarını yapın ve ona aşağıdaki gibi özel bir genişlik verin:

Genişlik: 80 piksel
Özel Kenar Boşluğu (masaüstü): -82px Üst
Özel Kenar Boşluğu (tablet): 0 piksel Üst

Not: Gönderi yazarı adı, mevcut gönderiye atanan yazarı gösterecektir. Ve yazar profil resmi, Kullanıcılar > Profiliniz altındaki WordPress Kontrol Panelinde kullanıcı profili için ayarlanmış olan şeydir.

Bölüm 5: Gönderiye Öne Çıkan Bir Antrenman Eklemek için Özel Alanları Dinamik İçerik Olarak Ekleme

Bu özel alanları öğreticide daha önce nasıl eklediğimizi hatırlıyor musunuz? Şimdi bu özel alanları, yazımızda öne çıkan bir antrenman için içerik olarak kullanacağız.

Öne çıkan antrenman dinamik içeriğimizi eklemek için, önce tüm dinamik meta verilerimizle dört sütunlu satırın hemen altındaki iki sütunlu satırı çoğaltın. Ardından her iki sütundaki modülleri silin ve sol sütuna bir tanıtıcı modül ekleyin.

Antrenman bölümü için dinamik içerik eklemek için tanıtıcı modülleri kullanacağız. Başlamak için sol sütuna yeni bir tanıtım yazısı modülü ekleyin.

Başlık için, "Antrenman Başlığı" adlı özel alanı dinamik içerik olarak ekleyin. Ardından, tanıtıcı içerik için dinamik içerik olarak "Süre" adlı özel alanı ekleyin.

İşleri yoluna koymak için, bu modüllerin stilini ayrıntılı olarak ele almayacağım. Ancak, başlığın soluna yerleştirilmiş bir tanıtım yazısı simgesi eklemeniz ve tasarımı düzene uyacak şekilde güncellemeniz gerekecek.

Ardından, aşağıya ikinci bir tanıtım modülü ekleyin. Başlık olarak “Isınma” metnini girin. Ardından, dinamik içerik olarak “Isınma” adlı özel alanı ekleyin.

Bunun altına, başlık olarak "Weight Lifting" ve dinamik içerik olarak "Weight Lifting" özel alanı ile üçüncü bir tanıtım modülü ekleyin. Bu özel alan değeri için html kullandığımızdan, ağırlık kaldırma açılır penceresinde ham html'yi etkinleştirmeniz gerekecek.

Başlık olarak "Soğutma" ve dinamik içerik olarak "Soğutma" özel alanı ile son bir tanıtım modülü ekleyin.

Artık gönderinize egzersiz eklemek için dinamik bir bölümünüz var!

Tek yapmanız gereken, WordPress'teki varsayılan sayfa düzenleyiciden özel alan değerlerini güncellemektir ve bu içerik, Divi oluşturucuya gitmek zorunda kalmadan yazı düzeninize otomatik olarak eklenecektir.

Bölüm 6: Gönderi Etiketleri Dinamik İçeriği Kullanarak “İlgili Konular” Bölümü Tasarlama

Gönderi etiketlerini görüntülemek ve gönderiniz için havalı görünen "ilgili konular" bölümü oluşturmak için dinamik içeriği kullanabilirsiniz. Bunu yapmak için yeni bir sütun satırı oluşturun ve satıra bir metin modülü ekleyin.

Ardından içerik kutusu için, dinamik içerik olarak Gönderi Etiketleri ekleyin. Ardından aşağıdaki Gönderi Etiketleri seçeneklerini güncelleyin:

Önce: İlgili Konular:
Etiketler Ayırıcı: //

Not: Etiket ayırıcı için hemen hemen istediğiniz herhangi bir karakter grubunu kullanabilirsiniz, bu nedenle yaratıcı tasarımlar için farklı karakterlerle denemeler yapmaktan çekinmeyin.

İçeriğe stil vermek için aşağıdaki tasarım ayarlarını güncelleyin:

Yazı Tipi: Oswald
Metin Yazı Tipi Ağırlığı: Yarı kalın
Metin Metin Rengi: #ff4c00
Metin Metin Boyutu: 30px
Bağlantı Yazı Tipi: Oswald
Bağlantı Yazı Tipi Ağırlığı: Yarı kalın
Bağlantı Metni Rengi: #262d3f
Bağlantı Metni Boyutu: 50px
Bağlantı Harfi Aralığı: 2px
Bağlantı Çizgisi Yüksekliği: 1,6em

İşte son tasarım.

Bölüm 7: Yazar Biyografisi ve Yorum Bölümü Ekleme

Bu noktada, dinamik içerik eklemek ve gönderi düzeninizin tasarımını oldukça kolay bir şekilde ayarlamak için iyi donanımlısınız, bu nedenle bu son iki öğe üzerinde fazla ayrıntıya girmeyeceğim.

Dinamik İçerik Kullanarak Yazar Biyo Bölümü Ekleme

Gönderi içeriğinizin altına bir yazar biyografisi bölümü eklemek için Yazar Gönderi, Yazar Profili Resmi Gönder ve Yazar Biyografisi dinamik içeriğini kullanabilirsiniz. Aşağıdaki ekran görüntüsünde de görebileceğiniz gibi 1/4 3/4 sütun satırı oluşturdum. Sonra yazar profil resmini sol sütuna ekledim. Sağ sütunda, yazarın biyografisini altına yazarken ekledim. Ayrıca, bölümün arka plan görüntüsü (ve bir degrade kaplaması) olarak öne çıkan görüntü dinamik içeriğini de ekledim. İşte bunun nasıl görüneceğine dair bir örnek.

Yorumlar Modülünü Kullanarak Yorum Bölümü Ekleme

Özel bir gönderi düzeni kullandığımızdan, yorum bölümünün tasarımını düzen ile eşleştirebilmemiz için bir yorum modülü kullanmamızı sağlar. Yorum modülünü, düğme stilleri ve yazı tipleriyle mevcut düzen ile eşleşen yeni bir bölüm satırına eklemeniz yeterlidir. İşte bunun nasıl görüneceğine dair bir örnek.

Son Tasarım

Tüm tasarım ayarlandıktan sonra tüm gönderinin son tasarımı.

Gönderi İçeriğini Güncelleme ve Gelecek Gönderiler için Düzeni Kaydetme

Gönderi düzenini oluşturmak için Divi Builder'ı kullandığımızdan, yine de Divi modüllerini kullanarak gönderinizin asıl gönderi içeriğini güncellemeniz gerekecek. Ancak artık diğer her şey dinamik olduğundan, bu, süreci ileriye doğru çok daha kolay hale getiriyor. Yeni bir gönderi oluştururken tek yapmanız gereken, kaydedilen düzeni gönderinize eklemek ve gönderi içeriğini güncellemek için gönderi düzenini kitaplığınıza kaydetmeniz gerekir.

Son düşünceler

Divi'nin Dinamik İçeriği, gönderi verilerini eklemeyi ve güncellemeyi çok daha kolay hale getiren güçlü bir özelliktir. Bu nedenle, Divi Builder'ı kullanarak blog gönderileriniz (veya Projeler gibi diğer özel gönderi türleri) için özel bir düzen tasarlamak istiyorsanız, gitmeniz gereken yol dinamik içeriktir. Elbette dinamik içerik sadece gönderilerle sınırlı değil. Web sitenizin tamamında dinamik içerik ve özel alanlardan yararlanabilirsiniz. Umarım bu gönderi, bazı olasılıkları anlamanıza yardımcı olur ve dinamik içeriği harika yeni şekillerde kullanmanız için size ilham verir.

Yorumlarda sizden haber bekliyorum.

Şerefe!