Find & Değiştir ile Düzen Paketi stillerini hızlı bir şekilde nasıl değiştirirsiniz

Tam bir düzen paketinin tasarımını güncellemek, aynı stilleri beş veya altı farklı sayfada değiştirmeniz gerektiğini fark edene kadar basit görünüyor. Bu stiller statik değerler olarak uygulandığından, yazı tipini değiştirme veya bölüm dolgusu ayarlama gibi küçük bir güncelleme bile sayfa sayfasına göre zaman alıcı hale gelir.

Peki ya tekrarlanan tüm stilleri sadece birkaç tıklamada güncelleyebilseydiniz? Divi 5'te Find ve Değiştirin tam olarak budur. İster yazı tiplerini değiştiriyor, ister renkleri değiştiriyor olun, ister boşluğu ayarlıyor olun, bu özellik düzen çapında değişiklikleri anında yapmanıza yardımcı olur. Tüm bir düzen paketini temizlemek ve yeniden ayarlamak için nasıl kullanacağınızı göstereceğiz.

Divi 5'te bulup değiştiren nedir

Bul ve Değiştir, Divi 5'te düzeninizdeki tekrarlanan stil değerlerini hızlı bir şekilde güncellemenizi sağlayan bir özelliktir. Bir yazı tipi, bir renk kodu, dolgu veya hatta bir gölge efekti olsun, artık bu değeri bir kez değiştirebilir ve birden fazla öğeye uygulayabilirsiniz.

Peki, bu gerçekten nasıl çalışıyor? Visual Builder'daki herhangi bir modülle başlar. Metin rengi veya yazı tipi boyutu gibi bir stil alanının üzerine gelin ve üç noktalı bir simge göreceksiniz. Bunu tıklayın (veya alanı sağ tıklatın) ve Bul ve Değiştir'i seçin.

Bu, hangi değeri değiştireceğinizi, yeni değerin ne olması gerektiğini ve değişikliği nereye uygulayacağınızı tanımladığınız bir panel açar. Sadece bu modüle odaklanabilir, tüm bölüme genişletebilir veya sayfa boyunca yerleşim çapında gidebilirsiniz.

Bu iş akışını deneyimledikten sonra, bunun neden bu kadar yararlı bir araç olduğunu anlayacaksınız. Aynı rengi veya yazı tipini değiştirmek için düzinelerce modülden avlanmak yerine, bir hedefli güncelleme yaparsınız ve saniyeler içinde tüm düzeninizde dalgalanmasını izlersiniz. Ancak, Find ve Değiştir potansiyelinin gerçekten kilidini açmak için, her şeyi değiştiren tasarım değişkenleriyle nasıl çalıştığını görmeniz gerekir.

Nasıl Bul ve Değiştirme Düzen stillerini daha hızlı güncellemeye yardımcı olur

İki senaryodan geçeceğiz: birincisi, temel bir bulma ve değiştirme işlemi, daha sonra tasarım değişkenlerini kullanarak aynı görevi (bu gizli silah).

Divi 5'te bul ve değiştirme

İşlem basittir: Herhangi bir stil alanından tetikleyin, ne değiştireceğinizi seçin ve değişikliği birden çok modül boyunca uygulayın. Gerçek bir örnekle geçelim.

Tüm sayfa başlıklarınızın yazı tipi boyutunu artırmak istediğinizi varsayalım. Görsel oluşturucu içindeki herhangi bir başlık modülünü tıklayarak başlayın. Ayarlar> Tasarım> Başlık Metni> Başlık Metni H1 Yazı Tipi Boyutuna gidin. Diğerlerinin yanı sıra Bul ve Değiştir seçeneğini bulmak için sağ tıklayın veya üzerine gelin.

Bu , Bul ve Değiştir panelini birçok seçenekle açar:

• (1) Kaynak öğesi: Bu, hedeflediğiniz ayarı metin boyutu, renk veya dolgu gibi tanımlar. Paneli nereye açtığınıza göre otomatik olarak seçilir.
• (2) Değer bulun: Düzeninizde kullanılan geçerli değer. Bu, 30px gibi bir yazı tipi boyutu, #000000 gibi bir renk kodu veya başka bir tasarım ayarı olabilir. Bu otomatik olarak eklenir.
• (3) Değeri değiştirin: uygulamak istediğiniz yeni değer. Divi eşleşen değeri arar ve bununla değiştirir.
• (4) Yerde bulun ve değiştirin: Değişikliğin nerede uygulanması gerektiğini seçin. Bunu tek bir modülle, bölümüyle veya tüm sayfayla sınırlayabilirsiniz.
• (5) Eleman tipinde bulun ve değiştirin: değişikliğin hangi modülleri etkileyeceğine karar verin. Tüm modüllere veya yalnızca düğmeler, metin veya bulanıklık gibi belirli türlere uygulayabilirsiniz.
• (6) Yalnızca özdeş alanları değiştirin: Yalnızca bulma değerine tam olarak uyan alanları güncellemek için bunu açın. Bu, ilgisiz unsurlarda kazara değişiklikleri önlemeye yardımcı olur.

Örneğin, yazı tipi boyutunu 30px'ten sıvı kelepçesine (20px, 4vw, 50px) değiştiriyoruz. Sayfadaki tüm başlıkları güncellemek istediğimiz için tüm sayfayı ve tüm öğeleri seçtik.

Bul ve Değiştir düğmesini tıklayın ve ne olduğunu izleyin. 30 piksel yazı tipi boyutuna sahip tüm başlıklar artık sıvı kelepçesi () değerine sahiptir.

Diğer başlıklar değişmeden kaldı çünkü Divi yalnızca seçtiğiniz kapsamda tam olarak eşleşen değerleri güncelliyor. Manuel düzenleme gerekmez ve ilgisiz unsurlarda kazara değişiklikler bile gerekmez. Bu doğruluk, düzen paketlerindeki varsayılan stilleri temizlemek için mükemmel hale getirir.

Divi'nin bul ve değiştir hakkında her şeyi öğrenin

Bul ve Değiştirmek için Tasarım Değişkenlerini Kullanma

Tasarım değişkenleriyle eşleştirildiğinde bulun ve değiştirin daha da güçlü hale gelir. Statik bir değeri başka bir statik değerle değiştirmek yerine, değişken yöneticiden kaydedilmiş bir değişkenle değiştirebilirsiniz. Bu, daha sonra güncellenmesi kolay tutarlı bir tasarım sistemi oluşturur.

Tüm başlık yazı tipi boyutlarını güncelleyerek aynı örnekle devam edelim. Ancak bu sefer, 30px'i doğrudan kelepçe değeri ile değiştirmek yerine, H3 yazı tipi boyutu adlı bir değişkenle değiştireceğiz.

İlk olarak, değişkeni oluşturun. Sol kenar çubuğundan değişken yöneticiyi açın ve sayı sütununa gidin. Değişkeninizi adlandırın, bir değer atayın ve kaydet.

Bu, değişkeni tüm yazı tipi boyutu alanlarında kullanılabilir hale getirir. Şimdi Sihir Gelir: Kaydedilen değişkeni aynı anda tüm başlık yazı tipi boyutlarına atamak için doğrudan Bul ve Değiştir panelinde kullanabilirsiniz.

Bulunu açın ve paneli daha önce olduğu gibi değiştirin. Değiştir alanında, girişin üzerine gelin ve değişken yönetici simgesini tıklayın. Kaydedilen değişkeninizi, H3 yazı tipi boyutunu seçin ve aynı ayarlarla devam edin.

Değişikliği uygulamak için Bul'u tıklayın ve değiştirin . 30px kullanan tüm başlıklar artık sabit bir sayı yerine H3 yazı tipi boyut değişkenine başvuracaktır.

İşte ilginç hale geliyor. Bu yazı tipi boyutunu daha sonra ayarlamanız mı gerekiyor? Değişken yöneticiye gidin, H3 yazı tipi boyutu değişkenini açın ve değeri değiştirin. Kelepçeyi kelepçe (24px, 5VW, 60px) olarak güncelleyin ve bu değişkeni kullanan her başlık otomatik olarak güncellenir.

Bulun ve değiştirmeye gerek yoktur. Bir güncelleme ile düzeniniz değişkenin kullanıldığı her yerde ayarlanır.

Bul ve değiştirme ve tasarım değişkenlerinin bu kombinasyonu, tüm düzen paketlerinin güncellenmesini çok verimli hale getirir ve bu süreci bu öğreticide takip edeceğiz. Tasarım değişkenlerinizi bir kez tanımlarsınız, ardından Statik Değerlerden Kaydedilen Değişkenlere Geçiş için Bul ve Değiştir'i tüm sayfalarda kullanacaksınız. Bundan sonra güncelleme zahmetsiz hale gelir.

Divi'nin tasarım değişkenleri hakkında her şeyi öğrenin

Bunu uygulamaya koymaya hazır mısınız? Değişkenleri hem bulmak hem de değiştirmek ve tasarlamak için Divi 5'e ihtiyacınız olacak. İnşaatçı daha hızlı performans ve daha akıllı iş akışları için tamamen yeniden inşa edildi.

Bir Düzen Paketinde Stiller Nasıl Değiştirilir

Artık işleri nasıl bulup değiştirdiğini ve tasarım değişkenleriyle nasıl eşleştirileceğini bildiğinize göre, gerçek bir düzen paketinde harekete geçirelim. Örneğimiz için, Home, Hakkında, İletişim, Kurs İniş ve Fiyatlandırma gibi birden fazla sayfa içeren Öğrenme Yönetim Sistemini içe aktaracağız.

Her sayfa aynı yazı tiplerini, renkleri ve aralığı kullanır, ancak hepsi statik değerlerle. Aşağıdaki öğreticide, bunları tüm sayfalarda güncelleyeceğiz, değişkenlere dönüştüreceğiz ve her şeyi merkezi bir tasarım sistemine bağlayacağız.

1. Düzeninizin tasarım stillerini denetleyin

Herhangi bir şeyi değiştirmeye başlamadan önce, düzen paketinizi gözden geçirmek için birkaç dakikanızı ayırın. Her sayfayı açın ve yazı tipi boyutları, düğme renkleri, metin aralığı, bölüm dolgusu ve sınır stilleri gibi tekrarlayan tüm tasarım stillerini hızlı bir şekilde listeleyin. LMS düzenini inceledikten sonra bulduğum şey:

• Yazı Tipi Boyutları: Tüm H3 başlıkları için 30px ve birden fazla sayfada H2S için 48px kullanılır
• Yazı Tipleri: Poppins tüm başlıklar için sürekli olarak kullanılır
• Birincil Düğme: Arka Plan Rengi Beyaz Metinli #4449E0
• Dolgu: Çoğu bölüm 60px üst ve alt kullanır
• Blurb Simgeleri: Simge Boyutu 24 piksel olarak ayarlandı
• Bulanık Sınırlar: Blurb modüllerine sınır uygulanmaz
• Bölüm Arka Planlar: Yeşil Renk #47Be68, hemen hemen her sayfanın altbilgi bölümünde görünür

Bunların hepsi manuel olarak her modülün içinde statik değerler olarak girilir. Örneğin, bulanıklık modülü simge rengi için #4449e0 ve 24 piksel genişlik kullanır.

Bu gibi tekrarlanan stilleri tanımladıktan sonra, tasarım değişkenlerine ne dönüştüreceğinizi tam olarak bilirsiniz.

Bu denetim adımı, takip eden her şeyin temelini oluşturur. Düzeninizi tutarlı ve sürdürülebilir tutan sistematik bir yaklaşım oluşturmanıza yardımcı olur.

2. Tasarım değişkenlerinizi kaydedin

Düzeninizi denetledikten ve tekrarlayan stilleri not ettikten sonra, bir sonraki adım tercih ettiğiniz değerlerin tasarım değişkenlerini oluşturmaktır. Bu, sabit kodlu stilleri yeniden kullanılabilir jetonlara dönüştürmenizi sağlar, bu da düzeninizin daha sonra güncellenmesini kolaylaştırır. Tüm değerlerimizi kaydettikten sonra, mevcut değerleri bizimkiyle değiştireceğiz.

Renk Değişkeni Oluşturma

Daha önce örnekte, bulanık simgelerin #4449e0 rengini kullandığını buldum, ancak bunu birincil marka rengim olan #6C012A'ya geçmek istiyorum. Bunu yapmak için bir renk değişkeni oluşturacağım.

Sol kenar çubuğundan değişken yöneticiye gidin, ardından renk sütununu açın.

Aşağı kaydırın ve + Global Renk Ekle seçeneğini tıklayın. Değişkeninizi adlandırın ve bir değer girin. Değişkenleri kaydet'i tıklayın ve bitti.

Bir Sayı Değişkeni Oluşturma

Sonra, bulanıklıklara 2 piksel bir sınır eklemek istiyorum, bu yüzden bir sayı değişkenine ihtiyacım olacak. İşlem benzer, ancak farklı bir sütunda. Sayı sütununa gidin. Global numarasını ekle, değişkeninizi adlandırın, bir değer atayın ve kaydet.

Bir yazı tipi değişkeni oluşturma

Ayrıca tüm başlık yazı tiplerini marka yazı tipim Askhar olarak değiştirmek istiyorum. Bu bir yazı tipi değişkeni gerektirir. Yazı tipi sütununa gidin, yeni bir değişken oluşturun, bir ad atayın, bir yazı tipi seçin ve kaydet.

Bitti. Bu yazı tipi artık düzen boyunca tüm başlık metin alanlarında seçilebilir.

Bölüm dolgusu, diğer başlık boyutları veya ek marka renkleri gibi denetim bulgularınızın geri kalanı için aynı işlemi izleyin. Düzeninizden tekrarlanan her stil bir değişken olabilir (ve olmalıdır).

Bu şekilde, onaltılık kodları, yazı tipi adlarını veya belirli değerleri hatırlamanız gerekmez. Değişken yöneticinizde yaşarlar ve sizi modüller ve sayfalar arasında takip ederler. Ve en iyisi, bir sonraki sırada yapacağımız yerleşim çapında uygulamak için Find'i kullanabilir ve değiştirebilirsiniz.

3. Değişkenleri uygulamak için bul ve değiştirin

İşte beklediğimiz en ilginç kısım. Değişkenlerimiz kaydedildiğinde, tüm bu düzenin stillerini değiştirmek hızlı ve kolaydır. Bakalım nasıl.

Simgelerin renklerini değiştirmek

İlk olarak, simgelerin rengini kaydedilen birincil marka renk değişkenimize değiştirelim. Blurb'un Ayarları> Tasarım> Resim ve Icon'a gidin. Şimdi, simge renk seçeneğinin üzerine gelin ve üç noktayı tıklayın. Bul ve Değiştir'i seçin.

Bul ve Değiştir panelinde, tek yapmanız gereken değişken yönetici simgesini bulmak ve değişkeninizi seçmek için devreye girer.

Ve bunun gibi, tüm simgelerin yeni bir rengi var. Ayrıca, bir tasarım değişkeni kaydetmek yerine marka rengimi statik bir değer olarak atayarak başka bir şekilde de yapabilirdim, ancak gelecekteki güncellemeleri basitleştirmek için ekstra bir adım ekledik.

Nasıl? Tüm düzen sayfalarınızı değiştirdiğinizi ancak marka renginizi değiştirmek istediğinizi düşünün. Tüm sayfaları tekrar gözden geçirme veya modülü modüle göre yapma konusunda bunalmış hissetmeye gerek yok. Zaten bir marka renk tasarımı değişkeni kaydettiğiniz için, yalnızca Site genelinde güncellemek için değeri değiştirmeniz gerekir.

Tüm Başlık Yazı Tipini Değiştirme

Ardından, tüm başlık yazı tiplerini marka yazı tipime değiştirelim. Herhangi bir Başlık Ayarları> Tasarım> Başlık Metinine erişin. Başlık yazı tipinin üzerine gelin ve Bul ve Değiştir'i açın . Değer Sütununda Marka Başlığı Yazı Tipi Değişkeninizi Değiştirin.

Tüm bulanık modüllerin sınır genişliğini güncelleme

Sınır genişliği güncellemesi için bulanık modül değişkenimi kullanacağım. Süreç tutarlı kalır. Herhangi bir Blurb'in kenarlık ayarlarına gidin, bul ve değiştirin, değişkeninizi seçin ve uygulayın.

Tüm statik değerleri tasarım değişkenlerinizle değiştirdikten sonra, düzen stillerinizi doğrudan değişkenlerle ilişkilendirmiş olursunuz. Bu, marka rengini değiştirmek, tweak başlık tipografisini değiştirmek veya sınır genişliklerini ayarlamak istiyorsanız, değiştirmeleri yeniden yapmanız gerekmeyecek. Sadece değişkeni güncelleyin, tüm bağlantılı öğeler anında ayarlanır.

Bonus Adım: Ön Ayarlar Oluştur ve Kaydet (İsteğe Bağlı)

Bul ve değiştirme değişkenleri size sağlam bir temel verirken, bu sistemi daha da fazla inşa eden isteğe bağlı bir adım vardır. Ön ayarlar, tam stilleri paketlemenize ve bunları tek bir tıklamayla yeniden kullanmanıza izin verir.

Temel değişkenlerinizden memnun kaldığınızda, bir adım daha derinlemesine alıp daha ayrıntılı stil için ön ayarlar oluşturabilirsiniz. Bu, yeni yürüdüğümüz temel süreç için gerekli değildir, ancak maksimum verimlilik istiyorsanız keşfetmeye değer.

Diyelim ki tüm bulanıklıklarınıza bir gölge efekti eklemeyi seviyorsunuz, böylece bulanıklık modülünüz için mükemmel gölge stilini tasarladınız. Bu stili her seferinde manuel olarak kopyalamak yerine, önceden ayarlanmış olarak kaydedebilirsiniz.

Tamamlamak. Bu ön ayar şimdi her modülün ön ayar açılışında görünür. Bunu anında diğer modüllere uygulayabilirsiniz; Boşlukları, sınırları, gölgeleri veya diğer tasarım ayarlarını yeniden yapmanıza gerek yoktur.

Ön ayarları daha da güçlü kılan şey esneklikleridir. Daha iyi iş akışı optimizasyonu ve ayrıntılı kontrol için farklı ayar kombinasyonları için önceden ayarlanmış gruplar oluşturabilirsiniz. Örneğin, her biri farklı arka plan, sınır ve aralık kombinasyonları içeren birincil ışık, birincil ve birincil ışık taslağı gibi varyasyonlara sahip düğme stilleri için önceden ayarlanmış bir grubunuz olabilir.

Bu şekilde, farklı bağlamlar için seçeneklere sahipken tutarlılığı korursunuz. Ön ayarlar, özellikle düzeninizde aynı stili kullanan 10+ modülü olduğunda kullanışlıdır. Bellek veya manuel düzenlemelere güvenmek yerine, her şeyi önceden standartlaştırırsınız.

Divi'nin seçenek grup ön ayarlarıyla ilgili her şeyi öğrenin

Kaydedilen tüm tasarım değişkenlerini uyguladıktan sonra, versiyonlar öncesi ve sonra görünüşe göre:

4. Aynı işlemi diğer sayfalara uygulayın

Tasarım değişkenleriniz ve ön ayarlarınız ayarlandıktan sonra, düzen paketinizin geri kalanını güncellemek çok daha hızlı hale gelir.

Örneğin kurs açılış sayfasını ele alalım. Burada kullanılan aynı statik değerleri göreceksiniz, yazı tipleri, düğme renkleri, bulanıklık sınırları, simge renkleri ve daha fazlası. Yine, her ayarı manuel olarak değiştirmek yerine, ilgili modülü açın, bul ve değiştirin ve eşleşen tasarım değişkenini atayın.

Tüm sayfalarınızdaki her bir tekrarlayan stil için bu işlemi tekrarlayın. İşiniz bittiğinde, tüm düzen paketiniz değişkenlere ve ön ayarlara bağlanacak ve gelecekteki düzenlemeleri neredeyse zahmetsiz hale getirecektir.

Divi'nin Bul ve Değiştir ve Tasarım Değişkenlerini kullanarak Güncellenmiş Kurs Açılış Sayfası

Bul ve Değiştir ile Düzen Çapında Düzenlemeler Saniyeler içinde yapın

Tasarım değişkenlerini ayarlamak ve Divi 5'te bulun ve değiştirme öğrenme biraz açık zaman alabilir. Ancak bir düzen paketi için yaptıktan sonra, düzinelerce modülü manuel olarak tıklamaya asla geri dönmek istemezsiniz.

Tüm bir düzen paketini dağınık statik değerlerden bağlı bir tasarım sistemine dönüştürdük. Find & Replace ile bizi aldı, eski yol, modül tarafından modül, sayfa by Page.

Bu sadece bu projede zaman kazanmakla ilgili değil. Gelecekteki her Divi projesini daha hızlı ve daha tutarlı hale getirecek bir tasarım sistemi oluşturuyorsunuz.