Divi 5'in Loop Builder ile Portföy Izgarası Nasıl Oluşturulur

Bir portföy şebekesi, çalışmanızı sergilemenin basit ve etkili bir yoludur. Divi 5'in Loop Builder ile, yeniden kullanılabilir bir kart düzeni tasarlayabilir ve içeriğinizden doğrudan görsel oluşturucuda otomatik olarak nüfus almasına izin verebilirsiniz.

Tek amaçlı modüllerden farklı olarak, Loop Builder herhangi bir divi öğesini kullanmanıza, yayınlar veya özel yazı türleri için bir sorgu ayarlamanıza ve küresel stillerinizi devralan duyarlı bir ızgara çıkarmanıza olanak tanır. Bu öğreticide, projeler özel post türünü kullanarak adım adım bir portföy ızgarası oluşturacağız.

Divi 5'in Döngü Oluşturucusunu Anlamak

Divi 5'in Loop Builder, dinamik, döngüsel içerik düzenleri oluşturmanızı sağlayan yeni bir özelliktir. Blog veya portföy modüllerinden farklı olarak, Loop Builder, yayınları, terimleri veya kullanıcıları görüntülemek için herhangi bir divi öğesini kolayca döndürmenizi sağlar. Bu, WordPress sitenizden içerikle otomatik olarak doldurulan tek bir şablon oluşturabileceğiniz anlamına gelir.

Loop Builder, özel posta türleri (CPT'ler), WooCommerce ürünleri ve Gelişmiş Özel Alanlar (ACF) dahil olmak üzere çeşitli içerik türlerini destekler ve portföyünüzü tam olarak istediğiniz gibi görüntülemenize olanak tanır.

Döngü oluşturucunun temel avantajları

Sağlam özelleştirme seçenekleri sayesinde Loop Builder, portföy ızgaraları oluşturmak için mükemmel bir seçimdir. İşte göze çarpan özellikler:

• Özel döngü şablonları tasarlama esnekliği: Döngü oluşturucu ile önceden tanımlanmış düzenlerle sınırlı değilsiniz. Her portföy öğesi için benzersiz bir şablon tasarlamak için herhangi bir divi modülünü kullanabilirsiniz.
• Özelleştirilebilir Sorgular: Loop Builder, ızgaranızda hangi içeriğin göründüğünü ince ayarlamanıza olanak tanır. Tercih ettiğiniz sırada yalnızca istenen öğeleri görüntülemek için kategoriye, posta türüne veya özel alanlara göre filtreleyin.
• Dinamik İçerik Entegrasyonu: Her portföy öğesini ilgi çekici hale getirmek için proje başlıkları, özellikli resimler, açıklamalar veya özel meta veriler gibi dinamik içerik verilerini sorunsuz bir şekilde çekin.

Bu özellikler, Divi 5'in Loop Builder'ı tamamen özelleştirilebilir ve gezinmesi kolay cilalı, profesyonel bir portföy oluşturmak için ideal bir araç haline getirir.

Döngü oluşturucu ile bir portföy oluşturmak

Döngü oluşturucu ile bir portföy oluşturmak için Divi'nin Yerleşik Projeler Özel Post Türünü (CPT) kullanacağız. Projeler CPT, portföy tarzı içeriği sergilemek için tasarlanmıştır, bu da onu düzenimiz için ideal bir seçim haline getirir. Divi bir portföy modülü sunarken, Loop Builder'ı kullanacağız çünkü bize benzersiz bir portföy oluşturmak için sınırsız seçenekler sunuyor.

Sayfanıza yeni bir satır ekleyerek başlayın. Bunun için 3 sütunlu bir düzen kullanacağız.

İlk sütuna bir başlık modülü ekleyeceğiz.

Bir başlık girin veya sizin için bir tane oluşturmak için Divi AI kullanın.

Tasarım sekmesine gidin, başlık yazı tipi için Inter'i seçin, başlık yazı tipi ağırlığı için ışık , başlık metin boyutunu 2EM olarak ayarlayın ve 1.3EM Başlık Hattı Yüksekliği atayın.

Şimdi döngümüzü oluşturalım. Satırımızın 2. sütununa gidin.

Döngü sekmesini bulun, genişletin ve döngü öğesi geçişini etkinleştirin.

Ardından, sorgu türünü seçin. Bu öğretici için Divi'nin yerleşik CPT, projelerini kullanacağız. Post tipi altında projeleri seçin. Tüm projeleri sergilemek istiyoruz, bu yüzden her şeyi olduğu gibi bırakacağız.

Siparişi ayarlara göre , sayfa başına gönderiler ve ofset olarak seçebilirsiniz. İlk sütunumuz bir başlık modülü içerdiğinden, sayfa başına gönderileri 8 olarak ayarlayacağız. Bu şekilde, çıktı üç sütunlu satırımızda bile olacaktır .

Döngümüzün tüm sütunları istiflemeye çalıştığını fark edeceksiniz. Bunu düzeltmek için satır ayarlarına gitmemiz gerekir. 3 sütunlu satıra gidin, Tasarım sekmesini tıklayın ve düzen ayarlarını bulun.

Düzen Ayarları sekmesini genişletin. Düzen ambalaj ayarını bulun ve Wrap'ı seçin. Bu, döngümüzü 3 sütuna geri saracaktır.

Döngü sütunu şekillendirme

Artık döngü ayarları yerinde olduğuna göre, sütunlarımızı şekillendirme zamanı. Burada seçtiğimiz stil ayarları, döngüdeki kalan sütunları etkileyecektir. 3 sütunlu satırda 2. sütuna tıklayın ve Tasarım sekmesini tıklayın. Sınır açılır menüsüne gidin ve sütuna 15 piksel sınır yarıçapı atayın. Sınır stilleri altında, 1 piksel sınır genişliği ekleyin ve sınır rengi olarak #000000 kullanın.

Döngüye İçerik Ekle

Sütunun stilleri atanan döngüde içerik eklemeye başlayabiliriz. 2. sütuna bir resim modülü eklemek için tıklayın. Eklendikten sonra, döngü içindeki her sütun bir görüntü yer tutucu gösterilir.

Projemizin öne çıkan resmini çekmek için Divi 5'in dinamik içerik gücünü kullanacağız. Simgeleri ortaya çıkarmak için görüntünün üzerine gelin. Devam etmek için dinamik içerik simgesini tıklayın.

Seçenekler göründüğünde Loop özellikli resmi seçin.

Döngümüz, her bir projenin öne çıkan görüntüsünü doğrudan portföy döngümüze yerleştirecektir.

Ardından, öne çıkan görüntünün altındaki 2. sütuna bir başlık modülü ekleyin. Bu proje başlığı için kullanılacaktır. Başlığı eklemek için yukarıdaki adımları tekrarlayın. Ancak, bu sefer Loop Post unvanını seçin.

Tasarım sekmesinde, başlık seviyesi için H3 , başlık yazı tipi için inter , başlık metin hizalama merkezi ve metin boyutu için 20px'i seçin.

Son olarak, her projeye bağlantı veren bir düğme ekleyeceğiz. Gönderi başlığının altındaki 2. sütuna bir düğme modülü ekleyin. Düğme bağlantısı URL'sindeki Dinamik İçerik simgesini tıklayın ve Loop bağlantısını seçin.

Tasarım sekmesine geçin ve hizalamayı ortaya ayarlayın.

Düğme açılır ayarlarını genişletin ve düğme için özel stilleri kullanmayı etkinleştirin. Aşağıdaki tasarım ayarlarını girin:

• Düğme Arka Plan: #000000
• Düğme sınır yarıçapı: 15px
• Düğme sınır genişliği: 0px
• Düğme yazı tipi: inter
• Düğme metin rengi: #ffffff
• Düğme Metin Boyutu: 16px
• Marj: 15 piksel dip
• Dolgu: 15px üst ve alt, 35px sol ve sağ

İşte bu! Gördüğünüz gibi, Divi 5 ile bir döngü oluşturmak basit bir süreçtir.

Döngü oluşturucu ile stilleri değiştirmek

Döngünüzün stillerini düzenlemek, döngünün kendisini oluşturmak kadar basittir. Diyelim ki döngünüz için ışıktan karanlık bir temaya takas etmek istiyorsunuz. Tasarım değişiklikleri yapmak sadece birkaç saniye sürer. Bölümün arka plan rengini değiştirebilir ve ardından birkaç tıklamayla ayrı ayrı döngü öğelerinde değişiklik yapabilirsiniz.

Döngü öğelerini ayrı ayrı düzenlemeye gerek yoktur. Hepsi bağlı olduğundan, modülleri yalnızca bir kez düzenlemeniz gerekir ve Divi 5 güncellenmiş stilleri döngüdeki her modül boyunca otomatik olarak uygular.

Proje alıntısı , yayın tarihi, yorum sayısı , yazar biyografisi , özel alanlar ve daha fazlası gibi döngüye daha fazla modül ekleyebilirsiniz.

Döngünüzdeki öğelerin etrafındaki alanı sıkmak istiyorsanız, satır ve sütun ayarlarındaki dikey boşluğu ayarlayabilirsiniz. Bu, Divi 5'in FlexBox Düzen Sistemini kullanarak her satır ve ayrı modüller arasındaki boşluk miktarını kontrol ederek döngünüzün nasıl göründüğünü mükemmelleştirmenizi sağlar.

Portföy döngüsünün test edilmesi ve rafine edilmesi

Bir portföy oluşturduktan sonra, her şeyin amaçlandığı gibi çalışmasını sağlamak için test etme zamanı. Görsel oluşturucunun üst çubuğundaki önizleme bağlantısını kullanarak ön uçtaki ızgarayı önizleyerek başlayın.

Her projenin başlık , öne çıkan görüntü , alıntı ve Loop bağlantısının CPT projelerinden doğru bir şekilde çekildiğini doğrulayın. Hiçbir yer tutucunun görünen kırılmış unsurlar olmadığından emin olun.

Visual Builder'a geri döndüğünde, Divi 5'in özelleştirilebilir duyarlı kesme noktalarını kullanarak düzenin düzgün bir şekilde uyum sağladığından emin olun. Varsayılan olarak, Divi 5, biri masaüstü , tablet ve telefon için - 3 kesme noktası sunar, ancak görsel oluşturucunun üst çubuğunun ortasındaki Ellipsis menüsünü tıklayarak 7'ye kadar etkinleştirebilirsiniz.

Her kesme noktasında gezin, düzeni kontrol edin ve gerektiği gibi ayarlamalar yapın.

Düzeni daha mobil dostu hale getirmek için, daha küçük cihazlarda görüntülenen sütun sayısını değiştirmek için Divi 5'in değişiklik sütun yapısı ayarını kullanabilirsiniz.

En iyi uygulamalar ve ipuçları

Divi 5 ve Loop Builder'dan en iyi şekilde yararlandığınızdan emin olmak için, portföyünüzü oluştururken takip edilecek en iyi birkaç uygulama.

1. Tasarım değişkenleri ile tasarım tutarlılığından emin olun

Divi 5'in Tasarım Değişkenleri özelliği, portföy sayfanızda tutarlı tipografi, renkler ve aralıkları tanımlamanıza olanak tanır. Visual Builder'da, her portföy öğesinin tek tip görünmesini sağlamak için yazı tipleri, renkler ve dolgu/kenar boşlukları için global değişkenleri ayarlayın. Değişkenler oluşturmak için, Visual Builder'daki sol yan menüdeki değişken yönetici simgesini tıklayın.

Oradan, yalnızca portföy sayfanızda değil, tasarımlarınızın tüm web sitenizde tutarlı olmasını sağlayarak küresel yazı tipleri , renkler ve daha fazlasını atayabilirsiniz.

2. Erişilebilirliği düşünün

Erişilebilirlik, engelli olanlar da dahil olmak üzere tüm kullanıcıların işinizde gezinmesini ve tadını çıkarabilmesini sağlar. Medya galerisine yüklerken görüntüler için alternatif metin eklediğinizden emin olun. Bu, ekran okuyucuların içeriği görme engelli kullanıcılara iletmelerine yardımcı olur.

Görme bozukluğu olan kullanıcılar için okunabilirlik sağlamak için yeterli kontrast oranlarına sahip renkleri seçmek de iyidir.

3. Şablonları kaydedin ve yeniden kullanın

Döngü oluşturucu şablonunuzu mükemmelleştirdikten sonra, portföy bölümüne sağ tıklayarak ve Kütüphaneye Kaydet'i seçerek Divi kütüphanesine kaydedin. Kolay referans için açıklayıcı bir isim verin. Bu, şablonu sıfırdan yeniden inşa etmeden diğer sayfalarda yeniden kullanmanızı sağlar.

Şablonu diğer web sitelerinde kullanmak için Divi Cloud'a kaydedebilir ve tek bir tıklamayla diğer web projelerine aktarabilirsiniz.

Şablonları kaydetme iş akışınızı kolaylaştırır ve gelecekteki projeler için profesyonel portföy ızgaralarını hızlı bir şekilde dağıtabilmenizi sağlar.

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'teki Loop Builder'ı deneyin

Divi 5'in Loop Builder, dinamik portföy ızgaraları oluşturmayı kolaylaştırarak, işinizi stil ve verimlilikle sergilemenizi sağlar. Yerleşik projeler CPT ve Loop Builder'ın güçlü özelliklerinden yararlanarak, projenizin içeriğini dinamik olarak çeken esnek ve tamamen özelleştirilebilir ızgaralar oluşturabilirsiniz. Esnekliği, herhangi bir Divi modülünü kullanarak benzersiz düzenler tasarlamanıza, belirli projeleri görüntülemek için sorgular ayarlamanıza ve herhangi bir cihazda parlayan duyarlı ızgaralar oluşturmanıza olanak tanır.

Portföyünüzü hayata geçirmeye hazır mısınız? Divi 5'in en son genel alfa sürümüne dalın ve portföy düzeninizle deneyin. İster bir serbest çalışan proje ister müşteri çalışmasını vurgulayan bir işletme olsun, Loop Builder kolayca profesyonel, dinamik bir ekran oluşturmanıza olanak tanır.