Divi 5 ile bir web sitesi nasıl oluşturulur (Erken Katılın ve İlerlemeye Alın)

Divi ile güzel bir web sitesi ne kadar çabuk bir araya getirebileceğinizi ilk anladığınızı düşünün. Yaratıcılık ve sadelik arasında mükemmel bir denge gibi geldi. Divi 4 herkese fantastik tasarım araçları ve pürüzsüz bir görsel oluşturucu verdi, ancak zarif temalarda yer almayacağız.

Geri bildirimlerinizi yakından dinledik ve Divi'yi geliştirmek için çok çalıştık. Divi 5 sevdiğiniz her şeyi alır ve daha hızlı, daha pürüzsüz ve daha güçlü hale getirir. Daha az çaba ve daha fazla olasılıkla yaratmanıza ve geleceğe hazır olmanıza yardımcı olmak için tasarlanmıştır.

Neyin yeni olduğunu görmek veya bir sonraki sitenizi başlatmak istiyorsanız, bu kılavuz yepyeni bir web sitesi oluşturmanıza, Divi 5 ile adım adım ve yol boyunca en iyi şekilde nasıl yapılacağına dair pratik ipuçlarını paylaşmanıza yardımcı olacaktır. Hadi gidelim!

Divi 5 yeni web sitelerinde kullanılmaya hazırdır, ancak mevcut olanları taşımaya tamamen hazır değildir.

Divi 5'i farklı kılan nedir?

Divi 5, ilk başlattığımızdan beri sayfa oluşturucumuzdaki en büyük değişikliği temsil ediyor. Modern web standartları göz önünde bulundurularak onu sıfırdan yeniden inşa ettik. Bu sadece bir yüz germe değil. Web sitelerinin Divi ile nasıl oluşturulması gerektiğini tamamen yeniden düşündük.

Web gelişmeye devam ediyor, mobil tarama büyümesi ve kullanıcı beklentileri artıyor. Divi her zaman bu değişikliklere adapte olmuştur ve Divi 5 bu geleneği en son standartları benimseyerek sürdürür.

Divi 5'i açarken, “Bu taze görünüyor” diye düşünebilirsiniz. Sonra inşa etmeye başlarsınız ve işte o zaman fark edersiniz.

"Bekle, bu bölüm anında yüklendi mi?"

Evet, öyle. Ve bu sadece başlangıç.

Divi 5, Divi 4'te işe yarayanı tutar, ancak muhtemelen yaşamayı öğrendiğiniz hayal kırıklıklarını giderir. Bunu inşa ettik çünkü artık yeterince iyi değildi, bizim için değil ve kesinlikle sizin için değil. Bugün oluşturduğunuz sitelerin daha fazlasını yapması ve daha hızlı yüklenmesi gerekiyor.

Divi 5'in mevcut alfa'sının şu ana vurguları keşfedelim:

Kısa kodlardan blok tabanlı yapıya kadar

Divi 4 düzenlerinizi kısa kodlar olarak sakladı: WordPress'in sayfalarınızı oluşturmak için okuduğu kare parantez içinde kod parçaları. Çalıştılar, ama mükemmel değildiler.

Divi 5'te, içeriğinizin nasıl depolandığını yeniden inşa ettik. Veritabanınızda saklanan kısa kod yok! Şimdi WordPress'in yönüne daha iyi uyan temiz, blok tabanlı bir yaklaşım kullanıyoruz.

Sayfaları düzenlerken farkı hissedeceksiniz. Bir şeyi tıklayın ve hemen yanıt verir. Gecikme yok, kısa kodların işlenmesini beklemek yok. Değişiklikleriniz sadece oluyor.

Kaputun altındaki neredeyse her şeyi değiştirmiş olsak da, nasıl inşa edileceğinizi öğrenmeniz gerekmeyecek. Görsel deneyim tanıdık kalır. Sahnelerin arkasında olanları çok daha akıcı ve modern yaptık.

Yeni Divi 5 arayüzü

Divi 5, odağı tasarım çalışmalarınıza geri getiren daha temiz bir arayüz sunar. Visual Builder artık içeriğinizi kapsayan yüzer kutular yerine yan panellere sahiptir. Bu değişiklik Divi ile nasıl çalıştığınızda büyük bir fark yaratacaktır.

Araç çubuğu yeniden düzenlendi. Ortak eylemler artık parmaklarınızın ucunda, özel araçlar çalışma alanınızı karıştırmadan erişilebilir kalıyor.

Renk seçicileri, tipografi kontrolleri ve boşluk ayarları gerektiğinde bağlamsal olarak görünür.

Metin düzenleme bu sürümde daha doğal hissediyor. Metni seçtiğinizde görünen basit kontrollerle doğrudan sayfada içeriği doğrudan biçimlendirebilirsiniz. Bu doğrudan yaklaşım yazma ve biçimlendirme sürecini önemli ölçüde hızlandırır.

Ayarların nasıl düzenlendiğini de geliştirdik. İlgili seçenekler mantıksal olarak gruplandırılır ve sekmeler ve menüler aracılığıyla arama zamanınızı azaltır. Tüm sistem daha uyumlu ve amaçlı hissediyor. Ayrıca, hafif ve karanlık mod seçenekleri, uzun tasarım seanslarını gözlerinizde daha rahat hale getiren düşünceli dokunuşlardır.

Bu arayüz iyileştirmeleri başlangıçta ince görünebilir, ancak birkaç sayfa oluşturduktan sonra, araçlar yolunuzdan uzak kaldığında ne kadar hızlı çalışabileceğinizi fark edeceksiniz.

Çok panelli çalışma alanı

Yenilenen Divi 5, tasarımlarınızla nasıl etkileşime girdiğinize yeni bir bakış getiriyor. Divi 4 bize sezgisel bir kullanıcı arayüzü verirken, Divi 5'teki yeni panel ilk düzeni onları tasarım çalışması için daha doğal hissettirecek şekilde düzenliyor.

Ayarlar artık ekranınızın kenarları boyunca düzgün bir şekilde yerleştirilerek sayfanızın engelsiz bir görünümünü sunar. Değişikliklerin panelleri kapatmaya veya hareket ettirmeye gerek kalmadan gerçek zamanlı olarak gerçekleştiğini görebilirsiniz. Bu net görünüm, ince ayar aralığı veya hizalama yaparken hassas çalışmayı çok daha kolay hale getirir.

Yeni çoklu panel kurulumu, aletlerinizin yayılmasını ancak yine de ulaşılabilmenizi sağlar.

Metin ayarlarınızı bir tarafta açarken diğer tarafta aralığını değiştirebilirsiniz. Diğerinde çalışmak için bir şeyi kapatmanıza gerek kalmayacak.

Ekmek kırıntıları, elementler arasında hızlı bir şekilde gezinmenize yardımcı olur. Bir düğmeden ana satırına veya bölümüne atlamak için tıklayın. Bu, karmaşık düzenleri düzenlemenin derinliklerinde olduğunuzda sayısız tıklamadan tasarruf sağlar.

Bazı tasarımcılar sağdaki ayarları ve soldaki diğerleri tercih ediyor. Tercih etmediğiniz seçeneğe razı olmak zorunda değilsiniz. Divi 5, en rahat hissettiren şeyleri seçmenizi sağlar. Bunları sekmelerde de istifleyebilirsiniz, bu da birçok unsuru hokkabazlık yaparken yardımcı olur.

Bu önemli görünmeyebilir, ancak logo ayarları, menü stilleri ve düğme özellikleri arasında geçiş yapmanız gereken başlıklar gibi karmaşık düzenler oluştururken uygun olabilir.

Panelleri, kesintileri değil, çalışma alanınızın bir parçası olacak şekilde tasarladık. Divi 5'in kullanıcı arayüzüyle, Web Tasarım Tuvalinize ait olduğu yere odaklanabilirsiniz.

Sabit sıralardan iç içe satırlara geçiş

Divi 4'te, karmaşık bir şey oluşturmaya çalıştığınızda, aniden bölüm sıralı sütun yapısıyla duvarlara çarparsınız ve özel bölümlere veya özel CSS'ye bağlı olmanız gerekir. Divi 5 bu baş ağrısını iç içe sıralarla düzeltir. Kulağa basit gelebilir, ancak bu değişiklik, geçici çözümleri bir araya getirmeden yaratabileceğiniz şeyi tamamen açar.

Artık herhangi bir satırın içine tıklayabilir ve orada yeni bir satır yapısı ekleyebilirsiniz - özel bölümlere gerek yoktur veya içeriğinizi mantıklı bir şekilde gruplamak için özel CSS yazmaya gerek yok.

Bu iç içe satır sistemi, geliştirilmiş düzen motorumuzun sadece başlangıcıdır. Özel bölümleri geçersiz kılacak FlexBox kontrolleri ve yeni satır şablonları üzerinde çalışıyoruz. Yakında, FlexBox uygulaması, içeriğin ekranlar arasında nasıl hizalandığı ve dağıtıcı olduğu konusunda size daha iyi kontrol sağlarken, duyarlı tasarımları daha da basit hale getirecektir.

Diğer önemli özellikler

Başlıca yapısal değişikliklerin ötesinde, Divi 5, web sitesi oluşturmayı daha pürüzsüz ve daha sezgisel hale getiren yeni özelliklere sahiptir. Mevcut alfa'da çalışma şeklinizi değiştirecek bazı göze çarpan eklemelere bakalım:

• Tasarım değişkenleri stil seçimlerinizi merkezileştirir ve site çapında değişiklikleri bir esinti haline getirir. Renkleri, yazı tiplerini, boyutlarını, görüntüleri ve diğer öğeleri bir kez tanımlayın, ardından bunları sitenize uygulayın. Marka renklerinizi güncellemeniz mi gerekiyor? Değişkeni değiştirin ve her örnek otomatik olarak güncellenir.
• Tek tıklamayla düzenleme, içeriğinizle etkileşim kurmayı zahmetsiz hale getirir. Düzenlemek için herhangi bir modülü tıklamanız yeterlidir. Artık küçük dişli simgeleri veya ayar düğmeleri için avlanmayın. Bu küçük değişiklik, iş gününüz boyunca sayısız tıklama tasarrufu sağlar.
• Tuval ölçeklendirme, görünümleri değiştirmeden tasarımınızın farklı ekran boyutlarında nasıl göründüğünü görmenizi sağlar. Tuval kenarını yeniden boyutlandırmak için sürükleyin ve düzeninizi gerçek zamanlı olarak izleyin - sabit sekme değiştirmeden duyarlı davranışı kontrol etmek için mükemmel.
• Gelişmiş birimler desteği, hassas, duyarlı tasarımlar için yeni olanaklar açar. Herhangi bir ekran boyutuna mükemmel uyum sağlayan sıvı düzenleri oluşturmak için doğrudan Divi'nin ayarları alanlarında Calc (), Clamp () ve Min ()/Max () gibi CSS işlevlerini kullanın.
• Gereksiz komut dosyaları ve modülleri yüklemekten kaçınarak performans iyileştirmesi
• Özelleştirilebilir kesme noktaları sadece üçten (masaüstü, tablet, mobil) yedi ayarlanabilir seçeneğe kadar genişler. Bu ince ayarlı kontrol, küçük telefonlardan ultrawide monitörlere kadar her şey için mükemmel düzenler oluşturmanıza yardımcı olur.

Divi 5 ile bir web sitesi oluşturma: Adım adım kılavuz

Şimdi, bu kılavuzun etine girelim: sizi Divi 5'in güçlü özelliklerini kullanarak boş tuvalden bitmiş web sitesine götüren pratik bir izlenim. Sürecin her aşamasını birbirine dayanan yönetilebilir adımlara ayıracağız

1. Divi 5'i yükleme

Divi 5 koşmak sadece birkaç adım sürer. Üyelerinizden en son Alpha sürümünü indirin, tema bölümünden WordPress'e yükleyin ve normal olarak sizin gibi etkinleştirin.

2. Çalışma Alanınızı Özelleştirme

Divi 5'in görsel oluşturucusunu açarken fark edeceğiniz ilk şey, ne kadar temiz ve düzenli hissettirdiğidir. Yüzen paneller daha önce olduğu gibi görüşünüzü engellemez. Bunun yerine, yolunuzdan uzak duran dockable panellerle daha düşünceli bir düzen bulacaksınız. İstediğiniz gibi çalışma alanınızı kurmak için birkaç dakikanızı ayırın.

Tercihinize veya çalışma sürenize göre ışık ve karanlık mod arasında geçiş yapabilirsiniz.

Sizin için çalışan bir çalışma alanı oluşturmak

Divi 5, panelleri hareket ettirmekten daha fazlasını sunar. İlgili panelleri, karmaşık ayarları işlerken bile çalışma alanınızı düzenli tutan sekmelerde gruplandırabilirsiniz.

İki farklı ayar panelini açın ve birini diğerine sürükleyin. Bir tıklamayla geçiş yapmanıza izin vererek sekmeli bir düzende birleşecekler.

Klasik bir kurulum tercih ediyorsanız, panelleri ekranınızda herhangi bir yerde yüzebilirsiniz. Bir paneli ayırmak için kenarlardan uzaklaştırın ve istediğiniz yere yerleştirin.

Daha büyük projeler için, sol araç çubuğundan röntgen modu yardımcı olabilir. Her elemanı ince bir sınırla özetler, bu da bölümlerin ve modüllerin nereden başladığını ve bittiğini tespit etmeyi kolaylaştırır. Bu görsel kılavuz, ayrıntılı düzenlerle çalışırken yönlendirilmiş kalmanıza yardımcı olur.

İş Akışınızı Hızlandırma

Klavye kısayolları Divi 5'teki tasarım sürecinizi önemli ölçüde hızlandırabilir. Kısayolların eksiksiz bir listesini bulacağınız Yardım menüsüne erişmek için (?) Seçeneğine basın. Sadece birkaç anahtar kombinasyon öğrenmek daha büyük projelerden saatlerce tıraş edebilir.

İç içe öğeleri düzenlerken (bir satır içindeki bir sıra içindeki bir düğme gibi), ekmek kırıntıları hiyerarşideki kesin konumunuzu gösterir. Katmanlardan avlanmadan doğrudan o öğenin ayarlarına atlamak için Breadbrumb Trail'in herhangi bir bölümünü tıklayın.

Yararlanmak için sol araç çubuğundaki Katmanlar Paneli simgesini tıklayın. Tüm sayfa yapınızın iç içe bir liste olarak bir görünümünü verir, bu da karmaşık düzenlerle çalışırken belirli öğeleri seçmeyi çok daha kolay hale getirir.

2. Dinamik değişkenleri ayarlama

Divi 5'teki Tasarım Değişkenleri Web sitenizin görsel öğelerini nasıl yönettiğinizi değiştirin. Sitenizin tasarımını kontrol etmek ve güncellemeyi basitleştirmek için size merkezi bir yer sunarlar. Onları web sitenizde kullanabileceğiniz kısayollar olarak düşünün.

Tasarım değişkenlerini kullanmaya başlamak için görsel oluşturucuyu açın ve sol kenar çubuğundaki değişken yönetici simgesini arayın. Tıkladığınızda, farklı değişken türleri oluşturma seçenekleri görürsünüz: renkler, yazı tipleri, sayılar, görüntüler, metin ve bağlantılar.

Global Renkleri Kurmak

İlk olarak, bazı renk değişkenleri ayarlayın. Renkler sekmesine tıklayın, renklerinizi ekleyin ve “Marka Mavisi” veya “Birincil Renk” gibi unutulmaz bir şey adlandırın. Kaydet'i tıklayın ve ilk değişkeninizi oluşturdunuz.

İkincil renkleriniz, arka plan tonlarınız ve metin renkleriniz için de aynısını yapın. Tüm marka renklerinizin değişkenler olarak kaydedilmesi, bir daha asla onaltılık kodları hatırlamanız gerektiği anlamına gelir.

Yazı tipi ve sayı değişkenleri oluşturma

Ardından, tipografi sisteminizi kuralım. Yazı Tipleri sekmesinin altında, başlığınız ve gövde yazı tipleriniz için değişkenler oluşturun. Bu, metninizi tüm site boyunca tutarlı tutar.

Sayı değişkenleri için, şunlar gibi ortak ölçümleri düşünün:

• Standart dolgu (bölümler için belki 30 piksel)
• Sınır yarıçapı (yuvarlak köşeler istiyorsanız)
• İçerik kapları için maksimum genişlikler
• Yazı tipi boyutları

Bu değişkenleri oluşturmak birkaç dakika önceden sürer, ancak saatler tasarruf sağlar. Müşteriler değişiklik istediğinde, her bir öğeyi ayarlayarak her sayfayı avlamanız gerekmez. Değişkeni bir kez güncelleyin.

Ayrıca, telefon numaranız, çalışma saatleriniz veya şirket sloganınız gibi daha sonra değişebilecek içerik için metin değişkenleri de oluşturmalısınız.

Siteliğinizde yeniden kullanabileceğiniz URL'lerle bağlantı değişkenleri oluşturun, bu da sosyal medya profilleri, satış ortağı URL'leri veya “iletişime geç” düğmesi gibi yaygın olarak kullanılan bağlantıları işlemek için mükemmeldir.

Benzer şekilde, logolar gibi yaygın olarak kullanılan görüntüler için görüntü değişkenleri ekleyin.

Gelişmiş birimlerle değişkenler kullanma

Tasarım değişkenlerini gelişmiş CSS birimleriyle birleştirdiğinizde Divi 5 daha da güçlü olur. Ekran boyutları arasında ölçeklenen duyarlı tipografi için CLAMP () gibi CSS işlevlerini kullanarak bir sayı değişkeni oluşturun.

Örneğin, aşağıdakilerle bir başlık boyutu değişkeni oluşturun: Kelepçe (36px, 5VW, 72px).

Bu, metninizi küçük ekranlarda en az 36 piksel, orta ekranlarda akıcı bir şekilde ölçeklendirir ve büyük ekranlarda 72 pikselde kapaklar ayarlar. Bunu, cihazdan bağımsız olarak her zaman orantılı görünen metin için başlık modüllerinize uygulayın.

Değişkenleri ve gelişmiş birimleri birleştirmek, duyarlı tasarımın sıkıcı çalışmasının çoğunu ortadan kaldırır. Metniniz ve boşluğunuz manuel olarak birden fazla kesme noktası ayarlamadan otomatik olarak ayarlayın.

3. Divi ile Bina Sayfaları ve Şablonlar

Artık çalışma alanınızı özelleştirdiğinize ve tasarım değişkenlerinizi oluşturduğunuza göre, ilk sayfanızı Divi 5 ile oluşturmanın zamanı geldi. Görsel oluşturucu size içerik oluşturmaya başlamak için birkaç yol sunuyor.

Seçenek 1: Divi AI ile web sitenizi oluşturun

Divi Quick Sites + Divi AI ile, temel bir metin istemini sağlayarak birden fazla sayfa, tema oluşturucu düzenleri, evrensel tasarım ayarları, hazır bir navigasyon çubuğu ve optimize edilmiş WordPress konfigürasyonları içeren çalışan bir web sitesi oluşturabilirsiniz.

Divi AI ile bir web sitesi oluştururken, WordPress kontrol panelinize gidin ve menüdeki Divi simgesini tıklayın. Divi Hızlı Siteler kutusunu arayın ve “Yeni Site Oluştur” düğmesine basın.

“Sitenizi AI ile Oluşturun” seçeneğini seçin ve işletmeniz hakkında ayrıntılı bilgi verin. Hizmetleriniz, stiliniz ve kitleniz hakkında ne kadar çok bilgi verirseniz, daha iyi sonuçlar elde edersiniz. Bu özelliği kullanmak için bir Divi AI aboneliğine ihtiyacınız olduğunu unutmayın.

Satış için ürünleriniz varsa, kurulum sırasında WooCommerce Install seçeneğini kontrol edin ve Divi, gerekli tüm bileşenlerle mağaza sayfalarınızı otomatik olarak oluşturacaktır.

Resimler için, Pplash'ın koleksiyonuna erişmek için Divi Hızlı Siteler seçeneğini seçebilir, Divi'nin iş tanımınıza dayalı özel resimler oluşturmasına izin verebilir veya kendi fotoğraflarınızı daha sonra eklemeyi planlıyorsanız “Yer tutucu kullanın” ı seçebilirsiniz.

Daha sonra renkleri ve yazı tiplerini özelleştireceksiniz. Belirli gereksinimleriniz varsa marka renklerinizi manuel olarak seçebilir ve Divi'nin tamamlayıcı kombinasyonlar bulmasına izin verebilirsiniz.

Divi sayfanızı oluşturduktan sonra, sabit renk değerlerini tasarım değişkenlerinizle değiştirin. Bu, AI tarafından oluşturulan bölümlerinizi doğrudan tasarım sisteminize bağlar. Müşteriniz daha sonra daha koyu mavi istiyorsa, yalnızca bir kez güncellemeniz gerekir.

Marka renklerine yerleşmediyseniz ve Divi'nin sizin için seçilmesine izin vermediyseniz ve sonucu beğendiyseniz, bu renkleri tasarım değişkenlerine dönüştürdüğünüzden emin olun. Ayrıca, bu renklerden küresel seçenek ön ayarları oluşturun. Bu şekilde, sayfalarınız esnek ve uyumlu kalır ve her zaman sitenizin görsel stiline uyur.

Seçimlerinizden memnun kaldığınızda, “Oluştur ve Yayınla” düğmesine basın ve Divi sihrini çalışırken birkaç dakika bekleyin. Yeni ana sayfanız görünecek, ziyaretçileri sitenize davet etmeye hazır.

AI kullanarak sayfalarınıza yeni bölümler ekleme

Hızlı bir şekilde yeni bir bölüm oluşturmak için “AI ile Bölüm Oluştur” düğmesini kullanın. Divi AI için neye ihtiyacınız olduğunu açıklayabilirsiniz ve sizin için bir bölüm oluşturacaktır.

AI tarafından oluşturulan bölümleri rafine etme

Divi içeriğinizi oluşturduktan sonra, ihtiyaçlarınıza uyacak şekilde kolayca uyarlayabilirsiniz. Sitenizin her kısmı olağan divi araçları aracılığıyla tamamen özelleştirilebilir. Herhangi bir metni değiştirin, görüntüleri değiştirin, boşluğu ayarlayın ve markanızın renklerini tasarım değişkenleriyle kullanın.

Bu düzenler, mevcut web tasarım standartlarını takip ederek güçlü bir başlangıç ​​noktası verir. Boş bir sayfayla başlamak yerine, sadece benzersiz girişinize ihtiyaç duyan iyi inşa edilmiş bir şablondan çalışıyorsunuz. Bu, görünüm ve his üzerinde tam kontrolü sürdürmenize izin verirken tasarım seçeneklerinde zaman ve çaba tasarrufu sağlar.

Divi 5'in geliştirilmiş düzenleme özellikleri ve AI'nın gücü ile bir web sitesi oluşturmak daha hızlı ve basit hale gelir. Kalite sonuçları hızlı bir şekilde elde edersiniz ve yine de her şeyi özelleştirme özgürlüğüne sahip olursunuz, bu da profesyonel siteleri daha kısa sürede başlatma için ideal hale getirir.

Seçenek 2: Web sitenizi önceden hazırlanmış düzenler kullanarak oluşturun

2000'den fazla hazır tasarımdan birini sayfanıza eklemek için ekranınızın sol üst köşesindeki Blue Plus düğmesine basın ve “Premade Düzen” seçin. Tüm seçeneklerinizi gösteren bir pencere açılır.

İstediğiniz bir tasarım paketi seçin. Daha hızlı bir şey bulmak için filtreleri kullanın veya arama kutusuna ihtiyacınız olanı yazın. Gözünüzü yakalayan herhangi bir paketi tıklayın, ardından hangi sayfa stilini seçin. Karar vermeden önce tüm tasarımı görmek için sola kaydırabilirsiniz.

“One” ı bulduğunuzda, “Bu düzeni kullan”. Renk şemalarını içe aktarma hakkında bir mesaj görebilirsiniz. İstemiyorsanız bunu bilgilendirin.

Tek dezavantaj mı? Oluşturduğunuz her sayfa için bunu tekrarlamanız gerekir. Ama daha iyi bir yol var. Divi hızlı sitelerle (AI gerekmez), bunu önemli ölçüde hızlandırabilirsiniz. En iyi yanı, her Divi kullanıcının bir AI aboneliği için ekstra ödeme yapmadan hızlı sitelere ve tüm başlangıç ​​tasarımlarına erişebilmesidir.

Başlangıç ​​sitesi koleksiyonumuza bakmak zamanınıza değer. Her birinde başka bir yerde görmeyeceğiniz benzersiz fotoğraflar ve sanat eserleri bulunur.

Sadece Divi'ye gidin, Hızlı Siteler sekmesini tıklayın, “Yeni Bir Site Oluştur” a basın ve bu sefer “Önceden Yapılmış Başlangıç ​​Sitesini Kullan” ı seçin. Vizyonunuzla eşleşen birini tespit edene kadar tasarımlara göz atın. Bilgilerinizi ekleyin, renklerinizi ve yazı tiplerinizi seçin ve sistemin sihrini çalıştırmasına izin verin.

Bir düzen uygulandıktan sonra…

Önceden yapılmış bir düzen uyguladıktan veya içe aktardıktan sonra, marka renklerinizi seçmediyseniz ve sadece düzen ile birlikte gelen varsayılan renkleri ve yazı tiplerini kullanmadıysanız, tasarımdan geçin ve sabit renk kodlarını tasarım değişkenleriniz ve seçenek grup ön ayarlarınızla değiştirin.

Renkleri ve yazı tiplerini seçtiyseniz, ancak hazır ayarları henüz oluşturmadıysanız, bu renkleri de tasarım değişkenlerine dönüştürün. Ayrıca, bu renklerden seçenek grubu ön ayarlarını oluşturun.

Bu, düzenden gelen tüm içeriğin önceden ayarlanmış stillerinizi takip etmesini sağlar, böylece düğmeler gibi öğeler her sayfada tutarlı kalır. Aynı şekilde, kolayca korunabilen ve markanızın görsel diliyle uyumlu hazır tasarımların rahatlığını elde edersiniz.

Dakikalar içinde bitmiş bir web sitesine hazır olacaksınız. Her şey mükemmel bir şekilde uyuyor: renkler, yazı tipleri, tüm paket. Bittikten sonra, tıpkı herhangi bir Divi sitesinde olduğu gibi istediğiniz her şeyi ayarlayabilirsiniz.

Seçenek 3: Web sitenizi sıfırdan oluşturun

Yeni bir sayfa açtığınızda, varsayılan bir bölüm eklenen temiz bir tuval göreceksiniz. Divi 4 gibi, yeni bir satır eklemek ve sıfırdan oluşturmaya başlamak için Yeşil (+) düğmesini tıklayabilirsiniz.

Tıpkı Divi 4 gibi, Divi 5 ile kullanıma hazır modüllerden oluşan bir koleksiyon var.

Yuvalanmış sıralar özelliği karmaşık düzenler için paha biçilmezdir. İki sıra bir düzenin bir satırında üç sıra bir bölüme mi ihtiyacınız var? Sorun değil. Satırınızın içine tıklayın, bir satır ekleyin ve satır yapınızı seçin. Divi 5, bu yuvalamayı bir ter kırmadan işler ve size neredeyse sınırsız düzen olanakları verir.

Bunun bir blog düzeni için nasıl işe yarayabileceğini görelim. Standart iki sıralı kurulum: geniş içerik alanı ve daha dar bir kenar çubuğu ile başlayın. Ana satırda blog modülünüzü bırakın.

Normal yayınların üzerindeki bir ızgarada öne çıkan yayınlara mı ihtiyacınız var? Sadece e-posta seçme ile tek bir satır ve daha sonra bilgi kutuları için üç sıra bir yapı ile altta başka bir satırı yuva. Aynı yapı Divi 4'te özel kod gerektirecektir.

Kenar çubuğunuz için, farklı arka planlara sahip farklı widget'ların istiflenmesini isteyebilirsiniz. İç içe satırlarla, her kenar çubuğu elemanı özel stil ile kendi satırını alır. Bir bakışta promosyonlar, yazarın diğerinde tanıtımı ve üçüncüsünde bir referans, hepsi kenar çubuğu satırında düzgün bir şekilde bulunur.

Bu yeni yapısal özgürlük, düzenlere tamamen yaklaşma şeklinizi değiştirir. Alternatif metin/görüntü satırları olan ürün vitrini, daha sonra tam genişlikte referanslarla tepesinde üç sıralı bir özellik bölümü? İnşaatçıyla savaşmadan hepsi bir akışkan kapta.

Seçenek Grup Ön Ayarları Oluşturun

İlk sayfanızı şekillendirdikten sonra, bu stil seçeneklerini web sitenizin her sayfasında çoğaltmak zorunlu hale gelir. Bununla birlikte, bu çok zaman alıcı ve daha da önemlisi can sıkıcı olabilir. Divi 5, tasarım sürecinizi hızlandırmaya yardımcı olmak için seçenek grup ön ayarlarını tanıtmaktadır. Sitenizde herhangi bir yere uygulayabileceğiniz yeniden kullanılabilir stil snippet'leri gibi çalışırlar. Onları nasıl ayarlayacağına ve kullanacağına bakalım.

Sayfanıza eklediğiniz herhangi bir modülü tıklayarak başlayın. Ayarlar panelindeyken tasarım seçeneklerine bakın. Sınırlar, tipografi veya gölgeler gibi şeyler. Bu ayarlar bloklarının sağ üst köşesine yaklaşın ve küçük bir ön ayar simgesinin göründüğünü göreceksiniz.

Bu önceden ayarlanmış simgeyi tıklayın ve “Geçerli Stillerden Yeni Ön Ayar” ı seçin. Size mantıklı gelen bir isim verin. Sınır ön ayarları için “Yuvarlak Köşeler” veya metin şekillendirmesi için “büyük başlık” gibi bir şey.

Panel, sadece geçerli öğeyi değil, şimdi bir ön ayar üzerinde çalıştığınızı göstermek için rengi değiştirecektir. Bu, ne yaptığınızı takip etmenize yardımcı olur. Bu sık sık kullanacağınız bir stil ise, yeni öğelerin otomatik olarak kullanacağından “Varsayılan olarak atayın” kutusunu kontrol edin.

Kaydettiğinizde, ilk opsiyon grubu ön ayarınızı oluşturdunuz! Güzellik, aynı stili o seçenek grubunu kullanan herhangi bir öğeye uygulayabilmenizdir: metin modülleri, görüntüler, düğmeler ve hatta tam bölümler.

Seçenek grup ön ayarlarını tasarım değişkenleriyle birleştirmek

İşte Divi 5 gerçekten güçleniyor. Ön ayarlar oluştururken, sadece statik renkler veya boyutlar kullanmayın, bunun yerine tasarım değişkenlerinizi kullanın.

Bir düğme önceden ayarlanmış olduğunuzu söyleyin. Belirli bir renk seçmek yerine, renk seçicisindeki değişkenler simgesini tıklayın ve “Marka Mavisi” değişkeninizi seçin. Şimdi ön ayarınız her zaman marka renginizi kullanır ve bu rengi daha sonra değiştirirseniz, bu ön ayarı kullanan tüm düğmeler otomatik olarak güncellenir.

Aynı şey oluşturduğunuz her değişken türü için de geçerlidir. Farklı boşluklara mı ihtiyacınız var? Sadece kaydedilen boşluk numaralarınızı alın. Yazı tipleri mi uygulamak? Tipografi değişkenleriniz orada bekliyor. Siteniz tutarlı kalır.

Gerektiğinde, değişkeni bir kez güncelleyin ve müşteri “bu mavi biraz daha karanlık olmasını” istediğinde her öğeyi avlamanın baş ağrısı olmadan her örneği kendi başına günceller.

Divi 5 ayrıca herhangi bir boyut alanına gelişmiş birimler eklemenizi sağlar. Asla 1200 pikselden daha geniş olmayan ancak mobil cihazlarda küçülen bir bölüm ister misiniz? Genişlik kutusuna “min (1200 piksel,%90)” yazın. Tamamlamak. Konteyner, 1200 piksel'yi aşana kadar% 90 genişlikte kalacak, ardından büyümeyi bırakacaktır. Özel CSS gerekmez. Bu gelişmiş birimler dinamik değişkenlere de uygulanabilir.

Bina Elemanı Ön Ayarlar

Seçenek grup ön ayarlarını ayarladıktan sonra, tam stilli modülleri, satırları veya bölümleri kaydetmek için öğe ön ayarları oluşturmak isteyeceksiniz. Bunları sitenizde yeniden kullanabileceğiniz eksiksiz tasarım paketleri olarak düşünün.

Bir tane oluşturmak için, bir modülle tamamen şekillendirin ve mükemmel göründüğünde, modülün başlığındaki ön ayar simgesini tıklayın (belirli bir seçenek grubunun içinde değil). “Mevcut Stillerden Yeni Ön Ayar” ı seçin, “Özellik Kartı” veya “Team Bio” gibi bir ad verin ve Kaydet.

Yeni modüller eklerken, kaydedilen tasarımınızı anında uygulamak için modül başlığındaki önceden ayarlanmış açılır menü tıklamanız yeterlidir. Tüm ayarlar tek bir tıklamayla uygulanır.

Tasarım sisteminize göre başka sayfalar oluşturun (değişkenler ve ön ayarlar)

Tasarım sisteminizi değişkenler ve ön ayarlarla oluşturduktan sonra, ek sayfalar oluşturmak çok daha verimli hale gelir. Divi 5 ile vakıflarınız mevcut, artık mükemmel bir tutarlılığı korurken web sitenizi genişletebilirsiniz.

Yeni bir sayfa oluşturarak ve görsel oluşturucuyu etkinleştirerek başlayın. Bu yeni sayfaya modül eklediğinizde, önceden ayarlanmış sisteminizin işleri nasıl hızlandırdığını hemen fark edersiniz. Elemanları sıfırdan şekillendirmek yerine, kaydedilen eleman ön ayarlarınızı uygulayın.

Örneğin, yeni bir metin modülü eklerken, modül başlıktaki önceden ayarlanmış açığaı tıklatın ve “Gövde Metni” ön ayarınızı seçin. Yazı tipi seçenekleri, boyutlar ve renkler dahil olmak üzere tüm stiller anında uygulanır. Aynı şey düğmeler, görüntüler, referanslar veya ön ayarlar için oluşturduğunuz diğer öğeler için de geçerlidir.

Şablonlarınızı oluşturun

Divi'nin tema oluşturucu ile web sitenizin her köşesini ve köşesini oluşturabilir ve özelleştirebilirsiniz. Üstbilgiler, altbilgi, post şablonlar, özel posta tipi şablonlar, mağaza sayfaları, adını siz koyun.

WordPress Gösterge Tablonuzda gezerek Divi'nin tema oluşturucusuna erişin: Divi → Tema Oluşturucu. Üstte, varsayılan şablonunuzu bulacaksınız - bu şablon tüm web sitenizin genel görünümünü yönetir. Global Başlık Ekle bölümüne tıklayın ve çalışma alanınızı açmak için “Global Header Oluştur” yu seçin. Aynı şekilde, web sitesi altbilgilerinizi tasarlamak için Global Footer Ekle'yi seçebilirsiniz.

İç içe sıralar, başlıklar ve altbilgilerle bina çok daha kolay hale gelir. Her bölümde farklı satır düzenlerine sahip bu süslü başlığa mı ihtiyacınız var? Başka bir satırın içine bir satır ekleyin, satır düzeninizi seçin ve oluşturmaya devam edin.

Özel İçerik Türü Şablonları Oluşturun

Başlıkların ve altbilgilerin ötesinde, tema oluşturucu kullanarak farklı içerik türleri için özel şablonlar tasarlayabilirsiniz.

Blog yayınlarının ekip üyesi profillerinden veya ürün sayfalarından nasıl farklı olduğu gibi, her biri kendi optimize edilmiş düzeni hak ediyor.

Okunabilirlik, öne çıkan görüntü yerleşimi ve yazar bilgileri için uygun aralıklı blog yayınları için bir şablon oluşturun. Ürün sayfalarının galeri düzenleri ve fiyatlandırma tabloları gerekebilir.

Bu sistemin güzelliği, bu şablonlar ilgili içerik türlerine atandıktan sonra otomatik olarak uygulanmalarıdır. Örneğin, yeni bir blog yazısı eklerseniz, şablon biçimlendirmeyi anında işler. Bu, tekrarlayan işi ortadan kaldırır ve her şeyi görsel olarak bağlı tutar.

Bu şablonları oluştururken, seçenek grup ön ayarlarınızı ve tasarım değişkenlerinizi kullanın. Daha önce oluşturduğunuz tipografi ayarları başlıkların ve vücut metninin tutarlı kalmasını sağlar. Renk değişkenleriniz tüm şablon türlerinde marka kimliğini korur.

Şablon tasarımı için divi ai kullanma

Divi AI, şablon oluşturma süresini saatlerden dakikalara keser. Tema Builder'da ihtiyacınız olanı seçin - bir üstbilgi, altbilgi, blog düzeni veya ürün sayfası.

Visual Builder'daki mavi + düğmesine basın ve "AI ile Bölüm Oluşturun" ı seçin.

Açıklamanız en önemli. İhtiyacınız olan şey konusunda spesifik olun:

• Başlık: Sol hizalanmış logo, Yatay Gezinme Menüsü (Ev, Hakkında, Blog, Mağaza) ve sağda net bir iletişim düğmesi ile başlığı temizleyin. Mobil için bir hamburger simgesi ile duyarlı.
• Altbilgi: Üç sütunlu altbilgi: Şirket bilgisi ve sosyal simgeler, yararlı bağlantılar ve iletişim bilgileri (adres, telefon, e-posta). Bölüm başlıklarını temizleyin, basit düzen.
• Blog Şablonu: Büyük özellikli bir resim, yayın başlığı, tarih, içerik alanı ve son yayınlar ve kategoriler içeren bir sağ kenar çubuğu içeren tek yazı düzeni.
• Mağaza Sayfası: Resim Galerisi, Ürün Adı, Fiyat, Açıklama, Miktar Seçicisi ve Önemli Satın Alma Düğmesi ile Ürün Ekranı. Aşağıda gösterilen ilgili ürünler.

Ne kadar çok ayrıntı olursa, sonuçlar daha çok. Divi şablonunuzu oluşturduktan sonra, düğmeler, metin blokları ve sınırlar gibi öğeler için tüm sabit kodlu değerleri seçenek grup ön ayarlarınızla değiştirmek için bir dakikanızı ayırın. Bu, AI tarafından oluşturulan içeriği önceden ayarlanmış sisteminizle entegre eder, böylece düğmeleriniz manuel veya AI ile oluşturulmuş tüm sayfalarda aynı görünür.

Bu yöntem, her şeyi sitenizin görsel diline bağlı tutarken, özel olarak inşa edilmiş hissettiren hazır şablonlar sağlar. Tasarım değişiklikleri daha sonra geldiğinde, AI tarafından yapılmış bölümleriniz diğer her şeyle birlikte güncellenir.

Gelişmiş Şablon Özellikleri ile Zaman Kaydet

Koşullu mantık eklediğinizde şablonlar daha da güçlü hale gelir. Blogunuza karşı mağaza sayfalarınız için farklı başlıklar mı istiyorsunuz? Sayfa kategorilerine veya URL modellerine göre şablonları uygulayan görüntüleme koşullarını ayarlayın.

Web sitesi oluşturmayı daha hızlı, daha tutarlı ve nihayetinde daha profesyonel hale getiren kapsamlı bir tasarım çerçevesi oluşturmak için şablonların ön elden çalışmasını sağlamayı unutmayın.

4. Duyarlı tasarıma hakim olma

Divi 5'in duyarlı tasarımı, önceki sürümler üzerinde önemli gelişmeler sunar. Yeni sistem, web sitenizin farklı ekran boyutlarına nasıl uyum sağladığı konusunda ek kontrol sağlar.

Divi 5, web sitesi duyarlılığı üzerinde benzeri görülmemiş bir kontrol sağlayan gelişmiş bir kesme noktası sistemi sunar. Özelleştirilebilir yedi kesme noktası, farklı cihazlarda hassas tasarım hedeflemesine izin verir:

• Telefon: <767px Çoğu akıllı telefon ekran boyutunu kapsar
• Telefon Geniş: <860px Çoğu telefon ekranını peyzaj modunda kapsar
• Tablet: <980px, portre modundaki çoğu tablet ekran için iyidir
• Tablet geniş: <1024px, çoğu iPad ve Samsung tabletlerinde peyzaj görünümü için standarttır.
• Geniş Ekran: > 1280px, çoğu daha küçük dizüstü bilgisayarlar için iyi bir genişliktir.
• Ultrawide: > 1440px daha büyük masaüstü ekranları kapsar

Bu kırılma noktaları, modern cihazların çeşitli manzarasını ele almak için titizlikle tasarlanmıştır. Bu yaklaşım, tasarımcıların kompakt bir akıllı telefonda veya geniş bir ultra genişliğinde monitörde görüntülenmiş olsun, mükemmel görünen web siteleri oluşturmalarını sağlar. Her kesme noktası sadece teknik bir eşik değildir; Özel bir kullanıcı deneyimi oluşturmak için bir fırsattır.

Ayrıca, ihtiyacınız olduğunda, kesme noktalarını ihtiyaçlarınıza göre ayarlayabilirsiniz.

5. Get, Set, Lead!

Divi 5 web siteniz üretilmiştir, optimize edilmiş ve ziyaretçileri büyütmeye hazırdır. Sitenizi güvenle canlı atmak için son adımlarda yürüyelim.

Sitenizin hızlı bir önizleme turunu farklı cihazlarda çalıştırın. Divi 5'in duyarlı tasarım yetenekleri ağır kaldırmanın çoğunu zaten yaptı, bu yüzden bu her şeyin harika göründüğünü doğrulamalıdır. Özelleştirilebilir kesme noktaları sayesinde, tasarımınız telefonlardan ultra geniş monitörlere sorunsuz bir şekilde uyum sağlar.

Etkileşimli öğelerinizi iki kez kontrol edin. Navigasyon bağlantılarını tıklayın, Test mesajlarını iletişim formları aracılığıyla gönderin ve eklediğiniz özel özellikleri deneyin. Divi 5'in Temiz Kod Yapısı, bu öğelerin güvenilir bir şekilde çalışmasına yardımcı olur.

Son parlatma dokunuşları

İçeriğinizi taze gözlerle inceleyin. Yapım sürecinde göz ardı edilmiş olabilecek yazım hataları veya garip ifadeler arayın. Bu aşamada, odak noktası büyük değişiklikler değil, küçük iyileştirmeler olmalıdır. Gerektiğinde, divi AI tamamen Divi 5'e entegre edilir ve herhangi bir zamanda metin veya görüntüleri oluşturmak, değiştirmek veya iyileştirmek için kullanılabilir.

Divi size piksel mükemmel tasarımlar oluşturma gücü verir, bu nedenle lansmandan önce sitenizin yapışkanlığını takdir etmek için bir dakikanızı ayırın. Tasarım değişkenlerinizi ve modül ön ayarlarınızı sürekli olarak kullanmak, boyunca cilalı, birleşik bir görünüm oluşturmalıdır.

Lansmandan sonra Divi 5 avantajlar sunmaya devam ediyor. Modern çerçevesinden hız iyileştirmeleri arama motoru görünürlüğüne yardımcı olacaktır ve kullanıcılar hızlı yük sürelerini ve pürüzsüz etkileşimleri takdir edecektir.

Hangi sayfaların en fazla trafiği ve katılımı aldığını izleyin. Tasarımınızı geliştirmek veya popüler içerik bölümlerini genişletmek için bu bilgileri kullanın. Divi 5'in esnek yapısı bu ayarlamaları basitleştirir.

Yaratıcılığınızı Divi 5'in güçlü çerçevesiyle birleştirmek, modern web standartları üzerine inşa edilmiş görsel olarak etkileyici bir web sitesi üretir. Siteniz, gelecekteki büyüme için esnek bir temel verirken ziyaretçilere harika deneyimler sunmaya hazırdır.

Divi 5 ile daha hızlı, daha iyi web siteleri oluşturun

Divi 5, web sitesi içerik oluşturucuları için yeni bir bölümü işaret ediyor. Yeniden oluşturulmuş sistem, neyi düzelterken neyin işe yaradığını korur. Birinci günden farkı fark edeceksiniz: daha hızlı yükleme, daha yumuşak düzenleme ve daha önce ulaşılamayan özgürlük.

Bir sonraki web siteniz sadece daha iyi görünmeyecek, inşa etmekten hoşlanacaksınız. Divi 5'in sunduğu şey budur: baş ağrısı olmadan sizin ve ziyaretçileriniz için çalışan web siteleri.

Denemeye hazır mısınız? Bugün halka açık alfa indirin ve bir sonraki projenizin ne olabileceğini görün.

Divi 5, yeni web sitesi yapılarında kullanılmaya hazırdır. Mevcut siteleri taşımadan önce tüm sürümleri bekleyin.