Mutlak ve göreceli CSS birimleri arasındaki fark

Doğru CSS birimlerini seçmek teknik bir ayrıntıdan daha fazlasıdır. Tasarımınızın tüm cihazlarda tutarlı, esnek ve duyarlı kalmasına yardımcı olan şey budur. Pikseller kolay seçenek gibi görünebilir, ancak farklı ekranlarda her zaman tahmin edilemez davranmazlar.

Bu yazıda, mutlak ve göreceli birimler arasındaki farkı açıklayacağız ve Divi 5'in bunları başlangıçtan itibaren daha etkili bir şekilde kullanmanıza nasıl yardımcı olduğunu göstereceğiz.

CSS birimleri açıkladı: Web siteniz için neden önemli?

CSS birimleri sitenizde her şeyin ne kadar büyük göründüğünü kontrol eder. Yanlış seçin ve tasarımınız farklı cihazlarda kırılır.

Çoğu insan piksel kullanır, çünkü basit ve anlaşılması kolaydır. Ancak pikseller doğal olarak duyarlı tasarıma iyi uyum sağlamaz. Ekran değişikliklerine yanıt vermek için medya sorguları veya CLAMP () gibi CSS işlevlerini gerektirirler.

Diğer birimler otomatik olarak uyum sağlar. Tarayıcı penceresi ile ViewPort Birimleri Ölçeği. EM boyutu gibi göreceli birimler çevredeki metne dayanır. Farklı birimler farklı sorunları çözer. İyi seçin ve tasarımınız ekstra iş olmadan cihazlara uyum sağlar.

Mutlak birimleri parçalayın: Sabit boyutlar en iyi şekilde çalıştığında

Mutlak birimler, etraflarında ne olursa olsun aynı boyutta tutar. 20 piksel genişliğe kadar bir şey ayarlarsanız, birisinin bir telefonda veya büyük bir masaüstü monitöründe görüntülediği 20 piksel kalır. Değer, ekran boyutuna, ana öğelere veya tarayıcı ayarlarına göre asla değişmez.

Pikseller (PX) bu alanı yönetir. Santimetre, milimetre ve inç gibi diğer mutlak birimler mevcuttur, ancak fiziksel ölçümlerin önemli olduğu baskı tasarımına aittir. Web tasarımı için, pikseller ihtiyacınız olan hemen hemen her mutlak ölçümü ele alır.

Pikseller neden küçük detaylar için harika çalışıyor?

Bazı tasarım öğelerinin kesin kontrole ihtiyacı vardır. 1 piksel sınır her yerde gevrek ve ince görünmelidir. Drop gölgelerinin doğru görünmesi için hassasiyete ihtiyacı var. Küçük simgeler cihazlarda tutarlı kaldıklarında daha iyi çalışır.

Pikseller bu küçük detaylar için mükemmel çalışıyor. Düğme sınırınız tam olarak 2 piksel kalınlığında olmalı, bu ince gölge tam olarak 4 piksel ofset olmalı ve navigasyon simgeniz mükemmel bir hizalama için tam olarak 24 piksel kare olmalıdır.

Bu ölçümlerin ekran boyutuyla ölçeklenmesi gerekmez. Masaüstünde 1 piksel olan bir sınır, mobil cihazlarda 1 piksel kalmalıdır. Mobil üzerinde 2 piksel yapmak kalın ve tıknaz görünecektir.

Diğer unsurlar da piksellerle iyi çalışır. Marka logoları genellikle marka tutarlılığı için piksel kullanır. Noktalar veya çizgiler gibi küçük dekoratif unsurların tam boyutlandırmaya ihtiyacı vardır. Yükleme iplikçileri ve ilerleme çubukları sabit boyutlarla daha iyi çalışır.

Pikselleri medya sorgularına duyarlı hale getirmek

Pikseller tamamen katı değildir. Medya sorguları, farklı piksel değerlerini çeşitli ekran boyutlarında değiştirmenizi sağlar. Başlığınız masaüstünde 32 piksel metin kullanabilir, ardından tabletlerde 28 piksel ve 24 telefonda atlayabilir.

Bu yaklaşım göreceli birimlerden daha fazla iş gerektirir. Kesme noktalarını tanımlamanız ve her ekran boyutu için ayrı kurallar yazmanız gerekir, ancak işlerin her boyutta nasıl göründüğü üzerinde toplam kontrole sahipsiniz.

Bu yaklaşım, her ekran boyutunda özel kontrol istediğinizde iyi çalışır. Metninizin tabletlere karşı telefonlara karşı belirli boyutlarda nasıl göründüğüne tam olarak karar verirsiniz. Sürpriz yok.

Ekstra CSS, hassas boyutlandırmaya ihtiyaç duyan unsurlar için buna değer. Logolar, her cihaz için tam olarak doğru boyutta kaldıklarında en iyi görünür. Navigasyon öğeleri genellikle doğru çalışmak için belirli boyutlara ihtiyaç duyar. Dekoratif sınırlar ve gölgeler net görünmek için kesin ölçümlere bağlıdır.

Göreceli birimleri anlamak: Web tasarımına esnek yaklaşım

Nispi birimler, aksine, etraflarında olanlara göre gerilir ve küçülür. Bu esneklik, web sitelerinin telefonlarda, tabletlerde ve bilgisayarlarda kırılmadan çalışmasını sağlar. Sabit kalan mutlak birimlerin aksine, göreli birimler ekran boyutuna, üst öğelere veya kullanıcı tercihlerine uyum sağlar.

Bu birimler piksellerin yarattığı sorunları çözer. 75 piksel çapında düğmeniz masaüstünde iyi çalışır, ancak mobil cihazlarda baskın hale gelir. Göreli birimler otomatik olarak ayarlanır ve sizi her ekran boyutu için ayrı stiller yazmanıza kaydeder.

EM birimleri birbirlerine nasıl dayanır?

EM birimleri, ana öğelerinin yazı tipi boyutuna göredir. Temel yazı tipi boyutunuz 16px ise ve yazı tipi boyutuna bir kap ayarlarsanız: 1.25em, bu 20 piksel olur. İçindeki 1.5EM olarak ayarlanan bir çocuk elemanı artık 24px değil, 30px (1.5 × 20px) olacak, çünkü kökü değil, ebeveyne dayanıyor.

Bu bileşik etkisi metin etrafındaki ölçeklenebilir aralık için güçlüdür. Ancak, EM tabanlı yazı tipi boyutlarına sahip yuvalama öğelerini tutarsanız, değerleriniz hızlı bir şekilde artabilir. EM üniteleri, yakındaki metne yakından bağlı dolgu, marj veya öğeler için en iyi şekilde çalışır. Düzeninizde tutarlı boyutlandırma için REM'i kullanmayı düşünün.

REM üniteleri işleri basit tutar

REM her zaman kök HTML öğesine bakar. 2REM'e bir şey ayarlayın ve sayfanızdaki her yerde aynı boyutta.

Çoğu tarayıcı kök için 16 piksel olarak varsayılan olarak. Yani 1Rem = 16px, 2Rem = 32px. Kök boyutunu değiştirin ve REM tabanlı her şey birlikte ölçeklendirin.

Viewport birimleri ekranınızı takip edin

Tarayıcı pencerenizle birlikte ViewPort birimleri ölçeklendirin. 50VW = ekran genişliğinin yarısı ve 100VH = tam ekran yüksekliği. Bu, ekranı dolduran kahraman bölümleri için harika.

Mobil tarayıcılar genellikle görünüm birimleri ile iyi oynamaz. Adres çubuğu, kaydırdığınızda gizlenir ve gösterir ve adres çubuğu göründüğünde 100VH bölümünüz kesilebilir.

VMIN ve Vmax ekranınızın genişliğini ve yüksekliğini karşılaştırın, ardından bir tane seçin. Vmin hangisini daha küçükse kullanır. Dik tutulan bir telefonda, genişlik daha küçüktür, bu nedenle 50vmin = genişliğin% 50'si. Manzara döndürün ve yükseklik küçülür, böylece 50vmin yüksekliğin% 50'sine geçer. Vmax tam tersini yapar: her zaman daha büyük boyutu seçer. Bu, daha büyük ölçümle ölçeklenmesi gereken unsurlar için kullanışlıdır.

Yüzdeler kaplara uyum

Yüzde bazlı genişlikler her zaman ana elemanın genişliği ile ilgilidir. Yükseklik yüzdeleri aynı şekilde ölçeklenebilir, ancak yalnızca ebeveynin tanımlanmış bir yüksekliği varsa; Aksi takdirde, beklendiği gibi çalışmayabilirler.

Dolgu ve marj yüzdeleri, üst ve alt değerler için bile her zaman ebeveynin genişliğinden hesaplanır. Bu, özellikle sıvı tasarımlarında tutarlı aralık ve orantılı düzenler oluşturmayı mümkün kılar.

Fark

Mutlak birimler sert bir cetvel gibidir, göreceli birimler ise daha çok bir ölçüm bandı gibi davranır. Her ikisi de şeyleri ölçer, ancak koşullar değiştiğinde çok farklı yanıt verirler. İşte bu şekilde karşılaştırıyorlar:

Çoğu geliştirici her ikisini de kullanır: esnek kalması gereken büyük yapısal parçalar için net kalması gereken küçük şeyler için piksel ve göreceli birimler.

Tasarımınız için doğru birimleri seçmek

Web sitenizin farklı bölümlerinin farklı yaklaşımlara ihtiyacı vardır. Bazı öğeler her yerde aynı boyutta kalırken, diğerleri ekran boyutuna veya kullanıcı ayarlarına göre uyum sağlar. Çoğu geliştirici bunu düşünür. Daha basit bir yol var: Üniteyi bu öğenin yapmasını istediğiniz şeyle eşleştirin.

Önce kullanıcılarınızı düşünün

İnsanlar sitenize beklenmedik şekillerde göz atıyor. Birisi telefonunu ziyaret ediyor. Metniniz küçük görünüyor, bu yüzden yakınlaştırmak için sıkıştırıyorlar. REM birimleri ile inşa ederseniz, her şey orantılı olarak birlikte büyür. Her yerde piksel kullandıysanız, işler örtüşmeye ve kırılmaya başlar.

Ana gezinme sayfalar arasında tutarlı boyutlandırmaya ihtiyaç duyar. REM üniteleri temel yazı tipi boyutunuza bağlar. Logonuzun marka tutarlılığı için kesin boyutlara ihtiyacı var. Pikseller gevrek tutar.

Birçok kullanıcı daha iyi okunabilirlik için tarayıcılarının varsayılan yazı tipi boyutunu değiştirir. Pikselleri sertleştirdiğinizde, tercihlerini görmezden gelirsiniz. Birisi%125'e yakınlaşırsa, piksel tabanlı düzeniniz parçalanır. Göreli birimler otomatik olarak uyum sağlar.

Doğru birimi seçmenin hızlı yolları

Detaylarda kaybolmadan seçimlerinizi nasıl bozacağınız aşağıda açıklanmıştır:

• Etrafında metin ve boşluk: EM veya REM kullanın. Metin boyutunda düğme dolgu ölçekleri. Marjlar başlıklarla orantılı kalır.
• Ekranla ilgili öğeler: ViewPort birimlerini kullanın. Çoğu ekranı dolduran kahraman bölümleri. Belirli ekran yüzdeleri alan kenar çubukları.
• Kesin Kontrole ihtiyaç duyan elemanlar: Piksel kullanın. Gevrek kalan ince sınırlar. Mükemmel hizalamaya sahip küçük simgeler. Gölgeleri hassas ofsetlerle bırakın.
• Konteyner tabanlı elemanlar: Yüzdeleri kullanın. Ebeveynlere uyum sağlayan esnek ızgaralar. Konteynerlerle ölçeklenen görüntüler.

Basit başlayın. Dekoratif bitler için pikseller, metin ve ilgili aralıklar için REM, ekran boyutlu bölümler için görünüm portu birimleri ve esnek kaplar için yüzdeler kullanın. İlgili öğeler için bir sistem seçin ve ona bağlı kalın.

Kaçınılması için ortak CSS birimi hataları

Her şey için piksel seçiyorsunuz çünkü kendilerini güvende hissediyorlar. Düğünüz dizüstü bilgisayarınızda 75 piksel genişliğinde mükemmel görünüyor. Ardından birisi sitenizi telefonuna açar ve aynı düğme ekranın yarısını yer. Logonuz tam boyutlara ihtiyaç duyar, ancak içerik alanlarınızın esnekliğe ihtiyacı vardır. Bu yaklaşımları rastgele karıştırın ve kaos yaratırsınız. İşte, standart CSS birimleri hatalarından kaçınmaya ilişkin bazı ipuçları:

1. Her şey için piksel seçmek

Pikseller güvende hissediyor çünkü 20 piksel 20 piksel anlamına geliyor. Basit, değil mi? 300 piksel genişliğinde kenar çubuğunuz masaüstünde iyi çalışıyor. Mobilde, içeriğinizi ince bir şeride ezen büyük bir blok haline gelir. 16 piksel metniniz yüksek yoğunluklu ekranlarda okunamaz hale gelir.

Birisi tarayıcının yazı tipi boyutunu artırdığında, piksel tabanlı düzeniniz uyum sağlamaz. Metin kapları taşır. Düğmeler diğer öğelerin arkasında kaybolur. Kenar çubuğunuz ana içeriğinize çarpar.

Gerçekten tam kontrol gerektiren şeyler için piksel tasarruf edin: ince sınırlar, küçük simgeler ve gölgeler bırakın. Diğer her şey için, göreli birimler kullanmaya çalışın.

2. Em birimleri kontrolden çıkmış

EM üniteleri, ebeveynlerinin yazı tipi boyutuna göre ölçeklendirilir. Yuvalamaya başlayana kadar bu esnek geliyor. Konteynerinizin 1.2EM kullandığını ve içerideki başlığınız 1.5EM kullanıyor. Bu başlık köküne göre 1.8em olur çünkü 1.2 × 1.5 = 1.8. Yuvalanmaya devam edin ve boyutlar kartopu yapabilir. Bir ana yazı tipi boyutunu değiştirin ve her şey aşağı akış değişir.

REM üniteleri bunu düzeltir. Her zaman kök öğesine atıfta bulunurlar, bu nedenle 2REM nerede kullanılırsa kullanılsın aynı şey anlamına gelir. Bu, tipografinizin ölçeklendirilmesini ve kontrol edilmesini kolaylaştırır.

3. Mobile'da atlayan görünüm birimleri

Kahraman bölümünüzü 100vh olarak ayarlayın ve ekranı mükemmel bir şekilde doldurur. Mobil tarayıcılar hariç, kaydırılırken adres çubuklarını gizler ve gösterin. IOS'ta Safari ve Android'de Chrome bunu yapıyor. Adres çubuğu kaybolduğunda, 100VH bölümünüz aniden çok uzun hale gelir. Yeniden göründüğünde, içeriğiniz kesilir.

Daha yeni DVH ünitesi, değişen görünüm boyutuna uyum sağlar. Tarayıcı desteği hala yetişiyor. Bir geri dönüş olarak, CSS Custom Properties kullanan bir JavaScript çözümü çalışır.

Sabit boyutlarla erişilebilirliği kırmak

Kullanıcılar genellikle okunabilirliği artırmak için tarayıcılarının varsayılan yazı tipi boyutunu ayarlar. Sabit pikseller kullanarak metin, düğmeler ve aralıkları sabit kodladığınızda, düzeniniz kırılabilir - metin taşabilir, düğmeler kullanılamaz hale gelebilir ve kritik öğeler daha yüksek zoom seviyelerinde kaybolabilir.

WCAG ve Apple'ın standartları gibi erişilebilirlik yönergelerine göre dokunmatik hedeflerin en az 44 × 44 CSS piksel olması önerilir. Motor bozukluğu olan kullanıcıların doğru bir şekilde dokunması için daha küçük hedefler zor olabilir.

Sabit boyutları kilitlemek yerine, kullanıcı tercihlerine saygı duyan düzenler oluşturmak için REM gibi ölçeklenebilir birimler kullanın. Temel yazı tipi boyutunuzu öğeye ayarlayın, ardından sitenizdeki göreli birimlerle tutarlı bir şekilde başlıkları, düğmeleri ve aralıkları ölçeklendirin.

5. Yüksek yoğunluklu ekranlarda küçük metin

Farklı cihazlar pikselleri farklı şekilde paketler. Telefonunuzun ekranının inç başına 400 piksel olabilirken, monitörünüz 100'tür. Aynı piksel sayısı her cihazda tamamen farklı görünür.

14 piksel metniniz bir masaüstü monitörde iyi görünüyor. Yüksek yoğunluklu bir telefon ekranında, aynı 14 piksel mikroskobik hale gelir. Kullanıcılar yakınlaştırmak için kısır ve sıkıştırır.

İşletim sistemleri ve tarayıcılar, göreli birimler kullandığınızda ölçeklendirmeyi otomatik olarak kullanır. 1REM metniniz yüksek yoğunluklu ekranlarda büyür ve düşük yoğunluklu ekranlarda daha küçük metinler.

6. Birimleri plansız karıştırma

Bazı başlıklar için REM, diğerleri için EM ve vücut metni için piksel kullanırsınız. Tasarımınız ritimden yoksundur çünkü farklı unsurlar farklı oranlarda ölçeklenir. İlgili öğeler için bir sistem seçin. Başlıklarınız REM kullanıyorsa, tüm başlıklarınız REM kullanmalıdır. Boşluğunuz EM'yi kullanıyorsa, ilgili boşluk için EM'yi kullanmaya devam edin.

Seçimlerinizi cihazlar ve kullanıcı ayarları arasında test edin. Birisi yazı tipi boyutlarını arttırdığında tasarımınızın nasıl göründüğünü kontrol edin. Birkaç dakikalık test, saatlerce hata düzeltmelerini daha sonra tasarruf eder.

Divi 5'in gelişmiş birimleri CSS yönetimini nasıl basitleştirir?

CSS birimleri ile güreş hızla yaşlanır. Değerleri ayarlamak, farklı cihazlarda test etmek ve kırık düzenleri düzeltmek için saatler harcıyorsunuz. Divi 5 bunu tamamen değiştirir. Yeni sistem, birim seçiminden tahmini çıkarır ve koda dokunmadan duyarlı davranışlar üzerinde görsel kontrol sağlar. Ama önce Divi'nin ne olduğunu anlayalım.

Divi nedir?

Divi, WordPress'i sitelerinin iyi görünmesini isteyen insanlar için gerçekten anlamlı bir şeye dönüştüren bir web sitesi oluşturucudur.

200'den fazla modülden herhangi birini sayfanızın etrafına sürükleyin. Metni tam olarak oturduğu yerde değiştirin. Yeni renkleri seçin ve hemen görünmesini izleyin. Gerçek bir şey üzerinde çalışıyorsunuz, size yatan bazı önizleme modu değil.

Tema, emmeyen 2000+ mizanpaj içerir. Restoranlar, fotoğrafçılar, danışmanlar ve düzinelerce başka işletme için gerçek tasarımlar. Beğendiğiniz birini bulun ve doğru hissedene kadar ince ayarlayın.

Tema oluşturucu her şeyi kontrol etmenizi sağlar. Genel görünmeyen, göze çarpan blog sayfaları oluşturmayan ve 404 sayfanızı insanların gerçekten görmek isteyebileceği bir şeye dönüştüren başlıklar oluşturun.

AI kullanarak web siteleri oluşturun

Divi AI, tasarım alanınızın hemen içinde çalışır. Metne mi ihtiyacınız var? Yazıyor.

Görüntü ister misin? Onları yapar. Fotoğraf düzenlemelerini bile tanımlayabilirsiniz ve işi işler.

Aynı şekilde, kod ve yeni bölümler için.

Divi Hızlı Siteler, nereden başlayacağınıza dair hiçbir fikri olmayan boş bir sayfaya baktığınızda bu korkunç anı çözer. Başlangıç sitelerinden seçin, ekibimiz orijinal görüntüler ve sanat eserleri ile tamamlayın.

Veya işletmenizi Divi Quick Sites + Divi AI olarak tanımlayın ve sıfırdan bir şeyler inşa etmesine izin verin.

Bu AI tarafından oluşturulmuş sitelerde, söylediklerinizle eşleşen gerçek manşetler, kopya ve görüntüler olacaktır. AI ile her şeyi oluşturun, Flash'tan fotoğraf çekin veya kendi çekimleriniz için yer tutuculara bırakın. Önce yazı tiplerinizi ve renklerinizi ayarlayın, ardından AI'nın etrafında çalışmasına izin verin. Daha sonra her şeyi düzenleyebilirsiniz.

Divi 5'te Yenilikler

Divi 5 her şeyi sıfırdan yeniden inşa eder. Eski kısa kod sistemini hurdaya çıkardık ve bugünün web standartlarıyla daha iyi çalışan bir şey oluşturduk. Siteler daha hızlı yüklenir, editör daha hızlı yanıt verir ve daha önce imkansız araçlara erişebilirsiniz.

Ama yeni olan ne? Bir göz atın:

Flexbox Düzen Sistemi

Divi'de modern, duyarlı web siteleri oluşturmak artık daha hızlı ve daha sezgisel. Divi 5'e tam bir FlexBox düzen sistemi tanıttık, size dikey hizalama, içerik sarma ve aralık için basit kontroller sağlıyor. Kodla savaşmadan veya karmaşık geçici çözümler kullanmadan istediğiniz düzenleri oluşturun.

Seçenek Grup Ön Ayarları

Seçenek Grup Ön Setleri, herhangi bir yerde karıştırabileceğiniz ve eşleştirebileceğiniz stilleri kaydetmenizi sağlar. Bir kez bir gölge stili yapın, ardından düğmelerde, kartlarda, bölümlerde, ihtiyaç duyduğu her şey kullanın. Ön ayarı güncelleyin ve her şey tüm sitenizde anında değişir.

Tasarım Değişkenleri

Marka renkleri, yazı tipleri ve boşlukların hepsi şimdi tek bir noktada yaşıyor. Bir değişkeni düzenleyerek maviden yeşile geçebilirsiniz. Siteniz otomatik olarak güncellenir, böylece düzinelerce modül avlamak zorunda kalmazsınız.

Gelişmiş Birimler

Şimdi, Divi 5: PX'ten VW/VH'ye kadar tüm gelişmiş CSS birimlerini kullanabilirsiniz. CSS fonksiyonları da şimdi üreticide çalışıyor. Ekran yüksekliğinin% 80'i eksi başlığınızı ister misiniz? Calc (80VH - 100 piksel) yazın ve hazırsınız. Arayüz, CLAMP (), min (), maks (): tüm bu duyarlı hileleri işler.

İç içe satırlar

Satırlar, ihtiyacınız olduğu kadar derin, şimdi diğer satırların içine giriyor. Yapıyla savaşmadan karmaşık dergi düzenleri veya ayrıntılı ürün sayfaları oluşturun. Her seviye size aralık ve cihaz davranışı üzerinde tam kontrol sağlar.

Tek tıklayın Düzenleme

Düzenlemeye başlamak için sayfanızda herhangi bir yere işaret edin ve tıklayın. Küçük düzenleme düğmeleri arama veya birden fazla menüde gezinme günleri arkamızda.

Özelleştirilebilir kesme noktaları

Divi 5'in özelleştirilebilir kesme noktaları üçle sıkışıp kalmak yerine, yedi farklı ekran boyutunu etkinleştirmenizi sağlar. Her kesme noktasını, büyük monitörler için 1200 piksel, tabletler için 900px veya telefonlar için 650px olsun, tasarımınızın ihtiyaç duyduğu yere tam olarak ayarlayın.

Çok panelli çalışma alanı

İstediğiniz gibi çalışma alanı panellerinizi düzenleyin. Farklı arayüz alanları arasında sürekli atlamak yerine birden fazla ayar panelini aynı anda açık tutun.

Nitelik Yönetimi

Sitenizin farklı bölümleri arasındaki belirli öğeleri cerrahi hassasiyetle kopyalayın. Sadece bir öğeden, sadece diğerinden renkleri veya sadece üçte bir ön ayarları alın. Artık ya da hiç aktaran transfer yok.

Tuval ölçeklendirme

Sitenizin farklı cihazlarda nasıl göründüğünü önizlemek için çalışma alanı boyutunuzu ayarlayın. Önizleme modlarına geçmeden mobil, tablet ve masaüstü görünümlerine bakın.

Performans Geliştirmeleri

Artık her şey daha snappier geliyor. Sayfalar daha hızlı yüklenir, inşaatçı daha hızlı yanıt verir ve karmaşık düzenler arabirimi eskisi gibi batırmaz.

Modül grupları

Birden fazla modülü bir kapa paketleyin. Metin bloklarını, görüntüleri ve düğmeleri tek bir birim olarak tedavi edin. Onları bir araya getirin, bir araya getirin ve her şeyi diğer sayfalara kopyalayın.

HSL renk sistemi

Ton, doygunluk ve hafiflik kontrolleri ile renk şemaları oluşturun. Profesyonel görünen marka rengi varyasyonları oluşturun. Matematik, hoş kombinasyonlar otomatik olarak oluşturur.

Daha fazlası yolda…

• Döngü Oluşturucu: Blog ızgaraları veya ürün listeleri gibi içeriği tekrarlamak için şablonlar oluşturun. Bir kez tasarlayın, sistemin gerçek içeriğinizle doldurmasına izin verin.
• WooCommerce Modülleri: Ürün Izgaraları, Bireysel Ürün Sayfaları ve CART işlevselliği için mağazaya özgü modüller. Çevrimiçi mağazaların ihtiyaç duyduğu her şey, özellikle satış için oluşturulur.

Divi 5'te CSS değişkenlerini kullanma

Birden fazla öğede tutarlı değerlere ihtiyacınız olduğunda web sitesi şekillendirme sıkıcı hale gelir. CSS değişkenleri, yeniden kullanılabilir değerleri tek bir yere saklayarak çözer. Divi 5, hem geleneksel CSS değişkenlerini hem de kendi tasarım değişkenlerini destekler ve sitenizin görünümünü nasıl yönettiğiniz konusunda esneklik sağlar.

Divi 5, herhangi bir CSS ünitesini doğrudan giriş alanlarında kabul eder. Daha önce yalnızca piksel kullanabileceğiniz REM, VW veya yüzde değerleri yazın. İnşaatçı bu birimleri ek kurulum olmadan derhal işler.

CSS işlevleri aynı şekilde çalışır. Duyarlı genişlikler için sıvı tipografisi için kelepçe (1REM, 4VW, 3REM) veya min (500 piksel,%90) girin. Visual Builder, bu hesaplamaları tasarlarken gerçek zamanlı olarak işler.

Değişkenler bu sistemle sorunsuz bir şekilde entegre olur. –Header-Height: 80px gibi bir CSS değişkeni tanımlayın, ardından herhangi bir alanda var (–header-height) kullanarak referans verin. Divi sözdizimini tanır ve depolanan değerinizi otomatik olarak uygular.

Bu doğrudan entegrasyon, aynı proje içindeki geleneksel birimleri, modern CSS işlevlerini ve değişkenleri karıştırabileceğiniz anlamına gelir. Sınırlar için pikseller, bölümler için görünüm birimleri ve tekrarlanan ölçümler için değişkenler kullanın.

Tasarım Değişkenleri: Gelişmiş birimleri uygulamanın daha iyi bir yolu

Tasarım değişkenleri Divi 5'in CSS değişkenlerine yerleşik alternatifidir. Herhangi bir kod bilgisi gerektirmeden tamamen görsel arayüz boyunca çalışırlar. Bu değişkenleri Divi'nin değişken yöneticisi panelini kullanarak oluşturur ve yönetirsiniz.

Bu değişkenler basit sayıların ve renklerin ötesine uzanır. Tam görüntü URL'lerini, metin içeriğini veya karmaşık stil değerlerini saklayın. Bir tasarım değişkenini güncellediğinizde, onu kullanan her öğe tüm web sitenizde anında değişir.

Divi 5, farklı içerik ihtiyaçlarını karşılamak için çeşitli değişken türler sunar:

• Renk değişkenleri altıgen kodları, gradyanları, marka renklerini, metin renklerini, arka planları ve sınırları saklar.
• Yazı tipi değişkenleri tipografiyi küresel olarak tema özelleştirici sınırlamalarının ötesinde yönetir ve herhangi bir metin alanı için çalışır.
• Sayı değişkenleri , aralık, boyutlandırma ve animasyon için CLAMP (), Calc (), Min () ve Max () gibi CSS birim artı CSS fonksiyonlarını kabul eder.
• Görüntü değişkenleri logolar, arka planlar ve desenler gibi yeniden kullanılabilir görüntüleri saklar.
• Metin değişkenleri, iletişim bilgileri, sloganlar ve iş detayları gibi yeniden kullanılabilir metin dizelerini depolar.
• URL değişkenleri sosyal medya, bağlı kuruluşlar, tanıtımlar ve tel/posta bağlantıları için yeniden kullanılabilir bağlantıları depolar.

Sayı tasarım değişkenleriyle CSS birimlerinin ayarlanması

Sayı değişkenleri size tutarlı kalan tasarımlar için yapı taşları verir. Aynı ölçümü farklı öğeler arasında tekrarladığınızda en iyi şekilde çalışırlar. Ayrıca, CSS kodu ile güreşten çok daha basittirler.

Divi arayüzünüzdeki değişken yöneticiyi bulun. Yeni bir sayı değişkeni oluşturun ve tasarımınıza uyan bir değer verin. Belirsiz etiketler yerine “Düğme Padding” veya “Bölüm Boşluğu” gibi net isimler kullanın.

Değişken Kütüphanenizi Oluşturma

Ortak değişkenler ekleyebilirsiniz, örneğin:

• 3REM-Düğmeler Ölçeğinde “Düğme Yüksekliği” metin boyutunda
• 8VH'de “Bölüm Padding”-Aralık yüksekliğine uyum sağlar
• "Border-Radius" 0.5REM-Yuvarlak Köşeler Orantılı
• 75VH'de “Kahraman yüksekliği”-kahraman bölümleri çoğu ekranı dolduruyor
• 1 pikselde "ince sınır"-gevrek çizgiler keskin kalır
• Kelepçede “Sıvı Text” (1REM, 2.5VW, 2REM)-Metin sorunsuz bir şekilde ölçeklenir
• Min (%90, 1200 piksel) “İçerik genişliği”-Konteynerler okunabilir kalır
• Calc (2REM + 2VW) 'de “Dinamik Boşluk”-Aralık, ekran boyutu ile büyür

Bunları modülünüze, bölümünüze veya satır ayarlarınıza uygulayın.

REM değişkenleriniz metin boyutuna göre ölçeklenir. VH birimleri daha küçük ekranlara uyum sağlar. CLAMP () ile değişkenler minimum ve maksimum değerleriniz arasında otomatik olarak ayarlayın.

Bağlantılı ön ayarları bina

Elemanınızı değişkenlerle şekillendirdikten sonra, boşluğu bir seçenek grubu ön ayar olarak kaydedin. Bu ön ayar şimdi sayı değişkenlerinize referanslar tutar.

Bu ön ayarları diğer modüllere uyguladığınızda, aynı değişken tabanlı aralığı devralırlar. Değişken Yöneticide 2REM'den 3REM'e “Kart Padding” i ve bu önceden ayarlanmış güncelleme otomatik olarak güncellenir.

Ön ayar aynı kalır, ancak değerler değişir. Bu, tüm tasarım değişkenleri için çalışır: renkler, yazı tipleri, görüntüler, metin ve URL'ler. Ön ayarlarınız statik yerine dinamik hale gelir ve site çapında güncellemeleri tek bir değişiklikle mümkün kılar.

CSS birimleri ve divi 5 ile daha iyi web siteleri oluşturun

CSS birimlerinin doğru olması web sitelerini oluşturma şeklinizi değiştirir. Daha az kırık mizanpajı düzeltecek ve cihazlarda çalışan tasarımlar oluşturacaksınız. Pikseller kesin ayrıntıları tırnak. Göreli birimler farklı ekranlara ve kullanıcı tercihlerine uyum sağlar.

Divi 5, gelişmiş CSS birimleri ile binayı bir esinti yapar. Herhangi bir birimi oluşturucuya yazın ve sonuçları anında görün. Tasarım Değişkenleri Sitenizde ölçümleri tutarlı tutar. Bir değeri değiştirin ve bağlı her şey otomatik olarak güncellenir.

Web siteleriniz Breakpoint savaşlarından ve sonsuz düzen düzeltmelerinden daha iyisini hak ediyor. Divi 5'i deneyin ve CSS birimlerinin sinir bozucu tasarım oturumlarını pürüzsüz iş akışlarına dönüştürmesini izleyin.