Divi 5'in gelişmiş birimleri hakkında bilmeniz gereken her şey

Harika tasarım araçları, web sitenizin her yönünü kontrol eder. İster mükemmel dolguyu çiviliyor ister cihazlarda metin ölçeklendirmelerini sağlıyor olsun, her ayrıntı önemlidir. Divi, yıllardır tasarımcılar için güvenilir bir arkadaştır ve profesyonel web siteleri oluşturmak için sağlam bir temel sunmaktadır. Divi 5, Gelişmiş Birimler adlı bir özellik sunarak daha da ileri götürür.

Divi 5'teki gelişmiş birimler, web sitelerini oluşturma şeklinizi geliştirmeye yardımcı olur. Calc () 'nin dinamik hesaplamalarından, CLAMP ()' nin sıvı ölçeklemesine, VW ve REM gibi bir dizi CSS birimine ve CSS değişkenlerinin esnekliğine. Bu yazıda, gelişmiş birimler, görsel oluşturucuda nasıl kullanılacağı ve neden her Divi kullanıcısı için gerekli olduklarını derinlemesine dalacağız. İster ince ayar düzenlemeleri olsun, ister cesur yeni tasarımlar hayal ederseniz, gelişmiş birimler tasarımınızın yanıt verebilirliği üzerinde daha fazla kontrol sağlar.

Hadi dalalım.

Divi 5'te gelişmiş birimler nelerdir?

Divi 5'teki gelişmiş birimler, tasarım öğelerini çok fonksiyonlu birim alanı ile kontrol etmenizi sağlar. CSS birimlerinin, işlevlerinin ve değişkenlerin tüm spektrumunu kabul eden tek, güçlü bir giriş alanıdır.

Fit-content, Unset, Calc (), Clamp () ve CSS değişkenlerine yeni destekle tüm CSS birimlerini destekleyen görsel oluşturucudaki küçük bir değişikliktir.

Gelişmiş birimler sizi statik değerlerin kısıtlamalarından kurtarır. Sabit piksel boyutlarını tahmin etmeniz veya şeyleri istediğiniz gibi uygun hale getirmek için kırılma noktaları olan güreşmek zorunda değilsiniz. Görsel inşaatçıdan ayrılmadan, sıvı tipografisi, uyarlanabilir aralık ve görünüm farkı duyarlı tasarımlarla zahmetsizce esnek ve ölçeklenen düzenler oluşturabilirsiniz. Bu sadece daha fazla seçenek değil; Daha akıllı, daha ölçeklenebilir yaratıcılıkla ilgili.

Divi 5'te gelişmiş birimleri keşfetmek

Divi 5'in Gelişmiş Birimler özelliği, her biri düzenleri şekillendirmenin benzersiz yollarına sahip çeşitli tasarım seçenekleri sunar. Kilit oyuncuları inceleyelim ve nasıl çalıştıklarını görelim.

Divi 5'te CSS birimleri

Gelişmiş birimler, piksellerin ve yüzdelerin çok ötesinde CSS birimlerinin tam bir paleti açar. Örneğin ViewPort Genişliği (VW) alın - bir bölümün genişliğini 80VW olarak ayarlayın ve her zaman Viewport genişliğinin% 80'ini (yatay olarak) alacak ve masaüstünden mobil cihazlara mükemmel bir şekilde ölçeklenecektir.

Kök EM (REM) Boyutları sitenin kök yazı tipi boyutuna bağlar - bir başlık için 4.5REM gibi tutarlı tipografi fikri.

Ayrıca, içeriğine göre bir öğeyi boyutlandıran Fit-Content'i de deneyebilirsiniz. Örneğin, bir başlığın genişliği için uygun içerik kullanmak mükemmel bir şekilde adapte olmasını sağlayabilir. Başlığı kompakt ve orantılı tutmak için genişlik alanına uyum içeriği ekleyerek, cilalı bir görünümü korurken aşırı boşluk veya taşmadan kaçınabilirsiniz.

Bu birimler ekran boyutlarına ve bağlamlarına uyum sağlar ve yerinde kilitlenmek yerine canlı hisseden düzenler verir.

Calc () dinamik bir hesap makinesidir

CACL () işlevi, divi içine yerleştirilmiş mini bir hesap makinesi gibidir. Dinamik sonuçlar için birimleri operasyonlarla karıştırmanıza olanak tanır. Klasik bir örnek, bir bölümün genişliğini% 100'e ayarlayan ve 50 piksel çıkaran Calc (% 100 - 50 piksel) . Elemanınız merkezi olarak hizalanırsa, her iki taraftan 25 piksel azalır.

Her iki tarafta mükemmel oluklar bırakmak için bir bölüm veya satırın genişliği ayarlamak gibi duyarlı aralık için calc () 'i kullanabilirsiniz. Calc () anında ayarlanır, görünüm portu değiştikçe tasarımınızın manuel ayar yapmadan dengeli kalmasını sağlar.

Clamp () sıvı kontrolü için

CLAMP () işlevi, ekran boyutlarında sorunsuz bir şekilde ayarlanan boyutları kontrol etmenize yardımcı olur. Üç değer kullanır: minimum boyut, tercih edilen boyut ve maksimum boyut. İyi bir örnek kelepçe (36px, 4vw, 48px) .

Bu, boyutun 36 pikselde başladığı, görünüm portu genişliğinin% 4'üne göre arttığı, ancak asla 48px'in üzerine çıkmadığı anlamına gelir. Hem küçük telefonlarda hem de büyük ekranlarda iyi görünen bir başlık modülü gibi metin için harika. Clamp (), tasarımınızın cihaz ne olursa olsun dengeli ve okunabilir kalmasını sağlar.

Küresel esneklik için CSS değişkenleri

CSS değişkenleri (veya özel özellikler), Divi'nin tema seçeneklerinde veya sayfa ayarları CSS alanında –Font-Boyut: 5EM gibi yeniden kullanılabilir değerleri tanımlamanıza izin verir. Divi 5'e CSS değişkenleri eklerken, bunları şu şekilde üst öğeye dahil ettiğinizden emin olun:

:root {
--font-size:5em;
}

Tanımlandıktan sonra, uygulamak için var (–font-boyut) bir başlığın metin boyutu alanına bırakabilirsiniz.

Tasarımınızı anında tutarlı ve düzenlenebilir tutan bir zaman kazandırıcıdır.

Birimsiz değerler

Divi 5'in gelişmiş birimleri ayrıca başlangıç, olmayan ve otomatik değerler içerir. Başlangıç ​​özelliği, bir CSS özelliğini CSS spesifikasyonu ile tanımlanan varsayılan değerine sıfırlar. Örneğin, Ayarlar Renk: Bir paragraftaki başlangıç, herhangi bir özel veya kalıtsal stili göz ardı ederek siyaha döndürür. Uns Set, bir mülkü doğal durumuna geri döndürür, ilave edilmemiş özellikler için başlangıç ​​gibi hareket eder veya uygulanabilir olduğunda kalıtsal değerlere geri döner. Bu arada, Auto , tarayıcının içeriğine uyacak şekilde bir bölümün yüksekliği gibi bağlama dayalı bir değere karar vermesine izin verir.

Divi 5'te gelişmiş birimler nasıl çalışır?

Divi 5'teki gelişmiş birimler doğrudan görsel oluşturucuya yeni bir kontrol seviyesi getirerek duyarlı, dinamik tasarımlar oluşturmayı kolaylaştırır. VW, Calc () veya Clamp () gibi herhangi bir CSS ünitesini, işlevini veya değişkenini anında yazabilir ve sonuçları görebilirsiniz. Divi'de gelişmiş birimlerin nasıl çalıştığı aşağıda açıklanmıştır.

Calc () ile duyarlı bölüm genişliği

Diyelim ki, görünümün yüksekliğinin% 80'ini kapsayan, ancak üst ve alttan bir miktar dolguyu kaldıran bir bölüm istiyorsunuz. Bölümün Tasarım sekmesine gidin, yükseklik alanını bulun ve alana hesap (80vh - 60px) ekleyin.

Bu hesaplama, bölümün görünüm portu ile akıcı bir şekilde ölçeklenmesini sağlar ve üst ve alttan 30 piksel çıkarırken görüntüleme yüksekliğinin% 80'ini korur.

Kelepçe ile sıvı tipografi ()

CLAMP (), ekran boyutuyla büyüyen ancak okunabilir kalan başlıklara ihtiyacınız varsa yararlı olabilir. Bir Başlık Modülünün Tasarım Sekmesinde, Başlık Metin Boyutunu Kelepçe (52px, 2vw, 36px) olarak ayarlayın.

Bu, metni 52 piksel olarak ayarlar, görünüm portu genişliğinin% 2'sine göre ölçeklendirir ve boyutu 36 piksel olarak kapatır - zahmetsizce duyarlı, dengeli tipografi sağlar.

Değişken güdümlü yazı tipi boyutları

Divi 5'in CSS değişkenleri, aralık, metin ve diğer alanlarda tekdüzelik elde etmenin harika bir yoludur. Değişkenleri bir kez ayarlayabilir ve ardından bunları sadece bir modül, sütun, satır veya bölüm birimi alanına ekleyerek tasarımlarınız boyunca tekrar tekrar kullanabilirsiniz. Örneğin, bunları manuel olarak ayarlamadan veya bunları tanımlamak için bir seçenek grubu ön ayarını kullanmadan tutarlı başlık boyutları istediğinizi varsayalım.

Gelişmiş> Özel CSS altında tema seçeneklerine veya sayfa ayarlarına aşağıdakileri ekleyebilirsiniz:

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

Oradan, herhangi bir başlık modülüne başlık metin boyutuna bir değişken ekleyin. Örneğin, Kahraman bölümümüzdeki bu başlık için sadece Var (–text-SIZE-H1) ekliyoruz. Divi bunu bir değişken olarak tanıyacak ve başınıza uygun stili atayacaktır.

Gelişmiş birimler için en iyi uygulamalar

Divi 5'teki gelişmiş birimlerden en iyi şekilde yararlanmak için, düşünceli bir yaklaşım zamandan tasarruf edebilir ve tasarımlarınızın parlamasını sağlayabilir. İşte size rehberlik edecek en iyi uygulamalar:

Basit Başla

CSS fonksiyonlarını ve değişkenlerini kullanmada yeniyseniz, piksel (PX) veya yüzdeler (%) gibi tanıdık birimlerle rahatlayın, ardından temel dinamik ayarlamalar için Calc () ile deney yapın. Örneğin, kelepçe () veya CSS değişkenlerine dalmadan önce bir bölüm genişliği için Calc'ı (% 100 - 40 piksel) deneyin. Bu, sizi erken ezmeden güven oluşturur.

Ortak stiller için değişkenlerden yararlanın

Site çapında tutarlılık için tema seçeneklerinde CSS değişkenlerini tanımlayın. Örneğin, ayar –Gutter: 30px, bu aralığı bölümler, satırlar ve modüller arasında yeniden kullanmanızı sağlar. CSS değişkenleri, tüm başlıklarınız için tek tip bir metin boyutu ayarlamak için de iyi olabilir. Bir düzenleme her şeyi günceller, tasarım sürecini hızlandırır ve tasarımınızı uyumlu tutar.

Test Duyarlılık

Divi'nin duyarlı görünüm sistemi, tasarımınızı birden fazla ekran boyutunda tasarlamanın harika bir yoludur. VW veya Clamp () gibi birimler uyguladıktan sonra, düzeninizin sorunsuz bir şekilde uyum sağlamasını sağlamak için masaüstü, tablet ve mobil görünüm arasında geçiş yapın. Kelepçeye (20px, 3VW, 40px) bir başlık seti bir masaüstünde mükemmel görünebilir, ancak daha küçük ekranlar için ayarlanması gerekebilir, bu yüzden emin olmak için test edin.

Çok karmaşık olma

Calc (Clamp (20px, 5VW, 50px) - 10px) gibi işlevleri yuva yapabilmenize rağmen, en azından öğrenirken basit formüllere yapışmalısınız. Aşırı karmaşıklık performansı yavaşlatabilir ve işler gerektiği gibi görünmediğinde sorun gidermeyi zorlaştırabilir. Hayatı kolaylaştırmak için temiz, amaçlı hesaplamalara sadık kalın.

Neden Gelişmiş Birimler Divi 5'i Yükseltiyor

Gelişmiş birimler tasarım sürecini düzene koymak için mükemmeldir. İşte bu yeni özellik ile birlikte gelen temel avantajlardan bazıları:

• Yaratıcı Özgürlük: Birimleri, işlevleri ve değişkenleri karıştırma, Divi'nin önceki sürümlerinde elde etmek için daha fazla zaman alan düzenlerin kilidini açar. Basit formüller, yükseklikleri, genişlikleri, yazı tipi boyutlarını ve daha fazlasını ayarlamanızı sağlar. Bu esneklik, görsel oluşturucu içinde daha iyi oluşmanızı ve daha hızlı yürütmenizi sağlar.
• Daha iyi duyarlı tasarımlar: Gelişmiş birimler divi'yi zahmetsizce adapte eden sıvı tasarımlarına doğru kaydırır. VW veya Clamp () kullanmak, sitenizin herhangi bir cihazda doğal hissetmesini sağlar, manuel geçersiz kılmalar ihtiyacını azaltır ve cilalı bir deneyim sunar.
• Geleceğe dayanıklı: Gelişmiş birimler, Divi 5'in bugünün web için görsel inşaatçıyı modernize etme misyonuyla uyumlu. CSS'nin tüm gücünü benimseyerek, Divi 5 sizi modern web siteleri oluşturmak için gerekli araçlarla donatır. Sadece ayak uydurmakla ilgili değil; Profesyonel geliştiricilerin kullandıklarını yansıtan araçlarla eğrinin önünde kalmakla ilgilidir.

En son Divi 5 Alpha'yı indirin

Gelişmiş birimler, Calc () 'nin hassasiyetinden CLAMP ()' nin akışkanlığına ve CSS değişkenlerinin etkinliğine kadar yakın zamanda Divi 5'e eklenen yararlı bir özelliktir, bu araçlar boşluk, boyutlandırma ve ölçeklenebilirliği her zamankinden daha sezgisel hale getirir. Divi'yi yıllardır kullanıyor olun, isterse keşfettiğinizde, duyarlı, dinamik web siteleri daha az çaba ile oluşturabilirsiniz.

Kendiniz görmeye hazır mısınız? Divi 5 alfa şimdi indirin ve gelişmiş birimlerle denemeye başlayın. ViewPort Aralığı için VW ve VH ile oynayın, tipografi için CLAMP () test edin veya nasıl oluşturduğunuzu yeniden düşünmek için değişkenler ayarlayın. Tasarımlarınızı daha da ileriye götürmek ve neyin mümkün olduğunu keşfetme şansı.