Divi 5 ile boşluk tabanlı bir boşluk sistemi oluşturmak

Tutarlı boşluk, cilalı, profesyonel bir web sitesinin temelidir. Bireysel öğelerde marjları tek tek yönetmek yerine, düzenleri sitenizde temiz ve dengeli tutan tek bir sisteme güvenebilirsiniz.

Divi 5'in yeni tasarım değişkenleri ve Flexbox özellikleri ile artık doğrudan görsel oluşturucuda boşluk tabanlı bir aralık sistemi oluşturabilirsiniz, özel kodlama gerekmez. Bir bakalım!

Geleneksel boşluk yöntemleri neden yetersiz kalıyor?

Kenar boşlukları ve dolgu yeterince basit görünüyor. Buraya biraz yer ekleyin, dolguyu orada ayarlayın. Ancak bu yaklaşım kolayca dağınık olabilir. Uygulamada böyle oynuyor:

Bir metin bloğunda 30 piksel bir marj ayarladınız. Sonra bir düğmenin etrafında alana ihtiyacınız var, böylece 20 piksel ekliyorsunuz.

Başka bir modülün nefes odasına ihtiyacı var, böylece 40 piksel seçiyorsunuz. Her karar şu anda hissediyor, ancak bir kart evi inşa ediyorsunuz.

Mobil cihazlara geçin ve her şey dengelenebilir. Dikkatle seçilen piksel değerleri tercüme etmez. Boşluğunuz masaüstünde mükemmel görünüyor, ancak daha küçük ekran boyutlarında dengesiz. Böylece mobil cihazlara özgü değerler, sonra tablet değerleri oluşturursunuz.

Şimdi üç farklı aralık sistemini yönetiyorsunuz. Bu bölünmüş yaklaşım, sitenizde tutarlı bir görsel ritmi korumayı zorlaştırır.

Boşluk özellikleri boşluğu nasıl basitleştirir

Boşluk özellikleri geleneksel marjlardan farklı çalışır. Her bir öğeye ayrı ayrı boşluk uygulamazsınız. Bunun yerine, ana konteynere boşluk kuralları belirlediniz. Konteyner, tüm çocuk elemanları arasındaki boşluğu otomatik olarak kullanır.

FlexBox etkinken, iki boşluk kontrolü alırsınız: yatay ve dikey. Yatay boşluğu 24 piksel olarak ayarlayın ve tüm çocuk elemanları aralarında yatay olarak 24 piksel boşluk alır. Dikey boşluğu 15 piksel olarak ayarlayın ve istiflenmiş elemanlar 15 piksel dikey boşluk alır.

Bu, FlexBox kabının içindeki herhangi bir içerik için çalışır. Metin modülleri, görüntüler, düğmeler, bölücüler ve oraya koyduğunuz her şey aynı tutarlı aralığı alır. Bireysel modülleri kazmanız ve kenar boşluklarını ayrı ayrı ayarlamanız gerekmez; Boşluk özellikleri boşluk matematiğini ele alır.

Geleneksel yöntem rastgele boşluk seçenekleri yapar: burada 10 piksel, 20 piksel, 40px başka bir yerde. Bu dağınık değerler tutarsızlıklara neden olur ve hangi aralığın geçerli olduğunu bilmeyi zorlaştırır. Boşluk özellikleri, tüm öğeler için tutarlı bir kural kullanarak tahminleri kaldırır.

Bu yaklaşımın hala sınırlamaları vardır. Hala kullandığınız her değeri hatırlamanız ve ihtiyacınız olan her yerde manuel olarak uygulamanız gerekir. Hangi değerlerin nerede çalıştığını tahmin etmelisiniz. Bu değerleri ayarladıktan sonra, zihninizi değiştirmek her birini bulmak ve manuel olarak değiştirmek, hatalar ve tutarsızlıklar için yer bırakmak anlamına gelir.

Flexbox ve tasarım değişkenlerine sahip boşluk tabanlı bir boşluk sistemi çok daha iyi bir yaklaşımdır.

Divi 5'te boşluk sistemi nasıl kurulur

Boşluk tabanlı bir boşluk sistemi oluşturmak karmaşık geliyor, ancak Divi 5 şaşırtıcı derecede basit hale getiriyor. Herhangi bir kodlama bilgisine veya harici çerçeveye ihtiyacınız yoktur. Visual Builder, tasarım değişkenleri ve Flexbox kontrolleri aracılığıyla her şeyi işler. Aralık değişkenlerinizi oluşturmaktan yeniden kullanılabilir ön ayarları kaydetmeye kadar her adımda size yol göstereceğiz.

1. Boşluk değişkenleri oluşturun

Divi 5, tasarım değişkenlerini kullanarak görsel oluşturucunun içinde boşluk değerlerini saklayabilir. Boşluk sisteminizi bir kez oluşturursunuz ve bu değerleri her yere uyguluyorsunuz Flexbox kontrollerinin göründüğü, özel CSS işlevine gerek yoktur.

Değişken yönetici, görsel oluşturucunuzun sol kenar çubuğunda bulunabilir. Bu simgeyi tıklayın, ardından aralık değişkenlerinin eklenebileceği numaralar sekmesini açın.

Burada, sabit kodlu pikseller yerine site genelinde kullanılabilecek değerler oluşturacaksınız. Birkaç tasarım değişkeni mevcuttur; Bu yazıdakileri ele almayacağız, ancak mükemmel bir rehberimiz var.

Temel boşluk ünitenizle başlayın. Çoğu tasarımcı temelleri olarak 8-12 piksel ile çalışır, ancak 4 piksel, 10px veya tasarım ritminize uyan her şeyi seçebilirsiniz. Sadece pikseller dışında gelişmiş birimleri burada kullanabilirsiniz. Örneğin, piksel yerine REM ile başlıyoruz (tarayıcının varsayılan 1REM = 16px):

• GAP XS: 0.75REM (Yalnızca simge ve metni olan sütunlar için sıkı ilişkiler için ~ 12 piksel)
• Boşluk S: 1.25Rem (metin blokları olan sütunlar için ~ 20px)
• Boşluk M: 2REM (özellik kutuları için ~ 32px, servis sütunları)
• Gap L: 3REM (ana içerik bölümleri için ~ 48px, kenar çubuğu düzenleri)

Bu etiketler sabit değildir; Siz ve ekibiniz bunları gerektiği gibi yeniden adlandırabilirsiniz. Ayrıca daha fazla boşluk değişkeni de ekleyebilirsiniz. REM üniteleri tarayıcı yazı tipi ayarları ile ölçeklenir, böylece metin boyutunu artıran ziyaretçiler orantılı aralık alır. Bu erişilebilirliği artırır.

Ölçeklenebilir boşluklar yapmak için kelepçeler kullanın

Ayrıca CLAMP () kullanabiliriz. Kısaca açıklayacağız. Ancak önce, sayı değişkenlerine de aşağıdakileri eklemeyi düşünün:

• Yatay sütun boşluğu: kelepçe (16px, 2vw, 32px) (kartlar, özellikler vb. Arasındaki yatay boşluklar için)
• Dikey sütun boşluğu: Kelepçe (16px, 1.5vw, 32px) (kartlar, özellikler vb. Arasındaki dikey boşluklar için)

CLAMP () kullanmak için güvenli bir CSS ünitesidir. Üç değer verirsiniz: min, tercih edilen ve maks. Tarayıcı tercih edilen değeri dener, ancak çok küçükse, min'i kullanır ve çok büyükse maks.

Örneğin, yatay sütun boşluğu: kelepçe (16px, 2vw, 32px). Boşluk ekran genişliğine sahip ölçeklenir (2VW = Viewport'un% 2'si). Küçük ekranlarda 16px'in altına veya büyük ekranlarda 32px'in üzerine çıkmaz. Bu, kesme noktaları veya medya sorguları olmadan boşluğu dengede tutar.

Herhangi bir değeri kullanabilirsiniz. Bu yöntemi seçtik çünkü bakımı kolay, değişime uyum sağlıyor ve daha tutarlı sonuçlar üretiyor.

2. Bölümlerinizde FlexBox Düzenini Etkinleştirin

Yeni bölümler varsayılan olarak FlexBox kullanır. Daha eski siteler için, Ayarlar simgesini tıklayarak, tasarım sekmesini açarak, Düzen sekmesinin altındaki düzen stilini seçerek ve “Flex” seçerek bir bölümü dönüştürün. Sıralarınız ve sütunlarınız için de aynısını yapın.

Flex'i etkinleştirdikten sonra, hizalama ve dağıtım için içeriği haklı çıkarmak gibi seçenekler alırsınız. Öğe kontrollerini hizalayın, boşluk yatay olarak tükendiğinde öğelerin nasıl davrandığını ayarlamanıza izin verir.

Burada, arka arkaya sütunlar veya modüller arasındaki boşluğu ayarlamak için ayrı yatay ve dikey kaydırıcılara sahip boşluk kontrollerini tespit edebilirsiniz.

3. Değişkenlerinizi kullanarak boşluk değerlerini uygulayın

Boşluk değişkenlerinizi Divi'nin değişken yöneticisinde ayarladıktan sonra, bunları Flexbox GAP ayarlarına uygulamak dinamik içerik sistemi aracılığıyla basit hale gelir. Düzenleme ayarlarınıza gidin ve dinamik içerik simgesini ortaya çıkarmak için yatay veya dikey boşluk alanlarındaki etiketlerin üzerine gelin.

Değişken seçim iletişim kutusunu açmak için Dinamik İçerik simgesini tıklayın. Kaydedilen boşluk değişkenleriniz bu menüde görünür.

Fark etmiş olabileceğiniz gibi, kullanıldıkları bağlama göre iki boşluk seti ekledik. Nedenini anlamak için daha derin bir dalış yapalım:

Kelepçe boşlukları: esnek sütunlar arasında

Kelepçe boşluklarınız Divi'nin Flexbox ayarları aracılığıyla “kap” düzeyinde çalışır.

Bir satırda üç servis kartı gibi, yan yana düzenlenmiş sütunlarınız olduğunda yatay sütun boşluğu [kelepçe (16px, 2vw, 32px)] uygulayın. Seçildikten sonra, Divi otomatik olarak boşluk ayarına uygular. Alan, bağlantıyı onaylayarak değişken adınızı görüntüler. Bu, düzen yönü satır olarak ayarlandığında, sütun 1, sütun 2 ve sütun 3 arasında orantılı yatay aralık oluşturur.

Düzenli kolon boşluğu [kelepçe (16px, 1.5vw, 32px)] uygulayın, düzen yönünüz sütuna ayarlandığında, öğeleri dikey olarak istifleyin. Bu, düzen yönü bir sütun olarak ayarlandığında öğeleri yukarıdan aşağıya orantılı olarak uzatır.

Satır yönü olan sütunlar, satır başına üç sütunda düzenlenmiş altı kart gibi birden fazla satıra sarıldığında, her iki boşluğu da uygulayın. Yatay bir boşluk, her satırın içindeki eşyaları yerleştirirken, dikey bir boşluk sıraları kendileri uzatır.

Temel boşluklar: satırlar içindeki içerik

Temel boşluklarınız her sütunun içindeki içerik parçaları arasındaki ilişkileri kontrol eder. Bir başlığı bir paragraf ve aynı sütundaki bir düğme takip ettiğinde, aralarında XS (0.75REM) boşluk uygulamasını düşünün.

İki sütun arasında, özellikle de sütunun düzen yönü bir satıra ayarlanmışsa, birden fazla metin öğesi veya GAP L (3REM) içerik grupları için GAP S (1.25REM) kullanmayı düşünün.

Tasarım değişkenleri avantajı

Tasarım değişkenlerinin değerleri manuel olarak yazma konusunda çeşitli faydaları vardır. Etiketler bağlamsal olabileceğinden, piksel veya REM değerlerini ezberlemeden aralıkları tutarlı tutarlar.

Boşluk felsefesini değiştirdiğinizde, sitede kullanılan her boşluğu güncellemek için değişken yöneticideki bir değişkeni güncelleyin.

Bu görsel yöntem, ekip üyeleri farklı değerlere girdiğinde aralık hatalarını da önler. Boşluk değişkenleri, düzenleri belirlediğiniz tasarım standartlarıyla uyumlu tutarak aralık için ortak bir dil oluşturur. Bu, özellikle birçok katkıda bulunan büyük projelerde veya müşteriler sayfaları düzenlediğinde veya eklediklerinde müşteri devreddikten sonra yararlıdır.

4. Duyarlı boşluklar ayarlayın

Cep telefonları sınırlı yatay alana sahiptir. Üç sütunlu servis düzeniniz masaüstünde harika görünüyor, ancak 360 piksel bir telefon ekranında okumak için sıkışık ve sertleşiyor.

Divi 5 size çalışmanız gereken yedi özelleştirilebilir kesme noktası verir: telefon, telefon genişliğinde, tablet, tablet geniş, masaüstü, geniş ekran ve ultra genişliğinde. Her kırılma noktası bağımsız olarak çalışır. Düzen yönünü değiştirebilir, boşluk değişkenlerini değiştirebilir veya masaüstünü bozmadan mobil cihazlarda hizalamayı ayarlayabilirsiniz. Bu, düzeninizin değişmesi gereken tam ekran genişliklerini hedeflemenizi sağlar.

Telefon kesme noktanıza geçin ve düzen yönünü “satır” dan “sütuna” değiştirin. Yatay boşluk seçeneğini temizleyin.

Kelepçeye dayalı dikey boşluk büzülür ve görünüm portu genişliği değiştikçe otomatik olarak büyür. Küçük bir telefon ekranında, 2VW yaklaşık 7px'e eşittir, ancak kelepçe minimum 16px'i geçmez. Daha büyük bir ekranda, 2VW 18px ve daha büyük bir ekranda 20 piksel anlamına gelebilir.

Ekran boyutu değiştikçe boşluk bu sınırlar arasında sorunsuz bir şekilde büyür. Farklı değerleri manuel olarak ayarlamadan, masaüstünde mobil ve cömert aralıklarda sıkı boşluk elde edersiniz.

Temel boşluklar, kırılma noktası başına manuel ayarlamalara ihtiyaç duyabilir. Boşluk M, mobil cihazlarda çok sıkı hissedebilir. Mobil kesme noktanıza geçin ve dikey boşluk seçeneği yerine Gap L uygulayın.

Ayrıca “Gap Mobile S” veya “Gap Mobile L” gibi mobil cihazlara özgü değişkenler de oluşturabilir ve bunları telefon ve tablet kesme noktalarına uygulayabilirsiniz. Bununla birlikte, temel taban ve kelepçe boşlukları çoğu durumda iyi çalışır.

5. Yapılandırmanızı önceden ayar olarak kaydedin

Boşluk sisteminiz şimdi iyi çalışıyor. Tasarım değişkenleri, birlikte çalıştığınız görsel arayüz boyunca boşluk üzerinde kontrol sağlar. Ancak FlexBox konfigürasyonlarını tekrar tekrar ayarlamak hızlı bir şekilde yaşlanır. Düzen yönünü, hizalamayı ve sarma ayarlarını ayarlamanız gerekir. Ardından boşluk değişkenlerinizi her yeni bölüme uyguluyorsunuz. Bu süreç zaman yiyor.

Seçenek Grup Ön Ayarları Bu sorunu çözün. Düzen yönü, hizalama, sarma, gerekçe ve tasarım değişkenlerinize başvuran hem yatay hem de dikey boşluklar dahil olmak üzere eksiksiz FlexBox kurulumunuzu saklar.

Tüm FlexBox ayarlarını yapılandırdıktan sonra, düzen stili panelinin üzerine gelin. Seçenek Grubu Ön Ayarları simgesini göreceksiniz.

Tıklayın ve "Geçerli Stillerden Ön Ayar Oluşturun" seçeneğini seçin. Düzenin ne yaptığına göre adlandırın: “Üç Sütun Izgarası”, “Hizmetler Izgarası” veya “Kart Ekranı”.

Ön ayar, FlexBox yapılandırmasını herhangi bir kapta taşır. Arka plan renklerini, yazı tiplerini veya diğer görsel stilleri kopyalamaz.

“Üç Sütun Izgarası” ön ayarınızı herhangi bir satıra uygulayın. Aynı boşluk, hizalama ve sarma davranışını otomatik olarak ayarlar. Her satır veya sütun aynı düzen yapısını kullanırken görsel görünümünü korur.

Zaten mükemmelleştirdiğiniz kurulumları yeniden yaratmak için daha az zaman harcıyorsunuz. Görsel kimlik her bölüme özgü kalır. Yapısal temel sitenizde tutarlı kalır. Boşluk sisteminiz uygulamak için hızlı kalır ve kanıtlanmış düzen kalıplarınız verimli bir şekilde yeniden kullanılır.

Divi 5 ile her seferinde mükemmel boşluk alın

Divi 5'in yeni Flexbox ve tasarım değişkenleri ile tutarlı boşluk zahmetsiz hale gelir. GAP, cihazlar arasındaki denge düzenlerini kontrol ederken, değişkenler güncellemelerin sitenizdeki tek bir değişiklikle yansıtmasını sağlar.

Sabit düzeltmeler yerine, güvenebileceğiniz net bir sistem elde edersiniz. Boşluğunuzu bir kez ayarlayın, her yerde yeniden kullanın ve ziyaretçileriniz için harika deneyimler tasarlamaya odaklanın.