Divi 5 Tasarım Değişkenleri ile Boyutlandırma ve Boşluk Sistemi Oluşturma

Divi 5, tüm sitenizde boyutlandırma ve aralık kararlarını tanımlamak, yönetmek ve yeniden kullanmak için yapılandırılmış bir yol sunar. Tasarım değişkenlerini ve ön ayarlarını kullanarak, bakımı, ayarlanması ve çoğaltılması kolay olan ölçeklenebilir bir tasarım sistemi oluşturabilirsiniz.

Bu yazıda, sistemlerde nasıl düşüneceğinizi göstereceğiz ve kapsamlı bir boyut ve boşluk sistemi oluşturarak sizi gezeceğiz.

Divi 5, oluşturduğunuz herhangi bir yeni sitede kullanılmaya hazırdır, ancak mevcut siteleri (şimdilik) taşımada tutunmanız önerilmektedir.

Neden bir boyut ve boşluk sistemi kullanıyor?

Çoğu Divi kullanıcısı düzenler, marjlar ve tipografide tutarlılık ister. Ancak çok azı bu standartları erken tanımlamak için zaman ayırıyor. Ya da bunu yaparsanız, muhtemelen ağır tarz bir çocuk teması ile yaptınız. Şimdi, şunları yapabilirsiniz:

YouTube kanalımıza abone olun

1. Bir sayı değişkeni bir kez tanımlayın (16px veya kelepçe (16px, 4vw, 48px) gibi)
2. Modül/eleman ön ayarlarına atayın
3. Veya seçenek grup ön ayarları (boşluk veya boyutlandırma gibi)
4. Değişkeni daha sonra güncelleyin ve site çapında yansıtılan değişikliklere bakın
5. Daha ince sayfalar için genel olarak daha az CSS kullanın

Diğer site üreticileri ile tasarımcılar, projeden projeye alabilecekleri bir sistemi kullanırken tutarlı aralık ve boyutlandırma uygulamak için CSS çerçevelerine büyük ölçüde yaslanma eğilimindedir. Divi 5 ile, tek bir kod satırına dokunmaya gerek kalmadan Divi'nin tasarım değişkenlerini kullanarak Divi UI içinde çalışan kendi “tasarım çerçevenizi” oluşturabilirsiniz.

Eleman boyutu, dolgu ve kenar boşlukları

Her web öğesinin genel aralığı ve boyutu etkileyen üç bileşeni vardır:

• Eleman Boyutu : Bir öğenin temel içerik boyutu, genişlik ve yükseklik ile tanımlanmıştır.
• Dolgu : Bir elemanın içine eklenen alan, tıklanabilir alanını ve görsel boyutunu artırır.
• Marj : Bir elemanın dışına eklenen alan, onu diğer öğelerden uzaklaştırır.

Divi öğeleri için pratik örnekler

Genel olarak, Divi'de dolgu ve marj kullanmayı bekleyebilirsiniz:

• Bölümler genellikle bir sayfada dikey aralık oluşturmak için üst ve alt dolgu (marj değil) vardır.
• Sıralar genellikle dikey dolgudan yararlanır, ancak aksi takdirde içeriğin doldurulmasına izin verir.
• Sütunlar esas olarak sütun boşlukları oluşturmak için uygulanan kenar boşluğuna odaklanır.
• Modüller, istiflenmiş elemanları açıkça ayırmak için genellikle bir alt kenar boşluğu kullanır, ancak marj miktarı görsel gruplara bağlıdır.

Divi'nin varsayılan boşluk değerleri

Divi kullanan web tasarımına yeni başlayanlar muhtemelen Divi'nin sizin için bazı aralık kararları aldığını bile fark etmiyor. Daha deneyimli tasarımcılar genellikle bunları hedeflerine uyacak şekilde ayarlar, ancak bu varsayılanlar çoğu insanın projelerini hızlı bir şekilde başlatmasına izin verir.

Bu varsayılanlar yararlı olabilir, ancak tasarımcılar genellikle kendi boşluk standartlarını belirlemeyi tercih ederler. Varsayılan dolgu kurulumu olmadan sayfanızın nasıl görüneceğini görmek isterseniz, bunu yapabilirsiniz:

1. Herhangi bir öğeye gidin ve tasarım sekmesinin altındaki boşluk seçeneği grubunu bulun.
2. Varsayılan seçenek grubunu açın ve üst ve alt dolguyu 0 (sıfır) olarak ayarlayın.
3. Her öğeye site çapında uygulamak için varsayılan aralık OG ön ayarını kaydedin.

Bu, Divi'nin varsayılan ayarları olmadan sayfalarınızın nasıl göründüğünü gösterecektir. İyi görünmeyecek, ancak kendi tasarım sisteminizi oluşturmak için ne yapmanız gerektiğini görmeye başlayacaksınız (veya Divi'nin varsayılanlarını kullanabilir ve uygun gördüğünüz gibi değişiklikler yapabilirsiniz).

8 noktalı bir aralık ölçeği kullanarak

8 noktalı ölçek, boşluk değerlerinin 8 artışları kullanılarak oluşturulduğu bir düzen şemasıdır. Bu nedenle, 13px veya 27px gibi keyfi değerler kullanmak yerine, 8, 16, 24, 32, 40, 48 vb.

Bu sistem yardımcı olur:

• Tutarlı bir boyut değerlendirme listesi kullanarak dikey ve yatay ritim tutun
• Aralık yığınlarını kesme noktaları boyunca temiz bir şekilde sağlayın
• Karar Vermeyi Hızlandırın (daha az seçenek = daha hızlı tasarım)

Tercihinize veya ölçek türünüze bağlı olarak ölçeği PX veya REM'de kullanabilirsiniz. Örneğin, temel yazı tipi boyutu 16px olduğunda 16px 1REM olur.

Dikkatinizi seçen alanlara ayıran ve ziyaretçileri dikey aralıklarla sayfadan aşağı iten bir sayfanın maketini

Dikey boşluk okuyucuya nereye odaklanacağını söyler. Daha sıkı boşluklarla birlikte kümelenmiş öğeler doğal olarak birbiriyle ilişkili olarak görülür. Daha fazla alanla ayrılan şeyler yeni bir fikri gösterir.

Boyutlandırma ve Boşluk Sistemi Nasıl Oluşturulur

Boyutlarınız ve boşluklarınız için bir sistem iki şeyden oluşur: bir tasarım boyunca kullanılacak değişkenleri veya jetonları ayarlamak ve site tasarımı boyunca bu değişkenleri sürekli olarak kullanmak. Bunu Divi ile nasıl yapabilirsiniz.

Adım 1: Tasarım Değişkeni Yöneticisinde Sayı Değişkenleri Oluştur

Divi 5, yeniden kullanılabilir sayısal değerleri tanımlamak için görsel bir arayüz sunar. Her sayı değişkeni şunları içerir:

1. Çok uzun olmayan kolayca geri çağrılabilir bir ad (örn. GAP-SM, Text-H1)
2. Sayısal bir değer veya fonksiyon calc () veya clamp ()
3. Bir CSS ünitesi (PX, REM, %, VW, vb.)

Değişken yönetici nedeniyle, CSS değişkenlerini ayrı bir stil sayfasına yazmanız gerekmez. Bunların hepsini tasarım değişkeni yöneticisine ayarladınız ve ardından görsel oluşturucudaki giriş alanlarından seçtiniz.

Aşağıda, 8 noktalı bir tasarım sistemine uyacak eksiksiz bir başlangıç ​​seti seti bulunmaktadır. Bunu kullanmak zorunda değilsiniz, ancak neyin mümkün olduğuna dair bir fikir verir.

Ve bunu değişken yöneticiye doldurmanın nasıl bir şey olduğu.

Bu boşluk değerlerinin Divi 5'in yaklaşan Flexbox özelliğinde yardımcı olacağını unutmayın

2. Adım: 8 noktalı aralık sisteminizi planlama

Sayfalarınız genellikle tekrarlayan öğeler içerecektir. Ortak gruplar veya kümeler arayın:

• Başlık, paragraf, düğme
• Küçük başlık, büyük başlık, paragraf
• Simge, paragraf
• Birden çok öğe içeren kartlar

İlk tel çerçeveleriniz (veya yer tutucu tasarımlarınız) ile potansiyel desenler oluşturma fırsatına sahip olacaksınız. Ayrıca, nasıl başa çıkacağınıza karar vermeniz gereken desenlere uymayan şeyler de yaratacaksınız. Ama hepsi bu tasarımın bir parçası.

Bunu Figma'da veya doğrudan Divi'de yer tutucu öğeleri içeren bir tel çerçeve sayfası oluşturarak yapabilirsiniz. Sadece bir sayfaya koyabileceğiniz her şeyi alın. Bunları ayarlamaya başlarken, aralığı görselleştirmenize (ilk başta Divi'nin varsayılan aralığıyla) görselleştirmenize yardımcı olmak için her şeyi ölçen bir krom uzantısı kullanabilirsiniz.

Uzantıyı kullanmak için Chrome Uzatma araç çubuğundan etkinleştirin. Ardından, aracı o öğeye odaklayarak ilgilendiğiniz sayfadaki bir öğeyi tıklayın. Oradan, o anda seçilen öğe ve diğer öğeler arasındaki çeşitli yönleri ölçmek için farenizi hareket ettirin.

Adım 3: Seçenek grup ön ayarlarına sayı değişkenlerini atayın

Bir sayfa kurulumu ve bir tasarım değişkeninin tel çerçevesi ile sayfanızda aralık ve boyutlandırma ile ilgili değişiklikler yapmaya başlayabilirsiniz. Önce içerik gruplarıyla başlayabilirsiniz. Kahraman bölümündeki başlık, paragraf ve düğmeye odaklanalım.

Yer tutucu içeriği ve Yazı Tipi/Yazı Tipi Boyutlandırma ile tel çerçeve

Bu noktada, tipografinizin ilk taslağını zaten ayarlamak isteyeceğinizi unutmayın. Bu yazı tipleri, yazı tipi boyutlandırma ve çizgi yüksekliği/harf aralığı dahildir. Bu olmadan, tipografik sisteminizi oluşturduğunuzda tüm boyutlandırmanızı yeniden dengelemeniz muhtemeldir.

Sayı değişkenleri olarak ayarlanan tipografi boyutlandırma seçenekleri örneği

Şimdi, tasarımda hangi varsayılan aralığın uygulandığını değerlendirmek istiyoruz. Bunu yapmak için, grafiğe daha erken bakabilir ve kahraman bölümünde olup bitenlerle karşılaştırabilirsiniz. Açıkçası, bir bölüm (#1) ve iki sıra (#2 ve#3) vardır. Şimdilik, varsayılan satır üst/alt dolguyu sıfıra ayarlayacağız.

Daha sonra, bölüm aralığı için iki seçeneğimiz var: Dolguyu sıfıra ayarlayabilir ve daha sonra çözebiliriz veya bölümlerin böyle bir şeye bakması için varsayılan öğe ön ayarında bazı ön ve alt dolgu ayarlayabiliriz:

• Masaüstü : Space-xxxl'ye kadar üst ve alt dolgu
• Tablet : Space-xxl'ye kadar üst ve alt dolgu
• Mobil : Space-XL'ye Top ve Alt Dalga Seti

Ancak yaptığınız şey tamamen size ve kurduğunuz aralık tasarım değişkenlerine bağlıdır (veya bunları kendiniz olarak benimsemeyi tercih ederseniz varsayılanları kullanmaktır). Şu anda sahip olduğumuz şey (varsayılan satır dolgusu sıfıra ayarlanmış ve özel bölüm dolgusu ile):

4. Adım: Modül Aralığı

Yapılacak bir sonraki şey, bölümler/satırlar içindeki modüller arasındaki boşluk üzerinde çalışmaktır. Anahtar, modüllere aralık uygulamanın tutarlı bir yolunu seçmektir.

Seçenekleriniz var, aralığı birçok şekilde bölebilirsiniz:

• Marj için boşluk uygulayın
• Marj-Altına Boşluk Uygula
• Boşluğu marj üstü ve marj altlığı arasında eşit olarak uygulayın

Birçok modülün varsayılan olarak uygulanan bir marj dip olduğunu hatırlamak önemlidir, bu nedenle bu kongre ile gitmenizi ve aralık paradigmanınızı ayarlarken oradan başlamanızı öneririm. Yeni başlayanlar için, modüller arasındaki boşluğun kendilerine uygulanmadan nasıl görünmediğini görmek için üst/alt kenar boşluklarını sıfır olarak ayarlayabilirsiniz.

Bu bölümde, tüm bu modülleri varsayılan aralık olmadan görmek için marj üstüne ve altına 0 piksel uyguladık

Şimdi, bir boşluk sistemi oluşturmak için bu modüllerin kenar altına boşluk tasarım değişkenleri atamaya başlayabiliriz. Başlık ve vücut metniyle başlayacağız.

Modül aralığınızla desenleri görmeye başladığınızda, bu aralık seçeneklerini varsayılan öğe ön ayarlarına eklemek isteyebilirsiniz. Ve sapan öğeler için boşluk kuralları oluşturmanız gerektiğinden, özel öğe ön ayarları oluşturabilirsiniz. Yeni öğeler oradan varsayılan ön ayarları kullanacaktır, ancak çeşitli durumlar için hızlı bir şekilde özel bir öğe ön ayarını seçebilirsiniz.

Boyutlandırma ve boşluk için Divi 5'i nasıl kullanacaksınız?

Mutluluktan memnun olduğunuz bir boşluk ve boyutlandırma sistemi oluşturmak, temelleri uygulamak ve eldeki aletlere yaslanmak için gelir. Divi 5, WordPress web siteleri için fiili tasarım sistemini oluşturma yolunda. Çok fazla esnekliğe sahip olmanın tatlı noktasına çarpar, ancak başınızı sarmak kolaydır.

Tasarım sistemleri oluşturmayı hiç düşünmemişseniz, Divi bunu sadece bireysel bir modül veya eleman seviyesinde değil, tasarım değişkeninden ve önceden ayarlanmış bir seviyeden düşünmenize izin verir. Bu, temel tasarım kararlarını her zamankinden daha hızlı öğelere uygulamanıza yardımcı olur.

8 puanlık sistemi deneyecek misiniz, yoksa planlanan başka şeyler var mı? Ayrıca, bu ilk kez Divi'nin varsayılan aralığını mı düşünüyorsunuz? Divi otomatik olarak tasarım yapar, ancak profesyonel tasarımcılar için, piksel mükemmel vizyonunuzu elde etmek için bu varsayılanlardan bazılarını değiştirmek isteyebilirsiniz.

Divi 5, oluşturduğunuz yeni sitede kullanılmaya hazırdır.