Divi 5 Başlangıç ​​Kılavuzu: Temellerde Nasıl Ustalaşılır

Yayınlanan: 2025-05-25

Divi 5'i duyuyorsanız ve mevcut durumu merak ediyorsanız, bu Divi 5 Başlangıç ​​Kılavuzu sizin içindir.

Divi 5, WordPress kullanıcıları tarafından güvenilir ve sevilen Divi görsel oluşturucunun geleceğidir. Yerden yeniden inşa edilen Divi 5, daha hızlı performans ve daha sezgisel bir deneyim sunuyor. Divi'nin web tasarımını herkes için kolaylaştıran modern, ölçeklenebilir bir temelde bilindiği her şeyi birleştirir.

Bu yazıda, Divi'de yeni olun, ister Divi 4'ten geçiş yaparken, başlamak ve Divi 5'i kullanma konusunda kendinize güvenmek için ihtiyacınız olan her şeyden geçeceğiz.

Divi 5 alfa aşamasındadır, ancak bugün yeni web sitelerinde kullanılmaya hazırdır.

İçindekiler
  • 1 Divi 5 nedir?
  • 2 Divi 4'ten Divi 5'e geçiş kolay mı?
  • Bilmeniz gereken 3 yeni Divi 5 özellikleri
    • 3.1 1. Özelleştirilebilir kesme noktaları daha duyarlı esneklik sunar
    • 3.2 2. Tasarım değişkenleri, tutarlı bir marka sistemi tanımlamanıza yardımcı olur
    • 3.3 3. Seçenek Grup Ön Setatleri Önceden Ayar Tabanlı Tasarım Sistemini Basitleştirin
    • 3.4 4. Karmaşık Düzen Tasarımları için iç içe satırlar
    • 3.5 5. Modül gruplarınızı düzenlemek için modül grupları
    • 3.6 6. Gelişmiş birimler, daha akıllıca duyarlı bir tasarım için optimize etmenize yardımcı olur
  • 4 Divi 5'in içine bir bakış
    • 4.1 1. Divi 5'i indirin, yükleyin ve etkinleştirin
    • 4.2 2. Divi 5 kullanarak web sitenizi oluşturun
    • 4.3 3. Divi 5 Visual Builder Temel Hakkında Öğrenin
    • 4.4 4. Divi 5 ile site sayfalarınızı oluşturun
  • 5 Divi'den en iyi şekilde yararlanmak için 5 ipucu 5
    • 5.1 1. Yeni sürümlerle güncellenin
    • 5.2 2. Yeni Divi 5 Builder ile deney
    • 5.3 3. Divi Topluluğunda Divi 5 İpuç ve Püf Noktalarını Paylaşın ve Arayın
    • 5.4 4. Divi 5 ile yeni web siteleri oluşturun
    • 5.5 5. Bir Divi Tasarım Sistemi Oluşturun
    • 5.6 6. Hataları karşılaştığınızda bildirin
  • 6 Web Tasarım Yolculuğunuzu Başlatmak İçin Divi 5'i Seçin

Divi 5 nedir?

Divi 5, Divi WordPress temasının en son sürümüdür, ancak bir güncellemeden daha fazlasıdır. Özel kod yazmadan size tam yaratıcı kontrol sağlamak için tasarlanmış Divi'nin web sitesi oluşturma çerçevesinin tam bir yeniden inşasıdır.

Divi 5'in kalbinde daha hızlı, modernize edilmiş bir görsel oluşturucu var. Daha hafif, daha duyarlıdır ve Divi 4'te yavaş yükleme süreleri, şişkin çıkış ve inşaatçı gecikmesi gibi ortak sorunları ortadan kaldırır. Her şey daha soğuk, daha pürüzsüz ve daha sezgisel hissediyor.

Araç değiştirmeden, kod yazmadan veya kurulumda zaman kaybetmeden fikirden geçmenize yardımcı olmak için üretilmiştir. İşte nasıl:

  • Daha hızlı yanıt veren, daha hafif hisseden ve daha az gecikme ve daha fazla hassasiyetle sürüklenmenizi, düşürmenizi ve özelleştirmenizi sağlayan gerçek zamanlı bir görsel oluşturucu . Burada kendiniz test edin.
  • Farklı endüstrilere ve hedeflere göre tasarlanmış güzel sayfa tasarımlarını uygulamanıza yardımcı olan önceden tasarlanmış divi düzenleri.
  • Metin ve görüntülerden kaydırıcılara, galerilere, formlara, fiyatlandırma tablolarına ve daha fazlasına kadar her şeyi idare eden düzinelerce divi modülü.
  • Divi gibi pazarlama araçları, bölünmüş testler için liderler, e-posta seçmenleri için çiçek açar ve sosyal paylaşım için hükümdar.
  • Ön ayarlar, tasarım değişkenleri ve global stiller gibi gelişmiş özelleştirme seçenekleri, tasarımınızı tutarlı ve marka üzerinde tutmanızı sağlar.

Divi 5'i öne çıkaran şey, ne kadar kasıtlı hissettiriyor. Düzenden arayüze ve performansa kadar tüm deneyim, daha hızlı hareket etmenize, organize olmanıza ve hayal kırıklığı içermeyen, kodsuz bir iş akışının tadını çıkarmanıza yardımcı olmak için tasarlanmıştır.

Divi 5'i daha fazla indirin Divi 5

Divi 4'ten Divi 5'e geçiş kolay mı?

Divi 5, Divi 4'ün halefi, yani daha iyi. Yani, Divi 4'e alışkınsanız, anahtarlama fikri ezici hissedebilir. Ancak Divi 5'in geriye dönük uyumluluk ile inşa edildiğini söyleyerek başlayalım. Bu, herhangi bir Divi 4 web sitesinin Divi 5 ile çalışacağı anlamına gelir.

Divi 5 ayrıca Divi 4 hakkında sevdiğiniz her şeyi tutar, ancak daha iyi hale getirir. Genel sezgisel deneyim tanıdık geliyor, bu nedenle Divi 5'e hızlı bir şekilde aşina olabilirsiniz. Divi 4'ten Divi 5'e geçmeniz için bazı nedenleri tartışalım.

Divi 5 Builder daha hızlı, daha optimize edilmiş bir performans sunuyor

Divi 5 modern mimari kullanılarak inşa edilmiştir. En büyük gelişmelerden biri, Divi 4'te şişkin çıkışa ve daha yavaş performansa neden olan kısa kodların kaldırılmasıdır. İnşaatçı şimdi hızlı bir şekilde yüklenir ve genel olarak çok daha hafif hisseder.

Bir başka büyük yükseltme daha akıllıca yeniden oluşturulmasıdır. Divi 4'te, küçük değişiklikler bile düzen boyunca gereksiz güncellemeleri tetikleyebilir. Divi 5 yalnızca karmaşık sayfalarda bile gecikmeyi azaltarak ve deneyimi pürüzsüz tutan şeyleri yeniden oluşturur.

Visual Builder'ı yüklemek için Milisaniye Divi 4'ün (solda) aldığını unutmayın. Divi 5 hemen yükler.

Bu hızı desteklemek için, geçiş animasyonlarını ayarlar panelinden kaldırdık, gereksiz yeniden çizimleri en aza indirdik ve güncellemelerin gerçek zamanlı olarak nasıl uygulandığını rafine ettik. Bu küçük değişiklikler, inşaatçının her tıklamayla daha duyarlı hissetmesini sağlar.

Divi 5 daha kolay ve daha basit bir düzenleme deneyimi sunar

Küçük detaylar genellikle nasıl inşa ettiğiniz üzerinde en büyük etkiye sahiptir. Divi 5, inşaatçı arayüzünü daha sezgisel hale getiren bir dizi ince ama güçlü iyileştirme sunar.

Yeni başlayanlar için, içeriği düzenlemek artık her zamankinden daha hızlı. Tek tıklamayla düzenleme ile doğrudan herhangi bir metne veya modüle tıklayabilir ve ekstra adım olmadan ve menüler arasında geçiş yapmadan yazmaya başlayabilirsiniz. Tüm deneyimi anında ve zahmetsiz hissettirir. (Divi 4'te, bir modülün Ayarlar panelini açmak için birden fazla tıklama gerektirdi.)

Başka bir yükseltme, ayarlar panelini ekranın her iki tarafına sabitlemenizi sağlayan panel yerleştirmedir. Bu, değişiklikler yaparken ve ayarların çalışma alanınızı örtmesini önlerken düzeninizi tam görünümde tutar. (Bu özellik Divi 4'te mevcut değildir.)

Ayarlar panelinin üst kısmındaki yeni ekmek kırıntıları, düzen yapısındaki tam konumu gösterir, böylece özellikle nerede olduğunuzu, özellikle de derin iç içe öğelerle çalışırken her zaman biliyorsunuzdur.

Divi 5 ekmek kırıntıları

Ayrıca, Divi 4'te bulunmayan inşaatçıda hafif ve karanlık modlar arasında geçiş yapabilirsiniz. Bu güncellemeler size daha temiz, daha odaklanmış bir düzenleme alanı sağlar, görsel dağınıklığı ve gereksiz tıklamaları keser, böylece çalışma alanınız üzerinde daha iyi kontrol sahibi olursunuz.

Divi 5 Ayarlar Yönetimi ve Tasarım Organizasyonu'nu basitleştirir

Divi 5, stilleri, düzen ayarlarını ve duyarlı ayarlamaları yönetmek için daha organize ve sezgisel bir sistem getirir.

Her bir tasarım ayarındaki Duyarlı ve Hover durumları arasında, görünümleri değiştirmeden her etkileşim ve ekran boyutu için ince ayar, tipografi veya efektlere geçebilirsiniz.

Benzer şekilde, modül ön ayarları, tasarım değişkenleri ve seçenek grup ön ayarlarının sitenizde uygulanması ve yönetilmesi daha kolaydır. (Bunları aşağıdaki bölümde ayrıntılı olarak ele alacağız.)

Divi 5 ile temeli geliştiriyoruz ve özel kodlama olmadan web tasarımı iş akışınızı optimize etmenize yardımcı olacak yeni, daha gelişmiş özellikler ekliyoruz. Her iki haftada bir yayınlanan güncellemelerle, sadece buradan daha iyi hale geliyor.

Bilmeniz gereken yeni Divi 5 özellikleri

Yakın zamanda Divi 5'e eklediğimiz yeni özelliklere ve web sitelerini daha hızlı oluşturmanıza nasıl yardımcı olduklarına bakalım:

1. Özelleştirilebilir kesme noktaları daha duyarlı esneklik sunar

Divi 5'teki en heyecan verici eklemelerden biri özelleştirilebilir duyarlı kırılma noktalarıdır. Divi 4'te standart üç cihaz boyutuyla sınırlıydınız: telefon, tablet ve masaüstü. Daha spesifik ekran genişlikleri için düzgün ayarları ince ayar yapmak için özel kodu kullanmanız gerekiyordu.

Divi 5 ile bu sınırlama gitti. Artık tanıdık olanların yanı sıra telefon çapında, tablet genişliğinde, geniş ekran ve ultra genişliğinde önceden tanımlanmış yedi kesme noktasına erişebilirsiniz.

Bu ekstra kesme noktalarını tasarım ihtiyaçlarınıza göre etkinleştirebilir veya devre dışı bırakabilir ve tam kontrol için genişlik değerlerini değiştirebilirsiniz. Bu, duyarlı web siteleri oluştururken size çok daha fazla esneklik sağlar.

Kesme noktalarınızı yönetmek için, site çapında duyarlı kesme noktaları panelini açmak için üç noktayı tıklayın. Eklemek istediğiniz herhangi bir yeni kesme noktasına geçin ve isterseniz genişlik kontrolü için yeni değeri değiştirin.

Özelleştirilebilir kesme noktalarını yönetme

Bir kesme noktasını devre dışı bıraktığınızda stillerinizi kaybetme konusunda endişelenmeyin. Divi onları arka planda kaydeder, bu nedenle bu kesme noktasını daha sonra yeniden etkinleştirirseniz, özelleştirmeleriniz hemen geri gelecektir. Bu, çalışmanızı kaybetmeden farklı duyarlı tasarımları test etmek için mükemmeldir.

2. Tasarım değişkenleri, tutarlı bir marka sistemi tanımlamanıza yardımcı olur

Tasarım değişkenleri yüzeyde küçük hissedebilir, ancak bunları kullanmaya başladığınızda iş akışınızı tamamen dönüştürürler. Farklı modüller arasında aynı yazı tipini, renk veya aralık değerini manuel olarak ayarlamak yerine, bir kez tanımlarsınız ve sitenizde yeniden kullanırsınız. Bir değişkeni güncellediğinizde, her örnek otomatik olarak güncellenir, zaman tasarrufu ve tasarımınızı tutarlı tutar.

Bu, özellikle marka tutarlılığının önemli olduğu çok sayfalık siteler veya müşteri projeleri için yararlıdır. Vücut metni boyutu, başlık renkleri, düğme dolgusu veya bağlantı stili gibi değişkenleri ayarlayabilirsiniz. Tüm H4'leri ayarlamanız gerekiyorsa, her bloğu avlamanız gerekmez; Değişken değerini bir kez değiştirin.

Sadece tasarım özellikleri değil, aynı zamanda hızlı erişim için şirket adresiniz, ürün bağlantıları ve hatta arka plan motifleri gibi yaygın olarak tekrarlanan içerik değerlerini de kaydedebilirsiniz. Bu sizi manuel işten kurtarır ve tekrarlanan içeriği daha iyi organize etmeye yardımcı olur.

Görsel oluşturucunuzun içinde değişken yönetici simgesini tıklayın ve altı değişken türü arasından seçim yapın: sayılar, metin, resimler, bağlantılar, renkler ve yazı tipleri.

Divi 5'te değişken yönetici

Örneğimiz için bir metin değişkeni oluşturalım. Değişkeninizi adlandırın ve değerini ekleyin, sonra kaydedin .

Bir metin değişkenini adlandırma ve kaydetme

Metin değişkenini uygulamak için değiştirmek istediğiniz öğeyi tıklayın. Bizim durumumuzda adres. Metin değişkeni olduğundan, Dinamik İçerik simgesini bulmak için Ayarlar panelindeki içeriğe gidin ve gövdenin üzerine gelin. Şimdi, uygulamak için kaydedilen değişkeninize tıklayın:

3. Seçenek Grup Ön Setleri Önceden Ayar Tabanlı Tasarım Sistemini Basitleştirin

Arka plan ayarları, boşluk, kutu gölgeleri, sınırlar ve daha fazlası gibi stilleri kaydetme ve yeniden kullanma, seçenek grup ön ayarları aracılığıyla size çok zaman kazandırabilir. Divi 4'teki tüm öğeye (bölüm, satır, sütun, modül) uygulanan geleneksel eleman ön ayarlarına zaten aşina olabilirsiniz.

Divi 5'te seçenek grup ön ayarları bir adım daha derinlemesine alın. Bir modül içindeki belirli tasarım seçenekleri gruplarına ön ayarlar oluşturmanıza ve uygulamanıza izin verir. Örneğin, sınır ayarlarını başka bir şey etkilemeden opsiyon grubu ön ayar olarak kaydedebilirsiniz.

Bunu yapmak için önce tercih ettiğiniz ayarları özelleştirecek ve ardından bunları önceden ayar olarak kaydedeceksiniz. Aşağıda, Button Shadow'u Box Shadow 2 olarak kaydettim ve diğer düğmelere uyguladım.

Bir düğme stilini belirli bir Hover efekti, sınır ve renk ile yeniden kullanmak istiyorsanız, ancak aralık ve metin stilini tek başına bırakın. Modülün geri kalanını etkilemeden sadece ihtiyacınız olan ayarları uygulayabilirsiniz.

Tasarım değişkenleri yazı tipleri, renkler ve aralık gibi temel değerleri kontrol etmenize yardımcı olurken, seçenek grup ön ayarları bir seviyeye daha derine iner. Global ön ayarlar olarak tüm stil bölümlerini gruplandırmanıza ve yeniden kullanmanıza izin verirler. Birlikte, özel kod yazmadan hızlı bir şekilde tutarlı düzenler oluşturmanıza yardımcı olan önceden ayarlanmış bir tasarım sistemi oluştururlar.

4. Karmaşık düzen tasarımları için iç içe satırlar

Yuvalanmış sıralar, karmaşıklık olmadan düzen özgürlüğü isteyen tasarımcılar için üretilmiştir. İç içe sıralarla, birden fazla bölüm veya kod geçici çözümleri sürekli olarak hokkabazlık yapmadan daha sofistike düzenler oluşturabilirsiniz.

Özellikle açılış sayfaları, ürün vitrinleri, çok sütunlu blog düzenleri üzerinde çalışırken veya asimetrik bir portföyde en iyi çalışmanızı sergilerken karmaşık düzenlerin yönetilmesini daha kolay ve düzenlemeye daha sezgisel hale getirirler.

İçerik modülü olarak iç içe bir satır ekleyin. Black Plus düğmesini tıklayın, yeni satıra geçin ve tercih ettiğiniz satır türünü seçin.

iç içe geçmiş bir satır eklemek

Bir kez takıldıktan sonra, tam bir üst düzey gibi davranır. Ayrıca, her iç içe satır tam duyarlı ayarları korur, yani kesme noktalarında nasıl davrandığını kontrol edebilirsiniz. Artık temel sıralar ve sütunlarda düşünmekle sınırlı değilsiniz. Yuvalanmış sıralarla, tasarım iş akışınızı temiz ve görsel tutarken katmanlarda düşünürsünüz.

5. Modül gruplarınızı düzenlemek için modül grupları

Modül grupları, Divi 5'te yeni bir kap elemanıdır. Görsel oluşturucu içindeki tek, katlanabilir bir gruba ile ilgili çoklu modülleri paketlemenize izin verirler. Bu, özellikle tekrarlayan öğeler veya iç içe tasarımlarla dolu karmaşık düzenlerle uğraşırken, sayfanızın büyük bölümlerinin düzenlenmesini önemli ölçüde daha yönetilebilir hale getirir.

Başlık, görüntü, açıklama, düğme ve bir çizgi bölücü ile bir ürün vitrin bloğu hayal edin. Tasarımı çoğaltmak veya ayarlamak istediğinizde her bir modülü ayrı ayrı seçmek veya taşımak yerine, bunları bir kez gruplandırabilir ve bir birim olarak ele alabilirsiniz.

Modül grubu başka bir Divi 5 modülü olarak bulunur. Eklemek için grup modülünü seçin. İçine daha fazla modül ekleyebilirsiniz ve hepsi bir modül grubu olarak birlikte gruplandırılır.

Modül Grubu Ekle

6. Gelişmiş birimler, daha akıllıca duyarlı bir tasarım için optimize etmenize yardımcı olur

Divi 4'te, çoğu stil girişi piksel ve yüzdeler gibi temel birimlerle sınırlıydı. Gelişmiş birimlerle, artık Divi 5'teki görsel ayarlar olarak REM, EM, VW, VH, % ve hatta CLAMP () gibi güçlü CSS fonksiyonları dahil olmak üzere çok daha geniş bir CSS birimi yelpazesi kullanabilirsiniz. Bu özellik, duyarlı tasarım ve ölçeklenebilir tipografiyi önemseyen tasarımcılar için yararlıdır.

Örneğin, dolgu veya yazı tipi boyutu için minimum, ideal ve maksimum bir değer ayarlamak için CLAMP () kullanabilirsiniz, böylece tasarımınız düzinelerce özel kesme noktası oluşturmadan cihazlarda cilalı görünür. Bir Başlığın Kelepçesi (36px, 4VW, 48px) yazı tipi boyutunu 36px'de başlayacak, görünüm portu genişliğinin% 4'üne göre ölçecek ve 48px'de büyümeyi durduracak.

Bu değerler tüm ayarlara gömülüdür. Gelişmiş birim değerleri tanımlayarak sayı tasarım değişkenleri de oluşturabilirsiniz.

Divi 5 Gelişmiş Birimler

Bu özellikler esnek, duyarlı ve tutarlı web siteleri oluşturmayı kolaylaştırır. Özel CSS yazmanıza veya geçici çözümlere güvenmenize gerek kalmadan tasarımınız üzerinde doğrudan inşaatçı içinde daha fazla kontrole sahip olacaksınız.

Ama bu sadece başlangıç. Şimdiye kadar gördüğünüz şey, Divi 5'in sunduklarının sadece bir kısmını temsil ediyor. Aktif olarak daha fazla özellik üzerinde çalışıyoruz, hepsi daha akıllı ve daha hızlı inşa etmenize yardımcı olmak için tasarlanmıştır. Özünde, Divi 5, web tasarımını daha akıllı hale getirmekle ilgilidir. Her güncelleme, iş akışınızı basitleştirmeye ve size daha az çaba ile güzel web siteleri oluşturma araçları sunmaya odaklanmıştır. Şimdi başlamak, son lansmana hazır olmadan önce Divi 5'e hakim olmanın avantajını sağlayacaktır.

Divi 5'i daha fazla indirin Divi 5

Divi 5'in içine bir bakış

Divi 5 ile bir web sitesi oluşturmanın nasıl göründüğünü görelim. Bunu yapmak için önce çalışan bir WordPress kurulumuna ihtiyacınız olacak. Bu, bir web ana bilgisayarının seçilmesi, bir alan adı kaydetmesi ve sitenize WordPress'i yüklemek anlamına gelir. Bu yazının bir sonraki bölümüne odaklanmadan önce bu koşuya sahip olduğunuzu varsayacağız:

1. Divi 5'i indirin, yükleyin ve etkinleştirin

Divi'yi satın almak, yüklemek ve etkinleştirmek için bir video eğitimi:

Satın alma işleminiz başarılı olduktan sonra, zarif temalar üyelik alanınıza giriş yapabilirsiniz. Şimdi Divi 5 Zip klasörünü indirin.

Divi 5 zip klasörünü indirin

WordPress kontrol panelinize geri dönün. Bu sorguyu izleyin: Görünüm> Temalar> Tema Ekle> Tema Yükle. Ardından Divi 5 Zip dosyasını bilgisayarınızdan yükleyin ve şimdi yükleyin.

Divi 5 yükleyin ve yükleyin

Kurulduktan sonra temayı etkinleştirin .

Divi 5'i etkinleştir

Son olarak, divi lisansınızı etkinleştirin. Bunu yaparak, seçtiğiniz hizmetlere etkin bir şekilde erişebileceksiniz. İşlem otomatiktir, sadece ET üyelik giriş bilgilerinizle bir kez daha giriş yapın.

Üyeliğinize giriş yapın

Bunu yaptıktan sonra Divi 5 gösterge panelinize erişebilirsiniz. Gösterge tablonuz size Divi lisans durumunuz, güncellemeler, sayfalar, şablonlar ve daha fazlası gibi bilgiler verir. Ayrıca, bir web sitesi tabanı oluşturmak için kullanacağımız Divi Quick sitelerini de göreceksiniz.

Divi 5 Gösterge Tablosu

Divi ile başlayın

2. Divi 5 kullanarak web sitenizi oluşturun

Divi 5 ile bir web sitesi oluşturmanın en hızlı yolu Divi hızlı siteleri kullanmaktır.

İki seçenek arasından seçim yaparsınız:

  • Önceden yapılmış bir başlangıç ​​sitesi kullanın ve Divi 5, seçilen sitenin markasını ve içeriğini kullanarak bir temel web sitesi oluşturacaktır.
  • Veya Divi AI'ye benzersiz bir web sitesi oluşturma talimatı vermek için sitenizi AI ile oluşturun .

Divi 5'de Divi Hızlı Siteler

İşlemin başlangıç ​​sitelerini kullanarak nasıl göründüğü aşağıda açıklanmıştır: bir başlangıç ​​sitesi seçersiniz ve web sitesi logonuz ve oluşturmak istediğiniz sayfalar gibi birkaç ayrıntı doldurursunuz.

Ve işte AI ile böyle çalışıyor. Divi Ai'ye web sitenizi anlatırsınız ve pişirmesini beklersiniz:

Web sitesi oluşturma sürecinizi hızlandırmak istiyorsanız Divi Hızlı Siteler mükemmeldir. Kendi markalaşma, içeriğiniz ve stilinizle daha da özelleştirebileceğiniz hazır bir yapı sağlar. Boş bir sayfadan başlamak veya her düzeni sıfırdan tasarlamak zorunda değilsiniz.

Sıfırdan yeni bir sayfa oluşturmak veya Divi Visual Builder'a erişmek istiyorsanız, Sayfa> Sayfa Ekle'ye gidin.

WordPress'e yeni sayfa ekleyin

Şimdi, sayfanızı adlandırın ve Divi Builder'ı kullanın.

İsim ve Erişim Divi Builder

Divi Visual Builder'a gireceksiniz.

Divi 5 Görsel Oluşturucu

3. Divi 5 görsel oluşturucu temelleri hakkında bilgi edinin

Divi 5 Visual Builder'a ilk kez erişiyorsanız, birçok simge göreceksiniz, işte hızlı bir yol izi:

Divi 5 Dashbaord İzlenmesi

  • (1.) Sol kenar çubuğu paneli: Bu panel yapımcı araçları içerir. Önceden yapılmış düzenler ekleyebilir, düzen kitaplığınıza erişebilir, katmanları kullanarak yapıyı görüntüleyebilir, tel çerçeve görünümüne geçebilir, tasarım değişkenlerini kaydedebilir, oluşturucu ayarlarını ayarlayabilir ve yardım alabilirsiniz.
  • (2.) Üst çubuk: Duyarlı modlar arasında geçiş yapabilirsiniz. Genişlik ve yakınlaştırma kontrolleri, kesme noktaları arasında ince ayar düzenlemenize yardımcı olur. Ayrıca geri alma/yeniden düzen, net bir düzen, geçmiş ve kaydetme seçeneklerini burada bulacaksınız. Ayrıca ilerlemenizi yönetmek için Çıkış, Önizleme, Taslak Kaydet ve Düğmeler Yayınlayın.
  • (3.) Sağ kenar çubuğu: Herhangi bir modüle tıkladığınızda, ayarları sağda açılır. İçerik ekleyebilir, stil ve özel CSS ekleyebilirsiniz. Üstteki ekmek kırıntıları (sayfa> bölüm> satır> sütun), modülün düzeninizde tam olarak nerede yaşadığını gösterir.

Ardından, iki konteyner öğeniz vardır: bölümler (mavi olarak temsil edilir) ve satırlar (her zaman yeşil). Satırların içinde, modüller (siyah) ekleyebileceğiniz sütunlarınız var .

bölümler, satırlar ve modüller

Bir bölüm eklemek için Mavi Plus düğmesini tıklayacaksınız. Bir arka plan için, bir modül için Yeşil Plus düğmesi ve siyahtır. Aralarından seçim yapabileceğiniz farklı satır seçenekleri elde edersiniz. Bir satırın içinde sütunlar vardır.

satır yapıları

Ve satırların ve sütunların içi, başlıklar, resimler vb. Gibi içerik modülleri ekleyeceksiniz. Divi 5, bir iletişim formu, referans vb.

Divi 5'teki İçerik Modülleri

Son modül grubu modülü, kendi modüllerinizi oluşturabilmeniz ve kaydedebilmeniz için farklı öğeleri gruplamanıza olanak tanır. ( Gri renk bir modül grubunu temsil eder.)

Divi 5'teki modül grubu

4. Site sayfalarınızı Divi 5 ile oluşturun

Divi Hızlı Siteler kullanmasanız bile, yine de önceden yapılmış düzenleri içe aktarabilir veya tüm bir düzeni oluşturmak için Divi AI kullanabilirsiniz. Mavi Plus düğmesine tıklayın.

Önceden tasarlanmış bir düzeni içe aktarın veya divi AI ile oluşturun

(1.) 2500'den fazla önceden hazırlanmış düzen arasından seçim yapmanızı sağlar ve (2.) Divi AI'ye sayfanızı oluşturmasını talimat vermenizi sağlar. Önceden yapılan bir düzen içe aktarmak nasıl çalışır:

Divi AI ile inşa etmeyi seçerseniz, yalnızca oluşturmak istediğiniz sayfadan bahsetmeniz gerekir.

Divi 5'te divi ai ile inşa et

Sayfa Tasarımınızı Özelleştirme

Sayfanızı Divi Hızlı Siteleri, önceden yapılmış düzenler veya Divi AI kullanarak oluşturduysanız, bunu sizin için özelleştirmelisiniz. Markanızı web sitenize sürekli olarak eklemek için en kolay yol tasarım değişkenlerinizi tanımlamaktır.

Tasarım değişkenlerini tanımla

Bu küresel değerler (birincil renkleriniz ve yazı tipleriniz gibi) bunları kullandığınız her yerde otomatik olarak uygulanır. Bunları değiştirmek için değişken yöneticideki değişken değeri değiştirmeniz yeterlidir.

Herhangi bir modülü düzenlemek için üzerine tıklayın ve ayarlar sağ taraf panelde açılır.

Bir Modül Ayarlarını Düzenleme

Her Modül Ayarları panelinde üç sekme bulunur:

  • İçerik: Burası, modülün gerçek içeriğini eklediğiniz veya düzenlediğiniz yerdir. Ayrıca, modülü daha kolay tanımlamaya yardımcı olmak için bağlantılar ekleyebilir, bir arka plan seçebilir veya yönetici etiketini değiştirebilirsiniz.
  • Tasarım: Tasarım sekmesine geçmek, modülün görsel görünümünü şekillendirmenizi sağlar. Yazı tipi boyutu, ağırlık, renk, çizgi yüksekliği, aralık, hizalama ve daha fazlasını değiştirebilirsiniz. Farklı modüllerin farklı ayar seçeneklerine sahip olduğunu unutmayın.
  • Gelişmiş : Gelişmiş sekmesi, daha fazla teknik seçenek üzerinde tam kontrol sağlar. Özel CSS ekleyin, duyarlı görünürlük ayarlayın ve daha fazlasını. Özellikle tasarım sekmesinin sunduklarının ötesinde özelleştirmek istiyorsanız kullanışlıdır.
  • Dizüstü bilgisayar simgesi, Duyarlı ve Hover modları arasında geçiş yapmanızı sağlar. Bir moda geçerek tüm ayarları özelleştirebilir ve kaydetebilirsiniz.
  • Varsayılan ön ayar düğmesi Divi'nin önceden ayarlanmış özelliğidir. Öğe ön ayarları ile seçenek grup ön ayarları arasında bir fark.

Bir yazar bloğuyla uğraşıyorsanız, içerik eklemek için Divi AI kullanın (metin, resim ve kod). Hemen hemen her modül AI kullanmanızı sağlar. Tek yapmanız gereken küçük AI simgesini aramak.

AI ile Düzenle

Sayfanızı özelleştirdikten sonra taslağınızı kaydetmeyi unutmayın. Ardından, her şeyin düzgün çalıştığını görmek ve sayfanızı yayınlayın .

Kaydet, Önizleme ve Yayınlayın

Divi ile başlayın

Divi'den en iyi şekilde yararlanmak için 5 ipucu 5

Divi 5 heyecan verici bir aşamada - halka açık alfa aşaması. Öğütme yükseltmeleri ve önemli performans iyileştirmeleri geçti. Artık geriye kalan tek şey yeni özellik sürümleri ve küçük düzeltmeler.

Bu aynı zamanda onunla inşa etmeye başlamak için mükemmel bir zaman yapar. Ne kadar erken başlarsanız, Divi 5 beta tamamen piyasaya sürüldüğünde o kadar rahat olursunuz. Divi üyeliğinizden en iyi şekilde yararlanmanın birkaç yolu:

1. Yeni sürümlerle güncellenin

Yeni özellik güncellemeleri sadece düzeltmeler veya performans ayarları değil, aynı zamanda web siteleri oluşturma şeklinizi değiştiren güçlü araçlardır. Özelleştirilebilir kesme noktalarından, değişkenlere, iç içe sıralara ve gelişmiş birimlere kadar, her ekleme size daha fazla kontrol ve hız sağlamak için Divi 5'in yeni temelini oluşturur.

Döngüde kalmak için, Nick'in düzenli olarak izlenecek yolları paylaştığı ve duyuruları yayınladığı zarif temalar YouTube kanalına abone olun.

YouTube kanalımıza abone olun

2. Yeni Divi 5 Builder ile deney

Divi 5 Visual Builder hızlı, duyarlı ve verimlilik için inşa edilmiştir. Her yeni özellik ekleme, iş akışınızı optimize etmeye katkıda bulunur ve yeni stratejiler geliştirmek için denemeye devam etmenizi öneririz. Size yardımcı olmak için, yaklaşımlarımızı paylaşmak için yeni özellik eğitimleri de yayınlıyoruz. Örneğin, farklı satır yapılarındaki yazımız, akıllı düzenler oluşturmak için iç içe satırları kullanmanın yollarını gösterir.

Divi 5'i kullanmanın yaratıcı yollarını bulmak için zarif temalar blogunu düzenli olarak ziyaret etmeyi alışkanlık haline getirin.

3. Divi Topluluğunda Divi 5 İpuç ve Püf Noktalarını Paylaşın ve Arayın

Divi 5 ile denemeye başladığınızda, başkalarının bunu nasıl kullandığını görmek de aynı derecede önemlidir. Dünyadaki tasarımcılar ve geliştiriciler de aynı yeni özellikleri araştırıyor, yaratıcı düzenleri deniyor ve sonuçlarını paylaşıyorlar.

Kesme noktalarının akıllı kullanımlarından zaman kazandıran tasarım değişken kurulumlarına kadar, başkalarının yapılarına nasıl yaklaştıklarını izleyerek öğrenebileceğiniz çok şey var. Öğreticileri keşfetmek, soru sormak ve Divi 5 ile çalışan insanlardan yeni fikirler almak için resmi Divi Facebook grubuna veya divi odaklı forumlara katılın. Becerilerinizi büyütmenin ve güncel kalmanın en hızlı yollarından biridir.

4. Divi 5 ile yeni web siteleri oluşturun

Divi 5'i (şu anda) kullanmanın en iyi yolu sıfırdan yeni web siteleri oluşturmaktır. Yeni bir projeye başlarsanız beklemek için hiçbir neden yok. Daha hızlı performans, daha temiz kodu ve kutudan çıkarılan daha iyi bir düzenleme deneyimi elde edersiniz.

Ancak mevcut bir Divi 4 sitesiyle çalışıyorsanız, Divi 5'e göç etmeden önce biraz daha beklemek daha iyidir.

Divi 5 hala aktif gelişimde olduğundan, bazı Divi 4 modülleri ve üçüncü taraf uzantıları henüz tam olarak desteklenemeyebilir. Bununla birlikte, her web sitesi farklı olduğundan, her seferinde durum böyle olmayacak. Emin değilseniz, yapılacak en iyi şey sitenizin uyumluluğunu kontrol etmektir. Yardım etmek için bir Divi 5 Göçmen aracı da oluşturduk.

Divi 5 Göçmen Aracı

Mevcut Divi 4 sitenizi tarar ve hangi modüllerin uyumlu olduğunu, hangilerinin olmadığını ve neyin dikkat çekmesi gerektiğini söyler. Bu, canlı sitenizi riske atmadan bilinçli bir karar vermenize yardımcı olur.

Bununla birlikte, beta sürümüne çok yakınız, bu yüzden tavsiyemiz sadece Divi 5 kullanarak yeni web siteleri oluşturmak ve Divi 4 sitelerinizi değiştirmeden önce biraz daha beklemektir.

5. Bir Divi Tasarım Sistemi Oluşturun

Divi 5 birçok özelliği tanıtmaktadır, bu nedenle hangisinin kullanılacağına ve hangilerinin yapmamasına karar vermek kafa karıştırıcı olabilir. Örneğin, tasarım değişkenlerini tanımlıyorsanız, opsiyon grup ön ayarlarını da kullanmalısınız? Bunu anlamanın en iyi yolu, sizin için neyin işe yaradığını denemek ve bulmaktır. Ve yeni özellikler yayınlandıkça, sürecinizi geliştirmeye devam edebilirsiniz.

Tutarlılık için tasarım değişkenleri ile herhangi bir web sitesi oluşturmayı başlatabilir, ardından bunları seçenek grubu ve öğe ön ayarlarında kullanabilirsiniz. Bu yapılandırılmış yaklaşım zaman kazandırır, markanızı hizalamalı tutar ve global stilleri sadece birkaç tıklamayla güncellemenizi sağlar.

6. Onlarla karşılaştığınızda hataları bildirin

Divi 5 hala aktif gelişmede, bu yüzden muhtemelen yol boyunca birkaç hata ile karşılaşacaksınız. Bunu yaptığınızda, bunları bildirmenizi isteriz. Ekibimizin sorunlarını daha hızlı çözmesine yardımcı olur ve bizi beta sürümüne bir adım daha yaklaştırır. Ayrıca Divi 5 şüphesi için bize güvenebilirsiniz - destek ekibimiz hızlı yanıt vermek ve burada yardımcı olmak için burada ve profesyonel kullanıcılar da acil bir şey için 7/24 VIP desteği alıyor.

Web Tasarım Yolculuğunuzu Başlatmak İçin Divi 5'i seçin

Divi 5

Divi 5 size modernize edilmiş ve sıfırdan yeniden inşa edilmiş eksiksiz bir web sitesi oluşturma çerçevesi sunar. Her bir kısmı iş akışınızı basitleştirmek, performansı hızlandırmak ve sizi web tasarımının geleceğine ayarlamak için tasarlanmıştır.

  • Rekabetten daha iyi: Çoğu inşaatçı gösterişli özelliklere odaklanırken, Divi 5 kontrol, hız ve gerçek dünya kullanılabilirliğine odaklanır. Size karşı değil, sizinle çalışmak için inşa edilmiştir.
  • Divi 4: Divi 4'ten büyük bir yükseltme zaten WordPress kullanıcıları tarafından sevildi. Divi 5, insanların sevdiği her şeyi tutar ve yapmadıkları her şeyi düzeltir. Daha hızlı, daha hafif ve daha ölçeklenebilir.
  • Tüm araçlar tek bir yerde: görsel düzenlemeden AI içeriğine, bulut depolama, hızlı site oluşturma ve pazarlama araçlarına kadar, Divi 5 güçlü başlamak ve hızlı büyümek için ihtiyacınız olan her şeyi sağlar.

Bugün web tasarım yolculuğunuza başlıyorsanız, Divi 5 ile başlayın.

Divi 5 bugün yeni web sitelerinde kullanılmaya hazır.

Divi 5'i daha fazla indirin Divi 5