Yeni Deneyim
Web Araçları > Deneyimler > Web Kişiselleştirme > Yeni Bir Deneyim Yayınla
Uyarı:
Tıkladığınızda Kaydet ve Tamamlandı, ve değişiklikler doğrudan web sayfanıza uygulanır.
Yeni Bir Deneyim Oluşturma
Tamamladıktan sonra Kurulum ve Kurallar web kişiselleştirme deneyiminiz için, deneyimlerinizi ile oluşturmaya başlayabilirsiniz Değişiklik Ekle düğmesi Kurallar / Değişiklikler bölümünde yapılandırabilirsiniz.
Yerleşim özelliklerini ve metin hizalamasını ayarlamaktan arka plan resimlerini ve yazı tipi stillerini değiştirmeye kadar, Netmera Web Kişiselleştirme size benzersiz ve etkileşimli dijital ortamlar oluşturma gücü verir.
Bu rehber, Netmera Web Kişiselleştirme aracında bulunan çeşitli CSS özelleştirmelerini keşfeder ve web sayfalarınızı etkileyici görseller ve etkileşimlerle nasıl oluşturabileceğinizi ortaya koyar. Bu teknikleri kullanarak gerçekten kişiselleştirilmiş ve dinamik ziyaretçileriniz üzerinde kalıcı bir izlenim bırakan çevrimiçi deneyimler oluşturabilirsiniz.
Herhangi bir değişiklik yapmadan önce, üzerinde değişiklik yapmak istediğiniz öğeyi seçmeniz gerekir. Seçildikten sonra, tüm CSS ayarlarını sol menüde ve değişikliklerinizi sağ menüde takip edebilirsiniz. değişiklikleri Ayrıca, öğeye sağ tıklayarak HTML ayarlarını değiştirebilirsiniz.
CSS Özelleştirmeleri
Boyut ve Konum
Sol menüde, Metin İçeriği girişini kullanarak metni doğrudan değiştirebilirsiniz. Öğelerin boyutlarını ayarlamak için Boyut ayarını kullanın. Öğelerin konumunu ayarlamak için Konum ayarını kullanın.
Boyut Değerleri:
Boyut değerleri öğenin boyutunu belirlerken, konum değerleri onun pozisyonunu tanımlar. Bu alanlara belirli piksel değerleri girmeniz gerekir (ör. 100px) veya sistemin uygun değeri belirlemesi için "auto" kullanabilirsiniz.
Arka Plan
Arka Plan ayarlarında öğelerinizin arka plan rengini özelleştirebilir, arka plan resmini değiştirebilir ve arka plan resminin nasıl davranacağını belirleyebilirsiniz.
Arka Plan İpucu:
Mevcut bir arka plan resmini görmekte zorluk yaşıyorsanız, arka plan rengi için saydam bir değer girmenizi öneririz.
Arka plan tekrarı, arka plan resmi arka plan boyutuna veya öğe boyutuna uymadığında nasıl davranacağını tanımlar. Aşağıdaki değerlere sahiptir:
no-repeat: Arka plan resmi yalnızca bir kez görüntülenir ve tekrarlanmaz.
repeat: Arka plan resmi hem dikey hem yatay olarak tekrarlanır. Resim sığmazsa son resim kırpılacaktır. Bu varsayılan davranıştır.
repeat-x: Arka plan resmi yalnızca yatay olarak tekrarlanır.
repeat-y: Arka plan resmi yalnızca dikey olarak tekrarlanır.
space: Arka plan resmi, kırpılma olmadan mümkün olduğunca çok tekrarlanır. İlk ve son resimler öğenin iki yanına sabitlenir ve resimler arasındaki boşluk eşit şekilde dağıtılır.
round: Arka plan resmi tekrarlanır ve boşluk kalmayacak şekilde doldurmak için gerektiğinde gerilir veya sıkıştırılır.
Yerleşim
Yerleşim bölümünde yerleşim özelliklerinizi ayarlama özgürlüğüne sahipsiniz.
The float özelliği bir öğenin sola, sağa mı yoksa hiç mi float (kayma) yapması gerektiğini belirler. Aşağıdaki değerlerden biri atanabilir:
none: Öğe float yapmaz ve metinde bulunduğu yerde tam olarak görüntülenir. Bu varsayılan davranıştır.
left: Öğe konteynerinin soluna doğru float yapar.
right: Öğe konteynerinin sağına doğru float yapar.
The vertical-align özelliği bir öğenin dikey hizalamasını ayarlamak için kullanılır. Aşağıdaki değerleri alabilir:
middle: Öğe, ebeveyn öğesinin ortasına yerleştirilir.
top: Öğe, aynı satırdaki en uzun öğenin üstüyle hizalanır.
bottom: Öğe, aynı satırdaki en düşük öğe ile hizalanır.
baseline: Öğe, ebeveyninin yazı tabanı ile hizalanır. Bu varsayılan davranıştır.
sub: Öğe, ebeveyninin alt simge yazı tabanı ile hizalanır.
super: Öğe, ebeveyninin üst simge yazı tabanı ile hizalanır.
text-top: Öğe, ebeveyn öğenin yazı tipinin üst kısmı ile hizalanır.
text-bottom: Öğe, ebeveyn öğenin yazı tipinin alt kısmı ile hizalanır.
The overflow özelliği bir öğenin belirlenen alanını aşan içeriğin nasıl ele alınacağını belirler. Aşağıdaki değerlerden biri atanabilir:
visible: Taşma kırpılmaz ve içerik öğenin kutusunun dışında render edilir. Bu varsayılan davranıştır.
hidden: Taşma kırpılır ve belirtilen alanın ötesine geçen herhangi bir içerik görünmez olur.
scroll: Taşma kırpılır ve kullanıcıların belirtilen alanın ötesine geçen içeriğin geri kalanını görmesine olanak sağlamak için bir kaydırma çubuğu eklenir.
The opacity özelliği bir öğenin opaklık seviyesini ayarlamak için kullanılır; bu, öğenin saydamlığını belirler. Opaklık seviyesi 0 ile 1 arasında bir değer olarak belirtilir; burada:
1: Öğe hiç saydam değildir (tamamen opak).
0.5: Öğe %50 şeffaftır.
0: Öğe tamamen saydamdır ve dolayısıyla görünmezdir.
The z-index özelliği bir web sayfasındaki öğelerin yığılma sırasını kontrol etmek için kullanılır. Bir öğenin z-ekseni boyunca konumunu tanımlar; bu, öğelerin üç boyutlu alanda nasıl katmanlandığını veya üst üste geldiğini belirler.
Daha yüksek bir z-index değere sahip öğe, daha düşük z-index değerlere sahip öğelerin önünde görünecektir. İki öğe ekranda örtüştüğünde, daha yüksek z-index değerine sahip olan diğerinin üzerinde görüntülenecektir.
Z-Index:
Varsayılan olarak öğelerin bir z-index değeri autoolarak vardır; bu, HTML kaynak sırasına göre üst üste yığıldıkları anlamına gelir. Ancak, öğelerin katmanlanmasını kontrol etmek ve örtüşmeler, açılır menüler ve ipuçları gibi efektler oluşturmak için z-index kullanabilirsiniz.
Tipografi
The font-family özelliği bir öğe için yazı tipini tanımlamak için kullanılır. Bir "yedek" sistemi olarak birden fazla yazı tipi adı içerebilir. Tarayıcı ilk yazı tipini desteklemiyorsa, desteklenen bir yazı tipi bulana kadar listedeki sonraki yazı tiplerini deneyecektir.
Yazı tipi adları iki tür olabilir:
Aile Adı: "Times New Roman", "Courier New", "Arial" gibi belirli bir yazı tipi ailesinin adı.
Genel Aile: "serif", "sans-serif", "cursive", "fantasy" veya "monospace" gibi genel bir yazı tipi aile kategorisinin adı.
Yazı tiplerini belirtirken, istediğiniz belirli yazı tipi ile başlamanız ve ardından bir veya daha fazla genel aileyi sona eklemeniz iyi bir uygulamadır. Bu, belirtilen yazı tipleri kullanılamadığında tarayıcının genel aileden benzer bir yazı tipi seçmesine olanak tanır. Bu, farklı cihazlar ve tarayıcılar arasında daha iyi uyumluluk ve tutarlı render sağlar.
The font-size özelliği bir öğe için yazı tipi boyutunu tanımlamak için kullanılır. Öğenin içindeki metin içeriğinin ne kadar büyük veya küçük görüntüleneceğini belirler. Boyut piksel (px) kullanılarak belirtilebilir.
The font-weight özelliği metindeki karakterlerin kalınlığını veya koyuluğunu kontrol etmek için kullanılır. Yazı tipinin ne kadar kalın veya ince görüneceğini belirler. font-weight özelliği farklı kalınlık seviyelerini belirtmek için çeşitli değerler veya anahtar kelimeler kabul eder.
normal: Varsayılan yazı tipi kalınlığı, genellikle normal veya düzenli kalınlıktır.
bold: Kalın bir yazı tipi ağırlığını belirtir. Metin normalden daha kalın görünür.
lighter: Miras alınan yazı tipi ağırlığına göre daha hafif bir yazı tipi ağırlığını belirtir.
The text-align özelliği bir öğe içindeki metnin yatay hizalamasını ayarlamak için kullanılır. Metnin öğenin içerik kutusu içinde nasıl konumlandırılacağını belirler.
için mevcut değerler text-align şunlardır:
left: Metni içerik kutusunun soluna hizalar.
right: Metni içerik kutusunun sağına hizalar.
center: Metni içerik kutusu içinde yatay olarak ortalar.
justify: Metin satırlarını her satırın eşit genişliğe sahip olacak şekilde gerer ve hem sol hem sağ kenarda düz bir kenar oluşturur. Bu genellikle daha düzenli bir görünüm elde etmek için gazete ve dergilerde kullanılır.
Farklı öğelere text-align özelliğini uygulayarak, web sayfanız genelinde metin hizalamasını kontrol edebilirsiniz.
Text-decoration: Metne eklenen süslemeyi (alt çizgi, üst çizgi veya üstü çizili gibi) belirtmek için kullanılan özelliktir.
Line-height: line-height özelliği bir metin satırının yüksekliğini belirler. Bir metin bloğu içindeki satırlar arasındaki dikey boşluğu ayarlar. Daha büyük bir line-height değer satırlar arasındaki boşluğu artırır ve metni daha ferah hale getirirken, daha küçük bir değer boşluğu azaltarak metni daha sıkı yapar.
Word-spacing: word-spacing özelliği bir metin bloğundaki kelimeler arasındaki boşluğu ayarlamak için kullanılır. Belirtilen değere bağlı olarak kelimeler arasındaki boşluğu artırabilir veya azaltabilir.
Bu özellikleri kullanarak, web sayfanızdaki metin öğelerinin görünümünü ve aralamasını istenen tasarım ve düzeni elde etmek için kontrol edebilirsiniz.
Kenar
Bu CSS özelliklerini kullanarak, öğelerin boşluklarını, kenarlarını ve köşelerini kontrol etme esnekliğine sahip olur ve web sayfalarınız için görsel olarak çekici ve iyi yapılandırılmış düzenler oluşturabilirsiniz.
Margin: CSS margin özellikleri, tanımlı herhangi bir sınırın dışında öğeler etrafında boşluk oluşturur.
Padding: Bir öğenin paddingi, içeriği ile sınırı arasındaki boşluktur.
Border-width: border-width özelliği bir öğenin dört sınırının (üst, sağ, alt ve sol) genişliğini ayarlar. Her bir sınırın genişliğini ayrı ayrı border-top-width, border-right-width, border-bottom-widthBu durumda, border-left-width.
Border-color: border-color özelliği bir öğenin dört sınırının rengini ayarlar.
Border-radius: border-radius özelliği öğenin köşelerinin yarıçapını tanımlar ve yuvarlatılmış köşeler oluşturmanıza olanak tanır.
The border-style özelliği bir öğenin dört sınırının (üst, sağ, alt ve sol) stilini ayarlamak için kullanılır. Her sınır kendi stiline sahip olabilir. border-style şunlardır:
none: Varsayılan değer. Hiçbir sınır belirtmez.
hidden: Tablo öğeleri için sınır çakışması çözümünde "none" ile aynıdır.
dotted: Küçük noktalarla aralıklı noktalı bir sınır belirtir.
dashed: Kısa çizgilerle ve küçük boşluklarla ayrılmış kesikli bir sınır belirtir.
solid: Sürekli bir çizgi olan düz bir sınır belirtir.
double: İki düz çizgiden oluşan çift bir sınır belirtir.
groove: 3B oluklu bir sınır belirtir. Etki border-color değerine bağlıdır.
ridge: 3B kabartmalı bir sınır belirtir. Etki border-color değerine bağlıdır.
inset: 3B içe gömülmüş bir sınır belirtir. Etki border-color değerine bağlıdır.
outset: 3B dışa çıkmış bir sınır belirtir. Etki border-color değerine bağlıdır.
Farklı border-style değerleri kullanarak, öğelerinizin kenarları için çeşitli görsel efektler elde edebilir ve web sayfası düzeninizde çok yönlü ve çekici tasarımlar oluşturabilirsiniz.
HTML Menüsü
Bir öğeye sağ tıkladığınızda, bir HTML manipülasyon menüsü görünecektir.
Bu menüden, "Kaldır" seçeneğini seçerek seçili öğeyi silebilirsiniz.
Mevcut HTML kodunu değiştirmek istiyorsanız, "Değiştir" seçeneği gerekli değişiklikleri yapmanızı sağlar.
Mevcut kod bloğuna yeni kod eklemek için basitçe "Ekle (Append)" seçeneğini seçebilirsiniz.
"Ekle (Insert)" seçenekleri, yeni HTML girdilerini istediğiniz herhangi bir konuma girme esnekliği sağlar.
Ayrıca, "JavaScript Ekle" adlı bir seçenek vardır; bu seçenekle HTML yapısı içinde ihtiyaç duyduğunuz yere JavaScript kodu ekleyebilirsiniz.
Deneyiminizi Yayınlama
Tüm değişiklikleri bitirdiğinizde, sağ üst körede bulunan "Kaydet" düğmesine tıklayarak panele geri dönebilirsiniz. "Kaydettıkladıktan sonra, "Tamamlandı" düğmesi görünecektir. Düzenleme modundan çıkmak ve panele geri dönmek için "Tamamlandı" düğmesine tıklayın. Değişiklikleriniz kaydedilecek ve içeriğe uygulanacaktır.
Last updated
Was this helpful?