Sayfa tasarımınızı Divi 5 ile güncellemenin en hızlı yolları

Divi 5, daha hızlı çalışmanıza ve daha özgürce tasarlamanıza yardımcı olacak bir avuç akıllı yeni araç sunar. Ancak parmaklarınızın ucunda çok fazla güçle, özellikle mevcut bir düzeni güncellerken nereden başlayacağınızdan emin olmak kolaydır.

Muhtemelen boşlukları nasıl değiştireceğinizi, renkleri ayarlayacağınızı ve düzenleri temizleyeceğinizi zaten biliyorsunuzdur, bu nedenle bu yazı temelleri yeniden öğrenmekle ilgili değildir. Bunları Divi 5 ile daha hızlı yapmakla ilgilidir. Aşağıdaki adımlarda, mevcut herhangi bir sayfada takip edebileceğiniz pratik bir güncelleme iş akışından geçiyoruz. Ve eğer son değişiklikler ezici hissediyorsa, buradan başlayın. Netlik ve güvenle rahatlayacaksınız.

Sayfa tasarımınızı Divi 5 ile güncellemek için 8 adım

Bu eğitim için Divi Düzen Paketi Kütüphanesi'nden Business CV açılış sayfasını kullanıyoruz.

YouTube kanalımıza abone olun

İş akışınızı hızlandırmak ve tekrarlayan düzenlemeleri azaltmak için Divi 5'in Find ve Değiştir, Değişken Tasarım ve Öznitelikler gibi yeni araçlarını kullanarak sayfayı nasıl güncelleyeceğiz. Başlayalım.

1. Dikkat dağıtıcı olmayan düzenleme için gösterge tablonuzu optimize edin

Bir düzeni güncellerken küçük kesintiler bile odağınızı bozabilir. Bölümler arasında atlayabilir, tekrar tekrar açılış ayarları ve kaldığınız yeri takip edebilirsiniz. Bu tür gecikmeler, özellikle daha uzun veya daha karmaşık sayfalarda hızlı bir şekilde toplanır.

Divi 5, daha esnek bir düzenleme ortamı ile bu sürtünmeyi azaltmaya yardımcı olur. Anahtar ayarlarını görünür tutmak, sekmelerde birden çok modül açmak için panelleri yerleştirebilir ve sonsuz kaydırma yapmadan düzeninizi gezinmek için katmanlar panelini kullanabilirsiniz. Modüllere girip çıkmaya tıklamak yerine, hareket ettikçe her şeyi açık ve erişilebilir tutabilirsiniz.

Katmanlar paneli size düzene tam bir yapısal genel bakış sunar, böylece sadece tıklayarak herhangi bir bölüme, satıra veya modüle anında atlayabilirsiniz. Özellikle kaydırma yapmadan büyük sayfalara atlamak için kullanışlıdır.

Daha önce, iş akışı genellikle bir modül açmak, kaydetmek, tekrar kaydırmak, bir sonrakini açmak ve bu döngüyü tekrarlamak anlamına geliyordu. Divi 5 tüm bunları atlıyor. Birkaç modül arka arkaya açabilirsiniz; Her biri düzenleme panelinizde bir sekme olarak görünür kalır. Bu, öğe ayarlarını tekrar tekrar kapatmadan ve yeniden açmadan ayarların karşılaştırılmasını veya öğeler arasında geçiş yapmayı kolaylaştırır.

Yeni iş akışına alışmak biraz ayarlanabilir. Paneller farklı davrandıkça, bu nedenle modüller arasında geçiş yapmak hemen ikinci doğayı hissetmez. Ancak biraz pratik yapın ve bu küçük değişiklikler toplanmaya başlar.

Aşağıdaki adımları izlerken, panellerle farklı çalışmayı deneyin, birkaç tane yerleştirin, bir çift sekmeye yerleştirin veya Katmanlar panelini açık tutun. Akışınız için en iyi olanı hissetmeye başlayacaksınız.

2. Önce küresel tasarım değişkenlerinizi ayarlayın

Tam bir düzeni yönetirken, istediğiniz son şey kendinizi tekrarlamaktır. Ancak, her stil her modülün içinde manuel olarak ayarlandığında tam olarak olan budur. İlk başta işe yarayabilir, ancak zamanla sayfanız bağlantısı kesilmiş seçeneklerden oluşan bir patchwork haline gelir. Sonunda, bir şey her zaman kaçırılır.

Tasarım değişkenleri bundan kaçınmanıza yardımcı olur. Tasarım dilinizi tanımlamak için size merkezi bir yer veriyorlar. Yazı tipleri, renkler, boşluklar, görüntüler, URL'ler veya bağlantılar için yeniden kullanılabilir değerler tanımlarsınız. Uygulandıktan sonra, bu değerler bunları kullanan her modüle bağlı kalır.

İşte basit bir örnek. Tüm başlıklarınızın Lato yazı tipini kullanmasını istediğinizi varsayalım. Her modülde LATO seçmek yerine bir yazı tipi değişkeni oluşturursunuz. Bir isim verin, Lato'yu seçin ve kaydedin. Bu değişkene bağladığınız herhangi bir başlık artık senkronizasyonda kalacaktır.

Daha sonra farklı bir yazı tipine geçmek istiyorsanız, değişkeni güncelleyin. Bağlı her modül değişikliği otomatik olarak yansıtacaktır.

Ve bu sadece bir kullanım durumu. Ayrıca tutarlı bölüm dolgusu, düğme stilleri, arka plan renkleri veya tekrar tekrar kullandığınız başka bir şey için değişkenler de ayarlayabilirsiniz. Çok ezici hissediyorsa her şeyi bir kerede tanımlamanız gerekmez. Yeniden kullanacağınızı bildiğiniz stillerle başlayın ve tasarım sisteminizi oradan genişletin.

3. Statik değerleri tasarım değişkenleriyle değiştirin

Bazen düzenler sabit kodlu stillere sahiptir, bu nedenle bunları manuel olarak güncellemek süreci tutarsız hale getirir. Bu yüzden statik değerleri yeni tanımladığımız küresel değişkenlerle değiştiriyoruz.

Onları ayrı ayrı avlamanıza gerek yok. Divi'nin bulun ve değiştir aracı, değişkenler için statik değerlerin sadece birkaç tıklamada değiştirilmesini kolaylaştırır. Diyelim ki başlıklarınız manuel olarak seçilen yazı tiplerini kullanıyor. Herhangi bir başlık modülünü açın, yazı tipi alanına tıklayın ve Bul ve Değiştir'i seçin.

Değiştir panelinde, alanın üzerine gelin ve değişken yöneticiyi açın. Tüm başlık yazı tipi değişkeninizi seçin ve değişikliği onaylayın.

Sihri hemen göreceksiniz: Düzen boyunca bu yazı tipinin her örneği hemen değiştirildi. Aynı yöntem renkler, boşluk, düğme stilleri ve bir değişken ayarladığınız her şey için çalışır.

Ve her şeyi aynı anda değiştirmek zorunda değilsiniz. Kısım dolgu veya düğme arka planları gibi en çok yeniden kullanacağınız küçük, seçme stilleri başlatın ve önce bunları değiştirin. Siz giderken, düzeniniz manuel düzenlemelerin bir patchwork'ünden tamamen bağlı bir sisteme geçer. Ve bu sistem mevcut olduğunda, gelecekteki her değişiklik varsayılan olarak daha kolay, daha hızlı ve daha tutarlı hale gelir.

4. Saniyeler içinde güncellemeleri uygulamak için genişletme özelliklerini kullanın

Küresel değerleriniz mevcut olduğunda, bir sonraki adım iyileştirme. Genellikle kendinizi bireysel bölümlere küçük ince ayarlar yaparken ve bu değişiklikleri işi yeniden yapmadan düzenin geri kalanına taşıyabilmenizi istersiniz. Özgürlük nitelikleri ile mümkündür.

Bir öğeden stilleri, içerikleri veya ön ayarları anında kopyalamanıza ve başkalarına uygulamanızı sağlar. Modüller aynı tür olmasa bile çalışır. Örneğin, bir görüntü için özel bir sınır ve gölge tasarladıysanız, bunu bölümdeki her görüntü için referans olarak kullanabilirsiniz.

Stil görüntüye sağ tıklayın ve öznitelikleri genişletmeyi seçin.

Uzatma paneli açıldığında, muhtemelen ona geri döneceğiniz için yana yerleştirin. Açılır listelerde, kapsamı üst bölüme ve eleman türünü görüntüye ayarlayın, ardından onaylayın.

Bu eylem, güncellemenizi, bunlara ayrı ayrı dokunmaya gerek kalmadan o bölümdeki her görüntüye uygular.

Ve işte burada genişletme özellikleri gerçekten yerini kazanıyor. Bir dizi manuel, tekrarlayan düzenleme olur ve bunları tutarlı bir hareket haline getirir. Bir resim galerisi veya bulanıklık gibi birden fazla benzer sütun veya modül içeren bölümler için kullanabilirsiniz. Her modülde yanmadan tasarımınıza bir cila hissi getirmenin en hızlı yoludur.

5. Yeniden Kullanılabilir Düzenlemeleri Seçenek Grup Ön Ayarları olarak kaydedin

Düzeninizi hassaslaştırırken, işleri doğru hale getirmek için muhtemelen aralığı, sınırları veya arka plan renklerini değiştireceksiniz. Bu ayarlamaları her seferinde tekrarlamak yerine, onları seçenek grup ön ayarları olarak kaydedin.

Bir sütunun aralığını, sınırını ve arka planını özelleştirdiğinizi varsayalım. Nasıl göründüğünü ve başka bir yerde yeniden kullanmak istiyorsunuz. Bu sütunun ayarlarını açın, değiştirdiğiniz stil grubuna (aralık veya sınır gibi) kaydırın ve kaydetmek için önceden ayarlanmış simgeye tıklayın.

Ön ayarı diğer sütunlara uygulamak için orijinali sağ tıklatın ve Extend özniteliklerini> genişletme sütun ön ayarlarını seçin. Panelde, kapsamınızı ana satıra ayarlayın, öğe türü olarak sütunu seçin ve özellikleri genişletin.

Bu ön ayar şimdi satırdaki her sütun için tek bir hareketle geçerlidir. Özellikle fiyatlandırma tabloları, bulanıklıklar, referanslar veya manuel çaba olmadan görsel tutarlılık istediğiniz herhangi bir yerde tekrarlayan öğelere sahip düzenler için kullanışlıdır. Ve hazır ayarlar düzen paketine kaydedildiğinden, diğer sayfalarda da kullanılmaya hazır olacaksınız.

6. Hızlı bir kerelik değişiklikler için Kopyala/Yapıştır kullanın

Stilleri tam bir bölüme veya satıra genişlettikten sonra, yine de küçük, hedefli ince ayarlar yapmak isteyebilirsiniz. Belki sadece bir sütun veya modül biraz farklı bir görünüme ihtiyaç duyar. Ön ayarları tekrar genişletmek yerine, öznitelik yönetimi özelliğini kullanın.

Örneğin, bir sütunun sınırını ve gölgesini özelleştirdiyseniz ve sadece bir veya iki kişinin eşleşmesini istiyorsanız, stilli sütunu sağ tıklatın ve öğe stillerini kopyalayın . Ardından, güncellemek istediğiniz sütunu sağ tıklayın ve öğe stillerini yapıştırın .

Bu, diğer ayarların ve anında çalışmaz, bu da esnek kalmak istediğiniz durumlar için ideal olmaz. Stilleri hemen hemen her öğeden kopyalayabilir ve yapıştırabilir ve boşluk, renk, sınırlar veya diğer tasarım ince ayarları olsun, tam olarak neyi kopyalayacağınıza karar verebilirsiniz.

Özgürlük Özellikleri toplu düzenlemeleri işler ve kopyala/yapıştırma ayrıntıları işler. Çoğunlukla yapılan ancak yine de birkaç kişisel dokunuşa ihtiyaç duyan bir düzeni ince ayarlamak için mükemmeldir.

7. Duyarlı görünümü mükemmelleştirmek için özel kesme noktaları arasında geçiş

Masaüstü düzeninizin her ekran boyutunda harika göründüğünden emin olun. Divi 5'in özelleştirilebilir kesme noktaları, tablet, telefon ve hatta özel ekran genişlikleri arasında tek bir tıklamayla geçmenize izin vererek bunu kolaylaştırır. Cihaz simgeleri tam inşaatın içindedir, böylece bölümlerinizin daha küçük ekranlarda nasıl davrandığını hızlı bir şekilde önizleyebilirsiniz.

Gerekirse, daha fazla kontrol için kendi kesme noktalarınızı da tanımlayabilirsiniz.

Bu, boşluk, yazı tipi boyutları ve görüntü hizalamasını kontrol etmek için mükemmel bir zamandır. Sadece birkaç dakika sürer, ancak daha sonra, özellikle içerik ağır veya dönüşüm odaklı sayfalarda daha büyük düzen sorunlarından tasarruf sağlar. Ve iş akışınızı değiştirmenize gerek yok. Divi araçları duyarlı görünümde de sorunsuz çalışır, bu nedenle ince ayarlarınızı yapın, düzeni önizleyin ve devam edin.

8. Tüm düzeni anında yenilemek için tasarım değişkenlerinizi güncelleyin

Daha önce, Global Tasarım Değişkenlerinizi ve Değiştirilen Statik Değerlerinizi Find ve Değiştirerek Kurduk. Ve şimdi düzeniniz merkezi bir tasarım sistemine tamamen bağlı.

Tasarım değişkenleri web sitesi çapında güncellemeleri son derece kolay hale getirir. Diyelim ki markanız tipografisini veya ana rengini güncelliyor. Aynı değişiklikleri tekrar tekrar yapmak için her modülü kazmak yerine, kaydedilen değişkeni güncellersiniz. Bu değişiklik tüm düzeninizde anında geçerlidir.

Bunu iş başında görmek için bu yan yana karşılaştırmaya bir göz atın. Düzen yapısı aynı kalır, ancak arkasındaki işlem önemli ölçüde daha basit ve daha hızlı hale gelir.

Şimdi bunun nasıl ölçeklendiğini düşünün. Aynı sistem üzerine inşa edilmiş tüm web sitenizi, her sayfanız ve bölümünüzü hayal edin. Artık her değişiklik için adımlarınızı geri çekmiyorsunuz. Değişkene tek bir ince ayar her şeyi günceller. Değişken Yönetici aracılığıyla değerleri yöneterek tüm markanızı yönetiyorsunuz.

Bu tür esneklik, Divi 5'in tam olarak tasarlandığı şeydir. Bu sadece daha hızlı düzenlemeler değil, tekrarlamayı azaltmak, doğruluğu artırmak ve daha az çaba ile daha fazla kontrol sağlamakla ilgilidir.

Divi 5 iş akışınızı özelleştirin

Şimdiye kadar, tasarım değişkenleri, genişletme özellikleri ve seçenek grup ön ayarları gibi araçların düzenleri nasıl güncellediğinizi nasıl yeniden şekillendirebileceğini gördünüz. Ama onları kullanmanın tek bir yolu yok.

Bu yol izi sürecin sadece bir versiyonudur. Adımları farklı bir sırada takip edebilir, birkaçını atlayabilir veya kendi rutininize karıştırabilirsiniz. Ve bu tamamen iyi, çünkü amaç bir formülü takip etmek değil, doğal hisseden ve çalışmak istediğiniz şekilde uyan bir ritim bulmak.

Biraz deney. Araçlarla ne kadar çok oynarsanız, akışınız için neyin en iyi olduğunu fark etmeye başlayacaksınız. İşler daha pürüzsüz hissediyorsa, güncellemeleriniz daha hızlıdır ve tasarımınız tutarlı kalır, bu sizin çalıştığınız işaretidir.

Ve iş akışınız geliştikçe bu araçların devam edip edemeyeceğini merak ediyorsanız, kesinlikle olabilirler ...

Divi 5 çalışma tarzınıza uyum sağlamak için tasarlanmıştır

Bu, kapsadığımız her özelliğin arkasındaki düşünce. İster her stili önceden tanımlamak veya oluşturduğunuzda değişiklik yapmak isteyin, araçlar nasıl çalışmayı tercih ettiğinize uyum sağlar.

Hızlı hareket edebilir veya zaman ayırabilirsiniz. Boş bir sayfadan başlayın veya mevcut bir düzeni geliştirin. İnşaatçı sizi katı bir iş akışına zorlamıyor. Meşgul işi azaltmak, tekrarlayan düzenlemeleri atlamak ve gerçekte neyin önemli olduğuna odaklanmanıza yardımcı olmak için inşa edilmiştir: netlik, hız ve güvenle tasarım yapmak.

Nihayetinde, kendiniz gibi hissettiren ve projeleriniz ve fikirleriniz büyüdükçe size ayak uyduran bir süreç oluşturmakla ilgilidir. Sizinle gelişen bir tasarım iş akışı oluşturmaya hazır mısınız?