Yeni deneyim
Web Araçları > Deneyimler > Web Kişiselleştirme > Yeni Bir Deneyim Yayınla
Yeni Bir Deneyim Oluşturma
web kişiselleştirme deneyiminiz için deneyimlerinizi oluşturmaya başlayabilirsiniz Kurulum ve kurallar web kişiselleştirme deneyiminiz için deneyimlerinizi Değişiklik Ekle düğmesini Kurallar / Değişiklikler bölümünde.
Düzen özelliklerini ve metin hizalamasını ayarlamaktan arka plan görsellerini ve yazı tipi stillerini değiştirmeye kadar, Netmera Web Personalization size benzersiz ve ilgi çekici dijital ortamlar oluşturma gücü verir.
Bu kılavuz, Netmera Web Personalization aracında sunulan çeşitli CSS özelleştirmelerini ele alır ve web sayfalarınızı etkileyici görseller ve etkileşimlerle zenginleştirmenin yöntemlerini ortaya koyar. Bu tekniklerden yararlanarak gerçekten kişiselleştirilmiş ve dinamik çevrimiçi deneyimler oluşturabilir ve ziyaretçileriniz üzerinde kalıcı bir etki bırakabilirsiniz.
Herhangi bir değişiklik yapmadan önce, değiştirmek istediğiniz öğeyi seçmeniz gerekir. Seçildikten sonra tüm CSS ayarlarını sol menüde düzenleyebilir ve değişikliklerinizi sağ menüde takip edebilirsiniz. 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.
Arka Plan
Arka Plan ayarlarında öğelerinizin arka plan rengini özelleştirebilir, arka plan görselini değiştirebilir ve arka plan görselinin nasıl davranacağını belirleyebilirsiniz.
background-repeat, arka plan görselinin arka plan boyutuna veya öğe boyutuna sığmadığında nasıl davranacağını tanımlar. Aşağıdaki değerlere sahiptir:
no-repeat: Arka plan görseli yalnızca bir kez gösterilir ve tekrarlanmaz.
repeat: Arka plan görseli dikey ve yatay olarak tekrarlanır. Görsel sığmazsa son görsel kırpılır. Bu varsayılan davranıştır.
repeat-x: Arka plan görseli yalnızca yatay olarak tekrarlanır.
repeat-y: Arka plan görseli yalnızca dikey olarak tekrarlanır.
space: Arka plan görseli kırpılmadan mümkün olduğunca tekrarlanır. İlk ve son görseller öğenin iki kenarına sabitlenir ve boşluklar görseller arasında eşit olarak dağıtılır.
round: Arka plan görseli boşluk kalmayacak şekilde tekrarlanır ve alanı dolduracak biçimde ayarlanır; bunun için esnetilmesi veya sıkıştırılması gerekse bile.
Düzen
Düzen bölümünde düzen özelliklerinizi ayarlamakta özgürsünüz.
Bu float özelliği, bir öğenin sola, sağa ya da hiç kaydırılıp kaydırılmayacağını belirler. Aşağıdaki değerlerden biri atanabilir:
none: Öğe kaydırılmaz ve metinde geçtiği yerde görüntülenir. Bu varsayılan davranıştır.
left: Öğe kapsayıcısının solunda yer alır.
right: Öğe kapsayıcısının sağında yer alır.
Bu vertical-align özelliği, bir öğenin dikey hizalamasını ayarlamak için kullanılır. Aşağıdaki değerleri alabilir:
middle: Öğe, üst öğesinin ortasına yerleştirilir.
top: Öğe, aynı satırdaki en yüksek öğenin üst kısmına hizalanır.
bottom: Öğe, aynı satırdaki en düşük öğenin alt kısmına hizalanır.
baseline: Öğe, üst öğesinin taban çizgisine hizalanır. Bu varsayılan davranıştır.
sub: Öğe, üst öğesinin alt simge taban çizgisine hizalanır.
super: Öğe, üst öğesinin üst simge taban çizgisine hizalanır.
text-top: Öğe, üst öğenin yazı tipinin üst kısmına hizalanır.
text-bottom: Öğe, üst öğenin yazı tipinin alt kısmına hizalanır.
Bu overflow özelliği, bir öğenin belirtilen 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 öğe kutusunun dışında görüntülenir. Bu varsayılan davranıştır.
hidden: Taşma kırpılır ve belirtilen alanı aşan içerik görünmez olur.
scroll: Taşma kırpılır ve belirtilen alanı aşan içeriğin geri kalanını görüntülemek için bir kaydırma çubuğu eklenir.
Bu opacity özelliği, bir öğenin şeffaflık düzeyini ayarlamak için kullanılır. Şeffaflık düzeyi 0 ile 1 arasında bir değer olarak belirtilir; burada:
1: Öğe hiç şeffaf değildir (tamamen opaktır).
0.5: Öğe %50 yarı saydamdır.
0: Öğe tamamen şeffaftır ve bu nedenle görünmez.
Bu z-index özelliği, bir web sayfasındaki öğelerin üst üste yığılma sırasını kontrol etmek için kullanılır. Bir öğenin z ekseni üzerindeki konumunu tanımlar; bu da öğelerin üç boyutlu alanda birbirlerinin üzerine nasıl katmanlandığını belirler.
Daha yüksek bir z-index değere sahip öğe, daha düşük z-index değerlere sahip öğelerin önünde görünür. Ekranda iki öğe üst üste binerse, daha yüksek bir z-index değere sahip olan diğerinin üstünde görüntülenir.
Tipografi
Bu font-family özelliği, bir öğe için yazı tipini tanımlamak için kullanılır. Yedekleme sistemi olarak birden fazla yazı tipi adını içerebilir. Tarayıcı ilk yazı tipini desteklemiyorsa, desteklenen bir yazı tipi bulana kadar listedeki bir sonraki yazı tipini dener.
Yazı tipi adları iki türde olabilir:
Aile Adı: "Times New Roman", "Courier New", "Arial" gibi belirli bir yazı tipi ailesinin adıdır.
Genel Aile: "serif", "sans-serif", "cursive", "fantasy" veya "monospace" gibi genel bir yazı tipi ailesi kategorisinin adıdır.
Yazı tiplerini belirtirken, önce istediğiniz özel yazı tipiyle başlamak ve ardından sona bir veya daha fazla genel aile eklemek iyi bir uygulamadır. Bu, belirtilen yazı tipleri mevcut değilse tarayıcının genel aileden benzer bir yazı tipi seçmesine olanak tanır. Böylece farklı cihazlar ve tarayıcılar arasında daha iyi uyumluluk ve tutarlı görüntüleme sağlanır.
Bu font-size özelliği, bir öğedeki yazı tipinin 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) ile belirtilebilir.
Bu 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 sözcükler kabul eder.
normal: Varsayılan yazı ağırlığıdır; genellikle normal veya standart kalınlıktadır.
bold: Kalın bir yazı ağırlığı belirtir. Metin normalden daha kalın görünür.
lighter: Kalıtılan yazı ağırlığına göre daha ince bir yazı ağırlığı belirtir.
Bu 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.
text-align için kullanılabilir 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 eşit genişlikte olacak şekilde esnetir; böylece hem sol hem sağ tarafta düz bir kenar oluşturur. Bu, daha düzenli bir görünüm elde etmek için genellikle gazetelerde ve dergilerde kullanılır.
Bu text-align özelliğini farklı öğelere uygulayarak, web sayfanız genelinde metnin hizalamasını kontrol edebilirsiniz.
Text-decoration: Metne alt çizgi, üst çizgi veya üstü çizili gibi süslemeler eklemek 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ırarak metni daha seyrek hale getirirken, daha küçük bir değer satırlar arasındaki boşluğu azaltarak metni daha sıkı hale getirir.
Word-spacing: word-spacing özelliği, bir metin bloğundaki sözcükler arasındaki boşluğu ayarlamak için kullanılır. Belirtilen değere bağlı olarak sözcükler arasındaki boşluğu artırabilir veya azaltabilir.
Bu özellikleri kullanarak, istediğiniz tasarım ve düzeni elde etmek için web sayfanızdaki metin öğelerinin görünümünü ve aralığını kontrol edebilirsiniz.
Kenarlık
Bu CSS özelliklerini kullanarak, web sayfalarınız için görsel olarak çekici ve iyi yapılandırılmış düzenler oluşturmak üzere öğelerin boşluklarını, kenarlıklarını ve köşelerini esnek bir şekilde kontrol edebilirsiniz.
Margin: CSS margin özellikleri, tanımlı kenarlıkların dışında öğelerin etrafında boşluk oluşturur.
Padding: Bir öğenin padding'i, içeriği ile kenarlığı arasındaki boşluktur. T
Border-width: border-width özelliği, bir öğenin dört kenarlığının (üst, sağ, alt ve sol) genişliğini ayarlar. Her bir kenarlığın genişliğini şu özelliklerle ayrı ayrı ayarlayabilirsiniz: border-top-width, border-right-width, border-bottom-width, ve border-left-width.
Border-color: border-color özelliği, bir öğenin dört kenarlığı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.
Bu border-style özelliği, bir öğenin dört kenarlığının (üst, sağ, alt ve sol) stilini ayarlamak için kullanılır. Her kenarlığın kendi stili olabilir. Bu özelliğin kullanılabilir değerleri şunlardır: border-style şunlardır:
none: Varsayılan değerdir. Kenarlık belirtmez.
hidden: "none" ile aynıdır, ancak tablo öğelerindeki kenarlık çakışmalarının çözümünde farklıdır.
dotted: Aralıklı küçük noktalar içeren noktalı bir kenarlık belirtir.
dashed: Küçük boşluklarla ayrılmış kısa çizgilerden oluşan kesik çizgili bir kenarlık belirtir.
solid: Sürekli bir çizgi olan düz kenarlık belirtir.
double: İki düz çizgiden oluşan çift kenarlık belirtir.
groove: 3B oluklu bir kenarlık belirtir. Etki, border-color değere bağlıdır.
ridge: 3B sırtlı bir kenarlık belirtir. Etki, border-color değere bağlıdır.
inset: 3B içe gömülü bir kenarlık belirtir. Etki, border-color değere bağlıdır.
outset: 3B dışa taşan bir kenarlık belirtir. Etki, border-color değere bağlıdır.
Farklı border-style değerler kullanarak, öğelerinizin kenarlıkları için çeşitli görsel etkiler elde edebilir, 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 düzenleme menüsü görünür.
Bu menüden "Kaldır" seçeneğini kullanarak 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 "Sona Ekle" seçeneğini kullanabilirsiniz.
Bu "Ekle" seçenekleri, yeni HTML girdilerini istediğiniz herhangi bir konuma ekleme esnekliği sağlar.
Ayrıca, "JavaScript Ekle" seçeneği, HTML yapısı içinde JavaScript kodunu tam ihtiyacınız olan yere eklemenize olanak tanır.
Deneyiminizi Yayınlama
Tüm değişiklikleri tamamladığınızda, "Kaydet" düğmesine tıklayarak sağ üst köşede yer alan panele geri dönebilirsiniz. "Kaydet," bir "Tamam" düğmesi görünür. Düzenleme modundan çıkmak ve panele dönmek için "Tamam" düğmesine tıklayın. Yaptığınız değişiklikler kaydedilecek ve içeriğe uygulanacaktır.
Son güncelleme
Bu yararlı oldu mu?