Aşağıdaki makale size yardımcı olacaktır:Nasıl Farklılaşırlar ve Nasıl Kullanılırlar
Gerçekten harika bir çevrimiçi mağaza oluşturmak, her sayfanın işlevselliğini, yapısını ve görünümünü belirleyen birler ve sıfırlar gibi bir sürü küçük şeyden oluşur.
Bir siteyi oluşturmanın ve çalıştırmanın çeşitli yönlerini kapsayan, değişen bir kodlama bilgisi vardır; kodu Yunancadan ayırt edemeyen ancak kontrol panelinde kendi kodunu tutabilenlerden HTML ve HTML ile uğraşabilenlere kadar Dünyanın dönmesini sağlayacak tüm önemli değişiklikleri gerçekleştiren tam kapsamlı uzmanlara bazı temel görsellerde ince ayar yapmak için CSS.
Bir zamanlar bir site oluşturmak için kodu anlamak çok önemliydi.
Günümüzde, çok sayıda düşük kodlu ve kodsuz araç varken, geliştiricilerin yardımı olmadan güzel mağazalar oluşturmak çok daha kolay.
Kodu doğrudan yazmasanız da, bunların gerçekleşmesi için hala tüm birleri ve sıfırları değiştiriyorsunuz. Bak ne kadar güçlüsün!
Artık mağaza sayfalarınızda bu anlamlı değişiklikleri yapmak için temel kavramları anlamanız yeterli. Örneğin kenar boşluğu ve dolgu gibi.
Bu CSS stil kavramları bazı benzerliklere sahiptir ancak sayfa öğelerinizin görünümünü değiştirme biçimleri oldukça farklıdır.
Bu yazıda şunları ele alacağız:
Birbirlerinden nasıl farklı olduklarını açıklayarak başlayalım.
Kenar boşluğu ve dolgu arasındaki fark nedir?
Ortadan dışarıya doğru her sayfa öğesi içerik, dolgu, kenarlık ve kenar boşluğundan oluşur. Aşağıda görebileceğiniz gibi, dolguyu ve kenar boşluğunu bir kenarlık ayırıyor.
Hem kenar boşluğu hem de dolgu, öğenin sınırından itibaren alanın ölçümünü tanımlarken, kenar boşluğu görünmez dış alandır ve dolgu ise görünür iç alandır.
İki ülke, tek sınır.
Elementinize merhaba deyin
Her biri kolayca okunabilir bir mağaza sayfası oluşturmak için önemlidir. İkisi arasında daha fazla ayrım yapmak için bunları ayrı ayrı tanımlayalım.
Dolgu nedir?
Dolgu, bir öğenin içeriği ile öğenin sınırı arasındaki boşluktur.
Dolayısıyla, öğeniz bir düğmeyse, dolgunuz, içeriğin (aşağıdaki bağlamsal CTA’da ‘Ücretsiz oluşturmaya başlayın’) söz konusu düğmenin kenarlarına sıkı sıkıya sarılmamasını sağlayan şeydir.
#cta-visual-pb#
Dolgu olmasaydı, bu düğme oldukça garip görünürdü.
İçeriğin her iki tarafındaki dolgular sayesinde metin, düğmenin ortasında mutlu bir şekilde yüzer ve sizi onu tıklamaya ve kendi harika mağazanızı oluşturma hakkında daha fazla bilgi edinmeye davet eder.
Bu iki düğme arasında açık bir kazanan var
Dolgunuzun boyutunu artırdığınızda, sınır içindeki bloğun boyutunu da artırmış olursunuz. Temel olarak içerik boyutu (metin miktarı ve yazı tipi boyutu gibi) artı dolgu, düğmenin toplam boyutuna eşittir.
Bu dolgu
Marj nedir?
Sınırın diğer tarafında, kenar boşluğu, bir öğeyi çevreleyen alanı ifade eder.
Bu öğenin uzayda nerede duracağına ve etrafındaki diğer öğelerle ilişkili olarak (diğer öğelerin kenarları gibi) karar verir.
Dolayısıyla, önceki CTA örneğinde, düğme öğesinin (ve onun üstündeki metin öğesinin) çevresinde kenar boşlukları olmasaydı, metin bloğu düğmenin kenarlığına sığardı.
Bu pek iyi görünmez.
Böylece, düğme öğesine kenar boşluğu eklersiniz Ve üstündeki div metnine kenar boşluğu eklersiniz. Kullandığınız kenar boşluğu miktarı, içine her şeyin yerleştirildiği kabın boyutunu artıracaktır.
Kenar boşluğu şeffaf olduğundan bu kabın kenarlarını göremezsiniz. Ancak değişikliklerinizin etkisi açık olacaktır.
Bu marj
Bonus: Negatif marj
Kenar boşluklarını ayarlayarak öğeleri birbirinden uzaklaştırabileceğiniz gibi, negatif kenar boşluğuyla bir öğeyi diğerinin üzerine de çekebilirsiniz.
Yani, belirli bir öğenin altındaki 20 piksellik kenar boşluğu yerine -20 piksellik bir kenar boşluğu yapabilir ve sonraki öğenin kuzey komşusuna tecavüz etmesine izin verebilirsiniz. Bunu yapmak için aşağıda kısaca ele alacağımız nedenler var.
Kenar boşluğu ve dolgu ne zaman kullanılır?
Kenar boşluğu ve dolgunun mağaza sayfalarınızda benzer özel güçleri olsa da, çok farklı şeyler yaparlar.
Yukarıda belirttiğimiz gibi dolgu, öğenizin sınırı ile o sınırın içindeki içerik arasındaki boşluk miktarını değiştirecektir.
Yani kullanmak istiyorsun dolgu malzemesi düğmenizin metnini vermek veya sınırdan biraz nefes alma alanı ayırmak için. Bu, okunabilirliği kolaylaştırır ancak aynı zamanda daha iyi görünür.
Ayrıca görünür öğenizi daha da büyütecektir.
Kullan marj diğer öğelerin görünür öğenizle çarpışmasını önlemek için (unutmayın, kenar boşluğu şeffaftır). Düğmenizin altyazı metninizi kalabalıklaştırmasını veya tam tersini önlemek için, düğmelerden birine veya her ikisine bir miktar kenar boşluğu vererek birbirinden ayırın.
Bu, sayfalarınızda daha fazla boşluk oluşturarak alışveriş yapanlarınız için daha iyi bir kullanıcı deneyimi oluşturmanıza yardımcı olur.
Ancak bazen bir elementin başka bir elementin alanına izinsiz girmesini isteyebilirsiniz. bu negatif marj.
Belirli bir unsurun başka bir unsurla örtüşmesini istediğinizde, marjınızla negatife gitmek isteyeceğiniz an budur.
Bunun gerçekleşmesi için, örtüşmesini istediğiniz öğeye negatif kenar boşluğunu uygulamak isteyeceksiniz. Sonraki eleman daha sonra bu elemanın üzerine tırmanacaktır.
Doğru kullanıldığında mağazanızın bazı bölümleri için sanatsal bir görsel oluşturabilir.
Negatif marjımla çok iddialı
Son olarak, şunları yapabilirsiniz: sınır zımni olarak (çizgi yok), dikkate alınması gereken bir kuvvet olacak şekilde boyutunu artırabilirsiniz (çok kalın bir çizgi) veya onu kesikli veya noktalı bir çizgi haline getirebilirsiniz (eğer bu sizin işinizse).
Bazı öğeler tanımlanmış bir kenarlıkla iyi çalışır, diğerleri (düğmeler gibi) köşeleri yuvarlamak ve CTA’yı yumuşatmak için yalnızca kenarlık yarıçapının eklenmesine ihtiyaç duyar.
CSS Kutu Modeline merhaba deyin
İçinde çalıştığınız alanın daha kapsamlı bir resmini elde etmek için CSS Kutu Modeline bir göz atalım.
Aşağıda görebileceğiniz gibi, kabın tamamı ortadaki içeriğe hizmet eden çok katmanlı bir olaydır. Tatlı benzetmelerden hoşlanıyorsanız, bu bir şeker çubuğunun kesiti gibidir.
İçerik nuga merkezidir; dolgu maddesi cevizli karameldir; kenar çikolata kabuğudur; ve kenar boşluğu, şeker çubuğu ile ambalaj kağıdı arasındaki boş alandır.
Tamam, artık acıkmaya başlıyorum.
Bunu görselleştirmek her şeyin anlaşılmasını çok daha kolay hale getirebilir. Bunu benzetmek sadece ağzınızın sulanmasına neden olabilir.
CSS Kutu Modeli
CSS’de kenar boşluğu ve dolgu nasıl düzenlenir?
Sayfa öğelerinizin kenar boşluklarını ve dolgularını düzenlemek için stil sayfanıza gidin ve değiştirmek istediğiniz öğe sınıfını bulun. Şunun gibi görünecek:
.güzel görünümlü düğme {
kenar boşluğu: otomatik;
dolgu: 10 piksel 25 piksel;
kenarlık yarıçapı: 4 piksel;
arka plan rengi: #1a212a;
yazı tipi boyutu: 16 piksel;
satır yüksekliği: %160;
yazı tipi ağırlığı: 600;
}
Kenar boşluğu ve dolgu, bir öğenin dört tarafının tümü için üstten saat yönünde giderek belirlenir. Örneğin dolgu ölçümleri CSS’de şöyle görünebilir:
üst dolgu: 10 piksel;
sağ dolgu: 25px;
dolgu-alt: 10 piksel;
sol dolgu: 25px;
Bunu yapmanın daha basit ve kısa bir yolu, onu tek bir özellikte aynı sırayla (sağ üst, sol alt) listelemektir:
dolgu: 10 piksel 25 piksel 10 piksel 25 piksel;
Ve üst, alt ve sol ve sağ için aynı ölçümlere sahipseniz bunu daha da kısaltmak için yalnızca iki ölçümü listelemelisiniz; biri üst/alt, diğeri sağ/solu gösterir:
dolgu: 10 piksel 25 piksel;
Son olarak, tüm ölçümler aynıysa aşağıdakileri ekleyin:
dolgu: 10 piksel;
Bunlar genellikle px, em veya % cinsinden ölçülür.
Bu ölçümler arasındaki fark, px’in sabit bir değer olması, em ve %’nin ise içeriğin değişen boyutuna bağlı olarak koşullu olmasıdır (mobil duyarlılığı düşünün).
Kenar boşluğu ayrıca, bir öğeyi kabı içinde yatay olarak ortalayacak ve üst ve alt kenar boşluklarını etkili bir şekilde sıfırlayacak şekilde (yukarıdaki örnekte olduğu gibi) otomatik olarak da ayarlanabilir.
Shogun Sayfa Oluşturucu’da kenar boşluğu ve dolgu nasıl düzenlenir?
Mağaza sayfalarınızı oluşturmak için Sayfa Oluşturucu’yu kullanıyorsanız şanslısınız.
Kodla uğraşmanıza gerek kalmadan dolgu ve kenar boşluklarıyla oynamak çok kolaydır.
Üstelik, yaptığınız değişiklikleri düzenleme sayfanızda görebilirsiniz. Böylece durmadan oynayabilir ve sayfanızı mükemmelleştirdiğinizde yayınlayabilirsiniz.
Sayfa Oluşturucu düzenleme sayfasında bir öğeye tıkladığınızda ekranınızın sağ tarafında bir menü göreceksiniz. Tıkla Stiller üstteki sekmeye gidin ve Marjlar veya Dolgu malzemesi Değişikliklerinizi yapmak için.
Her özellik için, bunu px, em veya % cinsinden değiştirebilirsiniz. Kenar boşlukları için bunu şu şekilde de ayarlayabilirsiniz: Oto.
Son olarak, her birimi ayrı ayrı düzenlemek için üst ve alt ile sol ve sağ arasındaki bağlantıyı kesmeniz gerekir. Bu, her bölümün üst kısmındaki küçük zincir bağlantı simgesine tıklamak kadar basittir.
Ölçü biriminizi seçin
Mülklerin bağlantısını kaldırma
Bu CSS özelliklerini değiştirmenin ne kadar kolay olduğunu size göstermek için hızlı bir örnek vereceğim. Kenar boşlukları olmayan iki öğe şunlardır:
Birbirlerine karşı kalabalıklaşıyorlar ve bölümün kötü görünmesine neden oluyorlar. Shogun’da bunu düzeltmek için ilk elemente gidip ona alt kısımda biraz kenar boşluğu bırakabilirim.
Harika değil
Çok daha iyi
Ve işte. Çok daha iyi görünüyor ve bu iki bölüm birbirinin alanında değil.
Shogun Sayfa Oluşturucu’da kenar boşluklarının ve dolgunun nasıl kullanılacağı hakkında daha fazla bilgi edinmek için basit kılavuzumuza göz atın (GIF’ler vardır!).
Kenar boşlukları ve dolgular, sayfanızın çeşitli cihazlarda nasıl göründüğünü etkiler; bu nedenle, öğelerin nasıl tepki verdiğini görmek için düzenleyicide ekran boyutları arasında kolayca geçiş yapabilirsiniz.
Mobil duyarlılıkla ilgili bu makalede, öğeleri duyarlı bir şekilde ortalamak için “otomatik” kenar boşluklarının kullanımına ve esnek aralık oluşturmak için yan kenar boşlukları ve dolgu için piksel üzerinden yüzdelerin kullanımına değiniyoruz.
Bu sayfaları özelleştirme zamanı
Artık bu CSS güç merkezlerinin neler yapabileceğine dair bir fikriniz olduğuna göre, mağazanızın süper havalı görünmesini sağlamak için bunları kullanın.
CSS’ye geçebilir veya Shogun ile bunu eğlenceli ve kolay bir şekilde yapabilirsiniz. Senin seçimin!
Bunu nasıl yaparsanız yapın, artık dolgu ile kenar boşluğu arasındaki farkı bildiğinizi ve bunları mağaza sayfalarınızda ne zaman kullanacağınız konusunda iyi bir fikre sahip olduğunuzu söyleyebilirsiniz.
–
#cta-visual-pb#
