Divi 5 özel özellikler (şimdiye kadar)

Yeni Divi 5 özelliklerini hızlı bir şekilde sunuyoruz ve her biri performansı artırmak, iş akışınızı kolaylaştırmak ve parmaklarınızın ucuna güçlü tasarım özelliklerini getirmek için tasarlandı. Genel bir bakışa mı ihtiyacınız var? Bu yazı, kontrol etmeye değer Divi 5 özel özelliklerini ele alacak. Ve bu sadece başlangıç. Flexbox ve The Loop Builder gibi heyecan verici yeni özelliklerimiz yakında çıkıyor. Güncellemelerimiz, Divi'yi günlük olarak kullanan tasarımcılar ve geliştiricilerden duyduğumuz ortak ağrı noktalarını ele alıyor .

Divi 5 yeni web sitelerinde kullanılmaya hazırdır.

8 Özellik Divi 5'e (ve nasıl çalıştıkları) özel özellikler

Divi 5, web sitesi tasarımına yenilikçi yükseltmeler sunar ve tasarım görevlerini yeniden icat eden ve hızlandıran ve onları daha sezgisel hale getiren bir dizi araç kullanır. Aşağıdaki sekiz özellik, yeni yeniden kabul edilen divi'mizin potansiyelini göstermektedir:

1. Özelleştirilebilir kesme noktaları

6 Şubat 2025'te yayınlanan özellik

Divi 5, özelleştirilebilir kesme noktası sistemi ile duyarlı tasarımda gelişmiş esneklik getirir. Çoğu sayfa oluşturucu kullanıcıları sadece üç standart görünümle sınırlar, ancak Divi 5, hepsi özel piksel değerlerine ayarlanabilen yedi kadar benzersiz kesme noktasına izin verir.

Bu, kullanıcılara genellikle sabit cihaz boyutlarına sadık kalan ve sınırlı ayar seçenekleri sunan diğer popüler inşaatçılardan daha fazla kontrol sağlar. Birçok platform sizi katı sınırlar içinde tasarlamaya zorlarken, Divi 5, tasarımınızın özel ilgiye ihtiyaç duyduğu tam ekran genişliklerini hedeflemenizi sağlar.

Standart üçlüsünün ötesinde

Çoğu web sitesi üreticisi, basit olduğu için masaüstü, tablet ve mobil üçlüye bağlı kalır. Divi 5, bunun düzinelerce farklı ekran boyutunda insanların bugün Web'e nasıl göz attıklarını fark etti.

Divi 5 ile şunlar için kesme noktaları ayarlayabilirsiniz:

• Telefon (<767px)
• Telefon Genişliği (<860px) - Peyzaj Mobil Görüntüleme İçin Mükemmel
• Tablet (<980px)
• Tablet Geniş (<1024px) - Daha büyük tabletleri ve benzer cihazları yakalar
• Masaüstü (> 981px)
• Geniş ekran (> 1280px)
• Ultra geniş (> 1440px)

Diğer WordPress sayfası oluşturucular bazı kesme noktası kontrolü sunar, ancak hiçbiri Divi 5'in hassasiyeti ve kullanım kolaylığı ile eşleşmez. Sistem sezgisel kalır, aynı tanıdık divi kontrolleri tüm kesme noktalarına uygulanır.

Görsel kırılma noktası işleme

Divi 5, onu diğer birçok inşaatçıdan ayıran bir özellik olan tuval ölçeklendirmeyi tanıtıyor. Sabit cihaz önizlemeleri arasında geçiş yapmakla sınırlı olmak yerine, düzeninizi istediğiniz genişlikte görmek için tuvalin kenarını sürükleyebilirsiniz.

Bu yaklaşım, neredeyse doğrudan bir web tarayıcısında çalışmak gibi, anında, gerçekçi geri bildirim verir. Mevcut pencerenizden daha geniş kesme noktaları tasarlarken, tuval orantılı olarak ayarlanır, böylece daha küçük ekranlarda bile tasarımınıza doğru bir bakış elde edersiniz.

Break noktaları arasında hareket ederken deneyim tutarlı kalır. Kontroller aynı şekilde davranır ve düzeniniz beklenmedik bir şekilde değişmez. Bu güvenilirlik, diğer sayfa inşaatçılarında baş ağrısı olabilecek duyarlı tasarımdan tahmin ve sorun gidermeyi azaltır.

Daha fazla bilgi edin

2. Seçenek Grup Ön Ayarları

11 Mart 2025'te yayınlanan özellik

Seçenek Grup Ön Ayarları, Divi 5'in en heyecan verici yeni özelliklerinden biridir ve sizin için çalışan bir tasarım sistemi oluşturma yeteneklerinizi genişletir. Seçenek grup ön ayarları tasarımınızın yapı taşlarıdır. Eleman ön ayarları sizi belirli bir öğeyi şekillendirmeye kilitlerken, Divi 5'in seçenek grup ön ayarları herhangi bir öğe türünde çalışır.

Tipografi, sınırlar, gölgeler veya arka planlar gibi belirli tasarım özellikleri için yeniden kullanılabilir stiller oluşturabilir ve bu stilleri farklı öğeler boyunca karıştırabilirsiniz. Örneğin, başlık stiliniz için bir ön ayar, başka bir düğme stili ve kutu gölgeleri için üçüncüsü oluşturabilirsiniz.

Kurulduktan sonra, bu stilleri bir metin modülü, bulanıklık, harekete geçirme çağrısı veya hatta bölümler ve satırlar gibi kaplar olsun, herhangi bir uyumlu öğeye bir tıklama ile uygulayabilirsiniz.

Bu neden iş akışınız için önemlidir?

Bu, tasarımınızı güncellemeniz gerektiğinde bir zaman kazandırıcıdır. Sitenizdeki öğelerdeki sınır yarıçapını değiştirmeye karar verdiğinizi varsayalım. Her düğmeyi, görüntü ve bölümü avlamak yerine, sınır önceden ayarlanmasını bir kez düzenlersiniz ve bu önceden ayarlanmış güncellemeleri otomatik olarak kullanarak her öğeyi düzenlersiniz.

Farklı öğe türlerinde çalışma yeteneği, Divi 5'in seçenek grup ön ayarlarını gerçekten yararlı hale getirir. Aynı sınır stili bir modül, sütun, satır veya bölüm için uygulanabilir. Bu çapraz eleman uyumluluğu, saatlerce tekrarlayan stil çalışması tasarrufu sağlar.

Bu esneklik bir adım daha ileri gidiyor. Divi'nin seçenek grup ön ayarları temel stil seçeneklerinin ötesine uzanır. Ayrıca koşullu ekranlar, HTML arka plan videoları ve kaydırma efektleri gibi komut dosyası tabanlı özellikleri de kapsar. Bu, sitenizdeki hem statik şekillendirme hem de etkileşimli davranışlar üzerinde tutarlı bir kontrol sağlar.

Daha fazla bilgi edin

3. Gelişmiş birimler

19 Mart 2025'te yayınlanan özellik

Divi 5 , CSS birimlerinin işlenmesini geliştirerek duyarlı tasarımı kolaylaştırdı.

Şimdi, günümüzün web tasarımı için gereken tüm CSS birimlerine doğrudan inşaatçının içinde erişebilirsiniz. Bu, pikseller (PX), yüzde (%), EMS (EM), kök EMS (REM), ViewPort birimleri (VW, VH, VMIN, VMAX) ve karakter genişliği (CH) veya fraksiyonel birimler (FR) gibi daha gelişmiş seçenekleri ızgaralar için kullanabileceğiniz anlamına gelir.

Bu ilk başta küçük bir güncelleme gibi görünebilir, ancak aslında size duyarlı düzenler oluşturmak için çok daha fazla esneklik sağlar.

Farklı birimler neden önemlidir?

Telefonlarda, tabletlerde ve masaüstlerinde iyi görünmek istediğiniz siteler oluşturduğunuzda, yalnızca piksel kullanmak baş ağrısı oluşturabilir. 300 piksel genişliğinde bir öğe masaüstünde iyi görünüyor, ancak mobil cihazlarda düzeninizi kırabilir.

ViewPort gibi gelişmiş birimlerle, aynı öğeyi 80VW'ye (ViewPort genişliğinin% 80'i) ayarlayabilirsiniz ve tüm cihazlarda mükemmel bir şekilde ölçeklenecektir. Veya metni temel yazı tipi boyutunuzla orantılı tutmak için REM ünitelerini kullanın, bu da erişilebilirlik ayarlamalarını çok daha kolay hale getirin.

Şimdi, birimleri Calc (), Min (), Max () ve Clamp () gibi CSS fonksiyonlarıyla birleştirin ve gerçek büyünün gerçekleştiğini görün. Divi 5 tüm bunları destekler ve herhangi bir ekran boyutuna uyum sağlayan gerçekten akışkan düzenler oluşturmanıza izin verir.

Örneğin, bir başlık için yer bırakırken ekranın çoğunu almasını sağlamak için bir bölüm yüksekliği (80VH - 60 piksel) ayarlayabilirsiniz. Veya ekranla büyüyen ancak okunabilir sınırlar içinde kalan metin için kelepçe (16px, 4VW, 22px) kullanın.

Kelepçenin esnekliği ()

Clamp () işlevi, birçok duyarlı tasarım problemini çözdüğü için özel ilgiyi hak eder. Bir seferde minimum, tercih edilen ve maksimum boyutları ayarlamanızı sağlar, bu da Clamp () işlevini birçok web tasarımcının favori bir özelliği haline getirir.

Ekran boyutuyla büyüyen ancak okunabilir kalmayı isteyebilirsiniz. Bir başlık modülünde, metin boyutunu kelepçe olarak ayarlayabilirsiniz (36px, 5VW, 72px). Başlık 36 pikselden daha küçük veya 72 pikselden daha büyük olmayacak, ancak bu boyutlar arasında, görünüm portu genişliğinin% 5'inde ölçeklenecektir.

Bu, kesme noktaları olmadan ekran boyutları arasında düzgün geçişler oluşturur. Tabletlerde çok büyük veya büyük monitörlerde çok küçük metin sorun olmayacak. Tipografiniz düzen ile nefes alıyor.

Farklı tasarım öğelerinin farklı birimlere ihtiyacı olduğunu da biliyoruz, bu yüzden Divi 5'in gelişmiş birimleri sadece tipografi ile değil, aynı zamanda marjlar, dolgu ve diğer aralık değerleri ile birlikte çalışır:

• Metin için REM birimleri her şeyi orantılı tutar. Vücut metninizi 1REM olarak ayarlarsanız ve başlıklar 2.5REM'e ayarlarsanız, temel yazı tipi boyutunu değiştirme her şeyi orantılı olarak günceller.
• Düzenler için sabit ve sıvı birimlerini karıştırmayı deneyebilirsiniz. Bir kenar çubuğu en iyi 300 pikselde çalışabilirken, ana içerik kalan alanı doldurmak için calc (% 100 - 350px) kullanabilir.
• Aralık için, EM üniteleri metin boyutuna sahip ölçeklendirilen dolgu oluşturur. Bu, metin boyutları değişse bile tasarım oranlarınızı tutarlı tutar.

Ayrıca tartışılan diğer özelliklerle de iyi oynar

Özellikle güzel olan, bu birimleri kullanmak için özel CSS yazmanız gerekmemesidir. Tam görsel arayüze inşa edilirler. Farklı değerleri deneyebilir ve sonuçları anında görebilirsiniz, öğrenme eğrisini bu çözümleri elle kodlamaktan çok daha nazik hale getirebilirsiniz.

Bu birimler Divi 5'teki diğer özelliklerle entegre edilmiştir. Tasarım değişkenleri olarak tercih ettiğiniz herhangi bir birimi kullanarak değerinizi depolayabilir ve daha sonra bunları Site çapında Option Group ön ayarları aracılığıyla uygulayabilirsiniz. Bu, tüm sitenizden akan iyi tasarımın bir zincir reaksiyonu oluşturur. Örneğin:

• Başlık boyutu gibi bir sayı değişkeni oluşturun: Kelepçe (26px, 5VW, 82px); H1 başlıklarınız için. Bu değişkeni başlık metin ön ayarınıza uygulayın. Başlıklarınız artık mobilde 26 piksel ve masaüstünde 82 piksel arasında sorunsuz bir şekilde ölçeklenecek ve bu boyutlar arasında bir sıvı 5VW hesaplaması olacak.
• Bir sayı değişkeni kelepçeye (20px, 5VW, 80px) ayarlamak ve daha sonra marj olarak kullanmak, masaüstünde pürüzsüz bir geçiş ile mobil ve cömert solunum odasında sıkı bir boşluk var.
• Bir sayı değişkeni boşluk birimi kullanarak bir taban aralığı ayarlayın: 20px ve düzen hazır ayarlarınızda calc () ile kullanın. Örneğin, daha büyük boşluklar için calc (var (–space-birim) * 2) ve daha sıkı boşluklar için calc (var (–space-birim) / 2) uygulayın. Taban değerini güncellediğinizde, türetilmiş tüm boşluklar orantılı olarak ayarlanır.

Bu sadece yüzeyi çiziyor. Bu yapılandırmaları harmanlayarak, Divi'nin sadeliğini ve yeni bulaşan özellikleri kullanan web siteleri oluşturabilirsiniz.

Daha fazla bilgi edin

4. Tasarım Değişkenleri

3 Nisan 2025'te yayınlanan özellik

Çoğu web sitesi oluşturucu, küresel renkleri ve yazı tiplerini ayarlamanın yollarına sahiptir. Divi 5 bu fikri alır ve onunla birlikte çalışır. Sadece renkler ve yazı tipleri için değil, aynı zamanda sayılar, görüntüler, düz metin ve hatta web bağlantıları için de değişkenler oluşturabilirsiniz.

Şunu düşünün: Çoğu inşaatçı, her yerde güncellenen birincil renk ayarlamanıza izin verir. Peki ya telefon numaranızı birden fazla sayfada değiştirmek istiyorsanız? Veya sitenizde kullanılan yinelenen bir görüntüyü değiştirin mi? Divi 5 bu durumları kolaylıkla ele alıyor.

Tüm değişkenleriniz görsel oluşturucunun kenar çubuğunda basit bir panelde yaşar. Temiz, bulması kolay ve her şeyi tek bir noktaya koyar.

Ön ayarlarla mükemmel bir eşleşme

Tasarım değişkenleri ve ön ayarları (hem seçenek grup ön ayarları hem de eleman ön ayarları), korunabilir ve ölçeklenebilir bir tasarım yapmak için birlikte çalışır. Esnek bir tasarım sistemi oluşturarak değişkenlerinize başvuran ön ayarlar oluşturabilirsiniz.

Örneğin, ana başlık yazı tipiniz için bir tasarım değişkeni oluşturabilir, ardından başlık tipografi ön ayarınızda bu değişkeni kullanabilirsiniz. Yazı tipinizi daha sonra değiştirmeye karar verirseniz, değişkeni yalnızca bir kez güncellemeniz gerekir, ön ayarın kendisi değil. Bu, çoğu inşaatçının sunmadığı başka bir kontrol katmanı oluşturur.

Bu iki katmanlı yaklaşım size diğer inşaatçılardan daha fazla kontrol sağlar. Bir şeyin (değişkenler) göründüğü yerden (ön ayarlar) nasıl göründüğünü ayırırsınız.

Farklı ekran boyutlarına mükemmel uyum sağlayan duyarlı tasarımlar oluşturmak için Calc () ve Clamp () gibi CSS işlevlerine sahip sayı değişkenlerini kullanabilirsiniz. Sitenizin aralık ritmi için bir değişken ayarlayın ve güzel ölçeklendiren tutarlı oranlar için düzeniniz boyunca uygulayın.

Bir değişkeni değiştirdiğinizde, onu kullanan her şey hemen güncellenir. Bu, çalışma saatleri olabilecek birkaç saniye tıklamaya dönüşür.

Bu sürdürülebilir bir tasarım yaratmaya nasıl yardımcı olur

Tasarım değişkenlerinin birkaç pratik örneğine bakalım:

• Markanızın her yerde aynı görünmesini sağlayın: Renkleriniz, yazı tipleriniz ve aralığınız için değişkenler ayarlayın. Tutarlı bir görünüm için bunları sitenizdeki ön ayarlarda kullanın.
• Bir Tatil Satışı Çalıştırın: Kampanya grafikleri için görüntü değişkenleri ve promosyon kopyası için metin değişkenleri oluşturun. Sezon bittiğinde, sitenizi yenilemek için bunları bir kez güncelleyin.
• Sınır Stilleri: Sınır yarıçapı için 10 piksel gibi bir sayı değişkeni oluşturun ve tüm düğme ön ayarlarına, görüntü modüllerine ve kartlara uygulayın. Tasarım yönünüz değişirse, bir güncelleme sitenizdeki tüm yuvarlak köşeleri etkiler.
• Müşteri Güncellemelerini Kolay Yapın: Güncellemeler yapması gereken müşteriler için site siteleri, tasarım değişkenleri parlatır. İletişim bilgileri veya çalışma saatleri gibi sık sık değiştirecekleri içerik için değişkenler ayarlayın. Tasarım ayarlarına dokunmadan bunları güncelleyebilirler.

Tasarım değişkenleri ayrıca Divi'nin tema oluşturucusu ile de çalışır. Bu, başlıklarınızın, altbilgilerinizin ve şablonlarınızın sayfalarınızla aynı değişken havuzu kullandığı anlamına gelir. Sizi sert desenlere kilitleyen diğer sistemlerin aksine, Divi 5'in değişkenleri, organize kalmanıza yardımcı olurken işleri esnek tutar.

Daha fazla bilgi edin

5. iç içe sıralar

17 Nisan 2025'te yayınlanan özellik

Divi 5, düzenler üzerinde daha fazla kontrol sağlayan iç içe satırları tanıtıyor. Bu ek, satırları sütunların içine yerleştirmenizi ve özel kod olmadan önceki sürümlerde mümkün olmayan karmaşık düzenler oluşturmanızı sağlar.

İç içe satırlarla, gelişmiş ızgara düzenleri, dergi tarzı içerik blokları ve kart tabanlı tasarımlar çok daha az çaba ile oluşturabilirsiniz. Kendi çok sütunlu düzenlerini içeren sütunları içeren bir bölüme mi ihtiyacınız var? Şimdi bunu yapımcıda yapabilirsiniz.

Derinlikte bina

İç içe satır eklemek, tıpkı herhangi bir modül eklemek gibi çalışır. Bir bölüm seçin, artı düğmesini tıklayın ve seçeneklerinizden “Satır” seçin. Oradan, iç içe geçmiş bir satır oluşturmak ve içerikle doldurmak için bir satır ekleyebilirsiniz.

Bu görünüşte basit bir değişiklik birçok tasarım olasılığını açar. Kendi sütun yapılarıyla kenar çubuğu widget'ları oluşturabilir, yuvalanmış galerilerle ürün sergileri oluşturabilir veya karmaşık düzenlerle tasarım özelliği karşılaştırma tabloları oluşturabilirsiniz.

En iyi yanı, iş akışınıza nasıl doğal olarak uyduğudur. Öğrenecek yeni bir şey yok. Sadece daha fazla yerde satır kullanıyorsunuz. Divi ile nasıl inşa edileceğini biliyorsanız, iç içe satırları nasıl kullanacağınızı zaten biliyorsunuzdur.

İç içe sıralar site üreticileri için gerçek sorunları çözer. Her hizmetin kendi iki sütunlu düzeni olduğu bir hizmetler bölümü oluşturmak ister misiniz? Daha önce, özel CSS veya karmaşık geçici çözümlere ihtiyacınız var. Şimdi tam olarak inşa edildi.

İçerik-ağır siteler için, karışık sütun genişlikleri ve iç içe içerik alanlarına sahip dergi tarzı düzenler oluşturabilirsiniz. Sayfa düzenini korurken her makale veya özellik kendi sütun yapısına sahip olabilir.

Sadece ilk adım

İç içe sıralar Divi 5'in düzen evriminin sadece başlangıcıdır. Ekip, Divi'yi daha da esnek hale getirmek için tam bir Flexbox tabanlı düzen sistemine doğru çalışıyor.

Gelecekteki güncellemeler, ek düzen kontrolleri sunarak özel kod olmadan karmaşık tasarımlar oluşturmak için daha fazla seçenek sunacaktır. Bu metodik yaklaşım, her yeni özelliğin bir sonrakine geçmeden önce mükemmel çalışmasını sağlar.

Divi geliştirme ekibi, yarı pişmiş özellikleri acele etmek yerine, düzen tasarımının geleceği için kaya gibi sağlam bir temel oluşturuyor. Her adım sonuncuya dayanarak hem geleceğe dayanıklı hem de kullanımı kolay bir sistem oluşturur.

Daha fazla bilgi edin

6. Modül Grupları

1 Mayıs 2025'te yayınlanan özellik

Web siteleri oluşturmak genellikle aynı içerik kalıplarını tekrar tekrar oluşturmak anlamına gelir. Mükemmel bir takım üyesi kartı tasarlarsınız, ardından bir sonraki kişi için yeniden yaratarak yirmi dakika geçirirsiniz. Modül grupları, ilgili öğeleri yeniden kullanılabilir birimlere paketlemenize izin vererek bunu çözer.

İşte değişiklikler: Her parçayı ayrı ayrı tedavi etmek yerine, tam bloklarla çalışırsınız. Ürün kartı, ayrı ayrı seçmeniz gereken altı farklı modül değil, hareket ettiğiniz bir şey haline gelir. Elli ürün kartı boyunca boşluğu ayarlamanız gerektiğinde, her kartı manuel olarak düzenlemek yerine grup şablonunu bir kez güncellersiniz.

Gerçek fayda daha büyük sitelerde ortaya çıkıyor. Düzinelerce ekip üyesi, ürün katalogları veya hizmet listeleri içeren müşteri projeleri yönetilebilir hale gelir. Tekrarlayan montaj işi yapmıyorsunuz-içeriğe ve ince ayarlamaya odaklanıyorsunuz.

Özel Modül Kombinasyonları Oluşturma

Modül grupları, tek modüllerin genellikle işleyemeyeceği olanakları açar. Arka plan görüntüsüne, üst üste binen bir simgeye, bir başlık, bir açıklama ve iki eylem düğmesine ihtiyacınız olan bir servis kartı oluşturun: “Daha fazla bilgi edinin” ve “alıntı alın”.

Modül gruplarıyla, bu öğeleri tam olarak nasıl istediğinizi katmanlarsınız. Bu, standart şablonlara uymayan içerik için yararlı hale gelir.

Fiyatlandırma tabloları için, bir modül grubunda üç iç içe satır kullanabilirsiniz: birinci sırada bir başlık, ikinci sırada fiyat ayrıntıları ve üçüncü bir özellik listesi. Bu, yerleşik fiyatlandırma tablosu modülünün sunmadığı yazı tipleri, renkler ve aralıklar üzerinde bireysel kontrol sağlar.

Aynı yaklaşım, grup yapısında düzenlenen simge, görüntü, başlık ve metin modüllerini kullanarak referanslar için çalışır. Her şeyi tek bir birim olarak yönetilebilir tutarken standart referans modülünden daha fazla düzen esnekliği elde edersiniz.

Anahtar avantaj, sıfırdan binanın düzen kontrolünü, birden fazla elemanı tek parça olarak ele almanın rahatlığı ile birleştirmektir.

Yeniden kullanılabilir bileşen kütüphaneleri oluşturma

Etkili modül grupları oluşturduktan sonra, bunları global öğeler olarak kaydedin. Bu, her projede büyüyen bir bileşen kütüphanesi oluşturur. Stilini rafine ettiğinizde, yirmi sayfada referans düzenlemeleriniz ve ürün vitriniz tasarımda tekrarlanırken tutarlı kalır.

Bir sayfa her oluşturduğunuzda sıfırdan başlamak yerine, tutarlı düzenlerle başlarsınız ve bunları yeni sayfalar ve düzen gereksinimlerine uyarlarsınız.

Divi bulut entegrasyonunun kolaylığını kucaklayın. Bu araçla, bileşenler projeden projeye zahmetsizce geçebilir. Diyelim ki belirli bir istemci sitesi için sağlam bir modül grubu seti geliştiriyorsunuz; Artık bunları yaklaşan ödevler için bir temel olarak kullanabilirsiniz. Bu şekilde, her proje önceki çözümlerden yararlanır, ancak farklı estetiğini korur.

Divi 5'in tasarım sistemi ile sorunsuz bir şekilde çalışıyor

Modül grupları, bunları tasarım değişkenleri ve seçenek grup ön ayarlarıyla kullandığınızda gerçekten ilginç hale gelir. Bir referans grubu oluşturduğunuzu söyleyin: alıntı, yazar adı, şirket ve fotoğraf.

Sabit renkler ayarlamak yerine, marka renk değişkenlerinize başvurursunuz. Alıntı stili için, tipografi için özel yazı tipinizi, boyutunuzu ve çizgi yüksekliğinizi içeren bir seçenek grubu ön ayar oluşturursunuz. Yazar adı için, farklı bir Başlık Seçeneği Grubu ön ayarını uygularsınız.

Şimdi bu modül grubunu küresel bir öğe olarak kaydedin. Bu seçenek grup ön ayarları, sitenizdeki her referansı tasarım sisteminize bağlar. İstemci daha koyu bir gri istiyorsa, değişkeni bir kez değiştirin ve tüm referans grup modülleri güncellenir. Alıntı stilini ayarlamanız gerekiyorsa, tipografi seçeneği grup ön ayarını bir kez düzenleyin; Her referans alıntı anında değişecektir.

Bu, her yere dağılmış bireysel modülleri yöneten yener. Modül gruplarınız sınırlar, arka planlar ve metin stilleri için seçenek grup ön ayarlarını kullanır, böylece tüm gruplandırılmış öğeleriniz aracılığıyla önceden ayarlanmış akışları otomatik olarak güncellemek.

Daha fazla bilgi edin

7. Öznitelik Yöneticisi

16 Mayıs 2025'te yayınlanan özellik

Eylem çağrısı modülünde bir düğmeyi şekillendirdiniz. Renkler işe yarıyor ve havada vuruş efektleri iyi görünüyor. Artık aynı düğme stillerini bir iletişim formunda istiyorsunuz, ancak CTA'nın başlığını veya arka planını istemiyorsunuz.

Düzenli kopyala yapısı burada çalışmaz: her şeyi almazsınız veya hiçbir şey almazsınız. Divi 5, öznitelik yönetimi özelliği sayesinde sadece düğme parçalarını kopyalamanızı sağlar. CTA'yı sağ tıklayın, neyi kopyalayacağınızı seçin,

Ardından bu düğme stillerini iletişim formuna yapıştırın.

Seyahat etmeyi seçin ve seçin

Divi 5 her öğeyi farklı nitelik türlerine böler. Hangilerini kopyalayacağınızı seçiyorsunuz:

• Tüm özellikler - her şey kopyalanır
• Tasarım Özellikleri - Renkler, Boşluk, Ön Ayarlar, ancak Metin veya Görüntü Yok
• Stil özellikleri - sadece özel değişiklikleriniz
• İçerik Özellikleri - Yalnızca metin ve resimler
• Ön ayarlar - Yalnızca önceden ayarlanmış ödevler

Bir düğmenin stilini istediğinizi, ancak metnini değil. Tasarım özelliklerini kopyalayın. Bir bölümün arka plan ön ayarını mı istiyorsunuz, ancak dolgusu değil mi? Yalnızca ön ayarları kopyalayın.

Farklı modüller arasında çalışır

Özellikleri bir tür modülden kopyalayabilir ve farklı bir türe yapıştırabilirsiniz. Örneğin, bir çağrı çağrısı modülünden kopyalayabilir ve bir iletişim formuna yapıştırabilirsiniz. Divi 5, hangi ayarların her iki modül üzerinde çalıştığını ve gerisini yok saydığını anlıyor.

Bu, farklı modül türlerinde aynı stile ihtiyaç duyan inşaat sitelerinde yardımcı olur. Düğmeler kullanan her form, referans veya diğer modül için düğme renklerinizi yeniden oluşturmanız gerekmez.

Grup seviyesi kısayolları

Öznitelik sistemi seçici grup yönetimi ile daha derine iner. Ayarlar panellerini tamamen atlayın. Doğrudan Bağlam menüsünden belirli öznitelik gruplarını sağ tıklayın ve uygulayın.

Mükemmel düğme önceden ayarlanmış bir modülü kopyaladınız mı? Seçici menüden sadece bu düğmeyi ön ayarları diğer öğelere yapıştırabilirsiniz. Sekme avı ve dalış ayar yok.

Aynı hassasiyet sıfırlama için çalışır. İçeriği sağlam tutarken tüm tasarım özelliklerini silin. Veya özel stil geçersiz kılarını korurken yalnızca ön ayarları sıfırlayın.

Kısayollar boyunca hız

Her eylem, bağlam menülerinde görünen klavye kısayollarını alır. Birkaç anahtar kombinasyon ve stil hızlanır. Kısayollar tüm özellik türlerinde tutarlı kalır, böylece parmaklarınız desenleri hızlı bir şekilde öğrenir.

Bu, tıklamaları kaydetmenin ötesine geçer. Yüzlerce element içeren inşaat alanları sırasında, bu mikro efektler saatlerce tasarruf süresine girer. Tekrarlayan manuel çalışma hızlı, hedefli eylemler haline gelir.

Tasarım sisteminizle güzel oynar

Öznitelik yöneticisi doğrudan Divi 5'in önceden ayarlanmış ekosistemine bağlanır. Bu sistem bağlantıları, seçenek grup ön ayarlarını ve tasarım değişkenlerini kullanarak bir modülü kopyaladığınızda ilerler.

Ön ayarları içeren özellikleri yapıştırın ve bu yeni öğeler hemen küresel stil sisteminize takın. Önceden ayarlanmış bir daha sonra güncelleyin ve kopyalanan her öğe değişikliği otomatik olarak yansıtır. Tasarım sisteminiz, hızlı bir şekilde oluşturulurken ve yinelenen öğeleri bağlı kalır.

Daha fazla bilgi edin

8. Ayarlar arama ve filtreleme

29 Mayıs 2025'te yayınlanan özellik

Web siteleri oluşturma ayarları anlamına gelir. Divi modülleri panellerine düzinelerce seçeneği paketler ve o renk alanı için sekmelerden avlanmak gününüzü yiyebilir. Divi 5, Divi 4'ten arama özelliğini geri getirir, ancak daha iyi çalışmasını sağlar.

Her ayar panelinin hemen üstünde bir arama çubuğu alırsınız. İhtiyacınız olanı yazın ve Divi yalnızca eşleşen seçenekleri gösterir. “Sınır” mı arıyorsunuz? Her şey kaybolurken sınırla ilgili her ayar görünür. “Dolgu” i ayarlamanız mı gerekiyor? Tüm boşluk kontrolleri anında açılır.

Bu, işinizi yavaşlatan tıklama ve kaydırmayı ortadan kaldırır. Sekmeleri açmak ve gruplar aracılığıyla avlamak yerine saniyeler içinde ihtiyacınız olanı bulabilirsiniz.

Değiştirdiğin şeyle filtre

Gerçek zaman tasarrufu “değiştirilmiş” filtredir. Tıklayın ve yalnızca ayarladığınız ayarları görün. Bu, bir düzen paketi veya başlangıç ​​sitesi aldığınızda ve neyin özelleştirildiğini görmek istediğinizde yardımcı olur.

Bir iş düzeni içe aktardığınızı ancak renkleri değiştirmek istediğinizi varsayalım. Değiştirilmiş filtreye basın ve her modülden kazmadan her özel renk seçeneğini tespit edin. Hangi yazı tiplerinin değiştirildiğini, hangi aralığın değiştirildiğini ve hangi etkilerin eklendiğini görebilirsiniz.

Bu, müşteri projeleri için de harika çalışıyor. Birisi sitelerinde ne özelleştirdiğinizi sorduğunda, değiştirilmiş filtre çalışmanızı net bir şekilde gösterir.

Akıllı filtreleme seçenekleri

Değiştirilmiş filtrenin ötesinde, ayarları ayarlayarak sıralama alırsınız. Paletinizi güncellerken, “Renkler” filtresi her renk alanını bir kerede gösterir. Tipografi değişikliklerine ihtiyaç duyulduğunda, “yazı tipi aileleri” ve “yazı tipi ağırlıkları” filtreleri tüm modüllerinizdeki metin ayarlarını ortaya çıkarır.

Sistem en çok hangi ayarların önemli olduğunu bilir. Renkler ve yazı tipleri filtrelerini alır çünkü insanların yaptığı en yaygın değişikliklerdir. Aralık ayarlamaları sık sık gerçekleştiğinden boyutlar gruplanır.

Site çapında değişiklikler yaparken bu filtreler tıklamaları kaydeder. Her modülü ayrı ayrı açmak yerine, değiştirmeniz gereken ayarların filtrelenmiş listeleri aracılığıyla çalışırsınız.

Daha fazla bilgi edin

Divi 5 popüler seçeneklere karşı nasıl birikir?

Web sitesi oluşturucu pazarı seçeneklerle doludur, ancak Divi 5 gerçekten yeni özellikler sayesinde öne çıkıyor. İşte Divi 5'i farklı kılan şeylere bir bakış:

Bu projeleriniz için ne anlama geliyor?

Divi 5'in özellik kombinasyonu, diğer inşaatçıların tam olarak eşleşemediği bir tasarım sistemi yaratır. Seçenek grup ön ayarları ve modül grupları tek başına divi 5'i rakiplerin önüne koyar.

Tasarım değişkenleri ön ayarlar ve modül gruplarıyla çalıştığında, çok yönlü bir şey elde edersiniz. Referans değişkenleri ön ayarların içindeki değişkenler, bunları gruplandırılmış öğelere uygulayın ve değerleri değiştirme her öğeyi sitenizdeki otomatik olarak günceller. Yaklaşan FlexBox ve Loop Builder özelliklerini karışıma ekleyin ve kendinizi özel kodlamaya ihtiyaç duymadan herhangi bir web sitesi oluştururken bulacaksınız.

Sırada ne olacak?

Divi 5 yol haritası, yakında inecek sürekli güncellemeleri gösterir. Geliştiricilerimiz, yedi takıma ayrılmıştır, farklı özelliklerde tam zamanlı çalışır, en az iki haftada bir gönderim güncellemeleri. İşte önümüzdeki haftalarda bekleyebileceğiniz bir göz atın:

FlexBox Düzenleri

En büyük değişiklik, tamamlanmadan birkaç hafta uzaklıktaki tam FlexBox düzen sistemidir. Bu, düzeni nasıl oluşturduğunuzun yerini alacaktır. Özel CSS yerine yeni satır şablonları, otomatik dikey merkezleme, içerik sarma ve aralık dağılımı alacaksınız.

Modül grupları, ilgili modülleri birlikte paketleyen kaplar olarak gönderilir. Flexbox ile birlikte, dergi düzenleri, eşleşen yüksekliklere sahip ürün sergileri ve daha önce geçici çözümler gerektiren karmaşık hizalamalar oluşturabilirsiniz. Flexbox geldiğinde özel bölümler kaybolur.

Loop Builder ve WooCommerce güncellemeleri

FlexBox Düzen Sistemi ve Modül Grupları üzerine inşa edilen Döngü Oluşturucu, tek modüller, gruplar veya tüm bölümler: her şeyi tekrarlamanıza izin verecektir. Sizi şablonlara kilitleyecek diğer inşaatçıların aksine, neyin tekrarladığını tanımlayacak ve onu dinamik içeriğe bağlayacaksınız. İç içe döngüler de işe yarayacak. Örneğin, her yazı ilmekli incelemeler göstererek, yayınlar boyunca dönecek blog kategorileri.

WooCommerce modülleri Divi 5'in mimarisi kullanılarak sıfırdan yeniden inşa edilecektir. Mevcut modüller geriye dönük uyumluluk yoluyla çalışır, ancak ön ayarlar veya değişkenlerle etkileşime girmez. Yeni ürün modülleri birkaç hafta içinde tamamlanacak ve WooCommerce desteğini beta için yola koyacak.

Gelişmiş Renkler

Ton, doygunluk ve hafiflik (HSL) desteği ile göreceli renkler matematiksel renk ilişkileri oluşturmanızı sağlar. Birincil renginizi bir kez ayarlayın, ardından otomatik olarak varyasyonlar oluşturun: “Birincil mavi ama% 20 daha hafif” veya tabanı değiştirdiğinizde güncelleme yapan tamamlayıcı tonlar.

Beta ve göç planlaması

Beta üç hedef tamamlandığında başlar: mevcut siteler için gelişmiş geriye doğru uyumluluk, WooCommerce modül desteğini tamamlayın ve alfa geri bildirimlerine dayalı sürekli hata düzeltmeleri.

Mevcut ilerlemeye geçersek, birkaç ay içinde bir beta önerir. Ekip ayrıca arka uçta çalışıyor, böylece Divi 4 siteleri değişiklik gerektirmeden göç edebiliyor. Divi pazarından üçüncü taraf modüllerin tam uyumluluğa ihtiyacı vardır.

Yeni projeler için Divi 5 Alpha çoğu yapı için yeterli özellik sağlar. Sadece performans iyileştirmeleri anahtarı haklı çıkarır. Mevcut siteler, belirli yeni özelliklere gerek olmadığı sürece beta beklemekten yararlanır.

Beta geldiğinde, eksiksiz özellik setini artı güven elde edersiniz. Resmi sürüm kısa bir süre sonra takip ederek size gelecekteki projeler için sağlam bir temel oluşturuyor.

Divi 5'i denemeye hazır mısınız? İşte nasıl başlayacağınız

Bu Divi 5 özel özellikleri farklı bir şey yaratmak için birlikte çalışır. İnşaatçınız tutarlı tasarımlar için savaşmak yerine, kendilerini koruyan sistemler kurdunuz. Aynı stilleri tekrar tekrar yeniden inşa etmek yerine, bir kez yaratırsınız ve her yerde yeniden kullanırsınız - ve bu sadece başlangıçtır!

Bu nedenle, Divi 5'i kullanarak yeni bir web sitesi oluşturarak bugün eğrinin önüne geçin. Tüm Divi üyeleri için ücretsiz olarak kullanılabilir. Hesap alanınıza gidin ve bir kopya alın.

WordPress yüklendikten sonra, normal bir tema yüklediğiniz gibi divi 5'i yükleyin: görünüm> temalar> yeni ekle> tema yükleyin. Temayı etkinleştirin, kimlik bilgilerinizle giriş yapın ve inşa edin! İlk yapınız size neden her şeyi sıfırdan yeniden inşa ettiğimizi gösterecektir.

Unutmayın: Divi 5'i şu anda yalnızca yeni web siteleri için kullanın. Alfa aşamasında mevcut sitelerin taşınmasını önermiyoruz.