Divi 5 ile tasarım çerçevenizi oluşturmak

Bootstrap gibi CSS çerçeveleriyle daha önce çalıştıysanız, neden bu kadar popüler olduğunu anlıyorsunuz. Bir tasarım çerçevesi, hızlı ve tutarlı düzenler tasarlamak için size yeniden kullanılabilir bir temel sağlar, bu nedenle bir sayfayı her şekillendirdiğinizde sıfırdan inşa etmezsiniz.

Çoğu çerçeve önceden yazılmış sınıflara güvense de, daha derin özelleştirme için özel CSS yazmanızı beklerler, bu da onları kodlayıcı olmayanlar için zorlaştırır. Divi 5'in farklı olduğu yerdir.

CSS'yi tasarım değişkenleri, seçenek grup ön ayarları ve eleman ön ayarları gibi araçlarla değiştirerek görsel bir ilk yaklaşım gerektirir. Tek bir CSS satırı yazmadan bir çerçevenin tüm gücünü elde edersiniz. Bu yazıda, Divi 5'i kullanarak görsel olarak kodsuz bir tasarım çerçevesi nasıl oluşturacağınızı göstereceğiz.

Divi 5 yeni web sitelerinde kullanılmaya hazır , ancak mevcut olanları henüz taşımanızı önermiyoruz.

Divi 5, kodsuz bir tasarım çerçevesi oluşturmanıza nasıl izin verir

Divi 5, gelişmiş web tasarımının herkes için erişilebilir olmasını sağlamak için sıfırdan yeniden inşa edilir. Kodlama seviyeniz ne olursa olsun, modern, özel düzenler görsel olarak oluşturmanızı sağlar. Bir tasarım çerçevesi oluşturmak farklı değildir.

YouTube kanalımıza abone olun

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

Tasarım değişkenleri, markanızın renkleri, yazı tipleri, aralıkları ve daha fazlası gibi tekrarlanabilir değerleri tek bir merkezi yerde tanımlamanıza olanak tanır. Kaydettikten sonra, bu değerleri, tutarlı, markalı bir görsel görünüm vermek için web sitenizde yeniden kullanabilirsiniz.

Visual Builder'ın içinde, farklı değişken türlerini (sayılar, metin, görüntüler, bağlantılar, renkler ve yazı tipleri) tanımlamak ve depolamak için değişken yöneticiyi organize bir şekilde bulun.

Tasarım değişkenleri, CSS özel özelliklerinin kodsuz bir sürümü gibidir, ancak çok daha fazla esnekliğe sahiptir. Örneğin, genellikle şu şekilde CSS değişkenlerini bildirirsiniz : root {–Primary-color: #1A73e8; } , ancak Divi'nin tasarım değişkenleriyle, rengi yalnızca birincil renk olarak kaydedersiniz.

Güncellemeler yaparken gerçek güçlerini göreceksiniz. Stil sayfanızdan geçmenize gerek yok; Web sitesindeki her örneği güncellemek için Değişken Yönetici'de kaydedilen değişken değerini bir kez değiştirmeniz yeterlidir. Birkaç stil kuralıyla avlanmadan fikirlerinizi hızlı bir şekilde görselleştirmenize izin verirler.

Ayrıca, adres değişkenleri olarak adres, e -posta, bağlantılar, arka plan motifleri vb. Gibi yaygın olarak tekrarlanan içerik öğelerini tanımlayabilirsiniz. Bunları manuel olarak birden çok kez eklemeniz gerekmez; Tek bir tıklama ve bu öğeler sayfanızda görünür. Örneğin, şirket adresinizi bir metin değişkeni olarak kaydedin ve kullanın.

Bir tasarım değişkeni uygulamak için seçeneği taşıyın ve dinamik içerik simgesini arayın.

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

Seçenek Grup Ön ayarlarıyla ortak stil kombinasyonlarını kaydedin

Seçenek Grup Ön Setleri, her seferinde yeniden inşa etmek zorunda kalmadan aralık, sınırlar, gölgeler, metin stilleri ve arka planlar gibi sık kullanılan tasarım ayarlarını kaydetmenize ve yeniden kullanmanıza olanak tanır. Bir modül içindeki belirli bir seçenek grubuna odaklanırlar, böylece sadece bu kısmı stilize edebilir ve tek bir tıklamayla herhangi bir yere uygulayabilirsiniz.

Örneğin, diyelim ki tüm referans bölümlerinizde her zaman aynı 40 piksel dolguyu ve 10 piksel marjı kullanıyorsunuz. Bu ayarları aralık ön ayar olarak kaydedin. Yeni bir referans modülü eklediğinizde, önceden ayar ayarını seçin ve bitti.

Seçenek grup ön ayarlarını güçlü kılan şey, bunları tasarım değişkenleriyle karıştırabilmenizdir . Birincil renginiz bir değişken olarak kaydedilirse, bir arka plan ön ayarının içinde kullanabilirsiniz, bu nedenle marka rengi değişirse, önceden ayarlanmış tüm güncelleme onunla güncellenir. Tüm sayfalarınızdaki arka planlar tek bir tıklamayla değişir.

Seçenek Grup Ön Ayarları Tüm modülünüzü geçersiz kılmaz, yalnızca seçtiğiniz stil grubu için geçerlidir. Ancak belirli modülleri özelleştirmek için her zaman modüle özgü ayarlarla ön ayarları geçersiz kılabilirsiniz. Bu, sitenizde tutarlı görsel stil sağlarken, düzeninizi ve içeriğinizi benzersiz tutmanıza olanak tanır.

Seçenek Grup Ön Ayarları hakkında her şeyi öğrenin

Eleman ön ayarlarıyla tam olarak tasarlanmış öğeleri kaydedin

Divi kullanıcısıysanız, zaten eleman ön ayarlarına aşina olursunuz. Metin, boşluk, renkler, simgeler, havada uçma efektleri dahil olmak üzere bir modülün tüm özel stillerini bir öğe ön ayar olarak kaydetmenize izin verirler, böylece sıfırdan inşa etmeden herhangi bir yerde yeniden kullanabilirsiniz. Temel olarak en çok kullanılan modüllerinizin hazır bir sürümünü oluşturuyorsunuz.

İşte hızlı bir kullanım durumu: Bir bulanıklık ön ayarını özelleştirin ve kaydedin, ardından bunları hızlı bir şekilde şekillendirmek için diğer açılmış bulanıklıklara uygulayın.

Bu araçlar ön uç HTML'ye nasıl yansır

Divi 5, kodsuz bir araç gibi görünebilir, ancak aslında arka planda temiz, yapılandırılmış kod yazıyor. Ayarları görsel olarak ayarladığınızda, bir aralık ön ayarını seçmek veya marka renklerinizi değişken yöneticiden uygulamak gibi, sadece bir modül stilize etmiyorsunuz. Ayrıca kodu yazıyorsunuz.

Verdiğiniz her tasarım kararı uygun ön uç çıkışına çevrilir. Divi, tasarıma odaklanırken kodlama kısmını işler.

Bunun ne kadar güçlü olduğunu göstermek için, Divi 5'teki görsel ilk iş akışını bootstrap gibi geleneksel bir CSS çerçevesi kullanarak manuel bir yaklaşımla karşılaştıracağız.

İlk Bootstrap:

Bootstrap'ta kod içeren bir tasarım sistemi oluşturmak

Örneğimiz için, alt denizin teması yüklü bir WordPress kurulumu kullandım.

Tipik bir kod tabanlı iş akışında, küresel tasarım değerlerinizi CSS değişkenleri olarak tanımlayarak başlayacaksınız. İşte bizim:

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

Diyelim ki bir iletişim formu ve özel tarzı bir düğme ile basit bir iletişim sayfası düzeni oluşturuyoruz. Her şeyi tutarlı ve yeniden kullanılabilir tutmak için, Bootstrap'ın yardımcı sınıflarının ve kendi CSS değişkenlerimizin bir karışımını kullanacağız.

İlk olarak, düzen ve giriş stilini işlemek için Bootstrap'ın yerleşik form sınıflarını kullanarak bir iletişim formu için özel kod ekliyoruz.

Ardından, stil düğmemizin kodu ekliyoruz. Burada, bootstrap yardımcı programlarını arka plan, sınır yarıçapı ve gölge için özel CSS değişkenlerimizle birleştirdik. Bu bize görünüm ve his üzerinde tam kontrol sağlar. Değişiklik yapmak istiyorsak, değişkenlerimizi güncelleyebiliriz.

Gördüğünüz gibi, harika ve verimli, ancak her şey manuel olarak inşa edildi. Değişkenleri tanımladık, sınıfları uyguladık ve tüm kodu kendimiz yazdık. Ve bu basit bir düzen, bu yaklaşımı kullanarak karmaşık sayfalar oluşturduğunuzu hayal edin!

Şimdi, kodlamadan Divi 5 kullanarak aynı sayfayı oluşturalım.

Divi 5 ile aynı sayfayı görsel olarak yeniden yaratmak

Site çapında tasarım sistemimizin bir parçası haline gelen küresel tasarım değişkenlerimizi tanımlayarak başlıyoruz. İlk olarak, Değişken Yönetici> Renklere gidersiniz. Ardından, birincil renk (#e91e63) için hex kodunu yazın ve kaydet.

Benzer şekilde, sınır yarıçapı {6px} ve aralık için sayı değişkenlerini de kaydedebilirsiniz. Ardından, İletişim Formu Modülünü ekliyorum ve Gönder düğmesini tercih ettiğim stile özelleştiriyorum:

Şimdi bu düğme ayarlarını daha sonra kullanım için bir düğme ön ayar olarak kaydediyorum.

Başka bir düğme eklersem ve ön ayar düğmesini seçersem, ne olacağını görün? Otomatik olarak şekillenir.

Bir opsiyon grubu ön ayarını uygulamak için ayarın üzerine gelin ve Ayarlar simgesini arayın.

Ayrıca, tek bir kod satırına dokunmadan tek bir tıklamada bir düğmeye nasıl birden fazla özel stil uyguladığımızı fark ettiniz mi? Tasarım tercihlerinizi görsel olarak kaydettiğinizi söylediğimizde kastettiğimiz budur. Divi 5'in inşa edildiği türden bir iş akışı. Hızlı, tutarlı ve tamamen görsel.

Perde arkasında olan şey büyülü. Divi sadece stilleri körü körüne istiflemek değil. Her tasarım değişkeni, önceden ayarlanması ve uygulamanızı ayarladığınız ayar, ön uçta oluşturulan temiz, verimli kod olarak düzenlenir.

Yukarıdaki divi tasarımlı sayfanın sayfa kaynağı, tıpkı CSS değişkenleri gibi birincil rengin kök bölümünde kaydedildiğini gösterir:

Ve ön uçta, opsiyon grup ön ayarlarınız otomatik olarak kaydedilir ve uygun sınıfları hedefleyen temiz CSS (.et_pb_button, .et_pb_contact_submit).

Her iki sayfa da aynı görünüyor, ancak nasıl inşa edildikleri ve korundukları tamamen farklı.

Bootstrap'ta, yardımcı programlarından yararlandık, ancak yine de kod yazmak zorunda kaldık. Ancak Divi 5 ile, sadece tasarım değişkenleri ve seçenek grup ön ayarları gibi güçlü özelliklerini kullanarak bir kod çizgisine dokunmadan aynı sonuca ulaştık.

Her değişiklik, tutarsızlık riski olmadan birkaç tıklamada uygulandı, ancak ön uç kodu temiz kaldı. Divi, gereksiz işaretleme veya satır içi stil eklemeden stillerinizi yapılandırılmış, yeniden kullanılabilir bir formatta saklar.

Divi 5 ile tasarım çerçevenizi nasıl oluşturabilirsiniz?

Divi 5, ölçeklenebilir bir tasarım sistemi oluşturmak için tüm araçları verir, ancak tıpkı geleneksel gelişmede olduğu gibi, bu araçları kullandığınız sıralama önemlidir. Basamaklarda yürüyelim ve daha da önemlisi, nedenini anlayalım:

1. Global tasarım değişkenlerinizi tanımlayın

Bir sayfa tasarlamadan önce, küresel tasarım değişkenlerinizi tanımlayarak başlayın. Bunlar, renkleriniz, yazı tipleriniz, boyutlarınız, aralık birimleriniz vb. Gibi tüm sitenizin güveneceği temel değerlerdir. Sitenizin yapı taşlarını tanımladıktan sonra, her şeyi tutarlı, temiz ve yönetilmesi kolay tutmak için her yerde yeniden kullanabilirsiniz.

Divi 5'te, bunları oluşturmak ve düzenlemek için değişken yöneticiniz var.

Vurgulanan değişken türlerinin rol oynadığı aşağıda açıklanmıştır:

• Renkler: HEX kodlarını yazmanız veya eşleşmeniz gerekmez, böylece markanızın birincil, ikincil ve vurgu renklerini kaydedin. Renk değişkenlerinizi kaydedin ve bunları tek bir tıklamayla uygulayın.
• Yazı Tipleri: Başlıklar, gövde metni veya referanslar için kullandığınız tam yazı tiplerini tanımlayın. Her H2 oluşturduğunuzda Poppins Bold'ı yeniden seçmek yerine, bir yazı tipi değişkeni olarak kaydedin. Aynı stili modüller arasında kolayca yeniden kullanabilirsiniz.
• Numaralar: Kartlar için 8 piksel sınır yarıçapı veya görüntü modülleri için 32 piksel dolgu gibi go-to tasarım değerlerinizi sayı değişkenleri olarak saklayın. Dinamik tasarımlar yapmak için sayı değişkenlerinin içinde gelişmiş birimler de kullanabilirsiniz.

Temel değişkenleriniz ayarlandıktan sonra, oluşturduğunuz her ön ayar ve sayfa bunlara güvenecektir. Ve tasarım yönünüz daha sonra değişirse (örneğin, taban aralığınızı ayarlamak istiyorsanız) , değişkeni yalnızca tek bir yerde güncellemeniz gerekir.

Tasarım değişkenlerinizi doğru bir şekilde tanımladıktan sonra, her örneği avlamanıza ve değiştirmenize gerek yoktur. Değişken yöneticinin kendisinde değeri bir kez değiştirin.

2. Küresel olarak tekrar eden içeriği kaydedin

Değişken yöneticiyi kullanarak, sitenizde sıklıkla tekrarlanan bağlantılar, metin ve görüntüler gibi içerik değerlerini de kaydedebilirsiniz. Normalde bu değerleri her seferinde kopyalayıp yapıştırırsınız, ancak Divi 5 bunları bir kez tanımlamanıza ve herhangi bir yerde yeniden kullanmanıza olanak tanır.

Bu, özellikle sosyal medya bağlantılarını, şirketinizin iletişim bilgilerini ve manuel olarak eklenmesi gereken diğer yinelenen içeriği kaydetme için yararlıdır.

Geri kalan üç değişken aracılığıyla içeriği kaydedebilirsiniz:

• Metin: Diyelim ki şirket adresiniz altbilgide, iletişim sayfasında ve ana sayfanızın kahraman bölümünde görünür. Bir metin değişkeni olarak kaydedin ve adresin görünmesini istediğiniz her yerde seçin.
• Bağlantılar: URL'leri Hakkında Sayfanıza, Ürün Koleksiyonlarına, Sosyal Profillere veya Hüküm ve Koşullara Bağlantı Değişkenleri olarak kaydedin.
• Resimler: Marka logonuzu veya arka plan görüntüsünüzü birden çok sayfada kullanıyorsanız, görüntü değişkeni olarak kaydedin. Yer tutucu görüntülerini tıklamalarda şablonlar üzerinden değiştirdiğinizi hayal edin!

Divi 5, metin, bağlantılar ve görüntüleri yeniden kullanılabilir yapı taşları olarak ele almanızı sağlar. Bu içerik değişkenleri küçük hissedebilir, ancak hız, doğruluk ve uzun vadeli bakımı büyük ölçüde etkiler. Zamandan tasarruf edersiniz, hataları azaltırsınız ve sitenizi tutarlı bir şekilde güncel tutarsınız.

3. Seçenek grup ön ayarlarıyla çekirdek stilleri oluşturun ve kaydet

Tasarım değişkenleriniz yer aldıktan sonra, bir sonraki adımınız Sitenizin temel stil kalıplarını seçenek grup ön ayarlarını kullanarak tanımlamaktır. Yaygın olarak kullanılan tasarım ayarlarını ön ayar olarak kaydedin ve herhangi bir modül boyunca yeniden kullanın.

Seçenek dışı grup ön ayarlarından en iyi şekilde nasıl yararlanacağınız aşağıda açıklanmıştır:

1. Ortak stiller için ön ayarları kaydedin

Sınır yarıçapı, arka plan renkleri veya aralık gibi en sık kullandığınız ayarlar için ön ayarları kaydederek başlayın. Diyelim ki referanslar için her zaman 40 piksel üst dolgu ve 10px alt kenar boşluğu kullanıyorum, bu yüzden bu değerleri aralık ön ayar olarak kaydettim.

Bu aralığı anında referanslarıma (ve istersem diğer modüllerime) uygulayabilirim. Bunu sürekli olarak yeniden kullandığınız her ayar grubu için yapın: sınırlar, kutu gölgeleri, düğme arka planları vb., Böylece sayfalar oluştururken yeniden kullanabilirsiniz.

2. Tasarım değişkenlerini ön ayarlarla birleştirin

Ardından, tasarım değişkenlerini seçenek grup ön ayarlarıyla birleştirerek çerçevenizi güçlendirin. Diyelim ki bir sayı değişkeni olarak 6px bir sınır yarıçapını kaydettiniz ve seçenek grup ön ayarınızı oluştururken kullandınız. Değişkeni daha sonra değiştirirseniz, ön ayarlarınız da site boyunca otomatik olarak güncellenir.

Benzer şekilde, duyarlı metin için bir kelepçe () değerine sahip sıvı tipografisi oluşturabilirsiniz. Bunu bir H1 ön ayarının içine kaydedin ve düzeniniz boyunca başlıklara tutarlı bir şekilde uygulayın. Ön ayar ve değişkenlerin bu kombinasyonu, görsel çerçevenizin gerçekten modüler, ölçeklenebilir ve bakımı kolay olmaya başladığı yerdir.

Ayrıca seçenek grubu ön ayarlarını varsayılan olarak kaydedebilirsiniz, yani stiller yeni modüllere de otomatik olarak uygulanır. Her seferinde bir ön ayar seçmeniz gerekmeyecek şekilde ortak ön ayarlarınıza varsayılanlar uygulayın.

4. Eleman ön ayarları oluşturun

Eleman Ön Ayarları Tasarım çerçevenizi tamamlayın. Tercih ettiğiniz stilleri ön ayar olarak kaydettikten sonra, modül stillerini öğe ön ayarları olarak da kaydetmelisiniz.

Bu, özellikle CTA'lar, referanslar, bulanıklıklar ve iletişim formları gibi sık sık kullandığınız modüller için yararlıdır. Örneğin, marka renginiz, yumuşak bir gölge ve spesifik dolgu ile bir CTA düğmesi stiline girdiyseniz, tüm tasarımı birincil ışık adı verilen önceden ayarlanmış bir olarak kaydedebilirsiniz. Daha sonra, tek bir tıklamayla yeni bir düğmeye anında uygulayın.

Eleman ön ayarlarını varsayılan olarak ayarlayın

Herhangi bir öğe ön ayarını varsayılan olarak da ayarlayabilirsiniz, böylece bu türün her yeni modülü kaydedilen tasarım stillerini otomatik olarak takip eder. Yukarıdaki birincil ışık düğmesi ön ayarını varsayılan olarak kaydetme, stilini devralan yeni düğmenin görüldüğünü göreceksiniz:

Varsayılanlar iş akışınızı hızlandırır ve gerekirse yine de bunları geçersiz kılabilirsiniz. Ancak çoğu durumda, iyi tanımlanmış ön ayarlara sahip olmak, tekrarlayan çalışmayı azaltır ve tasarım tahminlerini ortadan kaldırır. Bu üç özellik birleştirilmiş olarak, web sitesi oluşturmayı tamamen kod oluşturmayan önceden ayarlanmış bir tasarım çerçevesi izlersiniz.

Tasarım çerçevenize göre yeni sayfalar tasarlama

Artık tercih ettiğim tüm tasarım değişkenlerimi, seçenek grup ön ayarlarını ve eleman ön ayarlarını kaydettiğime göre, çerçevemizi test edelim.

Yeni sayfalar oluşturmak çok daha hızlı ve daha kolay bir deneyim haline geldi. Sıfırdan başlamama veya her modülü manuel olarak yeniden düzenlemem gerekmiyor. İhtiyacım olan her şey zaten kuruldu.

Gördüğünüz gibi, sadece birkaç tıklamada birden fazla tasarım değişikliği uyguladım. Evet, önceden yapılmış bir divi düzenini içe aktardım, ancak kaydedilen çerçevemle saniyeler içinde özelleştirdim.

Yazı tipleri seçmek, aralığı ayarlamak veya renkleri manuel olarak ayarlamak yerine, kaydedilmiş ön ayarlarımı uyguladım. Düğme tasarımı, metin boyutları, arka plan stilleri ve görüntü sınırları daha önce oluşturduğum çerçeve ayarlarını takip etti.

Bu stilleri bir modüle manuel olarak uygulamak çok önemli olmayabilir. Ancak bir sayfanın tamamını özelleştirdiğinizde fark açıktır. Tüm bu değişiklikleri yaptığım kolaylığı ve hızı fark edebilirsiniz. Bu bir tasarım çerçevesi oluşturmanın gerçek yararıdır: kalite veya tutarlılıktan ödün vermeden iş akışınızı hızlandırır.

En iyi bölüm güncellemeler yaparken gelir. Küresel değerlerim hiç değişiyorsa, kaydedilen tasarım değişkenlerimi sadece değişken yöneticisi aracılığıyla değiştirmem gerekiyor. Ayrıca küçük ayarlar simgesine tıklayarak seçenek grubumu ve öğe ön ayarlarımı da değiştirebilirim.

Bu, Divi 5'in size getirdiği güç. Tek bir kod satırına dokunmadan tüm tasarım çerçevenizi oluşturmanızı, kaydetmenizi ve özelleştirmenizi sağlar.

Kodsuz tasarım çerçevenizi görsel olarak oluşturmak

Bir tasarım çerçevesi oluşturmak artık sadece geliştiriciler için değil. Doğru araçlarla, daha önce hiç kodlamamış olsanız bile herkes bunu yapabilir. Bu yazı boyunca gördüğünüz gibi, tek gereken kendi tasarım sisteminizi oluşturmak için birkaç akıllı adımdır. Nasıl? Divi 5 kullanarak.

Divi 5 size bunun gerçekleşmesi için araçlar verir

Divi 5 karmaşıklığı işler ve gelişmiş özellikleri aracılığıyla size tam kontrol sağlar. Visual Builder'dan ayrılmadan daha hızlı oluşturabilir, tutarlı kalabilir ve küresel güncellemeler yapabilirsiniz. Harika, değil mi? Ama bu sadece buzdağının ucu ve yeni başlıyoruz!

Sürüm için dizilmiş daha şaşırtıcı özelliklerimiz var ve bunları denemenizi bekleyemeyiz. Bugün kamu alfa indirin ve kodlama kısıtlamaları olmadan kendi tasarım çerçevenizi oluşturun.

Divi 5 yeni web sitelerinde kullanılmaya hazır , ancak mevcut olanları henüz taşımanızı önermiyoruz.