Divi 5 ile sayfalarınızı nasıl verimli bir şekilde oluşturabilirsiniz?

Yerden yeniden inşa edilen Divi 5, yıldırım hızlı performansa sahiptir ve site çapında stil için tasarım değişkenleri, sonsuz düzen derinliği için iç içe sıralar ve iş akışınızı artırmak için önceden ayarlanmış tasarım gibi yeni özellikler sunar. Modern, yenilenmiş bir görsel inşaatçı ile Divi 5, sıfırdan başlayarak veya binlerce önceden oluşturulmuş düzenden yararlanarak çok az çaba sarf etmeden profesyonel web siteleri oluşturmanıza olanak tanır.

Bu yazıda, Divi 5'in benzersiz özelliklerini ve UI geliştirmelerini ve sayfalarınızı daha verimli bir şekilde oluşturmanıza nasıl yardımcı olduklarını vurgulayacağız. Duyarlı düzenler oluşturmaktan modül grupları ve Divi AI gibi yenilikçi özelliklerden yararlanmaya kadar, Divi 5'in web tasarımını nasıl daha hızlı, daha akıllı ve daha yaratıcı bir deneyime dönüştürdüğünü göreceksiniz.

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

Bununla birlikte, dalış yapalım.

Divi 5'in modern kullanıcı arayüzünü anlamak

Divi 5'in arayüzü, hız, esneklik ve sezgisel kodsuz tasarım için tasarlanmış selefinin tam bir revizyonudur. Visual Builder, daha temiz ayarlar paneli, duyarlı tasarım geçişleri ve bölümlerin, satırların, sütunların ve modül gruplarının kesintisiz navigasyonu için iç içe geçmiş katmanlar arayüzü ile gerçek zamanlı ön uç düzenleme sunar.

Daha hızlı bir temel ile geliştirilen Divi 5, sonsuz düzen derinliği için iç içe satırlar, aerodinamik modül yönetimi için modül grupları ve tutarlı stil için tasarım değişkenleri gibi benzersiz özellikler sunar. Bu gelişmeler Divi 5'i yeni başlayanlar için erişilebilir ve profesyoneller için güçlü hale getirerek, web sitelerinin WordPress üzerine nasıl inşa edildiğini dönüştürüyor.

Görsel Oluşturucu Evrimi

Divi 5'in Visual Builder, güçlü ve kullanıcı dostu aerodinamik bir deneyime sahip yeniden tasarlanmış bir arayüze sahiptir. Divi 4 ile karşılaştırıldığında, Divi 5, dağınıklığı azaltan ve seçenekleri mantıklı bir şekilde düzenleyen daha temiz, daha sezgisel bir ayar paneli sunarak ayarlamaları daha hızlı hale getirir.

Yeni duyarlı tasarım geçişleri, birkaç masaüstü, tablet ve mobil görünüm arasında geçiş yapmanızı sağlar ve tasarımların tüm cihazlarda kusursuz görünmesini sağlar. Bu kullanıcı arayüzü geliştirmeleri, Divi 5'i yeni başlayanlar için erişilebilir hale getirir ve hassas profesyonellerin talebini sunar.

Sezgisel gezinme

Karmaşık düzenlerde gezinmek Divi 5'in katmanları arayüzü ile zahmetsizdir. Bu arayüz bölümleri, satırları, sütunları, modülleri ve yeni modül gruplarını net, hiyerarşik bir yapıya dönüştürür. Tek bir modülü ayarlayarak veya tüm bir bölümü yeniden yapılandırarak, tasarımınızın öğelerine kolayca girmenizi sağlar.

Sürükle ve bırak arayüzü şeyleri basitleştirirken, tel çerçeve modu sayfanızın yapısının kuş gözü görünümünü sağlar. Bu araçları birleştirerek, Divi 5, karmaşık düzenleri sezgisel hale getirir, zaman kazandırır ve hayal kırıklığını azaltır.

Duyarlı Tasarım Kontrolleri

Divi 5, tasarımlarınızın cihazlara nasıl uyum sağladığı konusunda hassas kontrol için özelleştirilebilir kesme noktaları sunar. Önceden tanımlanmış yedi kesme noktası arasından seçim yapabilir veya belirli cihaz çözünürlüklerini eşleştirecek özel değer ayarlayabilirsiniz. Bu, manuel CSS ayarları olmadan piksel mükemmel düzenler sağlar.

Bu granüler kontrol, sıvı ölçeklendirme için CLAMP () gibi gelişmiş birimlerle birleştiğinde, tasarımlarınızın tüm ekran boyutlarında tutarlı ve görsel olarak çekici kalmasını sağlar.

Sayfanızı Divi 5'in benzersiz özellikleriyle oluşturmak

Divi 5, Divi'yi nasıl kullandığınızı yeniden tanımlayacak yenilikçi araçlar sunar. İç içe satırlar, karmaşık düzenler için sonsuz satır yuvalamasına izin verirken, modül grupları stilleri basitleştirir ve birden fazla modülü tek bir birim olarak yönetir. Tasarım değişkenleri, renkler, yazı tipleri ve daha fazlası için site çapında tutarlılığı sağlar ve gelişmiş birimler, duyarlı tasarımlar için Clamp () ve Calc () gibi dinamik CSS işlevlerini destekler. Seçenek grubu ön ayarları ile önceden ayarlanmış tasarım, öğeler arasında stilleri akarsular ve Divi AI içerik oluşturmayı hızlandırır. Bu özellikler birlikte, kullanıcıları profesyonel, duyarlı web siteleri verimli bir şekilde oluşturmaya güç verir.

Aşağıda, bir web sayfası oluşturmak için bu araçların nasıl kullanılacağını detaylandırıyoruz.

1. Verimli stil için tasarım değişkenleri

Tasarım değişkenleri, site çapında uygulanabilen renkler, yazı tipleri, sayılar, görüntüler, metin ve bağlantılar için kullanılabilecek global ayarlardır. Visual Builder'daki Global Değişkenler simgesini tıklayarak değişkenleri tanımlayabilirsiniz.

Tasarım değişkenlerini kullanmanın yararı, bu değişkenin tüm örneklerini güncellemek için bir kez güncelleyebilmeniz, tutarlılık ve zaman tasarrufu sağlayabilmenizdir. Örneğin, başlıklara CLAMP () hesaplamaları atamak için sayı değerleri belirlerseniz, web siteniz boyunca metin için küresel bir hiyerarşi oluşturursunuz. Hızlı bir değişiklik yapmanız gerekiyorsa, uygulanan bu değişkenlere sahip herhangi bir başlık veya metin modülü sitenizde güncellenir ve her örnekte doldurulan hızlı tasarım değişiklikleri yapmanıza izin verir.

Tasarım Değişkenleri Nasıl Kullanılır

Tasarım değişkenlerinin potansiyelini en üst düzeye çıkarmak için, bunları tasarım sürecinize erken dahil edin. Başlangıçta değişkenlerin oluşturulması, tekrarlayan görevlerden ziyade yaratıcılığa odaklanmanızı sağlayan tutarlı bir çerçeve oluşturur. Visual Builder'daki Değişken Yönetici simgesini tıklayarak başlayın.

İletişim kutusu göründüğünde, tasarımınızın temelini oluşturmak için değişkenler ekleyebilirsiniz. Örneğin, duyarlı tipografi oluşturmak için sayı değişkenlerini kullanabilirsiniz.

Sayı değişkenleri aralık için de kullanılabilir. Örneğin, web sitenizdeki tüm sütunlar ve satırlar için standart bir boşluk oluşturabilirsiniz. Calc (% 80 - 60px) gibi bir Calc () formülü kullanmak, bir tasarım öğesinin genişliğini kabın% 80'i olarak belirlerken, her iki tarafa 30 piksel dolgu ekler. Formülü uygulamak için açılır menüden Calc'ı seçin.

Calc () formülünü değer alanına girin. Değişken yöneticiye eklemek için değişkenleri Kaydet düğmesini tıklayın.

Değişkenleriniz kaydedildikten sonra Divi, bunları tasarımınız boyunca uygulamanızı kolaylaştırır. Boşluğu kullanmak için bir satır, sütun veya modül üzerine tıklayın, Tasarım sekmesine gidin ve genişlik alanını arayın.

Son olarak, Global Aralık Değişkenini seçmek için Dinamik İçerik Ekle simgesini tıklayın.

Daha önce belirtildiği gibi, bir tasarım değişkeni uygulamak sitenizde tutarlılık sağlar. Değişken yöneticideki özelliklerinin güncellenmesi, tüm örnekleri anında senkronize ederek saatlerce manuel ayarlamalardan tasarruf sağlar.

Tasarım değişkenlerini kullanmak için ipuçları

• Değişkenlerinizi düşünceli bir şekilde düzenleyin: Karmaşık projelerde tanımlanmasını kolaylaştırmak için değişkenleri tanımlayıcı bir şekilde adlandırın.
• Kaldıraç Ön Ayarları: Modüller için yeniden kullanılabilir stil şablonları oluşturmak için tasarım değişkenlerini Divi'nin küresel ön ayarlarıyla birleştirerek yeni sayfalar için kurulum süresini azaltır.
• Test Duyarlanabilirliği: Tüm değişkenlerin beklendiği gibi gerçekleştirilmesini sağlamak için görsel oluşturucudaki cihazlar arasında değişken güdümlü tasarımları önizleyin.

2. Seçenek grubu ön ayarlarına sahip önceden ayarlanmış tabanlı tasarım

Divi 5'in önceden ayarlanmış Tasarım Sistemi, stilin iki güçlü araçla devrim yaratır: eleman ön ayarları ve seçenek grup ön ayarları. Bu özellikler, konfigürasyonları kaydetmenizi ve yeniden kullanmanızı, tutarlılığı sağlayarak ve proje iş akışınızı düzene koymanızı sağlar.

Divi 5 eleman ön ayarları

Eleman ön ayarları, web sitenizde yeniden kullanmak için bir modülün yapılandırmasını metin, renkler, tipografi, aralık ve vites etkileri dahil olmak üzere kaydetmenize olanak tanır. Örneğin, belirli bir yazı tipi, gradyan arka planı ve bir havza animasyonuna sahip tamamen stilli bir düğme modülü oluşturabilirsiniz. Bir öğe ön ayar olarak kaydedildikten sonra, aynı stili koruyarak sitenizdeki herhangi bir düğmeye tek bir tıklama ile uygulayabilirsiniz. Önceden ayarlanmayı güncellerseniz, arka planı düz bir renge dönüştürmek gibi, bu düğmenin her örneği otomatik olarak güncellenir, tekrarlayan düzenlemeleri ortadan kaldırır ve birleşik bir görünüm sağlar.

Divi 5 Seçenek Grup Ön Ayarları

Buna karşılık, seçenek grup ön ayarları, uyumlu tasarımlar için farklı öğelere uygulanabilen tipografi, sınırlar veya gölgeler gibi yeniden kullanılabilir stil gruplarına odaklanır. Örneğin, 5 piksel yarıçaplı 1 piksel siyah kenarlık için bir seçenek grubu ön ayarı oluşturabilir ve düğmeler, görüntüler ve satırlarda kullanabilirsiniz.

Daha sonra ön ayarı 2 piksel bir kenarlık olarak ayarlarsanız, tüm bağlantılı öğeler anında güncellenir, zamandan tasarruf eder ve tutarlılığı korur. Bu modüler yaklaşım, stil gruplarını elementler boyunca karıştırmanıza ve eşleştirmenizi sağlar ve kontrolden ödün vermeden esneklik sağlar.

Ön ayarları etkili bir şekilde nasıl kullanılır

Bir başlangıç ​​sitesi veya önceden hazırlanmış düzen ile başlarken eleman ön ayarları zaten mevcuttur. Ancak, sıfırdan bir web sitesi oluştururken, önce bunları oluşturmanız gerekir. Bu ön ayarları oluşturmak, web sitenizdeki benzer modülleri anında şekillendirerek tasarım sürecini hızlandırmanıza olanak tanır.

Bir öğe ön ayar oluşturma

Bir öğe ön ayar oluşturmak için, istediğiniz ayarları içeren bir modül stilini kaldırın. Ardından, modülün ayarlarının sağ üst köşesindeki önceden ayarlanmış menüyü tıklayın .

Yeni bir ön ayar oluşturmak için geçerli stillerden yeni ön ayarları tıklayın.

Ön ayara bir ad verin, varsayılan olarak atayacağınızı seçin ve kaydedin. Varsayılan ön ayar olarak seçerseniz, sitenize eklediğiniz her akordeon aynı şekilde şekillendirilir, bu da web sayfalarınızı daha hızlı ve daha verimli bir şekilde oluşturmanızı kolaylaştırır.

Bir Opsiyon Grubu Ön Ayar oluşturun

Bir opsiyon grubu ön ayarı oluşturma işlemi biraz farklıdır. Bir modüle ön ayar uygulamak yerine, bir modülün diğer modül türlerine, sütunlara, satırlara ve hatta bölümlere taşınabilen yönlerine ön ayarlar atayabilirsiniz. Seçenek grup ön ayarları, sınırları şekillendirmek, dönüşüm kontrolleri, filtreler, kutu gölgeleri ve daha fazlasını eklemek için mükemmeldir, bu da daha küçük öğeleri tutarlı tutmanıza izin verir.

Örneğin, görüntüler ve sütunlar için bir sınır stili oluşturmak istersiniz. Bir görüntü modülü seçin, tasarım sekmesine gidin ve bir grup ön ayar simgesi görünene kadar kenar ayarlarının üzerine gelin.

Ardından, Yeni Ön Ayar Ekle'yi tıklayın.

Sınırı şekillendirin, adlandırın ve ön ayarları kaydedin.

Divi 5'in tasarım tabanlı ön ayarlarını kullanmak için ipuçları

Eleman ön ayarlarını ve seçenek grup ön ayarlarını birleştirmek, ölçeklenebilir bir tasarım sistemi oluşturmanızı sağlar. Divi 5 ile bir web sayfası oluşturmak için bunları etkili bir şekilde kullanmak için bazı ipuçları:

• Verimlilik için bunları kullanın: Özellikle büyük web siteleri için sayfa oluşturmayı hızlandırmak için öğe ön ayarları veya seçenek grup ön ayarları oluşturun. Bu yöntem, bir modül, satır veya bölümü tekrar tekrar şekillendirmenizi sağlar. Önde stiller oluşturursunuz ve gerektiğinde bunları uygularsınız.
• Tasarım Tutarlılığı Oluşturma: Ön ayarlar, marka kimliğinizi ve profesyonel cilalarınızı güçlendirerek unsurlar arasında düzgün bir şekillendirme sağlar.
• Siteniz Tasarım Değişiklikleri gerektirdiğinde ön ayarları düzenleyin: Ön ayarlar, tek tek öğeleri manuel olarak düzenlemeden genel stilleri güncellemenize olanak tanıyarak tasarım yinelemeleri veya istemci revizyonları için idealdir.
• Ölçeklenebilirlik için bunları kullanın: Genellikle güncelleme gerektiren siteler için sağlam bir çerçeve oluşturmak için ön ayarları tasarım değişkenleriyle birleştirebilirsiniz. Yolda bir sayfa eklemeniz mi gerekiyor? Ön ayarlar bunu daha hızlı ve daha verimli bir şekilde yapmanıza olanak tanır.

3. Esnek düzenler için iç içe satırlar

Divi 5'teki iç içe sıralar, Divi 4'ün özel bölümlerini daha esnek, sonsuz yuvalanabilir bir sistemle değiştirir. Geleneksel sıraların aksine, iç içe sıralar sütunlara yerleştirilebilir, bu da hemen hemen her yapılandırmada satırları, modülleri veya ek iç içe satırları istiflemenizi sağlar.

Yuvalanmış bir satır oluşturmak için, görsel oluşturucu aracılığıyla bir sütuna veya bir sütun içindeki bir modülün altına bir tane ekleyin ve modüller veya daha fazla iç içe sıralarla doldurun.

Bu özellik, karmaşık, katmanlı düzenler oluşturmanızı sağlar. Örneğin, yaklaşık bir bölümde, kullanıcıları farklı sayfalara yönlendirmek için düğmeler eklemek için bir metin modülünün altına 3 sütunlu iç içe satır yerleştirebilirsiniz.

Divi 5'te yaklaşan FlexBox kontrolleri, fiyatlandırma tabloları, portföyler veya çok katmanlı içerik bölümleri gibi karmaşık tasarımlar için hassas hizalama ve aralık sunarak konumlandırma seçeneklerini geliştirecektir.

İç içe satırlar nasıl kullanılır

İç içe sıraların gücünden yararlanmak için görsel oluşturucudaki bu adımları izleyin:

Sayfa düzeninize standart bir satır ekleyerek başlayın. Bu temel görevi görecektir. Ardından, yeni iç içe satırınız için sütun seçeneklerini ortaya çıkarmak için yeni satır sekmesini tıklayın.

Ardından, ilk sütun için modülü seçin. Bu örnek için bir görüntü.

İkinci sütunda başka bir resim ekleyin. Sınırlar, kutu gölgeleri için seçenek grup ön ayarları oluşturabilirsiniz ve oradan etkileri dönüştürebilirsiniz.

Diğer sütuna veya birincisinin altına iç içe satırlar ekleyebilirsiniz. Olasılıklar sonsuzdur.

Birden fazla seviye derinlikte gelişmiş düzenler oluşturabilirsiniz. Örneğin, Divi'nin önceki sürümlerinde eksik olan iki düğme yan yana iki düğme içerecek şekilde iç içe bir satırla bir fiyatlandırma tablosu yapabilirsiniz. Divi ile bir web sayfası oluştururken onları çok yönlü bir özellik haline getiren iç içe satırları kullanmanın birkaç yolu vardır . Kahraman bölümleri, takım sayfaları, üstbilgiler, altbilgiler ve daha fazlasını inşa etmek için mükemmeldir.

İç içe satırları kullanmak için ipuçları

• Önce düzeninizi planlayın: iç içe satırlar eklemeden önce, çok katmanlı kahraman bölümleri, fiyatlandırma tabloları veya ekip ızgaraları gibi değer sağladığını belirlemek için sayfa yapınızı çizin.
• Modüler Tasarımlar İçin Kullanın: Referanslar için görüntü ve metin içeren bir satır gibi yeniden kullanılabilir bileşenler için iç içe satırlar oluşturun, ardından tüm web sitenizde tutarlı bir stil için çoğaltın veya kaydedin.
• Modül gruplarıyla birleştirin: Karmaşık düzenleri düzenlemek için iç içe sıraları modül gruplarıyla eşleştirin.
• Divi'nin duyarlı kesme noktalarını kullanın: iç içe geçişler kullanarak Divi 5'in yedi kesme noktasında iç içe sıraları test edin, iç içe öğelerin tüm cihazlarda düzgün bir şekilde hizalanmasını sağlamak için.

4. Organize içerik için modül grupları

Modül grupları, Divi 5'te bir sütun içinde birden fazla modül gruplamanızı sağlayan kaplar olarak hareket eder. Onları tek bir birim olarak stil, hareket ettirebilir veya çoğaltabilirsiniz. Özellikle karmaşık tasarımlar için iş akışınızı basitleştirebilir ve yaklaşan Flexbox desteği için zemin hazırlayabilir ve daha da hassas konumlandırma seçeneklerinin kilidini açabilirler.

Oradan tasarım modülleri ve iç içe satırlar ekleyebilir veya Divi kütüphanesine veya Divi bulutuna kolayca çoğaltabileceğiniz veya kaydedebileceğiniz stil düzenleri oluşturmak için gruba seçeneği grup ön ayarlarını uygulayabilirsiniz.

Modül Grupları Nasıl Kullanılır

Bir modül grubu oluşturmak için yeni bir satır ekleyin ve bir sütun yapısı seçin. Divi 5'in mevcut seçeneklerinden grup modülünü seçin.

Modül grubunun içine metin, görüntüler, düğmeler ve hatta iç içe satırlar gibi modüller ekleyebilirsiniz. Örneğin, bir hareket çağrısı bölümü için bir başlık, metin, görüntü ve bir düğme içeren bir grup oluşturabilirsiniz.

Stille, grubun sağ üst köşesindeki Elipsis menüsüne tıklayarak modül grubunu kaydedebilir veya çoğaltabilirsiniz.

Modül grupları ekip üyesi bölümleri, harekete geçirici mesaj bölümleri, iç sayfa başlıkları ve daha fazlasını oluşturabilir. Ancak daha da önemlisi, FlexBox gibi özellikler ve Loop Builder piyasaya sürüldüğünde modül grupları son derece yararlı olacaktır.

Modül gruplarını kullanmak için ipuçları

• Plan modülü grupları stratejik olarak: CTA'lar, referanslar, ekip üyeleri veya ürün kartları gibi yeniden kullanılabilir bileşenler için modül gruplarını kullanın. Bina sürecini kolaylaştırmaya ve organizasyonu sürdürmeye yardımcı olurlar.
• Modül gruplarını ön ayarlarla birleştirin: Birden fazla grupta tek tip gölgeler veya sınırlar gibi tutarlı şekillendirme için seçenek grup ön ayarlarını modül gruplarına uygulayın.
• Divi Cloud'u kullanın: Özellikle benzer tasarım ihtiyaçlarına sahip müşteriler için projeler arasında hızlı erişim için Divi Cloud'a sık kullanılan modül gruplarını kaydedin.

Modül gruplarını kullanarak, yönetilmesi ve ölçeklendirilmesi kolay modüler, organize tasarımlar oluşturabilir, bu da onları basit veya daha karmaşık web sayfaları oluşturmak için ideal hale getirebilirsiniz.

5. Dinamik tasarım için gelişmiş birimler

Divi 5'in Gelişmiş Birimleri özelliği, daha geniş bir CSS ünitesini (PX, VW, REM, %, vb.) Destekler ve tek bir giriş alanında Calc (), Clamp (), Min () ve Max () gibi işlevleri destekler ve dinamik ve duyarlı tasarımları etkinleştirir. Örneğin, bir bölümün genişliğini ViewPort boyutuna göre ölçeklendiren sıvı tipografi için hesap (% 100 - 40 piksel) veya kelepçe (20px, 3VW, 40px) olarak ayarlayabilirsiniz.

Gelişmiş birimler, küresel kuralları ayarlamak ve tasarımları sitenizde tutarlı tutmak için tasarım değişkenleri olarak da kullanılabilir.

Gelişmiş birimler nasıl kullanılır

Gelişmiş birimleri kullanmanın birkaç yolu vardır, ancak en etkili yol onları tasarım tutarlılığı için tasarım değişkenleriyle birleştirmektir. Ancak, bunları modül düzeyinde atamak istediğiniz durumlar olabilir.

İyi bir örnek metinle ilgilidir. Elbette, tüm sitenizdeki boyutu kontrol etmek için değişken yöneticiye CLAMP () formüllerini ayarlayabilirsiniz, ancak daha iyi öne çıkması için alan ekleyerek daha etkili bir başlık yapmak istiyorsanız? Gelişmiş birimler devreye giriyor.

Göstermek için web sayfanıza bir başlık modülü eklemek için tıklayın. Tasarım sekmesinde boyutlandırma alanına gidin.

Genişlik alanının yanında, gelişmiş birim seçeneklerini ortaya çıkarmak için - simgesini tıklayın.

Açılır menüden VW'yi (ViewPort Genişliği) seçin ve 50 girin. Bu, başlığın görünüm sporunun genişliğinin% 50'sini işgal etmesini söyleyecektir. Viewpor, Web Tarayıcı penceresinin görünür alanıdır. Bu nedenle, tarayıcı penceresinin ne kadar geniş olduğuna bakılmaksızın, her zaman tarayıcı penceresinin genişliğinin yarısı olacaktır.

Başlığın diğer ekran boyutlarında nasıl görüneceğini önizlediğinizde, ne olursa olsun başlığın aynı genişlikte kaldığını fark edeceksiniz.

Gelişmiş birimleri kullanmak için ipuçları

• Basit başlayın: Basit tasarımlar için PX veya % gibi temel birimlerle başlayın, ardından duyarlı efektler için CLAMP (), Calc (), VH veya VW ile deneyin.
• Tipografi için kelepçe kullanın: Manuel kesme noktaları olmadan herhangi bir ekran boyutuna uyum sağlayan sıvı, erişilebilir tasarımlar oluşturmak için yazı tipi boyutlarına veya aralıklara CLAMP () uygulayın.
• Tasarım değişkenleriyle birleştirin: Tutarlılığı korumak ve güncellemeleri basitleştirmek için tasarım değişkenleri olarak başlıklar ve gövde metni için sık kullanılan birimleri saklayın.

Gelişmiş birimler, Divi'nin kodsuz arayüzünde özel CSS'nin hassasiyetini verir, bu da herhangi bir cihaza sorunsuz bir şekilde adapte olan dinamik, profesyonel web sayfaları oluşturmayı kolaylaştırır.

6. Divi AI entegrasyonu

Divi AI, metin, görüntüler, kod veya tüm bölümler ve düzenler üreterek tasarım sürecini doğal dil istemlerine göre geliştirir. Divi 5'teki Visual Builder içinde çalışır, gerektiğinde biraz tasarım veya metin yazarlığı yardımı kolaylaştırır.

Örneğin, “Başlık, düğme ve arka plan görüntüsü içeren modern bir kahraman bölümü oluştur” gibi bir istemi kullanabilirsiniz. Divi AI, vizyonunuza uyacak şekilde manuel olarak rafine edebileceğiniz tamamen tarz bir düzen üretecektir.

Divi AI ile tasarım sürecini hızlandırabilir, yazar bloğunun üstesinden gelebilir veya gerektiğinde biraz yaratıcı bir itme yapabilir.

Divi Ai Nasıl Kullanılır

Divi 5'te bir web sayfası oluştururken Divi AI'dan en iyi şekilde yararlanmak için, marka kopyası yazmanıza, görüntüler oluşturmanıza, mevcut modüllere bazı CSS eklemenize veya hatta bölümler oluşturmanıza yardımcı olmak için kullanabilirsiniz. Divi AI, ziyaretçilerinizle rezonansa giren güzel web sayfaları oluşturmanıza yardımcı olabilir.

Mevcut bir metin modülünde Divi AI kullanmak için metin alanının üzerine gelin ve içerik sekmesindeki Divi AI simgesini tıklayın.

Birden çok seçeneğe sahip bir iletişim kutusu görünecektir. Mevcut içeriği yazabilir ve değiştirebilir, uzatabilir, kısaltabilir veya basitleştirebilir, yazım ve dilbilgisini düzeltebilir, çevirebilir veya hatta tonu değiştirebilirsiniz.

Bir seçenek seçtikten sonra, Divi AI, mevcut içeriğe göre kopyayı değiştirir. Bittikten sonra, metni kullanabilir, yeniden deneyebilir, AI ile geliştirebilir veya sonucu birkaç yol gösterici kelimeyle hassaslaştırabilirsiniz.

Divi Ai kullanmak için ipuçları

• İstemlerinize özgü olun: Görüntüler veya bölümler oluşturmak için Divi AI kullanırken ton, renkler veya düzen tercihleri ​​gibi ayrıntıları ekleyin. Aynı şey metin ve kod için de geçerlidir. Ne kadar spesifik olursa, çıktı o kadar iyi olur.
• Gerektiğinde yineleme: Başlangıç ​​çıkışı ideal değilse, en iyi uyumu bulmak için istenmenizi geliştirin veya birden fazla varyasyon oluşturun.
• İlham için kullanın: Divi AI kullanmanın en iyi yollarından biri, web sayfanızı ağır bir şekilde özelleştirmeyi planlasanız bile, düzen kavramları veya slogan oluşturmak gibi fikirleri beyin fırtınası yapmaktır.

Divi 5 ile web sayfaları oluşturmak için en iyi uygulamalar

Divi 5'in özelliklerine stratejik bir yaklaşım benimsemek, potansiyelini en üst düzeye çıkarmak için esastır. Tasarım sisteminizi önceden planlayarak başlayın. Birincil ve ikincil renkler, ilgili bağlantılar, tipografi ayarları ve yazı tipleri gibi çekirdek tasarım değişkenlerini tanımlayın.

Sayfanızı oluştururken, iş akışınızı hızlandıran ve sitenizde uyumlu bir estetiği koruyan düğme kaydırma efektleri, gölgeler veya tipografi gibi yeniden kullanılabilir stiller için seçenek grup ön ayarlarını oluşturun.

Erken ve genellikle test etmek olumlu sonuçlar için de çok önemlidir. Tüm cihazlarda iyi görünmelerini sağlamak için gelişmiş birimleri önizlemek için Divi 5'in duyarlı kesme noktalarını kullanın. Divi 5'in duyarlı geçişleri size keşfedmeniz için yedi kırılma noktası verir ve tasarımınızın farklı büyüklükteki ekranlarda nasıl görüneceğine dair daha iyi bir fikir verir.

Esneklik ve tutarlılığı dengelemek için öğe ön ayarlarını seçenek grup ön ayarlarıyla birleştirin. Stilli bir CTA modülü gibi belirli modüller için eleman ön ayarlarını kullanın. Buna karşılık, tekdüzeliği korumak için, sınır stilleri veya gölgeler gibi paylaşılan özellikler için seçenek grup ön ayarlarını uygulayın. Güncellemeler gerektiğinde, bu önceden ayarlanmış grupları tek tek öğeleri manuel olarak düzenlemek yerine küresel değişiklikler için ayarlayabilirsiniz.

Son olarak, performans ve kullanılabilirliği korumak için tasarımlarınızı kolaylaştırın. Aşırı yuva yapmaktan kaçının veya gerekmedikçe karmaşık calc () formüllerine güvenmekten kaçının, çünkü bunlar düzenlemeyi karmaşıklaştırabilir. Benzer şekilde, web sitenizde yeniden kullanmayı planladığınız temel tasarımlar için modül grupları oluşturun.

Divi 5 ile daha akıllı web sayfaları oluşturun

Divi 5, WordPress web tasarımını yeniden tanımlayarak, çarpıcı, duyarlı web sayfaları kolayca oluşturmanızı sağlar. Modern görsel inşaatçısı, sezgisel kontrolleri, yenilikçi özellikleri ve Divi AI süreci kolaylaştırarak profesyonel sonuçları minimum çaba gösteriyor. Beceri seviyeniz ne olursa olsun, bu araçlar binayı etkili, dinamik web sitelerini daha hızlı, daha akıllı ve daha yaratıcı hale getirir.

Divi 5'in potansiyelini keşfetmeye hazır mısınız? Bugün Divi 5 alfa sürümünü indirin ve vizyonunuzu hayata geçirmek için en son özelliklerini deneyin. Divi 5 yeni sitelere uygun ancak mevcut siteleri dönüştürmek için henüz önerilmiyor.

Düşüncelerinizi duymak isteriz! Geri bildiriminizi aşağıda yorum yaparak paylaşın. Daha da iyisi, kelimenin yayılmasına yardımcı olmak için sosyal medyadaki Divi 5 deneyiminiz hakkında bilgi verin.