Dinamik yazıların düzenini tasarlamak için divi’nin dinamik içerik özelliği nasıl kullanılır
Divi’nin yeni dinamik içerik özelliği bize blog yayınları (ve daha fazlası) için dinamik bir düzen oluşturma yeteneği sunuyor. Ve bunu yapmayı düşünebilmeniz için iyi nedenler var. Bunun bir nedeni tasarımdır. Özellikle bir başlangıç noktası olarak mevcut olan hazırlıkları kullandığınızda, görsel bir yapımcı kullanarak Divi ile bazı olağanüstü yazı düzenleri tasarlayabilirsiniz. Başka bir neden konfor. Post düzeni, yerinde tüm dinamik içerik öğeleriyle tasarlandıktan sonra (kategoriler, üstün resimler, etiket yayınları, özel alanlar vb.) Blog yayınları yapma ve güncelleme işlemi çok basitleştirilmiştir. Gerçek gönderme içeriğine ek olarak, diğer tüm yayın verileri bir görsel üreticiyi kullanmak zorunda kalmadan güncellenebilir.
Bu öğreticide, Divi’de dinamik bir yazı düzeni nasıl oluşturacağınızı göstereceğim. Hazırlık düzeniyle başlayarak, tüm düzenlere dinamik içerik ekleme ve ardından içeriği uygun olacak şekilde tasarlama sürecinde size rehberlik edeceğim. Özel alanları dinamik içerik olarak kullanmanın basit bir yolunu bile sunacağım. Başlayalım. Gizlice göz atma
Divi teması
Özel koç düzeni paketi. Bu düzen paketine Divi Builder’dan erişilebilir. Post düzenimizin tasarımını başlatmak için özel koç hizmet sayfasının düzenini kullanacağız.
Ayrıca, özel yazı tipi işlevselliği kullanarak üstün bir eğitim bölümü oluşturmak için özel alanlardan nasıl yararlanacağınızı da göstereceğim. Özel alanlar WordPress’te üretilmiştir ve ek eklentiler veya herhangi bir şey gerektirmez. Yani zaten ihtiyacınız olan şeye sahipsiniz. Bölüm 1: Başlamak, devam etmek ve yeni bir gönderi (sayfa değil) oluşturmak için yayına önceden hazırlanmış düzen ekleyin, gönderinizin başlığını verin, ardından Divi Oluşturucu düğmesini tıklayın. Görsel bir yapımcı kullanmayın, çünkü gönderim ayarlarımızı varsayılan WordPress düzenleyicisi ekranından ayarlamalıyız. Çünkü görüntülerimizi düzenden çekmek için önceden hazırlanmış düzenimizi eklemek istiyoruz (üstün resmimiz için ihtiyacımız var). Divi Builder menüsünde bulunan Düzen Yük düğmesini tıklayın.
Kütüphaneden yükleme açılır penceresinden, özel bir koç hizmeti sayfasının düzenini seçin ve “Bu düzeni kullanın” düğmesini tıklayarak yayınınıza başvurun. Ardından, ayarlarınızı kaydetmek için yayınınızı yayınlayın. Bölüm 2: Divi sayfaları ayarlarının güncellenmesi, meta verilerin yayınlanması ve üstün görüntüler Divi sayfa ayarları, yeni düzenimizin tasarıma uygun olacak şekilde Divi sayfa ayarlarını güncellememiz için önemlidir. Ayrıca varsayılan yayın başlığının görünümünü gizlememiz gerekiyor çünkü bunun yerine yayın başlık modülünü kullanacağız. Sayfanın sağ üst kısmında, aşağıdaki divi sayfa ayarları kutusunu bulun ve aşağıdakileri güncelleyin: Sayfalar Düzeni: Tam Genişlik Göster Başlık: Divi sayfası ayarlarını görmüyorsanız, Divi Builder’ı etkinleştirmeyebilirsiniz, bu yüzden yapın Elbette önce yapıyorsun. Kategoriyi kategori kutusuna ekleyin, “Kuvvet Antrenmanı” adlı yeni bir kategori ekleyin ve seçilen tek kategori olduğundan emin olun. Etiket kutusuna işaret ekleyin, aşağıdaki üç etiketi ekleyin: hız, eğitim ve eğitim. Bir sonraki üstün görüntü, aşağıdaki resimde gösterildiği gibi başlık başlığında kullanılan arka plan görüntüsüne uygun üstün bir resim ekleyin. Bölüm 3: WordPress üzerine inşa edilmiş özel alanlarda dinamik eğitim içeriği için özel bir alan ekleyin. Yazarların, kategoriler, posta sonrası, posta tarihi vb. Temel düzeyde, yayınlar yazarken hava durumu veya yazarın ruh halini görüntülemek için özel alanlar kullanılabilir. Ancak web siteniz için dinamik içerik oluşturmak için özel alanları kullanmanın birçok farklı yolu vardır. Web sitenize nasıl özel alanlar ekleyeceğiniz hakkında daha fazla bilgi edinmekten çekinmeyin. Ancak bu kullanım için, kendiniz için bazıları inşa ederek özel alanların temel kavramlarını anlayacağınızı düşünüyorum.
Bu örnek için, gönderinize dinamik içerik eklemek için kullanılabilecek birkaç özel alan ekleyeceğinizi göstereceğim. Bu örnek için dinamik içerik üstün eğitimdir. Özel alan yerleştirildikten sonra, Post yazarının yapması gereken şey özel alanın değerini doldurmaktır ve içerik görsel bir oluşturucu içermek zorunda kalmadan yazıya (dinamik olarak) güncellenecektir. Bunu yapmak için, yazının altına doğru kaydırın ve özel bir alan kutusu bulun. Bir nedenden dolayı görüntülenmezse, sayfanın üst kısmındaki ekran seçeneğinden seçtiğinizden emin olun. Ardından yeni bir özel alanı eklemek ve aşağıdakileri girmek için özel alanlar açılır (büzülüyorsa) tıklayın: Ad: Başlık Egzersizi Değer: Egzersiz Egzersizi ardından düğmeyi tıklayın. Özel Alan. İsim, Divi’deki özel alanları tanımlama şeklinizdir. Değer, Dyamic Divi içerik özelliğini kullanarak sayfaya dinamik olarak eklenecek içeriktir (daha sonra bununla ilgili). Web sitenize aşağıdaki özel alanı eklemek için bu sürece devam edin. İsim: Isınma Değeri: Çalışma 800m Ad: Süre Değer: 30 Dakika Adı: Kaldırma Ağırlığı Değeri:
Squats: Maks.% 60’da 10 tekrar (4 set) Tezgah: Maks.% 70 (3 set) 6 tekrar İsim: Serin Değer: 400m çalışıyor
Not: Bu özel alan Divi temasına eklenecek ve gelecekte yaptığınız her yeni gönderide mevcut olacak. Başka bir deyişle, bu bir yazı ile sınırlı değildir. Gönderinizi güncellemeyi unutmayın! Bölüm 4: Görsel Oluşturucuyu kullanarak Post Düzenine Dinamik İçerik Ekleyin Şimdi bir gönderi ve meta veri ayarlarımız olduğunda, yayınlarımıza dinamik içerik eklemeye başlamanın zamanı geldi. Bunu yapmak için görsel bir oluşturucu kullanın. Bu gelişmiş düzen tasarımını bulmayı ve düzenlemeyi kolaylaştırmak için Ayarlar menüsünü açın ve varsayılan oluşturucu etkileşim modunu Klik olarak ayarlayın. Başlık bölümünde düğme modülünü silin (ihtiyacımız yok). Arka plan görüntüsünü, dinamik içeriğimizin ilk kısmı için dinamik bir üstün görüntü içeriği ile değiştirerek, üst gölgemizin 1 satırında kullanılan arka plan görüntüsünü, gönderim için kullanılan üstün görüntülerle 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ü sekmesini tıklayın. Ardından şu anda var olan resmi silin ve imleci arka plan görüntü önizleme kutusuna yönlendirin. Kutunun sağ üst kısmındaki dinamik içerik simgesini göreceksiniz. Dinamik bir içerik seçeneği açmak için tıklayın. Ardından listeden dinamik görüntü içeriği içeriği seçeneğini seçin.
Düzeniniz tamamen aynı görünecek çünkü aynı resmi kullanıyoruz. Tek fark, arka plan görüntüsünün artık yayından üstün görüntünüz olarak belirlenen görüntüden çekilmesidir. Bu dinamik içeriğin güzelliği! Devam edelim. Halihazırda sayfa başlığını tutan metin modülünün altındaki yazı başlığı modülüyle yayın başlığını ekleyin, başlık modülünü ekleyin. Dinamik içerik kullanarak modüle yazı başlıkları ekleme kullanma seçeneği de vardır, ancak yayın başlık modülü dinamik içerik gibi çalıştığından ve SEO için H1 başlık etiketlerini korumak için mükemmeldir, çünkü özel yayınınızın düzeni için kullanır. Ardından, Posta Modülü ayarlarını aşağıdaki gibi güncelleyin: Meta Göster: Mükemmel Görüntü Gösterme: Hayır
Şimdi yukarıdaki metin modülünü açın ve H2 sekmesine sağ kaydırarak ve bu listeden seçeneği seçerek H2 başlık stilini kopyalayın. Ardından, H2 başlık stilini, modülde sağa tıklayıp listeden seçeneği seçerek Post başlık modülüne yapıştırın. Bundan sonra, yukarıdaki metin modülüne dönün ve alanı kopyalayın ve stili Post başlık modülüne yapıştırın. Ardından, Beyaz Olmak için Post başlık metninin rengini parlak olarak değiştirin. Şimdi yayınınızın başlığı 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. Meta-veri hattının düzenin ikinci kısmına taşınmasını sağlamak için dinamik içeriği kullanma. Ardından, dolgu üstünü görsel üreticiye sürükleyerek çıkarın veya bölümün ayarlarında 0px olarak ayarlayın. Düzenin ikinci kısmının ilk satırında, altındaki bölücü ile metin modülünü (“Kişisel Eğitim Hakkında”) göreceksiniz. Burası, dinamik içerik kullanarak özel meta veri hatlarımızı oluşturacağımız yerdir. Bu satır boyutunun üstteki satırın boyutuna uymasını istiyoruz. Bunu yapmak için, satır ayarlarını üstteki satırdan açın ve boyutun boyutunu kopyalayın. Sonra ikinci bölümün ilk satırına yapıştırın. Sonra sıra oluğunu güncelleyin. Şimdi satır sütununun yapısını dört sütun düzenine güncelleyin. Şimdi dinamik içeriğimizi eklemeye hazırız. Bunu yapmak için geçerli metin modülü ayarlarını en soldaki sütundaki açın ve imleci içerik kutusuna gidin. Kutunun sağ üst kısmındaki dinamik içerik simgesini göreceksiniz. Dinamik bir içerik seçeneği açmak için tıklayın. Ardından seçeneği seçin: yayınlama tarihini yayınlayın. Ardından uygun tarih biçimini değiştirin. Bu, yayınlama tarihini dinamik bir içerik olarak ekleyecektir. Metin modülünü dinamik bir tarih içeriğiyle düzenlemek için, aşağıdaki sol sütundaki kuvvet modülü kuvvetini kopyalayın. Ardından, modül stilini dinamik tarih içeriğiyle metin modülüne yapıştırın ve metnin metin rengini beyaza değiştirin.
Ayrıca, metin modülünü ve altındaki sınırı kopyalayın ve sütun 2’ye yapıştırın. Daha sonra dinamik içeriği posta kategorisine değiştirin. Düzen tasarımına uyacak şekilde beyaz olacak bağlantının metninin rengini güncellemeniz gerekir. Şimdi Metin Modülünü Post kategorisinde bölücü ile kopyalayın. Ardından dinamik içeriği bir yorum sonrası sayımla değiştirin. Gönderme sayısının açılır penceresinde, daha önce giriş kutusuna aşağıdakileri girin: Önceden: Yorumlar:
Dinamik İçerik Popup’ta mevcut ve sonra giriş kutusu, dinamik içerikten önce ve/veya sonra metin eklemek için rahat bir seçimdir. Bu, gerekirse etiketler, fiyat sembolleri ve diğer öğeleri eklemek için kullanışlıdır. Şimdi dinamik içeriğimizi eklemeye devam edelim. Metin ve bölücü modüllerini Sütun 3’e kopyalayın ve 4 sütun 4’e yapıştırın. Bu son sütun yazarın küçük resimlerini ve yazarın adını barındırır. Bu nedenle, yazarı yayınlamak için metin modülünün dinamik içeriğini değiştirin. POPUP POST YAZARINDA GÜNCELLEME: Önceden: Biçim Adı: İlk ve Arka Ad Yazarın gönderilmesinin içeriğiyle metin modülünün üstüne yeni bir resim modülü ekleyin. Görüntü modülü ayarlarını açın ve varsayılan görüntüyü silin. Yaptığımız gibi, resmin önizleme kutusundaki dinamik içerik simgesini tıklayın ve yazarın profil resmini dinamik bir içerik olarak ekleyin. Ardından, görüntüleri çekecek şekilde tasarım ayarlarını ayarlayın ve aşağıdaki özel genişliği vermek için ayarlayın: genişlik: 80px özel kenar boşluğu (masaüstü): -82px üst özel marj (tablet): 0px üst Not: Gönderinin yazarının adı, mevcut gönderiye atanan yazarı gösterecektir. Ve resim profili görüntü gönderisi, WordPress kontrol panelindeki kullanıcı Profili için kullanıcı> profilinizin altındaki kullanıcı profili için ayarlanan her şeydir. Bölüm 5: Gönderiye üstün egzersizler eklemek için dinamik bir içerik olarak özel bir alan eklemek, öğreticide daha önce özel alanı nasıl eklediğimizi hatırlıyor musunuz? Şimdi bu özel alanı görevimizde üstün eğitim için içerik olarak kullanacağız. Egzersizimizin dinamik içeriğini eklemek için, önce tüm dinamik meta ile dört sütunun altında iki sütunu kopyalayın. Ardından modülü her iki sütundaki silmeyi ve Sol sütundaki açıklama modülünü ekleyin. Egzersize dinamik içerik eklemek için bir açıklama modülü kullanacağız. Başlamak için sol sütuna yeni bir açıklama modülü ekleyin. Başlık için, dinamik içerik olarak “Eğitim Başlığı” adlı özel bir alan ekleyin. Ardından, açıklama içeriği için, dinamik bir içerik olarak “Süre” adlı özel bir alan ekleyin. Devam etmek için bu modüllerin stilini ayrıntılı olarak tartışmayacağım. Ancak, başlığın soluna yerleştirilen bir açıklama simgesi eklemeniz ve tasarımı düzeni eşleştirecek şekilde güncellemeniz gerekir. Ardından, aşağıdaki ikinci açıklama modülünü ekleyin. Başlık olarak “Isınma” metnini girin. Ve sonra dinamik bir içerik olarak “Isınma” adlı özel bir alan ekleyin. Başlık ve özel alan “Ağırlık Kaldırma” ile dinamik bir içerik olarak “Ağırlık Kaldırma” ile aşağıdaki üçüncü açıklama modülünü ekleyin. Bu özel alan değeri için HTML kullandığımız için, ağır kaldırma açılır penceresinde ham HTML’yi etkinleştirmelisiniz. Başlık ve özel alan olarak “soğutma” ile son açıklama modülünü dinamik bir içerik olarak ekleyin. Şimdi gönderinize egzersizler eklemek için dinamik bir parçanız var! Yapmanız gereken tek şey WordPress’teki varsayılan sayfa düzenleyicisinin özel alan değerini güncellemek ve içerik Divi üreticisine girmek zorunda kalmadan yazınızın düzenine otomatik olarak eklenecektir. Bölüm 6: “İlgili Konu” bölümünü tasarlama Dinamik içerik etiketi yayınlarını kullanarak, gönderme etiketlerini görüntülemek ve yayınınız için havalı görünen bir “ilgili konu” bölümü oluşturmak için dinamik içeriği kullanabilirsiniz. Bunu yapmak için yeni bir sütun satırı yapın ve metin modülünü satıra ekleyin. Ardından İçerik Kutusu için Dinamik İçerik Olarak Etiket Postunu Ekleyin. Ardından aşağıdaki Etiket Gönder seçeneğini güncelleyin: Önceden: İlgili Konular: Etiket Ayırıcı: // Not: Etiket ayırıcı için istediğiniz tüm karakter dizilerini kullanabilirsiniz, bu nedenle yaratıcı tasarım için farklı olanları denemekten çekinmeyin. İçeriği organize etmek için aşağıdaki tasarım ayarlarını güncelleyin: Metin Yazı Tipi: Metin Yazı Tipi Oswald Ağırlığı: Yarı Kalınlık Metin Metin: #FF4C00 Metin Boyutu Metin: 30px Bağlantı Yazı Tipi: Bağlantı Yazı Tipi Oswald Ağırlığı: Yarı Kalınlık Renk Bağlantısı Metin: #262D3F Metin Boyut Bağlantısı: 50px Bağlantı Mesafesi: 2px Hat Çizgisi: 1.6EM İşte son tasarım. Bölüm 7: Yazarın biyografisini ve yorumlar bölümünü bu noktada ekleyin, dinamik içerik eklemek ve bu son iki öğe hakkında pek çok ayrıntıyı tartışmayacağım için yayın düzeninizin tasarımını kolayca ayarlamak için iyi donanımlısınız. Yazarın biyografisini, yazınızın içeriğinin altına yazarın biyografisini eklemek için dinamik içeriği kullanarak ekleyerek, gönderi, resim profili resim yayınının ve yazarın dinamik içeriğinin yazarını kullanabilirsiniz. Aşağıdaki ekran görüntüsünde görebileceğiniz gibi, 1/4 3/4 satır sütunu yaptım. Sonra sol sütuna yazarın profil görüntü yayınını ekledim. Doğru sütunda, yazarın yazarın biyografisiyle yayınladığını ekledim. Ayrıca, üstün görüntülerin dinamik içeriğini o bölüm (ve gradyan genişliği) için bir arka plan görüntüsü olarak ekledim. Aşağıdakiler neye benzeyeceğinin bir örneğidir. Bir yorum modülü kullanarak yorum bölümünü ekleyin, çünkü özel bir yazı düzeni kullandığımız için, o zamandan beri yorum bölümünün tasarımını düzenle eşleştirebilmemiz için bir yorum modülü kullanın. Yeni bölüm satırına, düğmeye ve yazı tipi stiline geçerli düzen ile eşleşen bir yorum modülü ekleyin. İşte görünümün bir örneği. Buradaki son tasarım, tüm tasarımlar ayarlandıktan sonra tüm yayınların son tasarımıdır.