Tamamen özel düzenlerde blog yayınları, ürünler veya özel yayın türleri gibi dinamik içeriği görüntülemek ister misiniz? Beaver Builder'daki döngü modülü bunu mümkün kılar.

Beaver Themer 1.5 ve Beaver Builder 2.9'da tanıtılan Döngü Modülü, standart Beaver Builder modüllerini kullanarak tekrarlanabilir düzenler tasarlamanızı sağlayan güçlü bir araçtır. Bir blog, portföy, etkinlik listesi veya WooCommerce Shop oluşturun, bu modül size özünde dinamik içerikle tam tasarım kontrolü sağlar.

Bu kılavuzda, sitenizin tasarımını, performansını ve esnekliğini artıran modern, dinamik düzenler oluşturmak için döngü modülünün nasıl kullanılacağını bozacağız.

Döngü modülü nedir?

Döngü modülü, sorgulanan içerikten geçip oluşturduğunuz bir düzeni kullanarak görüntüleyen esnek bir kaptır. Varsayılan WordPress şablonlarına güvenmek yerine, modüller, alan bağlantıları ve koşullu mantıkla dolu kendi özel tasarımlarınızı oluşturabilirsiniz.

Döngü modülü blog yayınları veya özel yayın türleri ile sınırlı değildir - çok çeşitli dinamik içeriği işleyebilir. İşte özel düzenler oluşturmak ve sitenizi geliştirmek için kullanmanın birkaç güçlü yolu:

• WooCommerce kategorileri veya etiketleri - Taksonomiler sorgu kaynağını kullanarak bireysel ürün sayfalarındaki ilgili ürün kategorilerini veya etiketlerini görüntüleyin.
• Özel İçerik Izgarası - “Ekiple Meet” veya Hizmet Listeleri gibi sayfalarda ACF tekrarlayıcı sorgu kaynağını kullanarak ekip üyeleri veya referanslar gibi dinamik içeriği gösterin.
• İlgili yayınlar - ACF ilişkisi sorgusu kaynağıyla tek yayın sayfalarında ilgili blog içeriğini özelleştirin, etkileşimi artırmaya ve sıçrama oranlarını azaltmaya yardımcı olur.

Döngüdeki her öğe özel tasarımınızı kullanır ve yayın başlığı, özellikli görüntü, alıntı ve daha fazlası gibi dinamik verilerde çeker.

Döngü modülünün temel özellikleri

Döngü modülü, esnek, içerik açısından zengin sayfalar oluşturmak için ideal hale getiren özelliklerle doludur:

• Herhangi bir yayın türünden dinamik içeriği sorgulayın (standart veya özel)
• Döngü düzeni içinde herhangi bir Beaver Builder modülünü kullanın
• Alanları dinamik olarak bağlayın (örneğin, başlık, özellikli görüntü, post meta)
• Izgara, Liste veya Carousel gibi birden çok düzen türü arasından seçim yapın
• Kullanıcı deneyimini geliştirmek için filtre ve sayfa ekleyin

Bu özelleştirme ve otomasyon kombinasyonu, HTML, PHP veya CSS yazmadan gelişmiş düzenler oluşturmanızı sağlar.

Özel bir döngü nasıl oluşturulur

Döngü modülü ile özel bir içerik düzeni oluşturmak basit, esnektir ve kod gerektirmez. İster hazır bir düzen ile başlamak veya kendinizi sıfırdan oluşturmak isteyin, döngü modülü dinamik içeriğinizin nasıl görüntülendiği üzerinde tam kontrol sağlar.

Döngü Modülü önceden ayarlanmış düzen seçenekleri

Döngü modülünü ilk olarak sayfanıza sürüklediğinizde, aşağıdaki önceden ayarlanmış düzenler arasından seçim yapmanız istenir: liste, sütunlar, kategoriler ve ürün kategorileri.

Önceden ayarlanmış düzenler, tamamen özelleştirebileceğiniz önceden düzenlenmiş modüller sunarak size bir başlangıç ​​sağlar. Döngü ayarlarını ihtiyaçlarınıza uyacak şekilde ayarlayın, mevcut modülleri yeniden düzenleyin veya kaldırın ve düzeninize ince ayar yapmak için yenilerini ekleyin. Bu hazır tasarımlar, cilalı, duyarlı içerik görüntülenmenize yardımcı olur.

Boş bir düzen ile sıfırdan inşa et

Tamamen özel bir şey yaratmayı mı tercih ediyor? Boş Düzen seçeneğini seçin ve şu adımları izleyin:

1. Döngü modülünü sayfanıza ekleyin veya Beaver Builder düzenleyicisine gönderin.
   
2. Boş bir döngü kabı ile başlamak için boş düzeni seçin .
   
3. Döngü ayarlarını, blog yayınları, WooCommerce ürünleri, ACF tekrarlayıcı alanları veya özel yazı türleri gibi hangi içeriği görüntülemek istediğinizi tanımlayacak şekilde yapılandırın .
   
4. Düzeninizi sıfırdan oluşturmak için modülleri döngü kabına sürükleyin . Başlıklar, fotoğraflar, simgeler, düğmeler ve daha fazlası gibi ihtiyacınız olan Beaver Builder modüllerini ekleyin.
   
5. Her döngü öğesi için başlıklar, resimler, fiyatlar veya özel alanlar gibi dinamik içerik çekmek için alan bağlantılarını kullanın .
   
6. Beaver Builder'ın sürükle ve bırak araçlarını kullanarak modüllerinizi düzenleyin ve stilize edin .

Bu kurulum, toplam kontrol isteyen gelişmiş kullanıcılar veya tasarımcılar için harika çalışır.
Özel blog düzenleri, ürün ızgaraları veya ekip dizinleri oluşturmak için kullanın - kod gerekmez.

Düzen kontrolü için kutu modülünü kullanın

Kutu modülü, düzen hassasiyeti ve şekillendirme esnekliği söz konusu olduğunda döngü modülüne önemli bir arkadaştır.

• Dış kabın genişliğini, dolgusunu, kenar boşluğunu ve arka plan stilini yönetmek için döngü modülünü bir kutu modülüne sarın . Bu, ilmekli içeriğinizin genel sayfa düzeni içinde nasıl oturduğu konusunda tam kontrol sağlar.
• Her döngü öğesinin iç içeriğini gruplamak için döngü içindeki bir kutu modülünü yuva . Bu kurulum, CSS Grid veya Flexbox gibi gelişmiş düzen tekniklerinden yararlanmanızı sağlar. Örneğin, her döngü öğesinde iki sütunlu bir düzen oluşturabilirsiniz. Solda bir görüntü yerleştirin ve sağa metin yerleştirin - aralık ve hizalama üzerinde tam kontrol.

Kutu modülünü stratejik olarak kullanmak, dinamik içeriğinizin görsel yapısını geliştirirken temiz, duyarlı tasarımların korunmasına yardımcı olur.

Sorgu ayarları: Hangi içerik görüntülenecek?

Döngü modülündeki içerik sekmesi, Loop içeriğinin nasıl sorgulandığını ve görüntülendiğini kontrol etmenizi sağlar:

• Gönderi türünü seçin (yayınlar, sayfalar, CPT'ler, ürünler, vb.)
• Taksonomi, kategori, etiketler veya yazarla filtre
• İçeriği Post durumuna veya tarihine göre görüntüleyin
• Ofsetler, sıralama siparişi ve limit sonrası

Bu, sorgu kaynağı, gösterilecek öğelerin sayısı, sipariş ve gelişmiş filtre seçenekleri içerir.

Toplama

Sayfa Sekmesi, içeriğin birden fazla sayfada nasıl bölündüğünü ve görüntülendiğini kontrol etmenizi sağlar - navigasyon ve kullanıcı deneyimini geliştirmek için idealdir.

• Numaralar : Gönderilerinizin altındaki numaralı bağlantıları görüntüler. Bir numarayı tıklamak, ilgili yayın kümesiyle yeni bir sayfa yükler.
• Kaydırma : Kullanıcı kaydırılırken içeriği tek bir sayfada tutarak otomatik olarak ek yayınlar yükler.
• Yok : Beslenmeyi devre dışı bırakır. Navigasyon kontrolleri olmadan en son üçü gibi sınırlı sayıda yayın görüntülemek için bu seçeneği kullanın.
• Sayfa başına gönderiler : Sayfa başına kaç öğenin göründüğünü ayarlar. Varsayılan 10'dur.

Bu seçenekler, içerik sunumunu düzen ve kullanıcı etkileşimi hedeflerinize uyarlamaya yardımcı olur.

Alan bağlantılarıyla dinamik veriler

Döngü düzeninizin içinde, şu şekilde yayın sonrası verileri dinamik olarak çekmek için alan bağlantılarını kullanabilirsiniz:

• Post unvanı
• Özellikli resim
• Alıntı veya tam içerik
• Özel alanlar
• Yazar, tarih, kategori, etiketler

Dinamik içeriği destekleyen herhangi bir modül (Başlık, Fotoğraf, Düğme, HTML vb.) Post verilerine bağlanabilir.

Gelişmiş stil ve koşullu mantık

Farklı yazı türlerini farklı şekilde şekillendirmek mi yoksa koşullara dayalı öğeleri göstermek/gizlemek ister misiniz? Döngü modülü koşullu mantık ve özel CSS sınıflarını destekler.

Örneğin, şunları yapabilirsiniz:

• Özel bir alan boşsa düğmeleri gizle
• Öne çıkan yayınlar için rozetler ekleyin
• Post kategorisine göre farklı renkler veya stiller uygulayın

Bu, kullanıcı deneyimine ince ayar yapmanıza ve içeriğinizde tutarlı markalamayı korumanıza olanak tanır.

Gerçek Dünya Döngü Modülü Kullanım Örnekleri

Beaver Builder'daki döngü modülü inanılmaz derecede çok yönlüdür ve tasarım ihtiyaçlarınıza uygun düzenlerde dinamik içerik göstermenizi sağlar. İşte kullanmanın bazı güçlü yolları:

• Blog Arşivleri: Görsel olarak ilgi çekici bir ızgara veya en son blog yayınlarınızın özellikli resimler ve alıntılarla listesi oluşturun.
• WooCommerce Ürünleri: WooCommerce ürünlerini dinamik fiyatlandırma, görüntüler ve arabaya ekleme düğmelerine sahip özelleştirilebilir bir ızgarada sergileyin.
• Portföy Vitrini: Marka stilinizi yansıtan esnek düzenlerle projelerinizi veya vaka çalışmalarınızı vurgulayın.
• Referanslar: Özel bir yazı tipinden istemci referanslarını görüntüleyin ve web sitenizin tasarımına uyacak şekilde şekillendirin.
• Etkinlik listeleri: Yaklaşan etkinlikleri veya web seminerlerini kronolojik olarak tarihler, konumlar ve olay açıklamalarıyla listeleyin.
• Ekip Üyeleri: Ekibinize fotoğraflar, isimler, başlıklar ve BIOS ile tanıtın - her öğeyi ayrıntılı bir profil sayfasına bağlayın.
• Gayrimenkul Listeleri: Gayrimenkul listelerini özel bir yazı türü kullanarak mülk görüntüleri, fiyatlandırma ve temel ayrıntılarla sunmak.
• Kurs Kataloğu: Başlıklar, açıklamalar ve kayıt bağlantıları ile birlikte çevrimiçi kurslar veya atölyeler kataloğu görüntüleyin.
• İş Listeleri: Başlıklar, konumlar ve kısa rol özetlerini içeren dinamik listelere sahip özelleştirilmiş bir iş panosu oluşturun.
• Tarif Dizini: Gıda blogcuları için ideal olan görüntüler, başlıklar ve açıklamalar içeren bir tarif koleksiyonuna sahiptir.

Bu kullanım durumları, Beaver Builder'daki döngü modülünün çok yönlülüğünü gösterir. Dinamik, ilgi çekici ve özelleştirilmiş içerik düzenleri oluşturmanıza yardımcı olan çeşitli endüstriler ve web sitelerinde kullanılabilir.

Son Düşünceler: Neden Döngü Modülünü Kullanın?

Beaver Builder'daki döngü modülü, tamamen özel, dinamik düzenler oluşturma gücü sağlar. İster bir blog, bir mağaza veya karmaşık bir içerik dizin oluşturun, bu modül, iş akışınızı görsel ve kodsuz tutarken verilerinizin nasıl görüntülendiğini kontrol etmenizi sağlar.

Beaver Builder ile modern, özel WordPress siteleri oluşturmak konusunda ciddiyseniz, Loop modülü araç setinizde olmazsa olmaz. Tam döngü modülü belgelerini buradan keşfedin.