Statik Stiller Divi 5'in tasarım değişkenleriyle nasıl değiştirilir

Bir seferde bir modül renk, dolgu veya yazı tiplerini değiştirdiyseniz, muhtemelen ne kadar yavaş, hataya eğilimli ve sıkıcı manuel stil değişikliklerinin olabileceğini fark ettiniz.

Divi 5, bununla başa çıkmak için daha akıllı bir yol sunar. Tasarım değişkenleri ve bulun ve değiştirme ile, düzeninizdeki statik stilleri güncelleyebilir ve birkaç dakika içinde yeniden kullanılabilir bir tasarım sistemi oluşturabilirsiniz. Bakalım nasıl.

Divi 5 yeni web sitelerinde kullanılmaya hazırdır.

“Statik stiller” nedir?

Bir divi düzeni içe aktardığınızda veya önceden tasarlanmış bir bölüm kullandığınızda, yazı tipleri, renkler, boşluk ve sınırlar gibi her şey zaten ayarlanır. Bir düzen ön ayarları kullanmıyorsa, bu değerlerin bir öğe seviyesinde uygulandığını fark edeceksiniz.

Bir başlık yazı tipi boyutunu manuel olarak yazmış olabilir, bir düğme belirli bir renk kodu kullanabilir ve dolgu veya aralık sabit sayıları kullanabilir. Doğrudan uygulanan bu değerlere statik stiller denir.

Ve ilk başta zararsız görünseler de, değişiklik yapmak istediğinizde hızlı bir şekilde sorun haline gelebilirler. Statik stillerle ilgili sorun, yönetmeleri daha fazla zaman almalarıdır. Tüm düğmelerinizin rengini değiştirmek veya bölümleri bölümler arasında ayarlamak istiyorsanız, her birini manuel olarak düzenlemeniz gerekir. Bu yavaş ve sinir bozucu.

Şimdi, tam bir web sitesi markasını manuel olarak güncellediğinizi veya tekrarlanan stillerle dolu karmaşık bir düzen üzerinde çalıştığınızı hayal edin. Birçok tasarımcı bu sürecin ne kadar sinir bozucu olabileceğini paylaştı. Ancak yıllarca düzeltmenin güvenilir bir yolu yoktu. Bu yüzden Divi 5'te daha akıllı bir çözüm oluşturduk.

Divi 5 nasıl statik stilleri değiştirmeyi kolaylaştırır

Divi 5 ile hedeflerimizden biri, tasarım iş akışınızı daha hızlı ve daha az tekrarlayan hale getirmektir. Bu konuda yardımcı olmak için, iki güçlü özellik ekledik: stillerinizi merkezileştirmenize ve bulundurmanıza ve değiştirmenize izin veren tasarım değişkenleri , bunları düzeniniz boyunca anında güncellemenize olanak tanır. Onları ayrıntılı olarak anlayalım.

Tasarım değişkenleri, küresel stillerinizi tanımlamanıza izin verir

Divi 5 ile nihayet kendi tasarım çerçevenizi görsel olarak oluşturabilir ve marka stillerinizi hızlı bir şekilde değiştirmek için kullanabilirsiniz.

Divi 5, her modülde aynı rengi, yazı tipini veya aralığı manuel olarak uygulamak yerine, bu değerleri tasarım değişkenleri olarak kaydetmenizi sağlar. Bunlar, tasarımınızı daha tutarlı ve bakımını yapmak için sitenizde referans verebileceğiniz yeniden kullanılabilir değerlerdir.

Visual Builder'ın içinde, değişken yönetici altı farklı türde değişkenler oluşturmanıza ve düzenlemenize olanak tanır: renkler, yazı tipleri, sayılar (boşluk veya boyutlar gibi), metin, görüntüler ve bağlantılar.

Her bir değişkeni bölüm dolgusu gibi net bir adla kaydedebilirsiniz, bu nedenle bulmak ve yeniden kullanmak daha kolaydır. CSS değişkenlerini manuel olarak yazmanın aksine, Divi'nin arayüzü bu değerleri koda dokunmadan görsel olarak yönetmenizi sağlar.

Bu kaydedilmiş değişkenleri uygulamak da daha kolaydır. Bir modülü özelleştirirken, ayarlara gidin, değişken yönetici simgesini bulun ve listeden değişkeninizi seçin.

Değişiklik yapma zamanı geldiğinde gerçek avantajı göreceksiniz. Diyelim ki dolguyu her yerde değiştirmek istiyorsunuz. Düzinelerce modül düzenlemek yerine, değerleri değişken yöneticide bir kez güncellersiniz ve sitenizdeki güncellenir.

Uygulanan ayar alanlarında gerçek zamanlı olarak değişen değerlere dikkat edin. Küresel bir tasarım sisteminin gücü budur.

Ve bu da tasarım stilleriyle sınırlı değil. Tekrarlanan içeriği etkin bir şekilde yönetmek için, bir içerik değişkeni olarak bir adres, e -posta veya şirket sloganı gibi metin, resimler ve bağlantılar kaydedebilirsiniz. Artık kopyalamaya gerek yok, sadece dinamik içerik gibi yerleştirin ve sitenizde tutarlı kalacaktır.

Tasarım değişkenleri hakkında her şeyi öğrenin

Bul ve Değiştirin Statikten Global Styles'a geçmenizi sağlar

Divi 5'in Bul ve Değiştir özelliği, her modülü ayrı ayrı düzenlemeden düzeninizdeki stil değerlerini hızlı bir şekilde güncellemenizi sağlar. Renkler, yazı tipleri, boşluk veya bölümler arasında tek bir başlangıç noktasından tekrarlayan diğer herhangi bir ayar gibi statik değerleri değiştirmenize yardımcı olmak için tasarlanmıştır.

Kullanmak için, görsel oluşturucu içindeki herhangi bir stil alanına sağ tıklayın veya üzerine gelin ve üç noktayı tıklayın. Açılır listede Bul ve Değiştir seçeneğini göreceksiniz.

Bu yeni bir bulma ve değiştirin paneli açar. Burada, istenen değişiklikleri yapabilir ve bunları toplu olarak uygulayabilirsiniz.

• (1.) Kaynak öğesi: Hedeflediğiniz ayar (örneğin, metin, renk veya aralık). Açılırlığı açın ve aslında katman hiyerarşisi olduğunu fark edeceksiniz.
• (2.) Değeri bulun: Belirli bir yazı tipi veya renk kodu gibi değiştirmek istediğiniz tam değer.
• (3.) Değeri değiştirin: bunun yerine uygulamak istediğiniz yeni değer veya değişken.
• (4.) Yerde bulun ve değiştirin: Değişikliği nerede uygulayacağınızı seçin. Bu modül, bölüm veya tüm sayfa.
• (5.) Eleman türünde bulun ve değiştirin: Değişikliğin tüm öğeler veya yalnızca belirli modül türleri için geçerli olup olmayacağına karar verin.
• (6.) Yalnızca özdeş alanları değiştirin: Etkinleştirildiğinde, değiştirmeler yalnızca hem ayar hem de değer tam olarak eşleşirse gerçekleşir.

İşte böyle çalışıyor. Diyelim ki sayfada kullanılan başlık yazı tipini değiştirmek istiyorsunuz. Modülle modüle gitmek yerine, Bul ve Değiştir panelini kullanacağız.

Bir başlığın ayarlarından açtığınızda, kaynak öğesi otomatik olarak seçilir, bu nedenle her zaman manuel olarak seçmeniz gerekmez.

(Farklı öğeleri de tıklayabilirsiniz, panel seçenekleri otomatik olarak ayarlanır.)

Bul değerinde değiştirilecek değeri girin. Örneğimiz için, mevcut uygulanan yazı tipi olan Medula One . Değer değiştirerek , uygulamak istediğiniz yeni değeri seçin. Aclonica'yı seçelim.

Ardından, tüm sayfadaki tüm örnekleri veya yalnızca Bul ve Değiştirme konumundaki sütunu, satır veya bölümünü güncellemek isteyip istemediğinizi seçin. Tüm başlık modüllerini hedeflemek istediğimiz için bulguyu tüm öğeler olarak bulundurun ve değiştirin.

Ve hepsi bu. Sadece bul ve değiştirin ve saniyeler içinde 20 başlık örneği güncellenir. Vücut metnine ve düğme yazı tiplerine dokunulmadan kalmaya dikkat edin? Çünkü farklı değerler kullanıyorlar. Ve sistem bu kadar hassas.

Divi yalnızca tam bir eşleşme bulduğu yerlerde değişiklikleri uygular. Bu, statik stilleri, değiştirilmesi gereken tasarımları bozmadan güvenle temizleyebileceğiniz anlamına gelir. Peki tasarım değişkenleri buraya nasıl uyuyor?

Pastadaki krema gibiler. Değiştirme alanında tasarım değişkenlerini de kullanabilirsiniz. Üzerine gelin, değişken yönetici simgesini tıklayın ve kaydedilmiş bir değişken ekleyin.

Bu, stillerinizi güncellemek için çok daha kolay ve daha verimli olan küresel olarak yeniden kullanılabilir bir sisteme bağlanır. Bu, daha kolay güncellemeler için web sitemizi geleceğe kanıtlamak için tüm statik değerlerimizi tasarım değişkenleriyle değiştireceğiz.

Bul ve Değiştir hakkında her şeyi öğrenin

Bu özellikler (ve daha fazlası) Divi 5'in içinde mevcuttur. İnşaatçı daha hızlı performans, daha akıllı iş akışları ve daha fazla kontrol sunmak için yeniden tasarlanmıştır. Dürüst olmak gerekirse, onlar hakkında okumak heyecan vericidir, ancak bu özellikleri kendiniz yaşadığınızda gerçek değişikliği fark edeceksiniz.

Statik stiller kaydedilmiş değişkenlerle nasıl değiştirilir

Artık hangi araçları kullanacağımızı bildiğinize göre, onları hareket halinde görmenin zamanı geldi.

Sizi süreç boyunca yönlendirmek için, Pie Shop açılış sayfası düzenini örnek olarak ithal ettim. Bu düzenin yazı tipleri, renkler ve aralık gibi tasarım detayları statik stiller olarak uygulandı. Geleneksel yol, modülü modüle göre özelleştirmenizi gerektirir. Ancak bu öğreticide, sadece kapladığımız iş akışını kullanarak adım adım değiştireceğiz.

Ancak dalmadan önce, düzeninizi desenler için taramak için bir dakikanızı ayırın. Düğmelerde kullanılan renk, başlıklardaki benzer yazı tipi boyutları, bölümler arasındaki tutarlı aralık veya özdeş sınır ayarları gibi tekrarlanan stilleri arayın. Bu tekrarlayan değerler, özellikle daha sonra değiştirmeniz muhtemelseniz, tasarım değişkenleri için en iyi adaylarınızdır.

1. Tasarım değişkenlerinizi kaydedin

Pasta dükkanı düzenini analiz ettikten sonra, sayfa boyunca tutarlı bir şekilde görünen ve onları tercih ettiğim stillerle güncellemek isteyen birkaç değer belirledim. Bunlar şunları içerir:

• Sıra sınır genişliği
• Düğme dolgu
• Başlık metni
• Gövde metni
• Vücut metni rengi

Şu anda statik stiller olarak uygulanıyorlar. Bu nedenle, aynı ayarları manuel olarak tekrarlamak yerine, bunları tasarım değişkenlerine dönüştüreceğim. Bu bana sayfa stillerini sadece birkaç tıklamayla güncellemek için basit, yeniden kullanılabilir bir çerçeve veriyor.

Sıralardaki sınır genişliği ile başlayalım. Bir değişken oluşturmak ve kaydetmek için değişken yöneticiyi açın ve türü seçin. Bir satırın kenarlık genişliği için sayı değişkeni seçeceğim. Ardından, değişkeninizi adlandırın ve bir değer atayın. Değişkenleri Kaydet'i tıklayın.

Kaydettikten sonra, bu değişken bir tıklama ile yeniden kullanılmaya hazırdır. Sınır genişliğinin ayarlanabileceği her yerde görünecektir. Başlık metni, gövde yazı tipi, metin rengi ve düğme dolgusu için aynı işlemi izleyeceğim. Bu kaydedilen değişkenler artık düzenimin tasarım dilinin temelini oluşturuyor. Aynı şeyi yapıyorsun.

Bu şekilde, düğme aralığınızı değiştirmeye veya yazı tipini daha sonra değiştirmeye karar verirseniz, her modülü tek tek güncellemeniz gerekmez. Sadece değişkeni güncelleyin ve geri kalanı kendilerini güncelleyecektir.

2. Statik stilleri değişkenlere değiştirmek için bul ve değiştirin

Tasarım değişkenlerimiz hazır olduğunda, bir sonraki adım, Find ve Değiştirerek Düzen üzerindeki statik değerleri değiştirmektir. Düğme dolgusu ile başlayalım.

Şu anda, her düğme manuel olarak girilen dolgu kullanır: üst ve alt için 6px ve sol ve sağ için 1px. Tutarlılığı sağlamak ve güncellemeleri kolaylaştırmak için iki değişken oluşturdum:

• Üst ve alt dolgu için düğme-t = 12 piksel.
• Sol ve sağ dolgu için düğme-l = 32px.

Bunları uygulamak için, herhangi bir düğmenin ayarlarını açacağım, tasarım> aralık> dolgu olarak gideceğim, dolgu değerini sağ tıklayıp Seçeneklerden Bul ve Değiştir'i seçeceğim.

Bul ve Değiştir panelinde, mevcut statik değeri değişken yöneticiden kaydedilen değişkenle değiştireceğim.

Bul ve Değiştir'i tıkladıktan sonra, yeni dolgu değerlerini kullanmak için sayfa güncellemesindeki beş düğme örneğinin tümü.

Daha önce belirlediğimiz diğer statik stiller için aynı adımları izleyebilirsiniz. Her birini kaydedilen değişkenlerinizle değiştirmek için bul ve değiştirin ve global tasarım sisteminize tamamen bağlı bir düzen ile sonuçlanırsınız.

3. Tercih ettiğiniz stilleri ön ayarlara dönüştürün (isteğe bağlı)

Bu adım, bu makalenin kapsamı için isteğe bağlıdır, ancak tasarım sisteminizi genişletmenin güçlü bir yoludur.

Statik stilleri değişkenlerle değiştirdikten sonra, bu modülleri seçenek grup ön ayarları olarak kaydedebilirsiniz. Örneğin, sınır genişliği için bir kaydetmiş değişken atadıktan sonra, o satırı bir satır kenarlık ön ayar olarak kaydettim.

Ön setlerin içindeki değişkenleri kullanmak, bir değişkenin değerini değiştirmek gibi tasarım sisteminizdeki gelecekteki güncellemelerin, bu ön ayar kullanarak tüm modüllere otomatik olarak yansıtacağı anlamına gelir. Manuel olarak yeniden uygulanmaya veya güncellemeye gerek yoktur.

Bu nedenle, tüm sayfayı sadece birkaç tıklamayla yeni marka ile güncelledik, aynı zamanda gelecekteki güncellemeleri daha hızlı, daha kolay ve tamamen bağlı kılan esnek bir sistem oluşturduk. Bu gerçek bir düzende nasıl çalışır? Eylemde görme zamanı.

Sayfa stillerinizi güncellemek her zamankinden daha kolay

Statik stillerden tasarım değişkenlerine geçmemizin nedeni basittir: güncellemeleri kolaylaştırırlar. Tasarım değişkenleri yerinde olduğunda, düzeninizi düzenlemek inanılmaz derecede basit hale gelir.

Web sitenizdeki başlık yazı tipini değiştirmek istiyorsanız, her modülü tek tek düzenlemeniz gerekmez. Değişken yöneticiyi açın, daha önce kaydettiğiniz yazı tipi değerini güncelleyin ve değişiklik değişkenin kullanıldığı her yerde uygulanır.

Seçenek grup ön ayarlarınız, tasarım değişkenleri kullanıyorlarsa otomatik olarak güncellenir. Bu, stillerinizi bağlı tutar, böylece aynı düzenlemeleri farklı modüllerde veya sayfalarda tekrarlamanız gerekmez.

Pasta dükkanı düzenini daha önce özelleştirdiğimde, her düğmeyi veya başlığı manuel olarak ayarlamadım. Kayıtlı değişkenlerimi basitçe düzenledim. Daha önce tanımladığım yazı tipi, dolgu ve renkler sayfa boyunca otomatik olarak uygulandı. Düzen, zaten inşa ettiğim sistemi takip etti.

Elbette, dolguları değiştirmek veya bir modülde bir rengi değiştirmek zor değil. Ancak tüm bir sitede düzinelerce stili güncellerken, fark büyüktür. Sadece daha hızlı değil, daha temiz, daha güvenilir ve hataya çok daha az eğilimli.

Bu, değişkenlere geçmenin gerçek değeridir: tüm tasarımınızın yönetilmesi daha kolay hale gelir. Ve müşteriniz gelecek ay hızlı bir marka değişikliği istediğinde? Kahvelerini bitirmeden önce biteceksiniz.

Bul ve Değiştir ile Toplu Düzenlemeleri Kolaylaştırın

Tasarımınız her değiştiğinde sıfırdan başlamak zorunda değilsiniz. Divi 5'in sistemi yerinde olduğunda, güncellemeler bir angarya gibi ve daha çok basit bir adım gibi hissediyor.

Bu iş akışı sadece kurulum sırasında yararlı değildir. Gelecekteki güncellemeleri kolaylaştıran şey budur. Müşteriniz yeni bir yazı tipi ister veya farklı bir marka rengini test etmek istiyorsanız, değişikliği bir kez yapıp her yere yansıttığını görebilirsiniz.

Divi 5, gerçek insanların web sitelerini nasıl tasarladığını desteklemek için tasarlanmıştır. Ve şimdi, tasarım sisteminiz fikirleriniz kadar esnek olabilir.