Divi 5'in Loop Builder ile Özel Blog Gönderi Döngüsü Nasıl Oluşturulur

Markanız statik bir düzen ile kısıtlanmamalıdır, bu nedenle Divi 5 gelişmeye devam ettikçe size tam esneklik sağlamayı hedefliyoruz. Divi 5'in yeni döngü oluşturucu bu yönde harika bir adımdır; Bir öğeyi bir kez tasarlamanıza ve dinamik ızgaralara veya listelere döndürmenizi sağlar.

Bu öğreticide, size özel bir blog yayın döngüsünün nasıl kurulacağınızı göstereceğiz. Listeyi tasarlayacağız, dinamik alanları bağlayacağız, sorguyu ayarlayacağız ve düzeni temiz bir ızgara veya liste için rafine edeceğiz. Hadi alalım!

Divi 5'in Loop Builder nedir

Divi 5'in Loop Builder ile, istediğiniz kadar divi modülü kullanarak Visual Builder'da tek bir “kart” düzeni tasarlarsınız, ardından Divi görüntülemeyi seçtiğiniz her öğe için döndürür.

YouTube kanalımıza abone olun

Bir sütundaki döngü öğesini etkinleştirin, bir sorgu ayarlayın (yayınlar, projeler, terimler veya kullanıcılar gibi özel yayın türleri) ve başlıklar, özellikli resimler, kategoriler, özel alanlar ve düğmeler gibi dinamik alanları harita. Elemanları yeniden sıralayabilir, aralığı kontrol edebilir ve her şeyin küresel stillerinizi devralmasına izin verebilirsiniz.

Sonuç, eklentilere veya özel koda ihtiyaç duymadan sisteminize uygun duyarlı, yeniden kullanılabilir bir listedir.

Döngü Oluşturucu Nasıl Çalışır?

İçerik sekmesini açıp döngüyü etkinleştirerek herhangi bir bölümde, satır, sütun veya modülde döngü modunu açabilirsiniz.

Bu noktadan sonra, Divi, ayarlarınızla eşleşen her gönderi için öğeyi otomatik olarak tekrarlar.

İşte gerçek kontrolün devreye girdiği yer. Döngü ayarlarında şunları yapabilirsiniz:

• Sorgu Türü: Temel bir posta sorgusu veya meta sorgusu arasında, kategorilere, etiketlere, özel alanlara veya diğer meta verilere göre filtreleme.
• Gönderi Türü: Blog yayınlarından ürünlere ve herhangi bir özel yayın türüne kadar görüntülenecek içerik türünü seçin.
• Yalnızca belirli terimlerle yayınları ekleyin: Yalnızca belirli kategorilere, etiketlere veya diğer taksonomi terimlerine uygun yayınları gösterin.
• Gönderileri belirli terimlerle hariç tutun: Seçilen kategoriler, etiketler veya terimlerle eşleşen yayınları kaldırın.
• Yalnızca belirli yayınları ekleyin: dahil edilecek ayrı gönderiler seçin.
• Belirli yayınları hariç tutun: Döngüde istemediğiniz tek tek gönderileri gizleyin.
• Meta sorgusu: Görünenleri kontrol etmek için özel alan koşulları ekleyin.
• Sipariş: Sonuçların tarihe, başlığa, menü siparişine veya özel alan değerine göre sıralanıp sıralanmadığını seçin.
• Sipariş: Sonuçları artan veya azalan siparişle gösterin.
• Sayfa Başına Yayınlar: Pagination'dan önce kaç yayın görüntülediğine karar verin.
• Gönderi ofseti: En başından beri belirli sayıda gönderiyi atlayın, özellikli bölümlerle kopyalardan kaçınmak için kullanışlıdır.
• Yapışkan Mesajları Yoksay: Yapışkan gönderilerin öncelikli olup olmadığını veya normal yayınlar gibi muamele edilip edilmediğini seçin.

Sorgunuzu tanımladıktan sonra, Divi, düzeni ve stili aynı tutarken her bir posta kartı otomatik olarak doğru içerikle doldurur. Tamamen kartın nasıl göründüğüne odaklanırsınız ve Divi nüfusu ve tekrarlamayı ele alır. Her şey tek bir panelden kontrol edildiğinde, blog listenizin manuel düzenlemeler olmadan güncellenmesini sağlamak için gereken birkaç ayardır.

Divi 5'in Loop Builder hakkında her şeyi öğrenin

Divi 5 ile özel bir blog yazısı döngüsü oluşturma

Döngü oluşturucu ile özel bir blog yayın döngüsü oluşturmak iki parça vardır. İlk olarak, tam olarak hangi içeriğin göründüğünü ve nasıl göründüğünü seçerek kartpostal düzenini tasarlarsınız. Ardından, bu tasarımı bir döngü içine yerleştirirsiniz, böylece divi göstermek istediğiniz her yazı için otomatik olarak tekrarlar.

Kart düzeninden başlayıp döngüyü ayarlayarak adım adım geçeceğiz.

Başlamadan önce

Blog modülünden Loop Builder'a taşınıyorsanız ve zaten bir blog listesi sayfası varsa, döngü düzeninizi oluşturmak için atlayabilirsiniz. Değilse, hızlı kurulum:

1. Bir blog sayfası ekleyin

WordPress kontrol panelinizden sayfa> yeni ekleyin , “blog” adını alın ve yayınlayın.

Bu sayfa yayınlarınız için ana merkezi olacaktır.

2. Blog sayfanızı WordPress Ayarları'nda ayarlayın

Ayarlar> Okuma'da statik bir sayfa seçin. Ana sayfanızı eve ve yeni blog sayfanızı yayınlar sayfasına atayın.

Bu yalnızca ayrı bir ana sayfa ve blog listesi sayfası kullanıyorsanız gereklidir.

3. Bir Tema Oluşturucu Şablonu Oluşturun

Ardından, blog listesi sayfanız için yeni bir şablon oluşturacaksınız. Zaten bir tane varsa, bunu özelleştirebilirsiniz. Döngü oluşturucuya erişmek için en son Divi 5 sürümünü kullandığınızdan emin olun.

Divi> Tema Oluşturucu'da Yeni Şablon Ekle> Yeni Şablon Oluştur'u tıklayın.

Blog sayfanıza atayın ve şablon oluştur'u tıklayın.

Blog Gönderi Listeleme sayfanızı tasarlamak için Özel Gövde Ekle> Özel Gövde Oluştur'u tıklayın.

Şimdi döngü düzenini oluşturmaya başlayacağımız Divi Builder'a gireceksiniz.

1. Bir düzen içe aktarın

Bir düzen ile başlamak size çok zaman kazandırabilir ve en başından itibaren tutarlı bir tasarım sürdürmenize yardımcı olabilir. Bu öğretici için, markalaşma için pazarlama ajansı blog sayfası düzenini kullanıyorum.

Aynı şeyi seçebilir veya size çalışmak için iyi bir taban sağlayan herhangi bir düzeni içe aktarabilirsiniz. Şablonunuzda olduğunda, her şeyi sıfırdan inşa etmek yerine ihtiyaçlarınıza uyum sağlayabileceğiniz hazır bir yapıya sahip olacaksınız.

2. Bir blog posta kartı tasarlayın

Burası Loop Builder'ın esnekliğinin gerçekten ortaya çıktığı yerdir. Blog modülünün sabit düzenine kilitlenmek yerine, posta kartınızda neler olduğuna ve nasıl düzenlendiğine tam olarak karar verirsiniz.

Şablonunuza yeni bir bölüm ekleyin. Önceden tasarlanmış yapılardan seçim yapabilir veya tek sütun seçeneğini kullanarak kendiniz oluşturabilirsiniz.

Bu örnek için, üç sütunlu bir satır yapısı bölümü seçelim.

İlk sütunda, kartpostalımızı oluşturacağız. Tüm öğeleri tutmak için bir modül grubu kullanacağız.

Ardından, öne çıkan görüntü için bir görüntü modülü, yayın başlığı için bir başlık modülü ve alıntı için bir metin modülü ekleyin. Ziyaretçilerin tüm gönderiye tıklayabilmeleri için meta bilgiler ve daha fazla okuma düğmesi ekleyeceğiz.

Temel yapı oradayken, kartın tasarımını markanıza uyacak şekilde özelleştirin. Renkleri, yazı tiplerini, boşlukları ve onu kendiniz yapan benzersiz görsel detayları değiştirin.

3. Satır sarmayı etkinleştirin

Kartlarınızın farklı ekran boyutlarında satırlarda düzgün bir şekilde görüntülendiğinden emin olmak için Flex sargısını etkinleştirmek isteyeceksiniz. Ana satırı seçin ve tasarım sekmesini açın.

Düzene gidin. Düzen stilinin esnek olarak ayarlandığından emin olun.

Kartların gerektiğinde yeni bir hatta hareket edebilmesi için düzen sargısını etkinleştirin, ardından tasarımınıza en uygun ambalaj hizalamasını seçin.

4. Döngüyü aç

Şimdi her şeyi otomatik hale getiren adım geliyor. Kartın sütununu seçin.

Ardından, İçerik sekmesinin altındaki döngü seçeneğini açın. Döngü etkinleştirildikten sonra Divi, sorgu ayarlarınızı karşılayan her yazı için kart tasarımınızı tekrarlar.

Bu düzen için ayarladım:

• Gönderi tipi: gönderiler
• Sayfa başına gönderiler: 10
• Sipariş: Tarih
• Sipariş: Azalan (en yeni ilk)
• Gönderi ofseti: 0 (en son zamandan başlayarak her şeyi gösterin)
• Yapışkan gönderileri görmezden gelin: evet

Bu küçük ayarlamalar, ızgaranın istediğiniz sıraları istediğiniz sırayla görüntülediğinden emin olun. Düzeni farklı ihtiyaçlara uyarlamak için bu değerleri istediğiniz zaman değiştirebilirsiniz.

5. Dinamik İçerik Ekle

Döngüyü hayata geçirmenin son adımı, verileri yaşamak için kartınızdaki her modülü bağlamaktır. Statik bir kartı otomatik, her zaman güncel bir listeye dönüştüren şey budur. Örneğin:

• Görüntü modülünü yayının öne çıkan resmine bağlayın.
• Başlık modülünü yazı başlığına bağlayın.
• Metin modülünü posta alıntısına bağlayın.
• Daha fazla okuma düğmesini yayın URL'sine bağlayın.

Döngüsel olduğunda, Divi yer tutucu içeriğini döngüdeki her yazı için doğru verilerle değiştirecektir.

Öne çıkan görüntüyü ayarlamak için görüntü modülünü açmak, görüntü seçeneğinin üzerine gelin ve dinamik içerik simgesini tıklayın. Öne çıkan görüntüleri seçin ve ilgili tüm görüntüler anında doldurulur.

Bunu yayın başlığı, yayınlanan tarih, alıntı ve görüntülemek istediğiniz diğer alanlar için tekrarlayın.

Bir modül için dinamik içerik simgesini tıkladığınızda, döngü spesifik seçeneklerin tamamını göreceksiniz. Başlıklar ve görüntülerle sınırlı değilsiniz; Ayrıca yayın tarihlerini, değiştirilmiş tarihleri, yazar adlarını, yorum sayımlarını, kategorileri, etiketleri ve hatta özel alanları da görüntüleyebilirsiniz.

Bu, kartpostalınızın istediğiniz kadar minimal veya ayrıntılı olabileceği anlamına gelir. Temiz, görüntü odaklı bir ızgara, içerik açısından zengin bir düzen oluşturun, hatta niş özel post tipi alanları vurgulayın. Bir kez tasarlayın ve Divi tüm döngü boyunca doğru ve tutarlı tutar.

6. Şablonunuzu ve önizlemenizi kaydedin

Her şey doğru göründükten sonra, hem Divi Builder hem de Tema Oluşturucu'da son ince ayarlar yapın ve değişiklikleri kaydedin .

Etkinlik döngüsünü görmek için sayfanızı önizleyin. İşte bitmiş blog listesi sayfası:

Blog modülünün sınırları vardı, Loop Builder

Blog modülü iyi çalışıyordu, o zaman neden döngü oluşturucuyu zorluyoruz? Çünkü “iyi” sabit anlamına geliyordu. Blog modülü sizi şablonuna kilitledi, ancak Loop Builder size boş bir tuval veriyor. Düzeni, siparişi, stili ve divi'yi otomatik olarak seçersiniz.

Bu gerçek vardiya: Başkasının şablonunu ayarlamıyorsunuz, kendiniz tasarlıyorsunuz. Bunu bir kez daha uygulamaya koyalım ve tipik bir blog modülü yapısından farklı bir düzen tasarlayalım.

İlk olarak, tek sütunlu bir satır ve bölüm ekleyin. Boyutlandırmayı ayarlayın ve satır için Flex ve Flex ambalajının etkin olduğundan emin olun.

Bu satır blog kartlarınızı içerecektir. Şimdi, kart yapınızı oluşturmak için sütunun içine başka bir iç içe satır ekleyin, soldaki görüntü ve gönderinin meta verileri sağda.

Yapınızı tam olarak istediğiniz gibi tasarlayın, blog modülü sırasını takip etmeye gerek yok. Şimdilik sol sütunu boş bırakın. Öne çıkan görüntüyü sütunun arka plan görüntüsü olarak ekleyeceğiz.

Blog listeleme kartınızı özelleştirin.

Tasarım> Düzen> Dikey Boşluk seçeneğinde sağ sütunda modül grubunuzun dikey boşluğunu da değiştirebilirsiniz.

Ardından, döngü seçeneğini etkinleştiriyoruz. Üst satırdan ilk sütunu seçin.

Yine, dinamik içeriği döndürüyoruz. Görüntüyle başlayarak, sol sütunun arka plan seçeneğine gidin ve gerisi aynı olacaktır.

Bu, liste tarzı blog döngünüz. Şimdi, bunu bir ızgaraya dönüştürmek istiyorsanız, sütunun genişliğini değiştirin. Sırada esnek sarma etkin olduğumuz için, boyutlarını değiştirdikçe kartlar kendi başlarına sarılacaktır.

Bu, görüntülerinizi çok büyük hale getiriyorsa, alıntıyı kaldırabilir, satırın sütun yapısını değiştirebilir ve hatta yatay boşluğu sıfıra ayarlayabilirsiniz.

Ve tıpkı şebekeniz de hazır.

Bu örnek, Loop Builder'ın mümkün kıldığına dair bir bakıştır. Gerçek paket, artık bir avuç önceden ayarlanmış düzen ile sınırlı olmamanızdır. Posta kartının her kısmı düzenlemek, stil ve yeniden tasarlamak sizindir ve Divi otomatik olarak tekrarlamaya dikkat eder. Bu esneklik, basit bir blog listesini siteniz için tasarlanmış bir şeye dönüştüren şeydir.

Paination Modülünü kullanın

Loop sorgunuzdaki sayfa başına gönderileri sınırlarsanız, muhtemelen okuyucuların gerisini görmeleri için bir yol istersiniz. Sayfa modülünü ızgaranızın altına ekleyin ve hedef döngüsünü döngüyü etkinleştirdiğiniz öğeye ayarlayın. Tam bir yol izi için, Divi 5'in Loop Builder ve Pagination Modülünün nasıl kullanılacağına bakın: Öğreticiyi okuyun.

Blog şablonlarını indirin

Bir blog şablonundaki ızgaraları denemek istiyorsanız, aşağıdaki bu öğreticide kullanılan şablonları indirin. Bunları içe aktarmak için Divi Tema Oluşturucunuza gidin. Bunları sağ köşedeki içe aktarma/dışa aktarma simgesini kullanarak içe aktarabilirsiniz.

Dosyaları İndirin

Ücretsiz indir

Divi bültenine katılın, size Ultimate Divi açılış sayfası düzen paketinin bir kopyasının yanı sıra tonlarca şaşırtıcı ve ücretsiz divi kaynakları, ipuçları ve püf noktalarının bir kopyasını e -postayla göndereceğiz. Takip et ve hiçbir zaman bir divi ustası olacaksınız. Zaten abone olduysanız, aşağıdaki e -posta adresinizi yazın ve Düzen Paketine erişmek için İndir'i tıklayın.

İNDİRMEK

Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ Haftalık Divi Düzen Paketlerine erişin!

Bugün Divi 5'te Özel Blog Gönderi Döngünüzü Oluşturun

Divi 5'in Loop Builder'dan önce, gerçekten özel bir blog yazısı döngüsü oluşturmak genellikle sert şablonlarla güreşmek veya her küçük değişiklik için özel kod yazmak anlamına geliyordu. Şimdi, baştan sona görsel bir süreç. Bir kez bir kart tasarlarsınız, modüllerini yayın göndermek için bağlarsınız ve Divi'nin gerisini halletmesine izin verirsiniz.

Blog modülünün sınırları etrafında çalışıyorsanız, Loop Builder beklediğiniz yükseltmedir. Bir sonraki projenizde deneyin ve tam olarak nasıl istediğinizi görünen bir blog (veya ürün, etkinlik veya listeleme) oluşturmanın ne kadar kolay olduğunu görün!