Divi 5 ile nasıl başlanır

Divi 5, sadece başka bir sürüm güncellemesi değil, Divi Builder'ın yeni nesli. Yerden tam bir yeniden inşa (geriye dönük uyumluluk ile) ve daha hızlı performans, yeni özellikler ve yetenekler, daha fazla tasarım özgürlüğü ve uzun vadeli ölçeklenebilirliğe odaklanıyor.

Temel iyileştirmelere ek olarak, Divi 5 de yeni bir Snappy arayüzü kazanmıştır. Bu arayüz biraz farklı olsa da, web siteleri oluşturmanın divi yolunu hala tanıyabileceksiniz. Bu öğreticiyi, Divi 5'i etkili bir şekilde kullanmaya başlamak için, en yeni özelliklerini keşfetmeye başlamak için bilmeniz gereken her şey boyunca sizi hazırladık. Hadi alalım!

Divi 5 bugün yeni web sitelerinde kullanılmaya hazır, ancak henüz web sitelerini taşımayı önermiyoruz.

Divi 5: WordPress web sitesi binasının geleceği

Divi 4 sağlam bir sayfa oluşturucudur, ancak zaman içinde teknik borç biriktirmiştir. Bu sınırlamaları ortadan kaldırmak için Divi 5'i vakıftan yeniden inşa ettik ve sizi web tasarımının geleceğine hazırlamak için birçok şaşırtıcı yeni özellik ekledik. Ancak Divi 5 ayrı bir ürün değildir, geriye dönük uyumluluk ile birlikte gelir, bu da mevcut Divi 4 web sitesini Divi 5'e daha da aşağı taşıyabileceğiniz anlamına gelir.

İşte Divi 5'i dikkatinize değer kılan temel iyileştirmeler:

• Çekirdek Mimarlık Yeniden Yazma: Divi 4'ün eski kod tabanı, hatalar veya yavaşlamalar getirmeden yeni özellikler eklemeyi zorlaştırdı. Divi 5 ölçeklendirilir.
• Geliştirilmiş Performans: Divi 4 Builder genellikle büyük sayfalar ve karmaşık düzenler için genellikle yavaşladı ve etkilenen sayfa hızını etkiledi. Divi 5 büyük arka uç iyileştirmeleri getirir ve daha hızlı, daha duyarlı bir deneyim sunmak için daha az sistem kaynağı kullanır. (Ayrıca, ön ucun ne kadar hızlı performans gösterdiğini görmek için Divi 5 hız testi yaptık.)
• Daha iyi görsel inşaatçı deneyimi: Divi 5 hala tanıdık geliyor, ancak inşaatçı kullanımı daha pürüzsüz ve daha hızlı hissediyor. Ayarlar hemen açılır, kontroller daha hızlı yanıt verir ve daha net kenar çubukları ve havada uçma araçları gibi küçük değişiklikler sayfaları oluşturmayı ve düzenlemeyi kolaylaştırır. Yeni eklemeler hakkında bilgi edinmek için Divi 5 Gösterge Paneli İzlenecek Gezisine göz atın.
• Birçok yeni özellik: Hala Divi 5 alfa aşamasındayken, zaten tüm web sitesi oluşturma iş akışınızı değiştiren yeni heyecan verici özellikler yayınlıyoruz.

Birlikte, bu yükseltmeler Divi 5'i daha iyi ve daha hızlı, daha temiz ve bakımı daha kolay modern web siteleri oluşturmak için daha akıllı bir seçim haline getirir. Divi'nin daha pürüzsüz, daha geleceğe hazır bir versiyonunu bekliyorsanız, budur.

Divi 5 yeni web sitelerinde kullanılmaya hazır, ancak mevcut Divi 4 sitenizi henüz taşımanızı önermiyoruz. Mevcut sürüm taze başlamak için idealdir, böylece yeni vakfın sunduğu her şeyden tam olarak yararlanabilirsiniz.

Divi 5'e başlamak

Divi 5'e erişmek ve web sitenizi oluşturmaya başlamak için, temellerinizin yerinde olduğundan emin olmanız gerekir: Web Hosting, Alan Alanı ve WordPress.

Web Hosting & WordPress'i ayarlama

Güvenilir web barındırma arıyorsanız, site alanını düşünün. Mükemmel performans, güçlü destek ve kolay, tek tıklamayla WordPress kurulumu sunar. Siteground ile, bir yıl boyunca ücretsiz bir alan (veya Namechap'tan bir tane alabilirsiniz ) elde edersiniz , bu da işleri hizalanmış ve tutarlı tutmayı kolaylaştırır. Web barındırma ve WordPress'inizi kurmak için bu öğreticiyi izleyin.

Site Alanı Alın

Divi 5'i indirme, yükleme ve etkinleştirme 5

WordPress kontrol panelinize erişebildiğinizde, bir sonraki adım Divi 5'i yüklemektir. Zarif temalar üyelik alanınıza gidin ve en son Divi 5 Zip klasörünü indirin.

(Divi'de yeniyseniz, ihtiyaçlarınız için en uygun olanı seçmek için fiyatlandırma planlarımıza göz atın. Seçemiyor musunuz? Divi AI, Divi Cloud, Divi VIP, Dondivi Koleksiyonu ve çok daha fazlası gibi tüm harika özelliklere erişmenizi sağlayan Divi Pro üyeliğine gidin!)

Divi ile başlayın

WordPress kontrol panelinize geri dönün, görünüm> Temalar> Yeni Ekle> Tema Yükle.

Divi 5 zip dosyanızı seçin ve şimdi yükleyin.

Divi 5 kurulduktan sonra etkinleştirin .

Ardından, tema özelliklerine erişmek için Divi lisansınızı etkinleştirmeniz gerekir. Bunu yapmak için, kullanıcı kimlik bilgilerinizle hesabınıza giriş yapın.

İşlemi tamamladıktan sonra, lisans durumunuz , Divi 5 güncelleme durumunuz , sayfalar, tema şablonları, vb.

Yeni Divi 5 Visual Builder'a erişmek

Her web sitesinde temel sayfalar bulunur: ev, Hakkında, İletişim, Mağaza ve Blog. Onları tasarlamak için önce bunları yaratmanız gerekir. Bir sayfa oluşturmak için sayfa> sayfa ekleyin.

Sayfanızı adlandırın ve Divi 5 Visual Builder'ı etkinleştirmek için Divi Builder'ı kullanın .

Divi 5 Visual Builder'a gireceksiniz.

Divi 5 Gösterge Tablosu İzlenecek

İlk bakışta, yeni Divi 5 arayüzü Divi 4'lerle aynı görünebilir, ancak ekstra kenar çubukları ve keşfetmeye değer yeni simgeler fark edeceksiniz. Her birini daha ayrıntılı olarak inceleyelim.

İlk olarak, en üst panel ayarlarının dökümü:

• (1) Sayfa Ayarları Paneli: Sayfa başlığının yanındaki dişli simgesini tıklamak (Home) sayfa ayarları panelini açar. Burada, sayfa başlığını düzenleyebilir, bir alıntı ekleyebilir, özellikli bir resim atayabilir ve gelişmiş tasarım ayarlarına erişebilirsiniz. Divi 5, tek tıklamayla ayarların erişimini etkinleştirir, yani herhangi bir öğeyi (modül, bölüm, sütun veya satır) tıkladığınızda, ayarlar paneli otomatik olarak sağ tarafta açılır.
• (2) Duyarlı Görünüm ve Genişlik Kontrolleri: Bu bölüm, tasarımınızı masaüstü, tablet ve mobil gibi farklı ekran boyutlarında duyarlılık için önizlemenizi ve düzenlemenizi sağlar. Ayrıca, düzeninizin çeşitli ekran boyutlarında nasıl göründüğünü ince ayarlamak için tuval genişliğini ve yakınlaştırma seviyesini de ayarlayabilirsiniz.
• (3) Oluşturucu Kontrolleri: Bu alan, karanlık mod (Divi 5'te yüksek oranda istenen yeni bir özellik), geri alma, geçmiş, dışa aktarma/içe aktarma, net düzen , kütüphaneye ekleme ve inşaatçıdan çıkma gibi inşaat eylemlerine hızlı erişim sağlar. Ayrıca önizlemeye, taslağınızı kaydetmek veya canlı yayınlanmaya hazır olduğunda sayfayı yayınlayacak düğmeler de bulacaksınız.

Şimdi, birçok yeni simge içeren sol yan panele bakalım:

• (1) Düzen ve Yapı Araçları: Sol panel, divi kütüphanenizden veya Divi bulutunuzdan önceden yapılmış veya kaydedilmiş düzenler eklemek için Blue Plus düğmesi gibi çekirdek düzen seçeneklerine erişim sağlar. Ayrıca, sayfanızın yapılandırılmış bir taslağı için katman görünümünü açabilir veya modüllerinizi etiketli bloklar olarak gösteren basitleştirilmiş bir düzenleme modu için tel kafes görünümüne geçebilirsiniz. Aralarında tasarım değişkenlerinizi oluşturacağınız ve düzenleyeceğiniz değişken yönetici simgesi vardır.
• (2) Görsel görüntüleme seçenekleri: Elementlerin üzerinde dolaşırken eylem simgelerinin nasıl göründüğünü özelleştirebilirsiniz. Hakkında Hakkedeki Eylem simgeleri ve Hover'da etkinleştirilen ana eylem simgesi ile, hem Hovered Element hem de ana kapları için simgeler görür ve kontrollere erişmeyi kolaylaştırır. Ayrıca, düzeninizin yapısını görselleştirmeye yardımcı olmak için sayfanızdaki her öğeyi özetleyen X-ışını modunu da açabilirsiniz.
• (3) Ayarlar ve Yardım: Panelin altında, arayüz tercihlerini ve görüntüleme davranışını ayarlayabileceğiniz görsel oluşturucu ayarlarını bulacaksınız. Ayrıca, doğrudan dokümantasyon ve öğretici videolara bağlanan bir yardım simgesi görecek ve inşaatçıdan ayrılmadan destek almayı kolaylaştıracak.

Divi 5'e alışmak biraz zaman alabilir, bu nedenle etkili bir şekilde gezinmenize yardımcı olacak bazı ipuçları da derledik.

Yeni düzenler veya modüller eklemek

Şimdi Divi 5 kullanarak tasarımlarınızı nasıl oluşturacağınızı görelim. Sıfırdan inşa ediyorsanız, bir satır eklemek için Yeşil Plus düğmesini tıklayın. İçinde içerik modülleri ekleyeceksiniz.

Sağ taraf ayarları panel değişikliklerini otomatik olarak fark edeceksiniz. Çünkü bunlar seçilen öğenin ayar seçenekleridir. Başlık öğesi seçildiğinde, sağ taraf panel ayarlarını gösterir. Konteyner öğesi ayarlarına erişmek için ekmek kırıntıları kullanın. Örneğin, satır ayarlarına erişmek için satıra tıklayın.

Sıfırdan inşa edebilir veya önceden inşa edilmiş bir divi düzenini kolayca içe aktarabilir (veya divi AI kullanarak bir tane oluşturabilir) ve bunu bir taban olarak kullanabilirsiniz. Ardından, tüm zamanınızı özelleştirmek ve sizinkini yapmak için harcayabilirsiniz. Çeşitli endüstriler ve amaçlar için profesyonel olarak tasarlanmış 2500'den fazla divi düzenimiz var, bu yüzden ilhamınızı yeterince hızlı bulacaksınız.

Sol taraftaki Mavi Plus düğmesini tıklayın:

• 1: Önceden tasarlanmış bir düzeni içe aktarmak istiyorsanız.
• 2: Divi AI ile yeni bir düzen oluşturmak istiyorsanız.

Önceden tasarlanmış bir düzeni nasıl içe aktaracağınızı göstereceğiz. Ayrıca bir tasarımı içe aktarmadan önce önizleyebilirsiniz.

Yapıyı AI seçeneğiyle seçtiyseniz, yalnızca Divi Ai'ye oluşturmak istediğiniz sayfa ve web sitesi hakkında bilgi vermeniz gerekir. Ardından Düzen Oluştur'u tıklayın.

Önceden yapılmış bir düzeni özelleştirme

Tasarımınız içe aktarıldıktan sonra, ayarlarını özelleştirmek için herhangi bir öğeyi tıklayabilirsiniz.

Herhangi bir öğenin ayar paneli bir içerik, tasarım ve gelişmiş sekme içerir .

• İçerik: Modülün metin, resimler, düğmeler, bağlantılar, arka plan vb.
• Tasarım: Modülünüzü görsel olarak şekillendirmek için bu sekmeyi kullanın. Burada yazı tipleri, renkler, aralık, sınırlar, gölgeler, hizalama ve diğer tasarım odaklı kontroller için seçenekler bulacaksınız.
• Gelişmiş: Bu bölüm, özel CSS eklemek, koşulları uygulamak, görünürlük ayarlarını ayarlamak vb. Gibi daha fazla kontrol içindir.
• Küçük dizüstü bilgisayar simgesi, duyarlı modlar (mobil, dizüstü bilgisayar, tablet ve üzerine gelin) ayarları arasında geçiş yapmanızı sağlar.

Ayrıca küçük (varsayılan önceden ayarlanmış) bir açılır menü de fark edeceksiniz. Bu, Divi 4'ün ikonik ön ayar seçeneğidir, ancak yakın zamanda yeni özellik sürümleri bölümünde tartışacağımız daha gelişmiş bir şey başlattık. (İpucu: Seçenek Grup Ön Ayarlarını arayın!)

İçerik oluşturma yardımına ihtiyacınız varsa, Divi AI kullanın. Bireysel içerik öğeleri AI kullanılarak ayrı ayrı düzenlenebilir. Sadece vücut bölümünün üzerine gelmeniz ve küçük AI simgesine tıklamanız gerekir.

Sadece içerik değil, Divi AI, görüntüler, kod ve hatta tam düzenler üretmenize de yardımcı olabilir. Başlamak için küçük AI simgesini arayın.

Divi Ai'ye göz atın

Öğenin görsel ayarlarını değiştirmek için Tasarım sekmesine gidersiniz. Yazı tiplerini, boyutlarını, renkleri vb. Ayarlayabileceğiniz yer burasıdır.

İçeriğinizi ve markanızı eklemek için sayfa düzenindeki her öğeyi inceleyin. İşiniz bittikten sonra taslağınızı kaydedin ve tasarımınızı önizleyin . Her şey iyi göründüğünde yayınlayın.

Divi 5'in yeni özellikleri araştırıldı

Divi 5 ölçeklenebilirlik için gelişmeye hazırdır. Hala alfa aşamasındayken, tasarım iş akışınızı geliştirmeye yardımcı olan birçok yeni özellik yayınladık.

• Seçenek Grubu Ön Ayarları: Sınır yarıçapı, tipografi, vb. Gibi belirli ayarlar için ön ayarlar oluşturmanıza izin verin. Önceden ayar uygulandıktan sonra, yaptığınız tasarım güncellemeleri bu ön ayar kullanarak tüm öğeler arasında otomatik olarak yansıtacaktır. Bu, tutarlılığı korumanıza ve zamandan tasarruf etmenize yardımcı olur.
• Tasarım Değişkenleri: Renkler, yazı tipleri ve aralık gibi tasarım özellikleri için yeniden kullanılabilir değerleri kaydedin. Bu, birincil renginizi veya başlık boyutunuzu değiştirmek istiyorsanız, değişkeni yalnızca bir kez güncellemeniz gerektiği ve tüm örneklerin kolayca güncelleneceği anlamına gelir. Tasarım değişkenleri bir marka vakfı oluşturmak için mükemmeldir.
• Gelişmiş Birimler: Divi 5 artık CLAMP (), Min (), Max () ve Calc () gibi modern CSS işlevlerini desteklemektedir. Bu gelişmiş birimler, özel koda veya medya sorgularına ihtiyaç duymadan cihazlar arasında akıcı bir şekilde ayarlanan duyarlı tasarımlar oluşturmayı çok daha kolay hale getirir.
• İç içe satırlar: Artık bir satır diğerine yerleştirebilirsiniz, bu da karmaşık düzenler için daha fazla esneklik sağlar. Bu, sayfa yapınızdan ödün vermeden hizalama, aralık veya içerik gruplaması üzerinde ayrıntılı bir kontrole ihtiyacınız olduğunda kullanışlıdır.
• Modül Grupları: Birden çok modülleri bir sütun içindeki tek bir kapta birleştirin. İlgili içeriği düzenlemenin, paylaşılan stilleri uygulamanın veya düzeninizin bölümlerini bir birim olarak hareket ettirmenin kolay bir yoludur.

Ayrıca Flexbox tabanlı düzenler ve gelişmiş WooCommerce modülleri gibi yeni özellikler eklemeye çalışıyoruz. Bu güncellemeler, Divi 5'in zaten iyi yaptığı şey üzerine inşa etmeye devam edecektir: iş akışınızı kolaylaştırın ve inşaatçı deneyimini modernize edin.

Yeni bir özellik eklemesini asla kaçırmadığınızdan emin olmak için YouTube kanalımıza abone olun. Nick genellikle orada yeni özellikleri duyurur, bu yüzden her zaman eğrinin önünde olacaksınız.

YouTube kanalımıza abone olun

Divi 5'ten en iyi şekilde yararlanmak için ipuçları

Zaten Divi 4'e aşina iseniz, Divi 5'e geçmenin ne kadar kolay olduğunu fark edeceksiniz. Divi 4 hakkında sevdiğiniz her şeyi içerir, ancak çok daha kararlı, modern ve daha hızlıdır. Divi 5'e ne kadar erken aşina olursanız o kadar iyidir. Daha fazla tasarım esnekliği elde etmek için yeni Divi 5 özelliklerini kullanmanıza yardımcı olacak birkaç ipucu:

• Tasarım değişkenlerini ayarlayın İlk önce: Stillerinizi merkezileştirmek ve gelecekteki düzenlemeleri daha hızlı ve daha tutarlı hale getirmek için marka renkleri, yazı tipleri, aralık vb. İçin tasarım değişkenleri oluşturun.
• Küresel kontrol için CSS değişkenlerini kullanın: Daha fazla teknik esneklik için tasarım değişkenlerinin yanı sıra CSS değişkenlerini ayarlayın. Minimal kodla temanız boyunca tutarlı stiller uygulamanıza izin verirler.
• Varsayılan ön ayarları erken uygulayın: Tasarlamaya başlamadan önce modüllerinize, bölümlerinize ve satırlarınıza varsayılan ön kümeler atayın. Bu, her yeni öğenin stil sisteminize en başından beri eşleşmesini sağlar.
• Önceden ayarlanmış tasarım göz önünde bulundurularak oluşturun: Sayfalarda yeniden kullanabileceğiniz ön ayarlar oluşturun. Bu, iş akışınızı hızlandıracak ve güncellemelerin yönetilmesini daha kolay hale getirecektir.
• Esnek aralık için calc () kullanın: Birimleri ( % 100 - 80px gibi) karıştırmak için Calc () i iblini uygulayın veya marj alanlarını uygulayın ve katı kesme noktaları olmadan ekran boyutlarına uyum sağlayan düzenler oluşturun.
• Düzen kontrolü için min () ve max () adlandırın: Bir başlığın farklı cihazlarda çok küçük veya çok büyük olmasını önlemek gibi akıllı boyut sınırlarını ayarlamak için min () veya max () kullanın.
• Sıvı Tipografi için CLAMP () kullanın: CLAMP () ile yazı tipi boyutlarınız, medya sorguları olmadan ekran boyutuna göre sorunsuz bir şekilde büyüyebilir veya küçülebilir. Okunabilir, duyarlı metin için modern bir çözümdür.

Divi 5, web tasarımının geleceği için inşa edilmiştir

Divi 5 sadece bir güncelleme değildir: Web sitenizin iş akışını geleceğe kanıtlamak için tasarlanmış tam bir yeniden yapılanma.

Divi 5'teki her şey, daha hızlı performansdan modüler ön ayarlara, tasarım değişkenlerine ve gelişmiş düzen araçlarına kadar daha akıllı ve ölçeklendirmenize yardımcı olmak için inşa edilmiştir. İster yeni bir proje başlatmak veya modern tasarım tekniklerini denemek isterse, bu sürüm size daha iyi web siteleri oluşturmanız için temel sağlar.

Divi 5 bugün yeni web sitelerine hazır, bu yüzden dalın, en son özellikleri test edin ve erken benimseyen olun!