Divi 5 modül grupları hakkında bilmeniz gereken her şey

Divi 5 , yeni özellikler ve benzersiz esneklik ile web sitesi oluşturmayı geliştirir. Modül Grupları, Divi 5'e en son eklemelerden biridir. Bu özellik, tek bir tıklamayla stil, hareket edebileceğiniz veya çoğaltabileceğiniz tek, yönetilebilir bir gruba birden çok öğeyi düzenlemenizi sağlar. Bu özellik, Flexbox ve sorgu döngü oluşturucu gibi yaklaşan özelliklerin yayınlandıktan sonra özellikle yararlı hale gelir .

Bu yazıda, Divi 5'in modül grupları hakkında bilmeniz gereken her şeyi keşfedeceğiz. Ne olduklarını ve neden önemli olduklarını anlamaktan, onları nasıl etkili bir şekilde kullanacaklarını öğrenmeye, sizi ele geçirdik.

Not: Divi 5 yeni web sitelerinde kullanılmaya hazırdır, ancak mevcut siteleri henüz Divi 5'e dönüştürmenizi önermiyoruz.

Modül gruplarıyla neyin mümkün olduğunu keşfedelim.

Modül grupları nedir?

Modül grupları, birden fazla modülü bir sütun içindeki tek bir uyumlu üniteye paketlemenizi sağlayan yeni bir kap öğesidir. Gruplandıktan sonra modüller, iş akışınızı artırarak ve tasarımınızda tutarlılık sağlayarak birlikte stille, çoğaltılabilir veya yeniden konumlandırılabilir. Modül grupları, modüllerinizi düzgün bir şekilde paketlenmiş tutar ve toplu olarak kullanmayı kolaylaştırır.

Modül grupları önemli bir organizasyon avantajı sunar. Örneğin, bir başlık, bir metin modülüne ve bir düğmeye sahip bir sütununuz varsa, bunları gruplandırmak, birleşik bir arka plan uygulamanıza, boşluğu ayarlamanıza veya tüm kompozisyonu tek bir eylemle hareket ettirmenize olanak tanır. Bu, zaman kazandırır ve tutarsız tasarım riskini azaltır, modül gruplarını kolayca cilalı, profesyonel düzenler oluşturmak için önemli bir araç haline getirir.

Modül Grupları Neden Önemlidir?

Divi 5'teki modül grupları uygun bir özellikten daha fazlasıdır - yeni bir kontrol ve verimlilik katmanı sunarlar. Tasarımcıların ve geliştiricilerin daha fazla hassasiyet ve yaratıcılıkla yaratmalarına izin verirler. İşte bu yüzden Divi ile web sitelerini nasıl tasarladığınız üzerinde büyük bir etki yaratma potansiyeline sahipler.

1. Bunlar Divi'nin geleceğinin bir parçasıdır: modül grupları, Divi 5'in ileri görüşlü mimarisi göz önünde bulundurularak inşa edilmiştir. Dinamik düzenleri yaratmayı bir esinti haline getirecek olan Flexbox ve The Query Loop Builder gibi yaklaşan özellikler için hazırlanmıştır. Modül gruplarına yatırım yapmak artık özellikle Divi 5 geliştikçe sizi uzun vadeli başarı için hazırlıyor.
2. Zamandan tasarruf ederler: Modül gruplarıyla tekrarlayan düzenlemelerle uğraşmak zorunda değilsiniz. Tasarım süresini önemli ölçüde keserek, karmaşık düzenleri bir eylemde stil, yeniden konumlandırabilir veya yinelendirebilirsiniz. Modül grupları için ön ayarlar, önceden tanımlanmış yapılandırmaları anında kaydetmenize ve uygulamanıza izin vererek bunu daha da ileri götürür.
3. Tasarım tutarlılığını teşvik ederler: Modül grupları, gruptaki her öğenin düğmelerden metne kadar, aynı stil kurallarını izlemenizi sağlar. Markalı siteleri yönetenler için, modül grupları tüm sitenizde tasarımları cilalı ve profesyonel tutabilir.
4. Daha Yaratıcı Özgürlük: Modül grupları, her bir öğeyi ayrı ayrı düzenlemeye gerek kalmadan denemenizi sağlar. Divi'de yeni olsanız bile, göze çarpan tasarımlar kolaylıkla oluşturabilirsiniz. İç içe sıraları ve modül gruplarını birleştirmek, sonsuz yuvalanabilir kapların kilidini açmanıza yardımcı olabilir.

İster solo tasarımcı ister işletme sahibi olun, modül grupları projelerinizi yükseltmek için ihtiyacınız olan kontrol ve verimliliği sağlar.

Divi 5'te modül grupları nasıl kullanılır

Modül gruplarına başlamak kolaydır. Divi 5'teki bir sayfaya yeni bir satır ekleyin ve 3 sütunlu düzen seçin.

Divi 5'te yeni bir grup modülü göreceksiniz. İlk sütuna eklemek için tıklayın.

Oradan, yeniden kullanılabilir bir düzen oluşturmak istediğiniz herhangi bir modül ekleyebilirsiniz. Göstermek için, öne çıkan bir hizmet için bir modül grubu oluşturacağız. Modül grubuna 2 sütunlu iç içe satır ekleyerek başlayın.

İç içe satırın ilk sütununda bir görüntü modülü ekleyin .

Yuvalanmış satırın 2. sütununda, bir başlık modülü ekleyin ve istediğiniz gibi stil.

Ardından, tek sütunlu bir iç içe satır , ardından başka bir başlık, metin ve düğme modülleri ekleyin. Eklendikten sonra, düzeniniz aşağıdaki resme benzemelidir.

Modül grupları tek bir modül gibi şekillendirilebilir, arka plan renkleri veya degradeleri ekleyebilir, aralığı ayarlayabilir veya sınır efektleri ekleyebilir. Modül grubu ayarlarına erişerek, önceden ayarlanmış seçeneği tıklayıp yapılandırmayı kaydederek modül grubunuzu önceden ayarlanmış olarak kaydedebilirsiniz. Bu önceden ayar daha sonra, sitenizde veya birden fazla proje boyunca özdeş stil ve yapı sağlayarak tek bir tıklamayla diğer modül gruplarına uygulanabilir. Bir modül grubu oluşturduktan sonra, kopyalayabilir, Divi Cloud'a kaydedebilir veya web sitelerinizde ön ayarınızı yeniden kullanabilirsiniz.

Modül grupları için pratik kullanım durumları

Divi 5'teki modül grupları profesyonel, verimli web siteleri oluşturmak için mükemmeldir. Modülleri yeniden kullanılabilir, stilli birimler zaman kazandırır ve tasarımlarınızı yeni yüksekliklere yükseltir. İster bir açılış sayfası oluşturmak ister istemci sitelerinin bir portföyünü yönetin, modül grupları karmaşık düzenleri zahmetsiz hissettirir. İşte güçlerini sergileyen ve tasarım sürecini kolaylaştıran bazı pratik kullanım durumları.

1. Gelecekte Kullanım Vakası: Gönderiler ve Ürünler

Modül grupları, Divi 5'in yaklaşan Loop Builder ile parlamak için üretilmiştir. Blog yazısı önizlemeleri veya WooCommerce ürün listeleri gibi dinamik düzenler için öğeleri gruplandırarak şimdi hazırlayın. Loop Builder geldiğinde, bu gruplar dinamik içeriği zahmetsizce dolduracak, size zaman kazandıracak ve kusursuz, ölçeklenebilir tasarımlar sağlayacaktır.

2. Eylem çağrısı bölümleri

Grup cesur bir başlık, ikna edici bir alt başlık ve yeniden kullanılabilir CTA'lar oluşturmak için bir serip efektine sahip canlı bir düğme. Birden fazla sayfada aynı CTA'ya mı ihtiyacınız var? Grubu saniyeler içinde çoğaltın veya anında erişim için Divi Cloud'a kaydedin. Bu, her CTA'nın markanızın görünümü ve hissi ile hizalanmasını sağlarken kurulum süresini azaltır.

3. Teslim bölümleri

Tutarlı, profesyonel referans düzenleri için bir müşterinin teklifini, görüntüsünü ve adını tek bir modül grubuna birleştirin. Grubu bölümleri yeniden düzenlemek için sürükleyin veya tek bir tıklamayla yuvarlak köşeler veya ince bir gölge gibi birleşik bir stil uygulayın.

4. Ürün kategorileri

Modül grupları ürün kategorilerini sergilemek için mükemmel olabilir. Örneğin, bir kategorideki ürün sayısını, başlık, görüntü ve düğmeyi vurgulamak için bir grup oluşturun, ardından diğer kategoriler için çoğaltın. Bu yaklaşım, ürün sayfaları arasında görsel tutarlılık sağlar ve e-ticaret web siteleri için tasarımı hızlandırır.

5. Restoran Menüleri

Modül gruplarını kullanmanın bir başka harika yolu da bir menü içermesi gereken web siteleri içindir. Metni dinamik olarak yapılandırmak zaman alıcı olabilir, bu nedenle modül gruplarını kullanmak işlemi hızlandırmak için mükemmeldir. Bir bölümün gelecekte inanılmaz ve çoğaltılması kolay görünmesi için grupları ve iç içe sıraları birleştirebilirsiniz.

Divi 5 bağlamında modül grupları

Divi 5, hızlı performansa, esneklik ve modül grupları gibi yenilikçi özelliklere öncelik veren WordPress tasarımı için cesur bir sıçrama. Modern mimari üzerine inşa edilen Divi 5, güzel oldukları kadar verimli web siteleri oluşturmanızı sağlar. Modül grupları, iş akışınızı artırmak için diğer Divi 5 özellikleriyle sorunsuz bir şekilde entegre olan bu vizyonun temel taşıdır. Divi 5, iki haftalık güncellemelerle kamu alfa aşamasında geliştikçe, modül grupları nasıl oluşturduğunuzu yeniden tanımlamaya hazırdır. İşte daha büyük resme nasıl uyuyorlar.

İç içe satırlar

Karmaşık, organize düzenler oluşturmak için Divi 5'in sonsuz sıra yuvalaması olan çift modül grupları. Örneğin, fiyatlandırma tabloları veya ekip üyesi sergileri gibi bölümler oluşturmak için iç içe satır ile bir başlık, resim ve düğme grubu.

Tasarım Değişkenleri

Marka renkleri, yazı tipleri veya CLAMP () hesaplamaları gibi modül gruplarına yeniden kullanılabilir stil değerleri uygulayarak tasarım tutarlılığını koruyabilirsiniz. Bir değişkeni bir kez güncelleyebilirsiniz ve her grup değişikliği anında yansıtarak onları büyük ölçekli projeler için mükemmel hale getirir.

Gelişmiş Birimler

Modül grupları için duyarlı aralık ve boyutlandırma oluşturmak için REM, EM, VW, VH veya diğerlerini kullanabilirsiniz. Bu, gruplandırılmış öğelerin masaüstlerinden akıllı telefonlara kadar her cihazda çarpıcı görünmesini sağlar.

Modül gruplarını en üst düzeye çıkarmak için ipuçları

Modül gruplarından en iyi şekilde yararlanmak için, birkaç akıllı strateji tasarım gücünüzü bir sonraki seviyeye taşıyabilir. İşte sizin için nasıl daha fazla çalışmasını sağlayacaktır.

1. Düzenlerinizi Planlayın: Modülleri gruplandırmadan önce, bölümünüzün yapısını çizin veya kullanmak istediğiniz öğeleri planlamanıza yardımcı olmak için bir prototipleme aracı kullanın. Bu ön planlama ekstra çalışmayı önler ve gruplarınızın mantıklı ve yeniden kullanılabilir olmasını sağlar.
2. Divi Bulutu Kullanın: En sevdiğiniz modül gruplarını, çapraz proje varlıklarına dönüştürmek için Divi Cloud'a kaydedin. Örneğin, cilalı bir ekip üyesi grubu kaydedebilir ve birkaç tıklamayla herhangi bir siteye çekebilirsiniz.
3. Kesme noktalarıyla yanıt verebilirliği test edin: Modül gruplarınızın her cihazda kusursuz görünmesini sağlamak için Divi 5'in özelleştirilebilir kesme noktalarını kullanın. Manuel ayarlamaları önlemek için grubun ayarları içinde mobil cihazlar için boşluk veya yazı tipi boyutlarını ayarlayın.
4. Tasarım değişkenlerini kullanın: Tasarımlarınıza bağlılık katmak için, küçük değişiklikleri kolaylaştırmak için renkler, metin, yazı tipleri veya sayı kuralları (CLAMP () hesaplamaları gibi) için tasarım değişkenlerini ayarlayın.
5. Stil ile Yaratıcı Olun: Modül gruplarında Hover animasyonları veya senkronize geçişler gibi cesur efektleri deneyin. Örneğin, dinamik bir CTA için gruplandırılmış bir düğmeye ve resme bir ölçek efekti ekleyin.
6. Divi 5 ile deney: Divi 5'in genel alfa oyun alanınızdır - modül gruplarını keşfetmek için bir test sitesi oluşturun. Neyin mümkün olduğunu keşfetmek için farklı modül kombinasyonlarını gruplandırmayı veya yeni stil fikirlerini test etmeyi deneyin.

Divi 5'te modül grupları ile daha akıllı tasarım

Divi 5'in modül grupları iş akışınızı basitleştirir, tasarım tutarlılığı sağlar ve sizi dinamik düzenlerin geleceğine hazırlar. İster yeniden kullanılabilir bir CTA için tasarım öğeleri bir araya getirin, ister uyumlu referans bölümleri oluşturur veya cesur stil ile deney yaparken, modül grupları daha akıllı çalışmanıza ve web siteleri daha hızlı oluşturmanıza izin verir. Divi 5 geliştikçe, bu özellik verimli ve güzel web siteleri oluşturmanızı sağlar.

Divi 5'in kamu alfa'sındaki modül gruplarını denemeye başlayın ve Divi ile web siteleri oluşturmak için yeni bir yol yaşayın. Daha önce belirtildiği gibi, Divi 5 yeni web sitelerine hazır, ancak henüz mevcut siteler için tavsiye etmiyoruz.

Modül grubu yaratımlarınızı paylaşmak için Divi topluluğuna katılmanızı öneririz. Tasarımlarınızı Divi Facebook Grubu'na veya @Eleganthemes'i X'de gönderin.

Birlikte harika bir şey inşa edelim!