Divi 5 için tasarım değişkenlerini tanıtmak

Yayınlanan: 2025-04-04

Divi'nin tasarım iş akışını önemli ölçüde artıracak ve Divi kullanıcılarına diğer inşaatçılar üzerinde ciddi bir bacak verecek yeni bir özellik olan Divi 5 için tasarım değişkenlerini tanıtmaktan heyecan duyuyorum.

Değişkenleri renkler, yazı tipleri, sayılar, görüntüler ve metin gibi herhangi bir şey için tanımlayabilir ve bunları divi öğeleri ve ön ayarlara takabilirsiniz. Bir değişkeni güncellediğinizde, web sitenizin tasarımı ve içeriği değişir.

Değişkenler ve Divi'nin yeni önceden ayarlanmış yeni tasarım sistemi arasındaki sinerji harika. Size nasıl çalıştığını göstereyim.

Yeni özelliği eylemde görmek için aşağıdaki videoya göz atın.

İçindekiler
  • 1 Divi değişken yönetim ile “küresel” gidiyor
    • 1.1 Yeni Değişkenler Oluşturma
    • 1.2 Değişkenleri öğelerde ve ön ayarlarda kullanma
  • 2 Tasarım Değişken Örneği
    • 2.1 Birinci Örnek: Global Yazı Tiplerini Yönetin
    • 2.2 İkinci Örnek: Global Boyutları Yönetin
    • 2.3 Örnek Üç: Tüm web sitenizi küreselleştirin
  • 3 Bugün Divi 5'i deneyin
  • 4 Sneak Peek: iç içe sıralar
  • 5 Divi 5 güncelleme yolda

Divi değişken yönetim ile “küresel” gidiyor

Divi'nin küresel renk sistemi sayesinde, bir tasarım değişkeni kavramına zaten aşina olabilirsiniz. Global renk bir tür tasarım değişkenidir. Ancak bu güncelleme ile küresel her şeyi tanıtıyoruz! Ayrıca, yeni bir değişken yönetici sayesinde küresel ayarlarınızı yönetmek her zamankinden daha kolay.

Yeni Değişkenler Oluşturma

Sol kenar çubuğundaki değişkenler simgesi web sitenizin değişken yöneticisini açacaktır. Yeni bir değişken ekleyin, bir ad ve değer verin ve ardından bu değişkeni herhangi bir sayfadaki ilgili ayarlara takabilirsiniz. Divi şu anda Divi'nin tüm yerel giriş alanlarını kapsayan altı çeşit değişkeni desteklemektedir:

  • Renkler : Renkler her web sitesi için gereklidir; Çoğu web sitesi sadece üç ila dört birincil renk kullanır. Renk değişkenlerini tanımlamak ve bunları web siteniz aracılığıyla kullanmak, web sitenizin tüm renk paletini saniyeler içinde ayarlayabileceğiniz anlamına gelir.
  • Yazı Tipleri : Statik yazı tipleriyle çalışma dönemi bitti. Ayrıca, artık tema özelleştiricisindeki global yazı tipi ayarlarıyla sınırlı değilsiniz. Web sitenizin yazı tiplerini değişken olarak tanımlayabilir ve hepsini tek bir yerde yönetebilirsiniz.
  • Numaralar : Web sitenizin boyutlandırma sistemini tasarlamak için sayı değişkenlerini kullanabilirsiniz. Örneğin, tüm öğelerde standart bir Border-Radius boyutu kullanabilirsiniz. Bunu bir değişkene dönüştürmek, tek bir değişkeni düzenleyerek yuvarlak köşelerinizin boyutunu ayarlamanıza izin verir. Diğer günlük kullanımlar arasında web sitenizin metin boyutlarını ve çizgi yüksekliklerini, konteyner genişliklerini ve aralığını ve aradaki her şeyi tanımlamak yer alır.
  • Resimler : Aynı görüntüyü birden çok sayfada kullanıyor musunuz? Örneğin, tanıdık bir marka motifi olarak hizmet veren standart bir arka plan görüntüsünüz olabilir. Bunu bir değişken haline getirirseniz, markanızı yolda yenilemek kolaydır.
  • Metin : Değişkenler tasarımla sınırlı değildir; Metin değişkenlerini de tanımlayabilirsiniz. Örneğin, şirket telefon numaranızı ve adresinizi metin değişkenlerine dönüştürürseniz, işletme detaylarınız değiştiğinde bu değişkenleri kullandığınız tüm yerleri avlamak zorunda kalmazsınız.
  • URL'ler : Biz de URL değişkenlerine attık, çünkü neden olmasın? Yılın farklı zamanlarında birincil eylem çağrısı bağlantınızı farklı sayfalarda bulundurmak isteyebilirsiniz (örneğin, bir satış sırasında yükseltme). Bu URL'yi her yerde güncellemek yerine, tek değişkeni güncelleyin.

Değişkenleri öğelerde ve ön ayarlarda kullanma

Web sitenizden ilgili değişkenler ve dinamik içerik listesi arasından seçim yapmak için yukarıdaki değişkenler simgesini tıklayın.

Divi'nin değişkeni ve dinamik içerik sistemi, daha önce yalnızca içerik alanlarında mevcut olduğu tüm alanlara genişletildi. Bu, sayı alanlarına, yazı tipi alanlarına vb. Değişkenler ve dinamik içerik atayabileceğiniz anlamına gelir.

Tasarım Değişkeni Örnekleri

Tasarım değişkenleri etkilidir ve hızla Divi tasarım iş akışının temel bir bileşeni haline gelecektir. Ancak konsept tıklamadıysa, size birkaç örnek vereyim.

Birinci Örnek: Global Yazı Tiplerini Yönetin

İş akışınızı geliştirmek için tasarım değişkenlerini nasıl kullanabilirsiniz? İlk olarak, yazı tipi değişkenlerini ele alalım.

Çoğu web sitesi iki ila üç yazı tipi kullanır. Muhtemelen çeşitli öğelerde ve ön ayarlarda istediğiniz gövdeyi ve başlık metin yazı tiplerini kurmak için zaman harcadınız.

Peki ya işleri değiştirmek istiyorsanız? Web sitenizi ön ayarlarla en iyi şekilde tasarlamış olsanız bile, geri dönüp yazı tiplerini değiştirmek zaman alıcı olabilir. Belirli bir yazı tipini kullandığınız tüm yerleri bile hatırlamayabilirsiniz.

Yazı tipi değişkenleri devreye girer.

Yukarıdaki videoda web sitesini üç yazı tipi değişkeni kullanarak oluşturdum: bir başlık yazı tipi, bir gövde yazı tipi ve bir vurgu yazı tipi.

Başlık yazı tipi değişkenini varsayılan bulanık ön ayarım gibi öğelere eklemek kolaydır. Hiç statik yazı tipi değerleri kullandığımdan, bunun yerine değişkenlerimi taktığım için, web sitemdeki yazı tipleri tamamen dinamik.

Web sitemin başlık yazı tipini değiştirmek, başlık yazı tipi değişkenini güncellemek kadar kolaydır.

İkinci Örnek: Global Boyutları Yönetin

Aynı şeyi metin boyutlarıyla yapabilirsiniz.

Aşağıdaki videodaki web sitesi için, çeşitli başlık seviyeleri ve gövde metin stilleri için sekiz metin boyutundan oluşan bir dizi tanımladım. Varsayılan bulanıklık ön ayarımı güncellediğimde ve orta başlık metin boyutu değişkenini atadığımda, tüm bulanık başlıklarım değeri o değişkenden devralıyor.

Tüm web sitemin metin boyutlarını değişkenlere dayandırdığım için, web sitemin metin boyutlarını tamamen değişken yöneticiden yönetebilirim.

Üç Örnek: Tüm web sitenizi küreselleştirin

Yukarıdaki videoda, değişkenlerin tüm gücünü kullanan bir web sitesi görebilirsiniz. Tüm renkler, yazı tipleri, metin boyutları, sınır-radius boyutları ve konteyner öğelerimdeki aralık değerleri gibi değişkenlerdir.

Sadece bu değil, aynı zamanda paylaşılan içeriği de değişkenlere dönüştürdüm. Şirket adım, telefon numaram ve adresim içerik değişkenleri.

Web sitesi genelinde tanıdık bir marka motifi olan arka plan görüntüsü bile kolayca değiştirebileceğim bir görüntü değişkeni.

Bugün Divi 5'i deneyin

Divi 5 için tasarım değişkenleri bugün mevcuttur ve bu yıl Divi'ye gelen birçok özellikten biridir.

İki haftada bir güncellemelerle Divi 5 ve ötesindeki son sürümünde ilerledikçe takip edebilirsiniz. Önceliklerinize bağlı olarak, yeni web siteleri oluşturmak için Divi 5'i kullanabilir veya sizin için en iyi olanı daha fazla özellik ekleyene kadar bekleyebilirsiniz.

Divi 5'in orijinal çok fazlı sürüm programında belirtildiği gibi, Divi 5 genel alfa “Divi 5 Lite” gibidir. Birkaç özellik eksik ve mevcut web siteleri için uygun olmayabilir, ancak deneyimi Divi 4'e tercih ederseniz yeni web sitelerinde kullanılmaya hazırdır.

Denemenizi istiyoruz ve eğer seviyorsanız, kullanın; Herkes onu sevdiğinde, resmi hale getireceğiz.

Sneak Peek: iç içe sıralar

Hızlı özellikler üretiyoruz. Yeni bir özelliği her bitirdiğimizde yeni bir özellik başlatırız. Ne zaman yeni bir özellik başlattığımızda, size gizlice bir göz atıyorum.

Kaçırmanız durumunda, iç içe sıraları sergilediğim geçen haftaki özelliği Sneak Peek'e göz atın. Satırların içinde satırlar! Bu basit bir fikir ama Divi 5 için daha esnek bir düzen sistemi oluşturmanın önemli bir ilk adımı.

Tüm ayrıntılar için bu videoyu izleyin.

Daha fazla Divi 5 güncellemesi yolda

2025 Divi 5 yılıdır . Sıkıcı çalışma arkamızda. Süper hızlı vakfı inşa ettik ve şimdi Divi'nin geri dönüşünü yapma zamanı.

İzlediğiniz için teşekkürler ve gitmeden önce sormak için bir iyilik var. Divi geri dönüşü için buradaysanız, bu videoya yorum yapın; Her yorumu okuyacağım. Bu videonun iki yüz yoruma ulaşmasını görmek isterim, bu yüzden yorum sayısını kontrol edin ve mümkünse bize bir el ödünç verin. Algoritmayı beslemek için harika bir yol ve daha da önemlisi sizinle sohbet etmeyi seviyoruz.

Bizi YouTube'da takip etmeyi ve Divi bültenine abone olmayı unutmayın, böylece bir güncellemeyi asla kaçırmazsınız. Yakında başka bir Divi 5 özellik duyurusu için görüşürüz, bu da köşede olacağına söz veriyorum.