Divi 5 modül gruplarıyla kendi modüllerinizi oluşturun

Bir kod çizgisine dokunmadan özel divi modülleri oluşturmak ister misiniz? Divi 5'in yeni modül gruplarıyla, artık birden fazla öğeyi tek, yeniden kullanılabilir bir düzende birleştirebilirsiniz - hepsi görsel oluşturucunun içinden. JavaScript yok. PHP yok. Sadece sürükleyin, bırak ve tasarım.

Bu hızlı kılavuzda, Divi'nin yeni gruplarını kullanarak kendi modüllerinizi nasıl oluşturacağınızı göstereceğiz. Özellikle bir bulanıklık, fiyatlandırma masası, referans veya hayal edebileceğiniz başka bir modül türünü sıfırdan nasıl oluşturacağınızı göreceksiniz.

Not: Divi 5 yeni web sitelerinde kullanılmaya hazırdır, ancak mevcut siteleri henüz Divi 5'e dönüştürmenizi önermiyoruz. Güncelleme sürecinden emin olduğumuzda bizden bir şeyler göreceksiniz.

Divi'nin yeni modül grupları nelerdir?

Gruplar veya modül grupları, birden fazla modül ve/veya satır bir sütun içindeki tek bir birime eşleştiren yeni bir kap elemanıdır. Bu, birden fazla küçük öğeyi gruplandırma ve sayfada ihtiyacınız olursa tüm grubu hareket ettirmenize izin verme avantajına sahiptir.

Modül grupları sayfanız boyunca sorunsuz bir şekilde taşınabilir ve Flexbox ve Loop Builder özelliği yayınlandığında özellikle yararlı olacaktır. Döngü oluşturucu yayınlandıktan sonra, özel blog düzenleri, altbilgi menüleri, resim galerileri ve daha fazlasını oluşturmak için grupları kullanabilirsiniz. Yani, şimdi yararlı, ancak birkaç ay içinde kullanımı daha da etkileyici olacak.

İç içe satırlar, Divi 5'e eklediğimiz bir başka talep edilen divi özelliğiydi. Heart'ınızın içeriğine satırların içine satırlar koymanıza izin verdiler. “Modül grupları” adı sadece modülleri gruplayabileceğinizi gösterse de, tam tersi doğrudur. Nitekim, sonsuz iç içe yerleşmiş düzen yapıları oluşturma ve yeniden kullanılabilir bir grubun parçası olmalarını sağlayan grupların içinde iç içe sıralar kullanabilirsiniz.

Kendi divi modüllerinizi nasıl oluşturabilirsiniz?

Modül grupları, düzenleyicinin içinde kendi modüllerinizi oluşturmanıza izin verir. Bazı büyük modüllerimize benzeyen karmaşık düzenlemeler oluşturmak için modülleri ve iç içe sıraları birlikte gruplayabilirsiniz.

1. Kendi bulanık modülünüzü oluşturun

Yerleşik bulanıklık modülümüz

Bulanık modül birçok divi tasarımında bir elyaftır. Bu bir modül, ancak parçaladığınızda, tıklatmasını sağlayan birkaç şey var. Bunlar:

Bir görüntü/simge, başlık/başlık ve vücut içeriği. Bir modül grubu oluşturabilir ve bu modülleri içine yerleştirebiliriz: bir görüntü veya simge, bir başlık ve bir metin modülü. Birlikte, bu üç modül bulanık modülde kullanılabilen aynı içeriği çoğaltabilir.

Bir bulanıklık modülünün anatomisi

Kendi Blurb Modül Grubunuzu Oluşturma

İşte sol tarafta bir simge olan bir bulanıklık modülü ve aşağıdakileri kullanarak bulanıklık modülünün görsel olarak özdeş bir replikasyonu olan bir örnek.

Grup, iç sıra, bir simge modülü ile sütun (1) ve bir başlık ve metin modülü ile sütun (2).

X-ışını, farklı inşa edilmiş olmalarına rağmen, benzerliklerini görmek için her birinin iskeletini görmek için açılır.

Bu düzenlemede özel olan tek şey, ilk sütunun% 18 genişliğe ayarlanması ve ikincisinin% 82 genişliğe sahip olmasıdır (sütun boyutlandırma seçenekleri iç içe satırlar özellik güncellemesi ile yenidir).

Modüllerinizi bunun gibi oluşturmak, her bir öğe için size daha fazla tasarım stil seçeneği sunmanın ek avantajına sahiptir. Bulanıklık modülü, görüntü/simge yerleşimini kolaylaştırır, ancak ödünleşimleri vardır. İstediğiniz tasarıma en yakın olan yaklaşımı kullanın.

2. Kendi Fiyatlandırma Tabloları Modülünüzü Oluşturun

Yerleşik fiyatlandırma tablo modülümüz

Bazı divi modüllerinin çok daha fazlası var. Fiyatlandırma tablosu modülünde durum böyle. Fiyatlandırma tablosu başına aşağıda görebileceğiniz gibi birkaç alan vardır.

Bir fiyatlandırma masası modülünün anatomisi

Kendi Fiyatlandırma Tablo Modül Grubunuzu Oluşturma

Modül gruplarını ve ayrı modülleri kullanarak fiyatlandırma tablosu modülünü yeniden oluşturursak, bu sonucu alacağız.

Tablo başına yedi ayrı metin/seçenek alanına dikkat edin. Görsel olarak, her masanın üç ana parçası vardır (başlık, fiyat ve detaylar). Bunu bir grubun içinde yapmanın birkaç yolu var, ancak aşağıda, her biri için üç iç içe sıra kullandık. Oradan, fiyatlandırma tablosunu yeniden oluşturmak için her bölümün içinde başlık ve metin modülleri kullandık.

Fiyatlandırma tablosu modülünü kullanmanın güzel yanı, düzenin çoğunu ele alması ve bir başlangıç ​​yapmanızdır. Ancak bazen bu, onunla yapılan belirli şeyler istediğinizde çalışmanın daha zor olduğu anlamına gelir. Bu fiyatlandırma tablosu düzenini daha basit modüllerle oluşturmak için ekstra işler yapmak bize daha fazla tasarım kontrolü ve özgürlüğü sağlar.

3. Kendi referans modülünüzü oluşturun

Yerleşik referans modülümüz

Divi'nin referans modülleri çok şey olan bir diğer modül. En fazla dört farklı metin öğesi ve bir çift görüntü/simge seçeneği içerir.

Kendi referans modül grubunuzu oluşturma

Referans modülünü yeniden yaratmanın en zaman alıcı yönü, boşluğu doğru yapmaktır (özellikle birden fazla kesme noktasında). Ama bir kez bunu anladığınızda, işler oldukça basittir. Grup düzeni boyunca birkaç sıra ve simge, görüntü, başlık ve metin modülleri kullandık.

Bu modüllerin bazılarını yeniden yaratmanın güzel yanı, kendinizi daha fazla olasılıkla açmanızdır. Bazı daha karmaşık modüller, sadece geniş CSS'nin manipüle edebileceği düşünceli bir düzene sahiptir. Ancak kendiniz inşa ettiğinizde, bu alt öğelerin çoğunda hareket etme özgürlüğüne sahipsiniz.

Bu şekilde tasarım yaparken, daha fazla düzen olasılığı açılır. Örneğin, elemanları daha büyük grup düzeni içindeki tamamen farklı konumlara taşıyarak referans modülüyle mümkün olmayan (en azından kolay olmayan) ne yapabilirsiniz. Tasarımınız biraz esneklik gerektiriyorsa, bu parça parça oluşturmak, peşinde olduğunuz hassasiyeti elde etmenize yardımcı olabilir.

Ayrıca, yukarıdaki gibi özel bir referans modülü oluşturabilme fikrini de seviyorum ve yaklaşan döngü oluşturucuyu bir CPT'den referans almak için kullanın. Size yapılandırılmış veri ve içerikle daha hızlı inşa etme yeteneği tasarrufu sağlayacaktır.

Özel modülünüzü küresel bir öğe olarak kaydedin

Yeni modülünüz doğru hissettiğinde, sitenizde başka bir yerde kullanmak için küresel bir unsur olarak kaydedin. Grup Ayarları menüsünü açın. “ Kütüphaneye Kaydet ” seçeneğini tıklayın.

Daha sonra kolay kullanım için modülünüzü adlandırabileceğiniz bir modal görünecektir. Divi kütüphanesinde saklamak için “ küresel olarak kaydedin ”. Daha sonra yaptığınız değişiklikler sitenizdeki her kopyayı günceller.

Küresel unsurunuz artık küresel olduğunu fark etmenize yardımcı olacak farklı bir yeşil renge sahip olacak.

Kaydettiğiniz tüm küresel öğelerinize ve diğer kütüphane öğelerinize Dashboard> Divi> Divi kütüphanesinde erişebilirsiniz. Burada küresel bir öğeyi düzenlemek, siteyi güncelleyecektir. Ayrıca küresel öğeleri doğrudan kullandıkları sayfalarda düzenleyebilirsiniz (ve Site genelinde güncellenir).

Oluşturduğunuz her sitede modüle mı ihtiyacınız var? " Divi bulutuna kaydedin ." Modül artık bulut kitaplığınızda, her yerde herhangi bir projeye hazır. Kütüphane öğeleri bir sitede bir şeyler tutarken, Divi Cloud sizinle siteden siteye gider. Her ikisini de yapıları hızlandırmak ve daha fazla tutarlılıkla kullanmak için kullanın.

Divi Bulutu Al

Bugün yeni bir şeyler inşa et

Modül grupları ellerinize yeni güç koyar. Orijinal ve sadece ihtiyacınız olan düzenleri şekillendirebilirsiniz. Bir bulanıklık modülü yeniden oluşturarak başlayın ve sürecin nasıl uyduğunu görün. Divi'yi bu şekilde kullanmaya alıştıkça, standart modülleri kullanabileceğiniz veya kendiniz oluşturabileceğiniz için daha da karmaşık tasarımlar oluşturduğunuzu fark edeceksiniz.

Gruplar düşmeden önce yukarıda ele alınanların çoğu Divi ile mümkün oldu, ancak işleri kolaylaştırıyorlar. Özellikle Flex ve The Loop Builder'ı piyasaya sürdüğümüzde, gruplar Divi ile tasarımınızın temelini oluşturacak.

Seviye atlamaya hazır mısınız? Yeni bir site alın ve ilk özel modülünüzü bugün test edin.